/* The Golden Eye of Suriname -- public front door.

   Loaded only by the landing page, on top of app.css. The operational UI
   (counter, gate, checkout) keeps its own sky-blue chrome untouched; this file
   re-tints the shared tokens the way `body.staff` already does, then adds the
   sections that only exist on the front page.

   Palette comes off the brand artwork: an aubergine night sky going magenta
   and orange at the horizon, gold lettering, and the red neon of the Dolphins
   marquee. Two themes -- the night is the default and the identity; the light
   theme is the same sunset an hour earlier, gold and aubergine on warm ivory.
   Tokens are declared once here and overridden per theme; nothing downstream
   names a colour directly. */

body.eye {
  /* ---- night (default) ---- */
  --bg: #170a26;          /* deep aubergine sky */
  --panel: #241038;
  --panel-2: #32194b;
  --line: #40245c;
  --chrome: #1e0d31;      /* top bar */
  --ink: #f6ecda;
  --muted: #b39cc4;       /* violet-biased grey, not a default grey */
  --accent: #efc45c;      /* the gold of the wordmark */
  --accent-ink: #2b1608;

  --gold-hi: #fbe8b0;     /* lit edge of the gold */
  --gold-dim: #8a6a24;    /* gold at rule/hairline weight */
  --sunset: #e8823c;      /* horizon orange */
  --magenta: #b8478a;     /* the cloud band above it */
  --band: #100618;        /* ground under the darker sections */

  --sky-horizon: #e8823c;

  /* Celebration sparks. Against the night these are lit filament -- almost
     white at the core. The light theme cannot use the same trick, so it takes
     a saturated amber instead; a pale gold would vanish into the ivory. */
  --spark-core: #fff4d2;
  --spark-edge: #efc45c;
  --spark-glow: rgba(239, 196, 92, .5);

  /* The darker bands are a see-through tint over the sky rather than a solid
     slab. --band-seen is the colour that tint lands on, for the few things
     that must stay opaque on top of it (timeline rings masking their line). */
  --band-glass: color-mix(in srgb, var(--band) 45%, transparent);
  --band-seen: color-mix(in srgb, var(--band) 45%, var(--bg));

  --serif: "Cormorant Garamond", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
  /* Cormorant draws its lowercase small for its size; this normalises the
     x-height to what the type steps were set for, so a fallback face lands
     at the same visual size if the web font fails to load. */
  --serif-adjust: .44;
  /* Inter, as a variable font: one file covers every weight from labels to
     buttons, and its optical-size axis tightens the letterforms at display
     sizes and opens them up in small print on its own. Figures are set
     tabular wherever numbers need to line up in a column. */
  --sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  --step--1: clamp(.78rem, .76rem + .1vw, .84rem);
  --step-0: clamp(1rem, .96rem + .2vw, 1.08rem);
  --step-1: clamp(1.15rem, 1.06rem + .45vw, 1.4rem);
  --step-2: clamp(1.5rem, 1.3rem + .9vw, 2.05rem);
  --step-3: clamp(2rem, 1.6rem + 1.8vw, 3.1rem);
  --step-4: clamp(2.4rem, 1.6rem + 3.9vw, 5rem);

  font-size: var(--step-0);
}

/* ---- daylight ----
   Not an inversion: the gold has to darken to stay legible on ivory, and the
   aubergine moves from ground to ink. Applied on an explicit choice, and on
   "auto" when the visitor's system asks for light. */

