/*
  The home page: hero, statement band, three steps, board lengths, pictures,
  printables, who it's for and the closing band.
  The tilted boards and floating stickers are decoration on screen only.
*/
.nz-lead {
  margin: 0 0 32px;
  max-width: 420px;
  font-size: var(--nz-text-lead);
}

/* ---------- Hero ---------- */
.nz-hero {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--nz-space-7);
  padding-top: 72px;
  padding-bottom: 80px;
}

.nz-hero-text {
  flex: 1 1 460px;
  min-width: 0;
}

.nz-hero-text .nz-display {
  margin: 22px 0 24px;
}

.nz-hero-note {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 22px 0 0;
  font-size: var(--nz-text-caption);
}

.nz-hero-note::before {
  content: "";
  width: 32px;
  height: 1px;
  flex: none;
  background: var(--nz-color-text);
}

/* The stage: a tilted A4 board with circles and stickers around it. */
.nz-stage {
  position: relative;
  flex: none;
}

.nz-stage .nz-stage-board {
  position: absolute;
  width: calc(var(--nz-page-width) * var(--nz-stage-scale));
}

.nz-hero-stage {
  width: 560px;
  height: 640px;
}

.nz-hero-stage .nz-stage-board {
  left: 100px;
  top: 60px;
  transform: rotate(-6deg);
}

.nz-stage-sun {
  position: absolute;
  right: -10px;
  top: 40px;
  width: 300px;
  height: 300px;
  border-radius: 50%;
  background: var(--nz-lilac);
}

.nz-stage-ring {
  position: absolute;
  border-radius: 50%;
  border: 1px solid var(--nz-rule);
}

.nz-stage-ring.is-inner {
  left: 40px;
  top: 60px;
  width: 480px;
  height: 480px;
}

.nz-stage-ring.is-outer {
  left: 0;
  top: 20px;
  width: 560px;
  height: 560px;
}

/* Motion behind the board, like a small solar system:
   the lilac sun wanders and softly changes shape,
   each ring turns and carries little planets that pass behind the board.
   People who ask their system for less motion see everything still. */
.nz-stage-sun {
  animation: nz-sun-wander var(--nz-stage-drift) ease-in-out infinite;
}

.nz-stage-ring {
  animation:
    nz-ring-breathe calc(var(--nz-stage-drift) / 2) ease-in-out infinite alternate,
    nz-ring-turn calc(var(--nz-stage-drift) * 3) linear infinite;
}

.nz-stage-ring.is-outer {
  animation-direction: alternate, reverse;
  animation-duration: calc(var(--nz-stage-drift) / 2), calc(var(--nz-stage-drift) * 5);
}

/* The planets: one on each side of a ring. */
.nz-stage-ring::before,
.nz-stage-ring::after {
  content: "";
  position: absolute;
  left: 50%;
  border-radius: 50%;
}

.nz-stage-ring::before {
  top: calc(var(--nz-stage-planet) / -2);
  width: var(--nz-stage-planet);
  height: var(--nz-stage-planet);
  margin-left: calc(var(--nz-stage-planet) / -2);
  background: var(--nz-peach);
}

.nz-stage-ring::after {
  bottom: calc(var(--nz-stage-planet-small) / -2);
  width: var(--nz-stage-planet-small);
  height: var(--nz-stage-planet-small);
  margin-left: calc(var(--nz-stage-planet-small) / -2);
  background: var(--nz-lilac);
}

.nz-stage-ring.is-outer::before {
  background: var(--nz-terracotta);
}

.nz-stage-ring.is-outer::after {
  background: var(--nz-peach);
}

@keyframes nz-sun-wander {
  0%   { translate: 0 0;        scale: 1;    border-radius: 50%; }
  33%  { translate: -36px 22px; scale: 1.08; border-radius: 46% 54% 52% 48% / 54% 46% 54% 46%; }
  66%  { translate: -12px 48px; scale: 0.96; border-radius: 54% 46% 47% 53% / 46% 54% 46% 54%; }
  100% { translate: 0 0;        scale: 1;    border-radius: 50%; }
}

