/* Nordic Algorithms — plain HTML + CSS, no JavaScript.
   Everything below the "gen:start" marker, and the --cycle and --enter values, are written by
   tools/generate.mjs. Edit the generator, not the generated parts. */

:root {
  --cycle: 36s; /* master loop (set by the generator): every looping animation uses it */
  --enter: 10s; /* a visitor's first frame (set by the generator): every world animation starts this far into the cycle */

  /* Layout tokens shared by the page and the world (the aurora starts right of the copy). */
  --wrap: 72rem;
  --copy: 36rem;

  --bg: #0A0F1F;
  --indigo: #6366F1;
  --purple: #A855F7;
  --pink: #EC4899;
  --brand: linear-gradient(90deg, var(--indigo), var(--purple), var(--pink));

  --text: #F8FAFC;
  --text-2: #E2E8F0;
  --muted: #CBD5E1;
  --link: #C7D2FE;
  --hi: #F9A8D4;
  /* The rising line's ramp by height (the brand colours at 400 weight, legible on the night); read by the generator. */
  --rise-lo: #818CF8;
  --rise-mid: #C084FC;
  --rise-hi: #F472B6;

  /* The page veil below the hero (alphas): eases in over 4rem to --veil-edge, where "How we work" starts (.approach's
     top padding), then --veil from 12rem down. */
  --veil-edge: 0.6;
  --veil: 0.85;

  /* The portrait text band's alpha (.hero-copy::before): ≥ 0.68 keeps 4.5:1 even over the scene's opaque points. */
  --backdrop: 0.68;

  /* The pause toggle: a 44 px disc in a corner of the first screen; the shore keeps room for it (--shore-right). */
  --pause-size: 2.75rem;
  --pause-inset: 1rem;

  --mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;

  color-scheme: dark;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  background: var(--bg);
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  position: relative;
  margin: 0;
  overflow-x: hidden;
  font-family: var(--mono);
  line-height: 1.6;
  color: var(--text);
  background: var(--bg);
}

main,
footer {
  position: relative;
  z-index: 1;
}

/* The veil: scrolls with the page and starts where the first screen ends, so below the hero the fixed
   night recedes behind the content (text ≥ 4.5:1 whatever the sky does). Paints above .world (z 0, later
   in the tree) and below main/footer (z 1). It eases in like a horizon and is ≥ --veil-edge from 4rem,
   where .approach's top padding puts the h2. Tune the stops, never the top: the first screen at scroll 0
   must stay untouched. */
body::after {
  content: "";
  position: absolute;
  top: 100vh;
  top: 100svh;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 0;
  pointer-events: none;
  background: linear-gradient(180deg,
    rgb(10 15 31 / 0) 0,
    rgb(10 15 31 / .05) 1rem,
    rgb(10 15 31 / .2) 2rem,
    rgb(10 15 31 / .42) 3rem,
    rgb(10 15 31 / var(--veil-edge)) 4rem,
    rgb(10 15 31 / .72) 6rem,
    rgb(10 15 31 / var(--veil)) 12rem);
}

.wrap {
  width: min(100% - 2rem, var(--wrap));
  margin-inline: auto;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

a {
  color: var(--link);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.3em;
  border-radius: 4px;
}

a:hover {
  color: var(--text);
}

a:focus-visible {
  outline: 2px solid var(--hi);
  outline-offset: 4px;
  color: var(--text);
}

h1,
h2,
h3 {
  margin: 0;
  font-weight: 600;
  line-height: 1.2;
  color: var(--text);
}

/* ---------- Hero ---------- */

.hero {
  min-height: 100vh;
  min-height: 100svh;
  padding-block: clamp(3rem, 13vh, 9rem) 3rem;
}

.hero-copy {
  max-width: var(--copy);
}

.eyebrow {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 1rem;
  font-size: 0.95rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  color: var(--text-2);
}

.eyebrow::before {
  content: "";
  width: 2rem;
  height: 2px;
  border-radius: 2px;
  background: var(--brand);
}

.headline {
  display: block;
  font-size: clamp(1.9rem, 1.35rem + 2.2vw, 3rem);
  line-height: 1.12;
  letter-spacing: -0.02em;
  text-wrap: balance;
}

/* "built with Nordic clarity." wraps as one piece: the headline always breaks after "Custom software,". */
.headline-2 {
  display: inline-block;
}

.lead {
  max-width: 34rem;
  margin: 1.25rem 0 0;
  font-size: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
  color: var(--muted);
}

.cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem 1.25rem;
  margin-top: 2rem;
}

.cta-alt {
  margin: 0;
  font-size: 0.95rem;
  color: var(--muted);
}

/* Light button: dark text on near-white passes contrast; the brand shows in the glow. */
.button {
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  min-height: 3rem;
  padding: calc(0.75rem - 2px) calc(1.4rem - 2px);
  border: 2px solid transparent; /* invisible here (the background shows through); a system-colour outline in forced colours */
  border-radius: 999px;
  font-weight: 600;
  text-decoration: none;
  color: var(--bg);
  background: var(--text);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.4), 0 10px 30px -10px rgba(168, 85, 247, 0.7);
}

.button::after {
  content: "→";
  content: "→" / ""; /* the arrow is decoration: empty alt text, so the link is named "Discuss your project" */
}

.button:hover {
  color: var(--bg);
  background: #E0E7FF;
}

.button:focus-visible {
  color: var(--bg);
  outline-offset: 4px;
}

/* ---------- Hero framing per screen shape ----------
   Base = desktop/landscape: copy on the left, the world to its right.
   These blocks only move things; the world's own framing lives with .world. */

/* Short landscape windows (small laptops): start the copy higher so the horizon stays below it. */
@media (orientation: landscape) and (max-height: 760px) {
  .hero {
    padding-top: clamp(2rem, 8vh, 4rem);
  }
}

/* Landscape phones and very short windows: compact copy, left. */
@media (orientation: landscape) and (max-height: 32rem) {
  :root {
    --copy: min(36rem, 56vw);
    --pause-inset: 0.75rem; /* the focus ring (2px at 4px offset) still needs ≥ 6px of screen */
  }

  .hero {
    padding-block: 1.25rem;
  }

  .eyebrow {
    margin-bottom: 0.5rem;
    font-size: 0.8rem;
  }

  .headline {
    font-size: clamp(1.35rem, 5vh + 0.5rem, 2rem);
  }

  .lead {
    margin-top: 0.75rem;
    font-size: 0.85rem;
    line-height: 1.5;
  }

  .cta {
    margin-top: 1rem;
  }

  .button {
    min-height: 2.75rem;
    padding: calc(0.6rem - 2px) calc(1.2rem - 2px);
  }
}

/* Portrait phones/tablets: the constellation gets its own strip of sky above the
   copy, and the aurora rises behind it, so the text gets a soft feathered
   backdrop that keeps contrast above 4.5:1 whatever the sky does. */