@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) body.eye {
    --bg: #faf4e9;
    --panel: #fffdf8;
    --panel-2: #f3ead9;
    --line: #e2d4bc;
    --chrome: #fffdf8;
    --ink: #2a1140;
    --muted: #6c5580;
    --accent: #8a5d0b;
    --accent-ink: #fffdf8;

    --gold-hi: #6e4a08;
    --gold-dim: #c9a24a;
    --sunset: #c25a1c;
    --magenta: #9c3a72;
    --band: #f2e9d8;

    --sky-horizon: #f0a25a;

    --spark-core: #f7c246;
    --spark-edge: #c9780f;
    --spark-glow: rgba(201, 120, 15, .3);
  }
}
:root[data-theme="light"] body.eye {
  --bg: #faf4e9;
  --panel: #fffdf8;
  --panel-2: #f3ead9;
  --line: #e2d4bc;
  --chrome: #fffdf8;
  --ink: #2a1140;
  --muted: #6c5580;
  --accent: #8a5d0b;
  --accent-ink: #fffdf8;

  --gold-hi: #6e4a08;
  --gold-dim: #c9a24a;
  --sunset: #c25a1c;
  --magenta: #9c3a72;
  --band: #f2e9d8;

  --sky-horizon: #f0a25a;

  --spark-core: #f7c246;
  --spark-edge: #c9780f;
  --spark-glow: rgba(201, 120, 15, .3);
}

body.eye .topbar { background: var(--chrome); border-bottom-color: var(--line); }
body.eye .brand { color: var(--accent); font-family: var(--serif); font-size-adjust: var(--serif-adjust); font-weight: 700; letter-spacing: .01em; }

/* The landing page is full-bleed; base.html's <main class="wrap"> is not. */
body.eye main.wrap { max-width: none; padding: 0; }
body.eye .messages { width: min(100% - 2.5rem, 1120px); margin: 1.25rem auto 0; }
body.eye .foot { padding-bottom: 3rem; }

body.eye { font-family: var(--sans); font-optical-sizing: auto; }

body.eye h1, body.eye h2, body.eye h3 {
  font-family: var(--serif);
  font-size-adjust: var(--serif-adjust);
  font-weight: 600;
  line-height: 1.07;
  text-wrap: balance;
  margin: 0;
}

.eye-wrap { width: min(100% - 2.5rem, 1120px); margin-inline: auto; }
.eye-section { padding-block: clamp(3.25rem, 6.5vw, 6rem); }
.eye-section--dark { background: var(--band); background: var(--band-glass); border-block: 1px solid var(--line); }

.eye-eyebrow {
  font-family: var(--sans);
  font-size: var(--step--1);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0;
}

.eye-head { display: flex; flex-direction: column; gap: .9rem; margin-bottom: 2.5rem; max-width: 62ch; }
.eye-head h2 { font-size: var(--step-3); }
.eye-head p { color: var(--muted); font-size: var(--step-1); line-height: 1.5; margin: 0; }

.eye-note { margin: 1.25rem 0 0; font-size: var(--step--1); color: var(--muted); max-width: 62ch; }

.visually-hidden {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

/* ---------- hero ---------- */

.eye-hero {
  position: relative;
  overflow: hidden;
  padding-block: clamp(1.75rem, 3.5vw, 3rem) clamp(2.5rem, 5vw, 4rem);
  border-bottom: 1px solid var(--line);
  background: var(--bg);
  background:
    radial-gradient(115% 80% at 68% 82%, color-mix(in srgb, var(--sky-horizon) 26%, transparent) 0%, transparent 60%),
    radial-gradient(120% 90% at 50% 100%, color-mix(in srgb, var(--magenta) 22%, transparent) 0%, transparent 65%),
    linear-gradient(180deg, var(--bg) 0%, color-mix(in srgb, var(--bg) 82%, var(--magenta)) 100%);
}

/* ---------- the key art ----------
   The banner is the operator's own, so it is framed rather than restyled: a
   gold hairline to seat it on either theme's ground, and nothing over the top
   of it -- the wordmark and tagline are already inside the picture. */

.eye-banner { display: block; margin: 0 0 clamp(1.5rem, 3vw, 2.5rem); }
.eye-banner img {
  display: block; width: 100%; height: auto;
  border: 1px solid var(--gold-dim);
  border-radius: 4px;
  box-shadow: 0 18px 44px -22px rgba(0, 0, 0, .75);
}

.eye-hero__bar { display: grid; gap: clamp(1.25rem, 3vw, 2.5rem); align-items: end; }
@media (min-width: 860px) {
  .eye-hero__bar { grid-template-columns: minmax(0, 1fr) auto; }
}
.eye-hero__copy { display: flex; flex-direction: column; gap: .8rem; }
.eye-hero__cta { display: flex; flex-direction: column; gap: .9rem; align-items: flex-start; }
@media (min-width: 860px) { .eye-hero__cta { align-items: flex-end; } }

.eye-roundel {
  width: clamp(120px, 24vw, 168px); height: auto;
  border-radius: 50%;
  border: 1px solid var(--gold-dim);
}

.eye-lede { font-size: var(--step-1); line-height: 1.45; max-width: 34ch; margin: 0; color: var(--ink); }

.eye-status {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: .5rem 1rem;
  padding: .6rem 1.1rem;
  border: 1px solid var(--gold-dim); border-radius: 999px;
  background: transparent;
  background: color-mix(in srgb, var(--accent) 9%, transparent);
}
.eye-status__dot {
  width: .5rem; height: .5rem; border-radius: 50%; align-self: center;
  background: var(--accent);
  box-shadow: 0 0 0 4px var(--gold-dim);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 20%, transparent);
  animation: eye-pulse 2.8s ease-in-out infinite;
}
@keyframes eye-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
.eye-status__label {
  font-family: var(--sans); font-size: var(--step--1);
  letter-spacing: .1em; text-transform: uppercase; color: var(--muted);
}
.eye-status__count {
  font-family: var(--sans); font-size: var(--step-0); font-weight: 500;
  color: var(--accent); font-variant-numeric: tabular-nums;
}