@keyframes nz-ring-breathe {
  from { scale: 1; }
  to   { scale: 1.05; }
}

@keyframes nz-ring-turn {
  from { rotate: 0deg; }
  to   { rotate: 360deg; }
}

/* The circles follow the mouse a little: home.js sets --nz-mouse-x and --nz-mouse-y
   (from -1 to 1). The sun moves most, the rings less, so they seem to sit at different depths.
   "transform" is free here: the animations above use "translate", "scale" and "rotate". */
.nz-hero-stage .nz-stage-sun,
.nz-hero-stage .nz-stage-ring {
  transition: transform 0.8s ease-out;
}

.nz-hero-stage .nz-stage-sun {
  transform: translate(calc(var(--nz-mouse-x, 0) * var(--nz-stage-follow)), calc(var(--nz-mouse-y, 0) * var(--nz-stage-follow)));
}

.nz-hero-stage .nz-stage-ring.is-inner {
  transform: translate(calc(var(--nz-mouse-x, 0) * var(--nz-stage-follow) / -2), calc(var(--nz-mouse-y, 0) * var(--nz-stage-follow) / -2));
}

.nz-hero-stage .nz-stage-ring.is-outer {
  transform: translate(calc(var(--nz-mouse-x, 0) * var(--nz-stage-follow) / 3), calc(var(--nz-mouse-y, 0) * var(--nz-stage-follow) / 3));
}

@media (prefers-reduced-motion: reduce) {
  .nz-stage-sun,
  .nz-stage-ring {
    animation: none;
  }
}

.nz-stage-caption {
  position: absolute;
  left: 30px;
  top: 0;
  margin: 0;
  transform: rotate(-6deg);
  font-family: var(--nz-font-display);
  font-size: var(--nz-text-h3-large);
  line-height: 1.2;
}

.nz-stage-caption em {
  color: var(--nz-color-accent);
  font-style: normal;
}

/* Floating label stickers (also used by the builder; defined again here for the home page). */
.nz-float-sticker {
  position: absolute;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 20px;
  border-radius: var(--nz-sticker-radius);
  box-shadow: var(--nz-shadow-sticker);
  font-family: var(--nz-font-display);
  font-size: var(--nz-text-h3);
  line-height: 1.05;
  color: var(--nz-color-text);
}

.nz-float-sticker svg {
  width: 26px;
  height: 26px;
  flex: none;
}

.nz-float-sticker em {
  color: var(--nz-terracotta-dark);
}

.nz-float-sticker.is-done {
  right: 0;
  top: 260px;
  transform: rotate(10deg);
  background: var(--nz-lilac);
  font-style: italic;
}

.nz-float-sticker.is-small-step {
  left: 10px;
  top: 470px;
  transform: rotate(-8deg);
  background: var(--nz-peach);
}

.nz-stage-annotation {
  position: absolute;
  right: 10px;
  top: 590px;
  margin: 0;
  padding-left: 22px;
  font-size: var(--nz-text-caption);
  line-height: 1.3;
}

.nz-stage-annotation::before {
  content: "\2196";
  position: absolute;
  left: 0;
  top: -2px;
  color: var(--nz-terracotta);
  font-size: var(--nz-text-small);
}

/* ---------- Statement band ---------- */
.nz-statement {
  background: var(--nz-color-accent);
  color: var(--nz-cream-on-dark);
}

.nz-statement ul {
  margin: 0 auto;
  padding-top: 30px;
  padding-bottom: 30px;
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--nz-space-5);
  font-size: var(--nz-text-label);
  font-weight: var(--nz-weight-label);
  letter-spacing: var(--nz-tracking-label);
  text-transform: uppercase;
}