@media (max-width: 63.99rem) and (orientation: portrait) {
  .hero {
    padding-top: calc(2vh + 31.25vw + 1rem); /* --sky-top + constellation height (16:10) + gap */
  }

  .hero-copy {
    position: relative;
  }

  /* A full-bleed band of night behind the copy: feathered above and below, fading towards the right where there
     is room (tablets); every line of text sits on --backdrop. Feather stops assume --backdrop ≥ 0.6. */
  .hero-copy::before {
    content: "";
    position: absolute;
    top: -3rem;
    bottom: -6rem;
    left: -1rem;   /* the portrait .wrap gutter (min(100% - 2rem, …)): the band starts at the viewport's left edge */
    width: 100vw;
    z-index: -1;
    pointer-events: none;
    background: linear-gradient(180deg,
      rgb(4 7 15 / 0) 0,
      rgb(4 7 15 / .1) .75rem,
      rgb(4 7 15 / .32) 1.5rem,
      rgb(4 7 15 / .55) 2.1rem,
      rgb(4 7 15 / var(--backdrop)) 2.5rem,
      rgb(4 7 15 / var(--backdrop)) calc(100% - 5.5rem),
      rgb(4 7 15 / .52) calc(100% - 4.4rem),
      rgb(4 7 15 / .3) calc(100% - 3rem),
      rgb(4 7 15 / .12) calc(100% - 1.6rem),
      rgb(4 7 15 / 0) 100%);
    -webkit-mask-image: linear-gradient(90deg, #000 calc(min(100% - 2rem, var(--copy)) + 1rem), rgb(0 0 0 / .45) calc(min(100% - 2rem, var(--copy)) + 13rem));
    mask-image: linear-gradient(90deg, #000 calc(min(100% - 2rem, var(--copy)) + 1rem), rgb(0 0 0 / .45) calc(min(100% - 2rem, var(--copy)) + 13rem));
  }
}

@media (max-width: 63.99rem) and (orientation: portrait) and (max-height: 700px) {
  .hero {
    padding-top: calc(1.5vh + 26.25vw + 1rem); /* just below the smaller constellation */
  }

  .cta {
    margin-top: 1.5rem;
  }
}

@media (max-width: 22.5rem) {
  .headline { font-size: 1.7rem; }
  .lead     { font-size: 0.92rem; }
}

/* ---------- Pause toggle ----------
   A quiet scene control (WCAG 2.2.2), CSS only: a checkbox and its label. Checked = the finished night, the same
   frame as reduced motion (every world animation off); unchecked again, the loop restarts at --enter. The input is
   the label's invisible twin, lying on top of it in the same 44 px box: the pointer target and the screen-reader
   focus box. The label draws the disc and the glyph. Bottom-right of the first screen (it scrolls away with the
   hero); top-left of the sky strip on portrait screens. */
.pause-input,
.pause {
  display: none;               /* shown only where :has() works (below) */
  position: absolute;          /* against main (position: relative; .hero stays static): the first screen */
  top: calc(100vh - var(--pause-size) - var(--pause-inset));
  top: calc(100svh - var(--pause-size) - var(--pause-inset));
  right: var(--pause-inset);
  width: var(--pause-size);
  height: var(--pause-size);
  margin: 0;
  border-radius: 50%;
}

.pause-input {
  z-index: 1;
  -webkit-appearance: none;
  appearance: none;
  opacity: 0;
  cursor: pointer;
}

.pause {
  place-items: center;
  border: 1px solid rgb(199 210 254 / 0.3);
  background: rgb(10 15 31 / 0.6);
  color: var(--text-2);
}

/* Pause: two bars. */
.pause::before {
  content: "";
  width: 10px;
  height: 12px;
  background: linear-gradient(90deg, currentColor 0 3px, transparent 0 7px, currentColor 0);
}

/* Hover: the rim and the glyph brighten, with the CTA's violet glow. */
.pause-input:hover + .pause {
  border-color: rgb(199 210 254 / 0.6);
  color: var(--text);
  box-shadow: 0 0 18px -4px rgb(168 85 247 / 0.7);
}

/* Paused: a play triangle (optically centred), the border tinted like the found light. */
.pause-input:checked + .pause {
  border-color: rgb(249 168 212 / 0.45);
}

.pause-input:checked + .pause::before {
  width: 11px;
  margin-left: 2px;
  background: currentColor;
  clip-path: polygon(0 0, 100% 50%, 0 100%);
}

.pause-input:focus-visible + .pause {
  outline: 2px solid var(--hi);
  outline-offset: 4px;
  color: var(--text);
}

@supports selector(:has(*)) {
  .pause-input { display: block; }
  .pause { display: grid; }

  /* Paused = the finished night (the reduced-motion frame). Pseudo-elements must be listed: :is() can't hold them.
     The scroll-linked recede (.constellation, .shore, below) stays: it follows the reader's scroll, not the cycle. */
  body:has(.pause-input:checked) .world :not(.constellation, .shore),
  body:has(.pause-input:checked) .world *::before,
  body:has(.pause-input:checked) .world *::after {
    animation: none !important;
  }
}

/* Portrait screens: both bottom corners are shore, so the toggle sits in the empty top-left of the sky strip, on the
   copy's left edge. */
@media (max-width: 63.99rem) and (orientation: portrait) {
  .pause-input,
  .pause {
    top: 0.75rem;
    right: auto;
    left: 1rem;
  }
}

/* ---------- How we work ---------- */

.approach {
  padding-block: 4rem clamp(2rem, 6vh, 4rem); /* top ≥ the veil's 4rem ramp: the h2 starts on --veil-edge */
}

h2 {
  font-size: clamp(1.4rem, 1.15rem + 1vw, 2rem);
  letter-spacing: -0.01em;
  text-shadow: 0 1px 14px rgba(4, 7, 15, 0.95), 0 0 2px rgba(4, 7, 15, 0.9);
}

.principles {
  display: grid;
  gap: 1rem;
  max-width: 42rem;
  margin: 1.75rem 0 0;
  padding: 0;
  list-style: none;
}

/* Three-up only where each card still gets a comfortable measure; below that, one readable column. */
@media (min-width: 60rem) {
  .principles {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    max-width: none;
  }
}

/* Clean line breaks: balanced headings and labels, no stranded last word in paragraphs. */
h2,
.principles h3,
.principles .outcome {
  text-wrap: balance;
}

.lead,
.contact > p,
.principles li > p,
footer p {
  text-wrap: pretty;
}

.principles li {
  position: relative;
  display: grid;
  grid-template-rows: auto 1fr auto; /* the outcome badge sits at the foot; three-up cards are equally tall */
  padding: 1.5rem 1.4rem 1.25rem;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 14px;
  background: rgba(15, 21, 42, 0.88);
}

.principles li::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 2px;
  background: var(--c);
}

.principles h3 {
  font-size: 1.05rem;
}

.principles p {
  margin: 0.6rem 0 0;
  font-size: 0.95rem;
  color: var(--muted);
}

/* What the client gets: a pill in the card's colour (--c), read as a result. The check mark is decoration (empty alt
   text), so a screen reader reads just the phrase. */
.principles .outcome {
  justify-self: start;
  display: flex;
  align-items: center;
  gap: 0.5em;
  margin-top: 1.1rem;
  padding: 0.25rem 0.8rem 0.25rem 0.65rem;
  border: 1px solid var(--c);
  border-radius: 999px;
  font-size: 0.8rem;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: 0.04em;
  color: var(--text-2);
  background: rgb(255 255 255 / 0.04);
}

.principles .outcome::before {
  content: "✓";
  content: "✓" / "";
  font-weight: 700;
  color: var(--c);
}

/* ---------- Contact + footer ---------- */

.contact {
  margin-block: clamp(2rem, 6vh, 4rem);
  padding: clamp(2rem, 5vw, 3.5rem);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 18px;
  background: linear-gradient(135deg, rgba(99, 102, 241, 0.14), rgba(168, 85, 247, 0.1) 50%, rgba(236, 72, 153, 0.12)), rgba(10, 15, 31, 0.92);
}

.contact > p {
  max-width: 36rem;
  margin: 0.75rem 0 0;
  color: var(--text-2);
}

footer {
  padding-block: 1.5rem 2.5rem;
  text-shadow: 0 1px 10px rgba(4, 7, 15, 0.95);
  border-top: 1px solid rgba(255, 255, 255, 0.07);
  font-size: 0.85rem;
  color: var(--muted);
}

footer p {
  margin: 0.4rem 0 0;
}

/* Narrow screens: the email on its own line, without a separator left dangling at a line's end. */
@media (max-width: 30rem) {
  footer .sep {
    display: none;
  }

  footer a {
    display: block;
    width: fit-content;
  }
}

/* ---------- The world ----------
   A fixed Nordic night behind the whole page. Layout lives in custom
   properties so phones and desktops can frame the same scene differently. */

.world {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  background: linear-gradient(180deg, #04070F 0%, #0A0F1F 42%, #121A36 70%, #0A0F1F 100%);

  --lake: 19%;
  --ridge: 25%;
  --aur-left: calc(max((100vw - var(--wrap)) / 2, 1rem) + var(--copy) + 1rem); /* right of the copy column */
  --aur-right: 1%;
  --aur-bottom: 29%;
  --aur-h: 54%;
  --sky-right: 4%;
  --sky-top: 7%;
  --sky-w: 31vw;
  --shore-left: calc(var(--aur-left) + 2vw);
  /* Room for the pause toggle: the disc, an inset each side, and 0.5rem for the target line's overhang (.mark, ±2 %). */
  --shore-right: max(7%, calc(var(--pause-size) + 2 * var(--pause-inset) + 0.5rem));
  --shore-h: clamp(56px, 11%, 104px);
}

/* Short landscape windows: keep the horizon low, below the copy. */
@media (orientation: landscape) and (max-height: 760px) {
  .world {
    --lake: 11%;
    --ridge: 20%;
    --aur-bottom: 22%;
    --aur-h: 60%;
    --shore-h: clamp(44px, 10%, 76px);
  }
}

/* Landscape phones: a compact night to the right of the copy. */
@media (orientation: landscape) and (max-height: 32rem) {
  .world {
    --lake: 9%;
    --aur-bottom: 20%;
    --aur-h: 64%;
    --sky-top: 4%;
    --sky-w: 32vw;
    --shore-h: clamp(32px, 13%, 64px);
  }
}

/* Portrait phones/tablets: a strip of sky on top, the aurora full width behind the copy. */
@media (max-width: 63.99rem) and (orientation: portrait) {
  .world {
    --lake: 7%;
    --ridge: 16%;
    --aur-left: 0%;
    --aur-right: 0%;
    --aur-bottom: 15%;
    --aur-h: 48%;
    --sky-right: 4%;
    --sky-top: 2%;
    --sky-w: 50vw;
    --shore-left: 8%;
    --shore-right: 8%;
    --shore-h: clamp(48px, 11%, 110px);
  }
}

/* Short portrait phones: a smaller constellation and a lower shore keep the copy clear. */
@media (max-width: 63.99rem) and (orientation: portrait) and (max-height: 700px) {
  .world {
    --lake: 4%;
    --sky-w: 42vw;
    --sky-top: 1.5%;
    --shore-h: 34px;
  }
}

/* Ambient glow: soft gradients painted once, then only transformed. */
.sky-glow {
  position: absolute;
  inset: 0;
}

.sky-glow span {
  position: absolute;
  border-radius: 50%;
  will-change: transform;
  animation: var(--cycle) ease-in-out calc(-1 * var(--enter)) infinite both;
}

.sky-glow span:nth-child(1) {
  left: -20vmax;
  top: -26vmax;
  width: 90vmax;
  height: 48vmax;
  background: radial-gradient(closest-side, rgba(99, 102, 241, 0.3), rgba(99, 102, 241, 0.1) 55%, rgba(99, 102, 241, 0));
  animation-name: drift-a;
}

.sky-glow span:nth-child(2) {
  right: -26vmax;
  top: -16vmax;
  width: 80vmax;
  height: 40vmax;
  background: radial-gradient(closest-side, rgba(168, 85, 247, 0.24), rgba(168, 85, 247, 0.08) 55%, rgba(168, 85, 247, 0));
  animation-name: drift-b;
}

.sky-glow span:nth-child(3) {
  right: -18vmax;
  bottom: -30vmax;
  width: 76vmax;
  height: 46vmax;
  background: radial-gradient(closest-side, rgba(236, 72, 153, 0.16), rgba(236, 72, 153, 0.05) 55%, rgba(236, 72, 153, 0));
  animation-name: drift-c;
}

/* Closed loops: 0% and 100% are identical, so nothing ever jumps. */
@keyframes drift-a {
  0%, 100% { transform: translate3d(0, 0, 0) rotate(-10deg) scale(1); }
  33%      { transform: translate3d(9vw, 4vh, 0) rotate(-4deg) scale(1.08); }
  66%      { transform: translate3d(-3vw, 7vh, 0) rotate(-14deg) scale(0.96); }
}

@keyframes drift-b {
  0%, 100% { transform: translate3d(0, 0, 0) rotate(12deg) scale(1); }
  40%      { transform: translate3d(-10vw, 6vh, 0) rotate(6deg) scale(1.1); }
  75%      { transform: translate3d(-4vw, -3vh, 0) rotate(16deg) scale(0.95); }
}

@keyframes drift-c {
  0%, 100% { transform: translate3d(0, 0, 0) rotate(-6deg) scale(1); }
  50%      { transform: translate3d(-8vw, -6vh, 0) rotate(4deg) scale(1.12); }
}

.stars {
  position: absolute;
  inset: 0;
  background-repeat: no-repeat;
  animation: var(--cycle) ease-in-out calc(-1 * var(--enter)) infinite both;
}

.stars--a { animation-name: twinkle-a; }
.stars--b { animation-name: twinkle-b; }

@keyframes twinkle-a {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.45; }
}

@keyframes twinkle-b {
  0%, 100% { opacity: 0.5; }
  50%      { opacity: 1; }
}

/* ----- Constellation: longest increasing subsequence (the rising line) ----- */

.constellation {
  position: absolute;
  right: var(--sky-right);
  top: var(--sky-top);
  width: var(--sky-w);
  aspect-ratio: 16 / 10;
  container-type: inline-size;
}

/* Points, centred on --x/--y (container units); --s: size. */
.dot,
.glow,
.pick,
.peak,
.burst {
  position: absolute;
  left: calc(var(--x) * 1cqw - var(--s) / 2);
  top: calc(var(--y) * 1cqw - var(--s) / 2);
  width: var(--s);
  height: var(--s);
  border-radius: 50%;
}

/* Lines from --x/--y, --l long, at the angle --a (container units). */
.link,
.seg {
  position: absolute;
  left: calc(var(--x) * 1cqw);
  top: calc(var(--y) * 1cqw);
  width: calc(var(--l) * 1cqw);
  height: 1px;
  margin-top: -0.5px;
  transform-origin: 0 50%;
  transform: rotate(var(--a));
}

/* The stars, unlit: small dots that come out with the night and stay as a faint field. */
.field {
  position: absolute;
  inset: 0;
  animation: field var(--cycle) ease-in-out calc(-1 * var(--enter)) infinite both;
}

.dot {
  --s: max(3px, 0.72cqw);
  opacity: 0.5;
  background: var(--text-2);
  box-shadow: 0 0 max(2px, 0.5cqw) rgb(226 232 240 / 0.45);
}

.dot.top {
  --s: max(4px, 1.05cqw);
  background: var(--text);
}

/* Round dots: a box of fractional size at a fractional position snaps to uneven whole pixels (3×4) and paints a
   pill, so the size is a whole number of pixels where round() is supported. */
@supports (width: round(1.5px, 1px)) {
  .dot {
    --s: round(max(3px, 0.72cqw), 1px);
  }
}

/* The scan: a soft column of light that visits the stars left → right, the order the DP visits them. */
.scan {
  position: absolute;
  left: calc(-0.5 * max(18px, 5cqw));
  top: -3cqw;
  width: max(18px, 5cqw);
  height: 68.5cqw;
  opacity: 0;
  background:
    linear-gradient(90deg, transparent calc(50% - 0.5px), rgb(224 231 255 / 0.32) 0 calc(50% + 0.5px), transparent 0),
    linear-gradient(90deg, rgb(165 180 252 / 0), rgb(165 180 252 / 0.12) 50%, rgb(165 180 252 / 0));
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 18%, #000 82%, transparent);
  mask-image: linear-gradient(180deg, transparent, #000 18%, #000 82%, transparent);
  animation: scan var(--cycle) linear calc(-1 * var(--enter)) infinite both;
}

/* Clip windows: the outer box (overflow: hidden) moves, its content moves back by as much and stays put, so the
   content is revealed or hidden at the window's edge. .sweep (behind the scan) and .rise open left → right, .back
   (the trace back) right → left. */
.wipe {
  position: absolute;
  top: -5cqw;
  width: 110cqw;
  height: 72.5cqw;
  overflow: hidden;
}

.wipe > span {
  position: absolute;
  top: 5cqw;
  width: 100cqw;
  height: 62.5cqw;
}

.sweep,
.rise {
  left: -110cqw;
}

.sweep > span,
.rise > span {
  left: 110cqw;
}

.back {
  left: 100cqw;
}

.back > span {
  left: -100cqw;
}

.sweep {
  opacity: 0;
  animation: sweep var(--cycle) linear calc(-1 * var(--enter)) infinite both;
}

.sweep > span {
  animation: sweep-in var(--cycle) linear calc(-1 * var(--enter)) infinite both;
}

.back {
  opacity: 0;
  animation: back var(--cycle) linear calc(-1 * var(--enter)) infinite both;
}

.back > span {
  animation: back-in var(--cycle) linear calc(-1 * var(--enter)) infinite both;
}

/* A lit star: a white core and a glow, both sized by its chain length (--ds, --g). */
.glow {
  --s: max(28px, 8cqw);
  opacity: 0.78;
  background:
    radial-gradient(circle closest-side, var(--text) 0 55%, transparent) 50% 50% / calc(var(--ds) * max(3px, 0.82cqw)) calc(var(--ds) * max(3px, 0.82cqw)) no-repeat,
    radial-gradient(circle, rgb(248 250 252 / 0.95) 0 6%, rgb(221 214 254 / 0.6) 15%, rgb(165 180 252 / 0.2) 36%, transparent 66%) 50% 50% / calc(var(--g) * 100%) calc(var(--g) * 100%) no-repeat;
}

/* Each star's best lower predecessor (the DP's pointer), drawn as the scan reaches the star (--t). */
.link i {
  position: absolute;
  inset: 0;
  transform-origin: 0 50%;
  transform: scaleX(0);
  opacity: 0.85;
  background: rgb(196 181 253 / 0.85);
  animation: link var(--cycle) linear calc(-1 * var(--enter)) infinite both;
  animation-delay: calc(var(--t) - var(--enter));
}

/* The trace back follows the chain's pointers: the same links, brighter. */
.back .link {
  background: rgb(196 181 253 / 0.7);
}

/* The answer: the rising line and the chain's stars, coloured by height on the brand ramp (--rise-lo/-mid/-hi,
   like the shore lights); the stars' colours pop as the trace back reaches them (--tb). */
.answer {
  position: absolute;
  inset: 0;
  animation: answer var(--cycle) linear calc(-1 * var(--enter)) infinite both;
}

.rise {
  transform: translateX(100cqw);
  animation: rise var(--cycle) linear calc(-1 * var(--enter)) infinite both;
}

.rise > span {
  transform: translateX(-100cqw);
  animation: rise-in var(--cycle) linear calc(-1 * var(--enter)) infinite both;
}

.seg {
  height: 1px; /* a hairline with a soft glow: the weight the owner approved */
  margin-top: -0.5px;
  background: linear-gradient(90deg, var(--c0), var(--c1));
  box-shadow: 0 0 max(4px, 0.9cqw) rgb(192 132 252 / 0.35);
}

.pick {
  --s: calc(var(--cs) * max(7px, 2cqw));
  background: radial-gradient(circle, var(--text) 0 26%, var(--c) 34% 58%, transparent 72%);
  box-shadow: 0 0 max(4px, 1cqw) var(--c);
  animation: pick var(--cycle) ease-in-out calc(-1 * var(--enter)) infinite both;
  animation-delay: calc(var(--tb) - var(--enter));
}

/* The top of the chain: a four-point sparkle (core and concave rays, a static clip-path) over a soft halo, picked
   first by the trace back, flaring when the line arrives. It overflows the box up and to the right; the layout
   tests keep it on screen. */
.peak {
  --s: max(30px, 11cqw);
  animation: peak var(--cycle) ease-in-out calc(-1 * var(--enter)) infinite both;
}

.peak::before,
.peak::after {
  content: "";
  position: absolute;
  inset: 0;
}

.peak::before {
  border-radius: 50%;
  background: radial-gradient(circle, rgb(248 250 252 / 0.95) 0 6%, rgb(251 207 232 / 0.55) 16%, rgb(236 72 153 / 0.14) 34%, transparent 62%);
}

.peak::after {
  background: radial-gradient(circle, var(--text) 0 12%, #FCE7F3 30%, rgb(252 231 243 / 0) 70%);
  clip-path: polygon(50% 4%, 53.2% 46.8%, 96% 50%, 53.2% 53.2%, 50% 96%, 46.8% 53.2%, 4% 50%, 46.8% 46.8%);
}

.burst {
  --s: max(36px, 13cqw);
  opacity: 0;
  background: radial-gradient(circle, rgb(252 231 243 / 0.55), rgb(236 72 153 / 0.16) 40%, transparent 68%);
  animation: burst var(--cycle) ease-in-out calc(-1 * var(--enter)) infinite both;
}

/* Short portrait phones: the box sits close to the top of the screen, so a smaller sparkle keeps its rays ≥ 4px
   inside it, also at the flare (scale 1.25). */
@media (max-width: 63.99rem) and (orientation: portrait) and (max-height: 700px) {
  .peak {
    --s: max(24px, 11cqw);
  }

  .burst {
    --s: max(29px, 13cqw);
  }
}

/* ----- Aurora curtains: insertion sort ----- */

.curtains {
  position: absolute;
  left: var(--aur-left);
  right: var(--aur-right);
  bottom: var(--aur-bottom);
  height: var(--aur-h);
  container-type: inline-size; /* ribbons move in exact slot widths (100cqw / 11) */
  animation: var(--cycle) ease-in-out calc(-1 * var(--enter)) infinite both;
}

/* --i: start slot, --h: height, --c: colour by value, --f: slot offset when sorted */
.ribbon {
  position: absolute;
  bottom: 0;
  left: calc(var(--i) * 100% / 11);
  width: calc(100% / 11);
  height: calc(var(--h) * 100%);
  transform: translateX(calc(var(--f) * 100cqw / 11));
  animation: var(--cycle) ease-in-out calc(-1 * var(--enter)) infinite both;
}

/* Slanted, overlapping rays so neighbouring curtains melt into one aurora. */
.ribbon::before,
.ribbon::after {
  content: "";
  position: absolute;
  inset: 0 -38%;
  transform: skewX(-9deg);
  transform-origin: 50% 100%;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 42%, #000 58%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 42%, #000 58%, transparent);
}

.ribbon::before {
  opacity: 0.62;
  background: linear-gradient(0deg, transparent 0%, var(--c) 18%, var(--c) 30%, transparent 96%);
}

/* Compare glow: a bright core whose opacity is animated. */
.ribbon::after {
  inset: 0 8%;
  opacity: 0;
  background: linear-gradient(0deg, transparent 0%, rgba(248, 250, 252, 0.6) 24%, transparent 78%);
  animation: var(--cycle) ease-in-out calc(-1 * var(--enter)) infinite both;
}

/* ----- Mountains, lake and reflection ----- */

.mountains {
  position: absolute;
  left: 0;
  bottom: var(--lake);
  display: block;
  width: 100%;
  height: var(--ridge);
}

.mountains .far  { fill: #131B36; }
.mountains .near { fill: #0B1124; }

.lake {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: var(--lake);
  background: linear-gradient(180deg, #0E1631, #060A15);
}

.lake::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(165, 180, 252, 0.3) 40%, rgba(249, 168, 212, 0.3) 70%, transparent);
}

.reflection {
  position: absolute;
  left: var(--aur-left);
  right: var(--aur-right);
  bottom: var(--lake);
  height: var(--aur-h);
  opacity: 0.2;
  transform-origin: 50% 100%;
  transform: scaleY(-0.55);
}

.reflection .curtains {
  inset: 0;
  height: auto;
}

/* ----- Shore lights: binary search ----- */

.shore {
  position: absolute;
  left: var(--shore-left);
  right: var(--shore-right);
  bottom: var(--lake);
  height: var(--shore-h);
  container-type: inline-size; /* the probe moves in exact slot widths (100cqw / 15) */
}

/* --i: index, --h: height, --c: colour by index */
.post {
  position: absolute;
  bottom: 0;
  left: calc(var(--i) * 100% / 15);
  width: calc(100% / 15);
  height: calc(var(--h) * 100%);
  background:
    radial-gradient(circle 4px at 50% 4px, var(--c) 0 2.5px, transparent 4px) no-repeat,
    linear-gradient(0deg, transparent, var(--c)) 50% 0 / 3px 100% no-repeat;
}

/* Ruled out by a probe: dimmed in the static frame; the generator gives each
   probe's lights (.k1, .k2, …) their own dim/restore keyframes. */
.post.out {
  opacity: 0.16;
  animation: var(--cycle) ease-out calc(-1 * var(--enter)) infinite both;
}

.found::after {
  content: "";
  position: absolute;
  left: calc(50% - 16px);
  top: -13px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(248, 250, 252, 0.95) 0 12%, rgba(236, 72, 153, 0.5) 36%, transparent 70%);
  animation: var(--cycle) ease-out calc(-1 * var(--enter)) infinite both;
  animation-name: found;
}

/* The height being searched for */
.mark {
  position: absolute;
  left: -2%;
  right: -2%;
  bottom: calc(var(--h) * 100%);
  border-top: 1px dashed rgba(249, 168, 212, 0.7);
  animation: var(--cycle) linear calc(-1 * var(--enter)) infinite both;
  animation-name: mark;
}

/* The probe: a marker above the light being checked. --x: final index (static frame) */
.probe {
  position: absolute;
  left: 0;
  bottom: 0;
  width: calc(100% / 15);
  height: calc(100% + 22px);
  transform: translateX(calc(var(--x) * 100cqw / 15));
  animation: var(--cycle) ease-in-out calc(-1 * var(--enter)) infinite both;
  animation-name: probe;
}

.probe::before {
  content: "";
  position: absolute;
  left: calc(50% - 4px);
  top: 0;
  width: 8px;
  height: 8px;
  transform: rotate(45deg);
  background: var(--text);
  box-shadow: 0 0 8px rgba(248, 250, 252, 0.8);
}

.probe::after {
  content: "";
  position: absolute;
  left: calc(50% - 0.5px);
  top: 12px;
  bottom: 4px;
  width: 1px;
  background: linear-gradient(180deg, rgba(248, 250, 252, 0.55), transparent);
}

/* Keeps the copy calm and readable over the scene. */
.scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(4, 7, 15, 0.7) 0%, rgba(4, 7, 15, 0.42) 30%, rgba(4, 7, 15, 0) 50%);
}

/* Portrait phones: the copy has its own backdrop, so the sky stays undimmed. */
@media (max-width: 63.99rem) and (orientation: portrait) {
  .scrim {
    background: none;
  }
}

/* ---------- Below the fold, the night steps back ----------
   The bright point layers fade as the reader scrolls (opacity only, tied to the scroll, not the cycle: the only
   animations off --cycle). Untouched at scroll 0; done by 60vh, before any card meets the constellation and inside the
   shortest page (65vh of scroll at 2560×1440). The aurora, the sky glow, the stars and the mountains stay. The pause
   disc fades with the first screen, back on hover or keyboard focus. Not on a cycle, so the pause and reduced motion
   leave it on: it is the reader's own scroll, not motion. Where scroll timelines are missing, nothing changes. */
@supports (animation-timeline: scroll()) {
  .constellation,
  .shore {
    animation: recede 1ms linear both; /* the shorthand resets the timeline: longhands after it */
    animation-timeline: scroll(root);
    animation-range: 15vh 60vh;
  }

  .pause {
    animation: recede-ui 1ms linear both;
    animation-timeline: scroll(root);
    animation-range: 5vh 35vh;
  }

  .pause-input:is(:hover, :focus-visible) + .pause {
    animation: none; /* a keyboard or pointer user always sees the control */
  }
}

@keyframes recede { to { opacity: 0.15; } }
@keyframes recede-ui { to { opacity: 0; } }

/* ---------- Reduced motion ----------
   The base styles above already describe the finished night (sorted aurora, the rising line with its picked stars
   and the top star lit over a faint field of stars, found light), so switching animations off leaves a calm frame. */

@media (prefers-reduced-motion: reduce) {
  /* Every animation off, but the scroll-linked recede (.constellation, .shore): the reader's scroll, not motion. */
  *:not(.constellation, .shore),
  *::before,
  *::after {
    animation: none !important;
  }

  /* Nothing moves, so the pause toggle would be a dead control. */
  .pause-input,
  .pause {
    display: none;
  }
}

/* Forced colours (e.g. Windows High Contrast): the painted scene would keep its fills behind the
   system-coloured text, so it steps aside, and the pause toggle with it; the button keeps its shape through its border. */
@media (forced-colors: active) {
  .world,
  .pause-input,
  .pause {
    display: none;
  }
}

@media print {
  .pause-input,
  .pause {
    display: none;
  }
}

/* gen:start */
.stars--a{background-image:radial-gradient(1.116px 1.116px at 34.649% 50.992%,rgba(248,250,252,.507),transparent),radial-gradient(1.065px 1.065px at 4.85% 57.844%,rgba(248,250,252,.729),transparent),radial-gradient(.677px .677px at 73.334% 21.28%,rgba(248,250,252,.74),transparent),radial-gradient(.886px .886px at 5.831% 65.807%,rgba(248,250,252,.732),transparent),radial-gradient(1.027px 1.027px at 70.269% 15.428%,rgba(248,250,252,.807),transparent),radial-gradient(1.349px 1.349px at 75.535% 33.094%,rgba(248,250,252,.809),transparent),radial-gradient(1.416px 1.416px at 10.468% .446%,rgba(248,250,252,.767),transparent),radial-gradient(1.18px 1.18px at 51.899% 15.302%,rgba(248,250,252,.656),transparent),radial-gradient(.849px .849px at 4.959% 8.601%,rgba(248,250,252,.669),transparent),radial-gradient(.735px .735px at 81.352% 17.381%,rgba(248,250,252,.884),transparent),radial-gradient(.896px .896px at 7.578% 11.459%,rgba(248,250,252,.828),transparent),radial-gradient(1.185px 1.185px at 95.821% 32.967%,rgba(248,250,252,.367),transparent),radial-gradient(1.172px 1.172px at 45.196% 1.344%,rgba(248,250,252,.389),transparent),radial-gradient(.648px .648px at 80.298% 25.225%,rgba(248,250,252,.412),transparent),radial-gradient(1.428px 1.428px at 20.271% 32.404%,rgba(248,250,252,.406),transparent),radial-gradient(1.35px 1.35px at 31.32% 8.384%,rgba(248,250,252,.537),transparent),radial-gradient(.822px .822px at 3.006% .429%,rgba(248,250,252,.513),transparent),radial-gradient(1.491px 1.491px at 11.175% 54.044%,rgba(248,250,252,.571),transparent),radial-gradient(1.101px 1.101px at 45.132% 32.46%,rgba(248,250,252,.471),transparent),radial-gradient(1.075px 1.075px at 37.869% 56.664%,rgba(248,250,252,.656),transparent),radial-gradient(1.002px 1.002px at 30.486% 46.431%,rgba(248,250,252,.617),transparent),radial-gradient(1.293px 1.293px at .525% 64.759%,rgba(248,250,252,.603),transparent),radial-gradient(1.402px 1.402px at 8.497% 4.035%,rgba(248,250,252,.636),transparent),radial-gradient(1.348px 1.348px at 10.194% 10.045%,rgba(248,250,252,.837),transparent),radial-gradient(1.307px 1.307px at 75.843% 26.473%,rgba(248,250,252,.439),transparent),radial-gradient(1.409px 1.409px at 93.989% 51.906%,rgba(248,250,252,.392),transparent),radial-gradient(.788px .788px at 29.357% 47.232%,rgba(248,250,252,.81),transparent),radial-gradient(.758px .758px at 48.735% 3.016%,rgba(248,250,252,.881),transparent),radial-gradient(.755px .755px at 50.641% 11.526%,rgba(248,250,252,.547),transparent),radial-gradient(1.003px 1.003px at 41.97% 39.385%,rgba(248,250,252,.67),transparent),radial-gradient(1.319px 1.319px at 42.831% 49.31%,rgba(248,250,252,.569),transparent),radial-gradient(1.261px 1.261px at 1.919% 15.944%,rgba(248,250,252,.482),transparent),radial-gradient(.649px .649px at 21.828% 27.257%,rgba(248,250,252,.382),transparent),radial-gradient(1.091px 1.091px at 50.455% .561%,rgba(248,250,252,.529),transparent),radial-gradient(.95px .95px at 90.681% 14.163%,rgba(248,250,252,.441),transparent),radial-gradient(.816px .816px at 12.627% 48.866%,rgba(248,250,252,.77),transparent),radial-gradient(1.349px 1.349px at 9.49% 1.554%,rgba(248,250,252,.632),transparent),radial-gradient(.818px .818px at 65.181% 10.314%,rgba(248,250,252,.706),transparent),radial-gradient(1.29px 1.29px at 48.372% 10.013%,rgba(248,250,252,.799),transparent),radial-gradient(.969px .969px at 4.245% 66.445%,rgba(248,250,252,.387),transparent),radial-gradient(1.012px 1.012px at 95.668% 14.473%,rgba(248,250,252,.541),transparent),radial-gradient(.871px .871px at 80.156% 67.062%,rgba(248,250,252,.686),transparent),radial-gradient(.667px .667px at 76.279% 16.43%,rgba(248,250,252,.564),transparent),radial-gradient(1.26px 1.26px at 67.359% 2.9%,rgba(248,250,252,.391),transparent),radial-gradient(1.332px 1.332px at 97.496% 2.407%,rgba(248,250,252,.868),transparent),radial-gradient(1.337px 1.337px at 48.778% 17.86%,rgba(248,250,252,.417),transparent)}
.stars--b{background-image:radial-gradient(.61px .61px at 38.011% 28.334%,rgba(248,250,252,.665),transparent),radial-gradient(.919px .919px at 46.651% 21.386%,rgba(248,250,252,.385),transparent),radial-gradient(1.225px 1.225px at .23% 15.694%,rgba(248,250,252,.358),transparent),radial-gradient(.665px .665px at 68.684% 24.049%,rgba(248,250,252,.752),transparent),radial-gradient(.775px .775px at 62.171% 30.226%,rgba(248,250,252,.61),transparent),radial-gradient(.647px .647px at 90.338% 56.859%,rgba(248,250,252,.618),transparent),radial-gradient(.855px .855px at 13.409% 46.291%,rgba(248,250,252,.749),transparent),radial-gradient(.684px .684px at 70.917% 10.921%,rgba(248,250,252,.603),transparent),radial-gradient(1.093px 1.093px at 63.072% 34.104%,rgba(248,250,252,.81),transparent),radial-gradient(.986px .986px at 25.638% 11.373%,rgba(248,250,252,.471),transparent),radial-gradient(1.474px 1.474px at .375% 23.552%,rgba(248,250,252,.856),transparent),radial-gradient(1.008px 1.008px at 99.089% 54.166%,rgba(248,250,252,.691),transparent),radial-gradient(1.023px 1.023px at 59.841% 22.855%,rgba(248,250,252,.554),transparent),radial-gradient(.986px .986px at 19.115% 6.798%,rgba(248,250,252,.41),transparent),radial-gradient(1.203px 1.203px at 19.89% 46.429%,rgba(248,250,252,.441),transparent),radial-gradient(.814px .814px at 30.862% 7.166%,rgba(248,250,252,.714),transparent),radial-gradient(.84px .84px at 2.369% 5.83%,rgba(248,250,252,.898),transparent),radial-gradient(1.078px 1.078px at 52.336% 56.766%,rgba(248,250,252,.797),transparent),radial-gradient(1.098px 1.098px at 75.612% 24.468%,rgba(248,250,252,.652),transparent),radial-gradient(1.442px 1.442px at 68.505% 57.123%,rgba(248,250,252,.824),transparent),radial-gradient(.849px .849px at 77.344% 42.775%,rgba(248,250,252,.706),transparent),radial-gradient(.688px .688px at 83.316% 62.48%,rgba(248,250,252,.353),transparent),radial-gradient(.637px .637px at 75.105% 29.282%,rgba(248,250,252,.804),transparent),radial-gradient(1.278px 1.278px at 27.401% 20.906%,rgba(248,250,252,.579),transparent),radial-gradient(1.313px 1.313px at 75.959% 61.65%,rgba(248,250,252,.539),transparent),radial-gradient(.744px .744px at 19.861% .408%,rgba(248,250,252,.861),transparent),radial-gradient(.804px .804px at 97.393% .326%,rgba(248,250,252,.646),transparent),radial-gradient(1.226px 1.226px at 48.109% 49.367%,rgba(248,250,252,.698),transparent),radial-gradient(1.01px 1.01px at 20.559% 28.34%,rgba(248,250,252,.689),transparent),radial-gradient(.963px .963px at 14.577% 28.204%,rgba(248,250,252,.588),transparent),radial-gradient(.645px .645px at 3.044% 61.564%,rgba(248,250,252,.714),transparent),radial-gradient(.695px .695px at 89.559% 38.546%,rgba(248,250,252,.65),transparent),radial-gradient(1.104px 1.104px at 56.031% 59.667%,rgba(248,250,252,.79),transparent),radial-gradient(.753px .753px at 73.519% 32.436%,rgba(248,250,252,.476),transparent),radial-gradient(1.485px 1.485px at 26.205% 48.817%,rgba(248,250,252,.864),transparent),radial-gradient(.968px .968px at 61.347% 6.767%,rgba(248,250,252,.747),transparent),radial-gradient(.995px .995px at 94.605% 59.141%,rgba(248,250,252,.669),transparent),radial-gradient(1.231px 1.231px at 92.366% 22.11%,rgba(248,250,252,.891),transparent),radial-gradient(1.309px 1.309px at 31.762% 26.155%,rgba(248,250,252,.848),transparent),radial-gradient(1.179px 1.179px at 19.179% 43.557%,rgba(248,250,252,.387),transparent),radial-gradient(1.055px 1.055px at 70.631% 65.669%,rgba(248,250,252,.583),transparent),radial-gradient(.643px .643px at 75.974% 41.492%,rgba(248,250,252,.367),transparent),radial-gradient(.876px .876px at 53.182% 58.21%,rgba(248,250,252,.893),transparent),radial-gradient(1.314px 1.314px at 35.096% 13.583%,rgba(248,250,252,.748),transparent),radial-gradient(.964px .964px at 18.693% 9.033%,rgba(248,250,252,.764),transparent),radial-gradient(.79px .79px at 78.99% 25.79%,rgba(248,250,252,.735),transparent)}
@keyframes aurora{0%{opacity:0}6.944%{opacity:1}83.333%{opacity:1}93.056%{opacity:0}100%{opacity:0}}
.curtains{animation-name:aurora}
@keyframes aurora-x0{0%{transform:translateX(0cqw)}8.667%{transform:translateX(0cqw)}9.778%{transform:translateX(9.091cqw)}12.694%{transform:translateX(9.091cqw)}13.806%{transform:translateX(18.182cqw)}19.222%{transform:translateX(18.182cqw)}20.333%{transform:translateX(27.273cqw)}94.444%{transform:translateX(27.273cqw)}94.583%{transform:translateX(0cqw)}100%{transform:translateX(0cqw)}}
@keyframes aurora-g0{0%{opacity:0}8.333%{opacity:0}8.667%{opacity:1}10.5%{opacity:1}10.833%{opacity:0}12.361%{opacity:0}12.694%{opacity:1}13.556%{opacity:1}13.889%{opacity:0}18.889%{opacity:0}19.222%{opacity:1}20.083%{opacity:1}20.417%{opacity:0}28.472%{opacity:0}28.806%{opacity:1}29.111%{opacity:1}29.444%{opacity:0}38.056%{opacity:0}38.389%{opacity:1}38.694%{opacity:1}39.028%{opacity:0}100%{opacity:0}}
.ribbon:nth-child(1){animation-name:aurora-x0}.ribbon:nth-child(1)::after{animation-name:aurora-g0}
@keyframes aurora-x1{0%{transform:translateX(0cqw)}8.667%{transform:translateX(0cqw)}9.778%{transform:translateX(-9.091cqw)}94.444%{transform:translateX(-9.091cqw)}94.583%{transform:translateX(0cqw)}100%{transform:translateX(0cqw)}}
@keyframes aurora-g1{0%{opacity:0}8.333%{opacity:0}8.667%{opacity:1}9.528%{opacity:1}9.861%{opacity:0}13.889%{opacity:0}14.222%{opacity:1}14.528%{opacity:1}14.861%{opacity:0}21.944%{opacity:0}22.278%{opacity:1}22.583%{opacity:1}22.917%{opacity:0}100%{opacity:0}}
.ribbon:nth-child(2){animation-name:aurora-x1}.ribbon:nth-child(2)::after{animation-name:aurora-g1}
@keyframes aurora-x2{0%{transform:translateX(0cqw)}11.167%{transform:translateX(0cqw)}12.278%{transform:translateX(9.091cqw)}17.694%{transform:translateX(9.091cqw)}18.806%{transform:translateX(18.182cqw)}27.278%{transform:translateX(18.182cqw)}28.389%{transform:translateX(27.273cqw)}35.333%{transform:translateX(27.273cqw)}36.444%{transform:translateX(36.364cqw)}94.444%{transform:translateX(36.364cqw)}94.583%{transform:translateX(0cqw)}100%{transform:translateX(0cqw)}}
@keyframes aurora-g2{0%{opacity:0}9.861%{opacity:0}10.194%{opacity:1}12.028%{opacity:1}12.361%{opacity:0}14.861%{opacity:0}15.194%{opacity:1}15.5%{opacity:1}15.833%{opacity:0}17.361%{opacity:0}17.694%{opacity:1}18.556%{opacity:1}18.889%{opacity:0}26.944%{opacity:0}27.278%{opacity:1}28.139%{opacity:1}28.472%{opacity:0}35%{opacity:0}35.333%{opacity:1}36.194%{opacity:1}36.528%{opacity:0}43.611%{opacity:0}43.944%{opacity:1}44.25%{opacity:1}44.583%{opacity:0}100%{opacity:0}}
.ribbon:nth-child(3){animation-name:aurora-x2}.ribbon:nth-child(3)::after{animation-name:aurora-g2}
@keyframes aurora-x3{0%{transform:translateX(0cqw)}11.167%{transform:translateX(0cqw)}12.278%{transform:translateX(-9.091cqw)}12.694%{transform:translateX(-9.091cqw)}13.806%{transform:translateX(-18.182cqw)}20.75%{transform:translateX(-18.182cqw)}21.861%{transform:translateX(-9.091cqw)}94.444%{transform:translateX(-9.091cqw)}94.583%{transform:translateX(0cqw)}100%{transform:translateX(0cqw)}}
@keyframes aurora-g3{0%{opacity:0}10.833%{opacity:0}11.167%{opacity:1}14.528%{opacity:1}14.861%{opacity:0}20.417%{opacity:0}20.75%{opacity:1}21.611%{opacity:1}21.944%{opacity:0}100%{opacity:0}}
.ribbon:nth-child(4){animation-name:aurora-x3}.ribbon:nth-child(4)::after{animation-name:aurora-g3}
@keyframes aurora-x4{0%{transform:translateX(0cqw)}16.167%{transform:translateX(0cqw)}17.278%{transform:translateX(9.091cqw)}25.75%{transform:translateX(9.091cqw)}26.861%{transform:translateX(18.182cqw)}33.806%{transform:translateX(18.182cqw)}34.917%{transform:translateX(27.273cqw)}42.417%{transform:translateX(27.273cqw)}43.528%{transform:translateX(36.364cqw)}94.444%{transform:translateX(36.364cqw)}94.583%{transform:translateX(0cqw)}100%{transform:translateX(0cqw)}}
@keyframes aurora-g4{0%{opacity:0}14.861%{opacity:0}15.194%{opacity:1}17.028%{opacity:1}17.361%{opacity:0}22.917%{opacity:0}23.25%{opacity:1}23.556%{opacity:1}23.889%{opacity:0}25.417%{opacity:0}25.75%{opacity:1}26.611%{opacity:1}26.944%{opacity:0}33.472%{opacity:0}33.806%{opacity:1}34.667%{opacity:1}35%{opacity:0}42.083%{opacity:0}42.417%{opacity:1}43.278%{opacity:1}43.611%{opacity:0}100%{opacity:0}}
.ribbon:nth-child(5){animation-name:aurora-x4}.ribbon:nth-child(5)::after{animation-name:aurora-g4}
@keyframes aurora-x5{0%{transform:translateX(0cqw)}16.167%{transform:translateX(0cqw)}17.278%{transform:translateX(-9.091cqw)}17.694%{transform:translateX(-9.091cqw)}18.806%{transform:translateX(-18.182cqw)}19.222%{transform:translateX(-18.182cqw)}20.333%{transform:translateX(-27.273cqw)}20.75%{transform:translateX(-27.273cqw)}21.861%{transform:translateX(-36.364cqw)}94.444%{transform:translateX(-36.364cqw)}94.583%{transform:translateX(0cqw)}100%{transform:translateX(0cqw)}}
@keyframes aurora-g5{0%{opacity:0}15.833%{opacity:0}16.167%{opacity:1}22.583%{opacity:1}22.917%{opacity:0}100%{opacity:0}}
.ribbon:nth-child(6){animation-name:aurora-x5}.ribbon:nth-child(6)::after{animation-name:aurora-g5}
@keyframes aurora-x6{0%{transform:translateX(0cqw)}24.222%{transform:translateX(0cqw)}25.333%{transform:translateX(9.091cqw)}32.278%{transform:translateX(9.091cqw)}33.389%{transform:translateX(18.182cqw)}40.889%{transform:translateX(18.182cqw)}42%{transform:translateX(27.273cqw)}94.444%{transform:translateX(27.273cqw)}94.583%{transform:translateX(0cqw)}100%{transform:translateX(0cqw)}}
@keyframes aurora-g6{0%{opacity:0}22.917%{opacity:0}23.25%{opacity:1}25.083%{opacity:1}25.417%{opacity:0}29.444%{opacity:0}29.778%{opacity:1}30.083%{opacity:1}30.417%{opacity:0}31.944%{opacity:0}32.278%{opacity:1}33.139%{opacity:1}33.472%{opacity:0}40.556%{opacity:0}40.889%{opacity:1}41.75%{opacity:1}42.083%{opacity:0}100%{opacity:0}}
.ribbon:nth-child(7){animation-name:aurora-x6}.ribbon:nth-child(7)::after{animation-name:aurora-g6}
@keyframes aurora-x7{0%{transform:translateX(0cqw)}24.222%{transform:translateX(0cqw)}25.333%{transform:translateX(-9.091cqw)}25.75%{transform:translateX(-9.091cqw)}26.861%{transform:translateX(-18.182cqw)}27.278%{transform:translateX(-18.182cqw)}28.389%{transform:translateX(-27.273cqw)}36.861%{transform:translateX(-27.273cqw)}37.972%{transform:translateX(-18.182cqw)}94.444%{transform:translateX(-18.182cqw)}94.583%{transform:translateX(0cqw)}100%{transform:translateX(0cqw)}}
@keyframes aurora-g7{0%{opacity:0}23.889%{opacity:0}24.222%{opacity:1}29.111%{opacity:1}29.444%{opacity:0}36.528%{opacity:0}36.861%{opacity:1}37.722%{opacity:1}38.056%{opacity:0}100%{opacity:0}}
.ribbon:nth-child(8){animation-name:aurora-x7}.ribbon:nth-child(8)::after{animation-name:aurora-g7}
@keyframes aurora-x8{0%{transform:translateX(0cqw)}30.75%{transform:translateX(0cqw)}31.861%{transform:translateX(9.091cqw)}39.361%{transform:translateX(9.091cqw)}40.472%{transform:translateX(18.182cqw)}94.444%{transform:translateX(18.182cqw)}94.583%{transform:translateX(0cqw)}100%{transform:translateX(0cqw)}}
@keyframes aurora-g8{0%{opacity:0}29.444%{opacity:0}29.778%{opacity:1}31.611%{opacity:1}31.944%{opacity:0}39.028%{opacity:0}39.361%{opacity:1}40.222%{opacity:1}40.556%{opacity:0}100%{opacity:0}}
.ribbon:nth-child(9){animation-name:aurora-x8}.ribbon:nth-child(9)::after{animation-name:aurora-g8}
@keyframes aurora-x9{0%{transform:translateX(0cqw)}30.75%{transform:translateX(0cqw)}31.861%{transform:translateX(-9.091cqw)}32.278%{transform:translateX(-9.091cqw)}33.389%{transform:translateX(-18.182cqw)}33.806%{transform:translateX(-18.182cqw)}34.917%{transform:translateX(-27.273cqw)}35.333%{transform:translateX(-27.273cqw)}36.444%{transform:translateX(-36.364cqw)}36.861%{transform:translateX(-36.364cqw)}37.972%{transform:translateX(-45.455cqw)}94.444%{transform:translateX(-45.455cqw)}94.583%{transform:translateX(0cqw)}100%{transform:translateX(0cqw)}}
@keyframes aurora-g9{0%{opacity:0}30.417%{opacity:0}30.75%{opacity:1}38.694%{opacity:1}39.028%{opacity:0}100%{opacity:0}}
.ribbon:nth-child(10){animation-name:aurora-x9}.ribbon:nth-child(10)::after{animation-name:aurora-g9}
@keyframes aurora-x10{0%{transform:translateX(0cqw)}39.361%{transform:translateX(0cqw)}40.472%{transform:translateX(-9.091cqw)}40.889%{transform:translateX(-9.091cqw)}42%{transform:translateX(-18.182cqw)}42.417%{transform:translateX(-18.182cqw)}43.528%{transform:translateX(-27.273cqw)}94.444%{transform:translateX(-27.273cqw)}94.583%{transform:translateX(0cqw)}100%{transform:translateX(0cqw)}}
@keyframes aurora-g10{0%{opacity:0}39.028%{opacity:0}39.361%{opacity:1}44.25%{opacity:1}44.583%{opacity:0}100%{opacity:0}}
.ribbon:nth-child(11){animation-name:aurora-x10}.ribbon:nth-child(11)::after{animation-name:aurora-g10}
@keyframes scan{0%{transform:translateX(0cqw);opacity:0}28.194%{transform:translateX(0cqw);opacity:0}29.167%{transform:translateX(0cqw);opacity:1}40.833%{transform:translateX(100cqw);opacity:1}41.806%{transform:translateX(100cqw);opacity:0}42.083%{transform:translateX(100cqw);opacity:0}42.222%{transform:translateX(0cqw);opacity:0}100%{transform:translateX(0cqw);opacity:0}}
@keyframes sweep{0%{transform:translateX(0cqw);opacity:0}28.889%{transform:translateX(0cqw);opacity:0}29.167%{transform:translateX(0cqw);opacity:1}40.833%{transform:translateX(100cqw);opacity:1}45.978%{transform:translateX(100cqw);opacity:1}48.756%{transform:translateX(100cqw);opacity:0}48.894%{transform:translateX(100cqw);opacity:0}49.033%{transform:translateX(0cqw);opacity:0}100%{transform:translateX(0cqw);opacity:0}}
@keyframes sweep-in{0%{transform:translateX(0cqw)}29.167%{transform:translateX(0cqw)}40.833%{transform:translateX(-100cqw)}48.894%{transform:translateX(-100cqw)}49.033%{transform:translateX(0cqw)}100%{transform:translateX(0cqw)}}
@keyframes link{0%{opacity:.85;transform:scaleX(0)}.694%{opacity:.85;transform:scaleX(1)}.972%{opacity:.85;transform:scaleX(1)}2.361%{opacity:.3;transform:scaleX(1)}20.394%{opacity:.3;transform:scaleX(1)}20.533%{opacity:.85;transform:scaleX(0)}100%{opacity:.85;transform:scaleX(0)}}
@keyframes back{0%{transform:translateX(0cqw);opacity:0}41.394%{transform:translateX(0cqw);opacity:0}41.672%{transform:translateX(0cqw);opacity:1}41.922%{transform:translateX(0cqw);opacity:1}42.228%{transform:translateX(-9cqw);opacity:1}42.839%{transform:translateX(-27cqw);opacity:1}43.45%{transform:translateX(-44cqw);opacity:1}44.061%{transform:translateX(-61cqw);opacity:1}44.672%{transform:translateX(-78cqw);opacity:1}45.283%{transform:translateX(-95cqw);opacity:1}45.561%{transform:translateX(-110cqw);opacity:1}45.978%{transform:translateX(-110cqw);opacity:1}48.756%{transform:translateX(-110cqw);opacity:0}48.894%{transform:translateX(-110cqw);opacity:0}49.033%{transform:translateX(0cqw);opacity:0}100%{transform:translateX(0cqw);opacity:0}}
@keyframes back-in{0%{transform:translateX(0cqw)}41.922%{transform:translateX(0cqw)}42.228%{transform:translateX(9cqw)}42.839%{transform:translateX(27cqw)}43.45%{transform:translateX(44cqw)}44.061%{transform:translateX(61cqw)}44.672%{transform:translateX(78cqw)}45.283%{transform:translateX(95cqw)}45.561%{transform:translateX(110cqw)}48.894%{transform:translateX(110cqw)}49.033%{transform:translateX(0cqw)}100%{transform:translateX(0cqw)}}
@keyframes answer{0%{opacity:0}41.394%{opacity:0}41.672%{opacity:1}81.667%{opacity:1}85.833%{opacity:0}100%{opacity:0}}
@keyframes pick{0%{opacity:0;transform:scale(2.2)}.417%{opacity:1;transform:scale(1.7)}1.528%{opacity:1;transform:scale(1)}43.828%{opacity:1;transform:scale(1)}43.967%{opacity:0;transform:scale(2.2)}100%{opacity:0;transform:scale(2.2)}}
@keyframes rise{0%{transform:translateX(0cqw)}45.816%{transform:translateX(0cqw)}49.046%{transform:translateX(100cqw)}86.111%{transform:translateX(100cqw)}86.25%{transform:translateX(0cqw)}100%{transform:translateX(0cqw)}}
@keyframes rise-in{0%{transform:translateX(0cqw)}45.816%{transform:translateX(0cqw)}49.046%{transform:translateX(-100cqw)}86.111%{transform:translateX(-100cqw)}86.25%{transform:translateX(0cqw)}100%{transform:translateX(0cqw)}}
@keyframes peak{0%{opacity:0;transform:scale(.3)}42.228%{opacity:0;transform:scale(.3)}42.922%{opacity:.75;transform:scale(.62)}48.617%{opacity:.75;transform:scale(.62)}49.45%{opacity:1;transform:scale(1.25)}50.144%{opacity:1;transform:scale(1)}86.944%{opacity:1;transform:scale(1)}92.639%{opacity:0;transform:scale(.6)}92.778%{opacity:0;transform:scale(.3)}100%{opacity:0;transform:scale(.3)}}
@keyframes burst{0%{opacity:0;transform:scale(.4)}48.478%{opacity:0;transform:scale(.4)}49.172%{opacity:.9;transform:scale(1)}52.089%{opacity:0;transform:scale(1.7)}52.228%{opacity:0;transform:scale(1.7)}52.367%{opacity:0;transform:scale(.4)}100%{opacity:0;transform:scale(.4)}}
@keyframes field{0%{opacity:0}1.667%{opacity:0}7.222%{opacity:1}77.778%{opacity:1}81.944%{opacity:0}100%{opacity:0}}
@keyframes dim-1{0%{opacity:1}56.667%{opacity:1}57.917%{opacity:.16}84.722%{opacity:.16}87.5%{opacity:1}100%{opacity:1}}.post.k1{animation-name:dim-1}
@keyframes dim-2{0%{opacity:1}61.667%{opacity:1}62.917%{opacity:.16}84.722%{opacity:.16}87.5%{opacity:1}100%{opacity:1}}.post.k2{animation-name:dim-2}
@keyframes dim-3{0%{opacity:1}66.667%{opacity:1}67.917%{opacity:.16}84.722%{opacity:.16}87.5%{opacity:1}100%{opacity:1}}.post.k3{animation-name:dim-3}
@keyframes mark{0%{opacity:0}51.111%{opacity:0}52.778%{opacity:1}84.722%{opacity:1}87.5%{opacity:0}100%{opacity:0}}
@keyframes probe{0%{transform:translateX(46.667cqw);opacity:0}54.167%{transform:translateX(46.667cqw);opacity:0}55.278%{transform:translateX(46.667cqw);opacity:1}59.167%{transform:translateX(46.667cqw);opacity:1}60.556%{transform:translateX(73.333cqw);opacity:1}64.167%{transform:translateX(73.333cqw);opacity:1}65.556%{transform:translateX(60cqw);opacity:1}69.167%{transform:translateX(60cqw);opacity:1}70.556%{transform:translateX(66.667cqw);opacity:1}84.722%{transform:translateX(66.667cqw);opacity:1}87.5%{transform:translateX(66.667cqw);opacity:0}88.889%{transform:translateX(66.667cqw);opacity:0}89.028%{transform:translateX(46.667cqw);opacity:0}100%{transform:translateX(46.667cqw);opacity:0}}
@keyframes found{0%{opacity:0}70.556%{opacity:0}71.944%{opacity:1}84.722%{opacity:1}87.5%{opacity:0}100%{opacity:0}}
/* gen:end */