.eye-actions { display: flex; flex-wrap: wrap; gap: .7rem; }
.eye-btn {
  display: inline-block;
  font-family: var(--sans); font-size: var(--step--1);
  letter-spacing: .1em; text-transform: uppercase;
  padding: .8rem 1.4rem; border-radius: 2px;
  transition: transform .18s ease, background .18s ease, border-color .18s ease, color .18s ease;
}
.eye-btn:hover { text-decoration: none; transform: translateY(-2px); }
.eye-btn--solid { background: var(--accent); color: var(--accent-ink); border: 1px solid var(--accent); font-weight: 650; }
.eye-btn--solid:hover { background: var(--gold-hi); border-color: transparent; }
.eye-btn--solid:hover { background: color-mix(in srgb, var(--accent) 80%, var(--ink)); }
.eye-btn--ghost { border: 1px solid var(--line); color: var(--ink); }
.eye-btn--ghost:hover { border-color: var(--accent); color: var(--accent); }

@media (prefers-reduced-motion: reduce) {
  .eye-status__dot { animation: none; }
}

/* ---------- figure rail ---------- */

.eye-rail {
  display: grid; gap: 1px;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  background: var(--line);
  border-block: 1px solid var(--line);
}
.eye-rail__item { background: var(--bg); padding: 1.6rem 1.4rem; display: flex; flex-direction: column; gap: .3rem; }
.eye-rail__fig {
  font-family: var(--serif); font-size-adjust: var(--serif-adjust); font-size: var(--step-3); font-weight: 500; line-height: 1;
  color: var(--accent); font-variant-numeric: lining-nums tabular-nums; letter-spacing: -.01em;
}
.eye-rail__fig small { font-size: .42em; color: var(--muted); letter-spacing: .02em; margin-left: .12em; }
.eye-rail__key {
  font-family: var(--sans); font-size: var(--step--1);
  letter-spacing: .12em; text-transform: uppercase; color: var(--muted);
}

/* ---------- sightlines ---------- */

.eye-sights { border-top: 1px solid var(--line); }
.eye-sight {
  display: grid; grid-template-columns: 4.5rem 1fr; gap: .2rem 1.2rem;
  padding: 1.1rem .2rem; border-bottom: 1px solid var(--line); align-items: baseline;
}
.eye-sight__bearing { font-family: var(--sans); font-size: var(--step--1); color: var(--accent); letter-spacing: .08em; }
.eye-sight__name { font-family: var(--serif); font-size-adjust: var(--serif-adjust); font-weight: 600; font-size: var(--step-1); color: var(--ink); grid-column: 2 / -1; }
.eye-sight__dist { font-family: var(--sans); font-size: var(--step--1); color: var(--muted); font-variant-numeric: tabular-nums; grid-column: 2; }
.eye-sight__note { color: var(--muted); font-size: var(--step--1); line-height: 1.5; grid-column: 2 / -1; }
@media (min-width: 780px) {
  .eye-sight { grid-template-columns: 4.5rem minmax(0, 1fr) 6rem minmax(0, 15rem); }
  .eye-sight__name { grid-column: 2; }
  .eye-sight__dist { grid-column: 3; text-align: right; }
  .eye-sight__note { grid-column: 4; }
}