.nz-statement li {
  display: flex;
  align-items: center;
  gap: var(--nz-space-5);
  flex: 1;
  justify-content: space-between;
}

.nz-statement li:last-child {
  flex: none;
}

/* The hand-drawn tick between the phrases. */
.nz-statement li:not(:last-child)::after {
  content: "";
  width: 26px;
  height: 26px;
  flex: none;
  background: currentColor;
  -webkit-mask: url("../brand/tick.svg") center / contain no-repeat;
  mask: url("../brand/tick.svg") center / contain no-repeat;
}

/* ---------- Sections ---------- */
.nz-section {
  padding-top: 112px;
  padding-bottom: 120px;
}

.nz-section-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: var(--nz-space-7);
  flex-wrap: wrap;
  margin-bottom: 56px;
}

.nz-section-head .nz-h1 {
  margin: 18px 0 0;
}

.nz-section-head > p {
  margin: 0;
  max-width: 380px;
}

/* ---------- Three steps ---------- */
.nz-steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--nz-space-7);
}

.nz-steps li {
  border-top: 1px solid var(--nz-frame);
  padding-top: 28px;
}

.nz-steps .nz-step-number {
  display: block;
  font-size: var(--nz-text-display);
}

.nz-steps .nz-h3 {
  margin: 16px 0 10px;
  font-size: var(--nz-text-h3-large);
}

.nz-steps p {
  margin: 0;
}

/* ---------- Board lengths ---------- */
.nz-lengths {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 64px;
  padding-top: 100px;
  padding-bottom: 100px;
}

.nz-lengths-stage {
  width: 440px;
  height: 620px;
}

.nz-lengths-stage .nz-stage-board {
  left: 20px;
  top: 20px;
  transform: rotate(-5deg);
}

.nz-stage-blob {
  position: absolute;
  left: -40px;
  top: 120px;
  width: 420px;
  height: 420px;
  border-radius: 50%;
  background: var(--nz-terracotta-light);
}

.nz-lengths-text {
  flex: 1 1 420px;
  min-width: 0;
}

.nz-lengths-text .nz-h1 {
  margin: 18px 0;
}

.nz-lengths-text > p {
  margin: 0 0 28px;
  max-width: 460px;
}

.nz-marks {
  display: flex;
  gap: var(--nz-space-4);
  margin-top: 36px;
  flex-wrap: wrap;
}

.nz-marks figure {
  margin: 0;
  width: 128px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  font-size: var(--nz-text-caption);
}