/* ---------- height comparison ---------- */

.eye-scale { display: grid; gap: clamp(2rem, 4vw, 3.5rem); }
@media (min-width: 880px) { .eye-scale { grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); align-items: center; } }
.eye-scale .eye-head { margin-bottom: 0; }
.eye-chart { width: 100%; height: auto; overflow: visible; }
.eye-chart .bar { fill: var(--panel); stroke: var(--line); stroke-width: 1; }
.eye-chart .bar-hero { fill: var(--panel); stroke: var(--accent); stroke-width: 1.5; }
.eye-chart .bar-hero { fill: color-mix(in srgb, var(--accent) 18%, transparent); }
.eye-chart .bar-label { font-family: var(--sans); font-size: 12px; fill: var(--muted); }
.eye-chart .bar-label-hero { fill: var(--accent); }
.eye-chart .bar-val { font-family: var(--sans); font-size: 13px; fill: var(--ink); font-variant-numeric: tabular-nums; }
.eye-chart .bar-val-hero { fill: var(--accent); font-weight: 500; }
.eye-chart .grid-line { stroke: var(--line); stroke-width: 1; }
.eye-chart .grid-text { font-family: var(--sans); font-size: 11px; fill: var(--muted); font-variant-numeric: tabular-nums; }

/* ---------- build timeline ---------- */

.eye-stage-item { display: grid; grid-template-columns: auto 1fr; gap: 0 1.4rem; padding-bottom: 2rem; }
.eye-stage-item__marker { display: flex; flex-direction: column; align-items: center; gap: .5rem; }
.eye-stage-item__ring {
  width: 2.1rem; height: 2.1rem; border-radius: 50%; flex: none;
  border: 1px solid var(--gold-dim); display: grid; place-items: center;
  font-family: var(--sans); font-size: .72rem; color: var(--accent); background: var(--band); background: var(--band-seen); font-variant-numeric: tabular-nums;
}
.eye-stage-item--done .eye-stage-item__ring { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
.eye-stage-item__line { width: 1px; flex: 1; background: var(--line); min-height: 1.25rem; }
.eye-stage-item:last-child .eye-stage-item__line { background: linear-gradient(var(--line), transparent); }
.eye-stage-item__when { font-family: var(--sans); font-size: var(--step--1); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); margin: 0; }
.eye-stage-item__what { font-size: var(--step-2); color: var(--ink); margin-top: .15rem; }
.eye-stage-item__body { color: var(--muted); max-width: 62ch; margin: .5rem 0 0; }
.eye-stage-item__sources { display: flex; gap: 1rem; margin: .6rem 0 0; font-family: var(--sans); font-size: var(--step--1); }
.eye-stage-item__sources a { color: var(--accent); text-decoration: none; border-bottom: 1px solid var(--gold-dim); }
.eye-stage-item__sources a:hover { border-color: currentColor; }
.eye-stage-item--next .eye-stage-item__what { color: var(--accent); }

/* ---------- build videos ---------- */

.eye-videos { display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: 1.4rem; margin-top: 1.6rem; }
.eye-video {
  all: unset; cursor: pointer; display: flex; flex-direction: column; gap: .6rem;
}
.eye-video__thumb, .eye-video--embed {
  position: relative; aspect-ratio: 16 / 9; border-radius: .6rem; overflow: hidden;
  background: var(--panel-2); width: 100%; border: 0;
}
.eye-video__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.eye-video__play {
  position: absolute; inset: 0; margin: auto; width: 3.4rem; height: 3.4rem; border-radius: 50%;
  background: rgba(10, 6, 16, .6); transition: background .15s ease;
}
.eye-video__play::after {
  content: ''; position: absolute; top: 50%; left: 55%; transform: translate(-50%, -50%);
  border-style: solid; border-width: .62rem 0 .62rem 1.05rem; border-color: transparent transparent transparent #fff;
}
.eye-video:hover .eye-video__play, .eye-video:focus-visible .eye-video__play { background: var(--accent); }
.eye-video:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: .6rem; }
.eye-video__title { font-family: var(--sans); font-size: var(--step--1); color: var(--ink); text-align: left; }

/* ---------- tickets ---------- */

.eye-tickets { display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); }
@media (min-width: 700px) { .eye-tickets { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); } }
.eye-ticket {
  background: var(--bg); padding: 1.5rem 1.4rem;
  display: flex; flex-direction: column; gap: .45rem; color: inherit;
}
.eye-ticket:hover { background: var(--panel); text-decoration: none; }
.eye-ticket h3 { font-size: var(--step-1); }
.eye-ticket .when, .eye-ticket .from {
  font-family: var(--sans); font-size: var(--step--1); color: var(--muted); letter-spacing: .02em; font-variant-numeric: tabular-nums;
}
.eye-ticket .from { color: var(--accent); margin-top: auto; padding-top: .5rem; }

.eye-empty {
  border: 1px dashed var(--line); border-radius: 4px;
  padding: 2.25rem 1.5rem; color: var(--muted);
  display: flex; flex-direction: column; gap: .6rem; align-items: flex-start;
}
.eye-empty strong { color: var(--ink); font-family: var(--serif); font-size-adjust: var(--serif-adjust); font-size: var(--step-1); font-weight: 600; }

/* ---------- visit ---------- */

.eye-visit { display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); }
@media (min-width: 720px) { .eye-visit { grid-template-columns: repeat(3, 1fr); } }
.eye-visit__cell { background: var(--bg); padding: 1.6rem 1.4rem; display: flex; flex-direction: column; gap: .55rem; }
.eye-visit__cell h3 { font-size: var(--step-1); color: var(--ink); }
.eye-visit__cell p { color: var(--muted); font-size: var(--step--1); line-height: 1.6; margin: 0; }
.eye-visit__key { font-family: var(--sans); font-size: var(--step--1); letter-spacing: .12em; text-transform: uppercase; color: var(--accent); }

/* ---------- footer wheel ----------
   The one moving thing on the page, and it sits at the bottom where it reads
   as a sign-off rather than competing with the key art. Same construction as
   before: each cabin rides an .orbit turning about the hub and wraps a .level
   turning the other way about its own attachment point, so it hangs upright
   all the way round. The single negative delay per cabin is what spaces them
   evenly on the rim. */

.eye-footwheel {
  display: block;
  width: clamp(96px, 13vw, 136px);
  height: auto;
  margin: 0 auto .9rem;
}
.eye-footwheel .fw-rim { fill: none; stroke: var(--accent); stroke-width: 2.4; }
.eye-footwheel .fw-rim-inner { fill: none; stroke: var(--gold-dim); stroke-width: 1.2; }
.eye-footwheel .fw-spoke { stroke: var(--accent); stroke-opacity: .3; stroke-width: 1; }
.eye-footwheel .fw-lamp { fill: var(--gold-hi); }
.eye-footwheel .fw-leg { fill: none; stroke: var(--gold-dim); stroke-width: 3; stroke-linecap: round; }
.eye-footwheel .fw-ground { stroke: var(--line); stroke-width: 1; }
.eye-footwheel .fw-hub-outer { fill: var(--bg); stroke: var(--accent); stroke-width: 1.8; }
.eye-footwheel .fw-hub-inner { fill: var(--accent); }
.eye-footwheel .fw-cabin { fill: var(--bg); stroke: var(--accent); stroke-width: 1.2; }
.eye-footwheel .fw-arm { stroke: var(--gold-dim); stroke-width: .9; }