.nz-mark-field {
  position: relative;
  height: 90px;
  border: 1.5px solid var(--nz-frame);
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.nz-mark-number {
  position: absolute;
  top: -8px;
  left: 8px;
  padding: 0 4px;
  background: var(--nz-color-paper);
  font-size: var(--nz-text-caption);
  font-weight: var(--nz-weight-bold);
  line-height: 1.4;
}

.nz-mark-label {
  width: 76%;
  height: 44px;
  background: var(--nz-white);
  box-shadow: var(--nz-shadow-label);
  transform: rotate(-4deg);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-size: var(--nz-text-caption);
  font-weight: var(--nz-weight-bold);
  line-height: 1.1;
}

.nz-mark-dot {
  width: 66px;
  height: 66px;
  border-radius: 50%;
  background: var(--nz-peach);
}

.nz-mark-tick {
  width: 52px;
  height: 52px;
  color: var(--nz-ink);
}

/* ---------- Pictures ---------- */
/* An endless, slow line of pictures. The list is there twice (home.js adds the copy),
   so moving it by half its width brings it back to the start without a jump.
   The edges fade out. It stops while the mouse is over it. */
.nz-picture-carousel {
  overflow: hidden;
  mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
}

.nz-picture-track {
  display: flex;
  align-items: flex-end;
  width: max-content;
  margin: 0;
  padding: 0;
  list-style: none;
  animation: nz-carousel var(--nz-carousel-loop) linear infinite;
}

.nz-picture-carousel:hover .nz-picture-track {
  animation-play-state: paused;
}

/* Space after every picture (not "gap"), so both halves of the track are exactly equal. */
.nz-picture-track li {
  flex: none;
  margin-right: var(--nz-space-6);
}

.nz-picture-track img {
  width: var(--nz-carousel-picture);
  height: auto;
  display: block;
}

@keyframes nz-carousel {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* Less motion: the line stands still and can be scrolled by hand, without the copy. */
@media (prefers-reduced-motion: reduce) {
  .nz-picture-carousel {
    overflow-x: auto;
  }

  .nz-picture-track {
    animation: none;
  }

  .nz-picture-track [aria-hidden="true"] {
    display: none;
  }
}

/* ---------- Printables ---------- */
.nz-printables {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--nz-space-7);
  text-align: center;
}

.nz-printables li,
.nz-printable-link {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.nz-printable-link {
  color: inherit;
  text-decoration: none;
}

.nz-printable-link:hover .nz-h3 {
  text-decoration: underline;
  text-underline-offset: 6px;
}

.nz-printables-more {
  margin: 64px 0 0;
  text-align: center;
}

.nz-printables .nz-h3 {
  margin: 32px 0 6px;
  font-size: var(--nz-text-h3-large);
}

.nz-printables p {
  margin: 0;
  font-size: var(--nz-text-small);
}

.nz-mini-sheet {
  width: 250px;
  height: 340px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  background: var(--nz-white);
  color: var(--nz-ink);
  box-shadow: var(--nz-shadow-on-dark);
  transform: rotate(-3deg);
  transition: transform 0.2s;
  text-align: left;
}

.nz-printables li:nth-child(2) .nz-mini-sheet {
  transform: rotate(2deg);
}

.nz-printables li:nth-child(3) .nz-mini-sheet {
  transform: rotate(-2deg);
}

.nz-printables li:hover .nz-mini-sheet {
  transform: rotate(0deg) translateY(-4px);
}

.nz-mini-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 8px;
}

.nz-mini-head img:first-child {
  width: 56px;
}

.nz-mini-head img:last-child {
  width: 50px;
  height: 50px;
  object-fit: contain;
}

.nz-mini-band {
  height: 12px;
  border-radius: 3px;
  background: var(--nz-peach);
}

.nz-mini-grid,
.nz-mini-ideas {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px 10px;
}

.nz-mini-grid i {
  height: 22px;
  border: 1px solid var(--nz-frame);
  border-radius: 3px;
}

.nz-mini-mission {
  display: flex;
  gap: 8px;
  align-items: center;
  padding-top: 8px;
  border-top: 1px solid var(--nz-rule);
}

.nz-mini-mission i {
  width: 34px;
  height: 24px;
  border: 1px solid var(--nz-frame);
  border-radius: 3px;
}

.nz-mini-mission b {
  flex: 1;
  height: 5px;
  background: var(--nz-ink);
  margin-right: 30%;
}

.nz-mini-ideas {
  gap: 14px 10px;
}

.nz-mini-ideas i {
  height: 38px;
  border-top: 10px solid var(--nz-peach);
  border-radius: 2px;
  background: repeating-linear-gradient(to bottom, transparent 0 6px, var(--nz-rule) 6px 8px);
}

/* ---------- Who it's for ---------- */
.nz-for-whom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--nz-space-7);
  padding-top: 100px;
  padding-bottom: 100px;
}

.nz-for-whom > div {
  flex: 1 1 560px;
  max-width: 680px;
}

.nz-for-whom .nz-h2 {
  margin: 18px 0 24px;
}

.nz-for-whom p {
  margin: 0;
}

.nz-for-whom-link {
  margin-top: var(--nz-space-4);
}

.nz-for-whom img {
  width: 240px;
  height: auto;
  display: block;
}

/* ---------- Closing ---------- */
.nz-closing {
  position: relative;
  overflow: hidden;
}