.eye-footwheel .orbit {
  transform-box: view-box; transform-origin: 120px 110px;
  animation: eye-orbit 64s linear infinite;
}
.eye-footwheel .level {
  transform-box: view-box; transform-origin: 120px 22px;
  animation: eye-level 64s linear infinite;
}
@keyframes eye-orbit { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
@keyframes eye-level { from { transform: rotate(0deg); } to { transform: rotate(-360deg); } }

@media (prefers-reduced-motion: reduce) {
  .eye-footwheel .orbit, .eye-footwheel .level { animation-play-state: paused; }
}

/* ---------- closing ---------- */

.eye-close {
  text-align: center;
  border-top: 1px solid var(--line);
  background: var(--band);
  background:
    radial-gradient(110% 130% at 50% 120%, color-mix(in srgb, var(--sunset) 22%, transparent) 0%, transparent 62%),
    var(--band-glass);
}
.eye-close__inner { display: flex; flex-direction: column; align-items: center; gap: 1.35rem; }
.eye-close h2 { font-size: var(--step-3); }
.eye-close p { color: var(--muted); max-width: 52ch; margin: 0; }

/* ---------- motion ----------
   Everything below is additive polish: the page must read identically with it
   removed. The reveal is therefore scoped to .eye-anim, a class only the
   script sets, so without JavaScript nothing is ever left hidden. */

.eye-anim .eye-reveal {
  opacity: 0;
  transform: translateY(18px);
  transition:
    opacity 3s cubic-bezier(.22, .61, .36, 1),
    transform 3s cubic-bezier(.22, .61, .36, 1);
  transition-delay: var(--reveal-delay, 0s);
}
.eye-anim .eye-reveal.is-in { opacity: 1; transform: none; }
/* The script drops .is-in once a block is fully off screen so the reveal
   replays on the next pass. A transition takes its timing from the state being
   entered, so this makes that reset instant (and unseen) while the way back in
   keeps the full 3s fade. */
.eye-anim .eye-reveal:not(.is-in) { transition-duration: 0s; transition-delay: 0s; }

/* Hairline-gridded blocks (the rail, the sights, the visit cells) sit on a
   shared 1px background, so they lift by warming rather than by moving --
   a transform here would tear the grid lines apart. */
.eye-rail__item, .eye-visit__cell, .eye-sight, .eye-ticket {
  transition: background .3s ease, color .3s ease;
}
.eye-rail__item:hover, .eye-visit__cell:hover, .eye-sight:hover {
  background: color-mix(in srgb, var(--accent) 5%, var(--bg));
}
.eye-ticket { transition: background .3s ease, transform .3s cubic-bezier(.22, .61, .36, 1); }
.eye-roundel { transition: transform 1.1s cubic-bezier(.22, .61, .36, 1); }
.eye-close__inner:hover .eye-roundel { transform: rotate(8deg) scale(1.02); }

/* ---------- gold celebration dots ----------
   Sparks off the wheel's lamps, drifting up over the key art. Purely
   decorative: aria-hidden, pointer-events none, and built by script so that
   a reduced-motion visitor is never sent the markup at all. */

.eye-sparks {
  position: absolute; inset: 0;
  overflow: hidden; pointer-events: none;
  z-index: 1;
}
.eye-hero__bar, .eye-banner { position: relative; z-index: 2; }

.eye-spark {
  position: absolute;
  bottom: -6px;
  width: var(--size, 5px); height: var(--size, 5px);
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, var(--spark-core), var(--spark-edge) 60%, transparent 74%);
  box-shadow: 0 0 6px 1px var(--spark-glow);
  opacity: 0;
  animation: eye-spark-rise var(--dur, 9s) linear var(--delay, 0s) infinite;
}

@keyframes eye-spark-rise {
  0%   { transform: translate3d(0, 0, 0) scale(.4); opacity: 0; }
  10%  { opacity: var(--peak, .8); }
  75%  { opacity: var(--peak, .8); }
  100% { transform: translate3d(var(--drift, 14px), var(--rise, -420px), 0) scale(1); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .eye-anim .eye-reveal { opacity: 1; transform: none; transition: none; }
  .eye-sparks { display: none; }
  .eye-roundel, .eye-ticket { transition: none; }
}