.nz-closing::before,
.nz-closing::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  border: 1px solid var(--nz-cream-on-dark);
  opacity: 0.25;
}

.nz-closing::before {
  right: -60px;
  top: -120px;
  width: 420px;
  height: 420px;
}

.nz-closing::after {
  right: -140px;
  top: -200px;
  width: 580px;
  height: 580px;
  opacity: 0.18;
}

.nz-closing .nz-container {
  position: relative;
  padding-top: 110px;
  padding-bottom: 110px;
}

.nz-closing .nz-h1 {
  margin: 0 0 40px;
  max-width: 760px;
}

.nz-closing .nz-h1 em {
  color: inherit;
}

/* ---------- Laptop, smaller ---------- */
@media (max-width: 1100px) {
  .nz-hero-stage {
    margin: 0 auto;
  }
}

/* ---------- Phones ---------- */
@media (max-width: 859px) {
  .nz-hero {
    padding-top: 40px;
    padding-bottom: 48px;
    gap: 32px;
  }

  .nz-hero-text {
    flex-basis: 100%;
  }

  /* A calmer stage: the board and two stickers. */
  .nz-hero-stage {
    width: 100%;
    max-width: 358px;
    height: 430px;
  }

  .nz-hero-stage .nz-stage-board {
    left: 50%;
    top: 24px;
    width: 260px;
    margin-left: -130px;
  }

  .nz-stage-ring,
  .nz-stage-caption,
  .nz-stage-annotation {
    display: none;
  }

  .nz-stage-sun {
    right: -10px;
    top: 10px;
    width: 200px;
    height: 200px;
  }

  .nz-float-sticker {
    padding: 10px 14px;
    font-size: var(--nz-text-body);
  }

  .nz-float-sticker.is-done {
    top: 200px;
  }

  /* Sits on the empty fields, so the final reward band stays readable. */
  .nz-float-sticker.is-small-step {
    left: 0;
    top: 250px;
  }

  .nz-statement ul {
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
    padding-top: 24px;
    padding-bottom: 24px;
  }

  .nz-statement li,
  .nz-statement li:last-child {
    flex-direction: row-reverse;
    justify-content: flex-end;
    gap: 12px;
  }

  .nz-statement li:last-child::after {
    content: "";
    width: 26px;
    height: 26px;
    flex: none;
    background: currentColor;
    -webkit-mask: url("../brand/tick.svg") center / contain no-repeat;
    mask: url("../brand/tick.svg") center / contain no-repeat;
  }

  .nz-section {
    padding-top: 64px;
    padding-bottom: 72px;
  }

  .nz-section-head {
    gap: var(--nz-space-4);
    margin-bottom: 32px;
  }

  .nz-steps,
  .nz-printables {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  .nz-lengths {
    flex-direction: column-reverse;
    align-items: stretch;
    gap: 32px;
    padding-top: 64px;
    padding-bottom: 64px;
  }

  .nz-lengths-text {
    flex-basis: auto;
  }

  .nz-lengths-stage {
    width: 100%;
    max-width: 358px;
    height: 420px;
    margin: 0 auto;
  }

  .nz-lengths-stage .nz-stage-board {
    left: 50%;
    width: 260px;
    margin-left: -130px;
  }

  .nz-stage-blob {
    left: 0;
    top: 80px;
    width: 300px;
    height: 300px;
  }

  .nz-marks figure {
    width: calc((100% - 32px) / 3);
  }

  .nz-picture-track img {
    width: var(--nz-carousel-picture-phone);
  }

  .nz-for-whom {
    padding-top: 64px;
    padding-bottom: 64px;
  }

  .nz-for-whom > div {
    flex-basis: 100%;
  }

  .nz-for-whom img {
    width: 160px;
  }

  .nz-closing .nz-container {
    padding-top: 72px;
    padding-bottom: 72px;
  }
}