/* ═══════════════════════════════════════════
   the-names: names in gold (screens.md §2, pages.md "the-names")

   The second page of the arch set. This section is pulled up one page so its
   page box lies over the second half of [data-sv-set="arch"]; the arch's sticky
   stack (sky, frame, vines, lotus, butterflies) is the-opening's and shows
   through. This page draws only: ring glow, dusk disc, wreath, #svNamesFx and
   the names. Everything here rides parallax rate 0.

   Ring geometry is MEASURED from wreath.webp's alpha (800 x 800), not the
   72% estimate: the thin gold ring's centre is (50%, 44.95%) of the image,
   its clear interior is 84.75% of the image width, and the base flower
   cluster rises to 61.25% of the image height. js/the-names.js uses the same
   numbers (RING) to fit the names and aim the shot.

   The discs sit UNDER the wreath (not over it, as pages.md lists them): the
   measured interior reaches down into the flower cluster, and a disc on top
   would dim the flowers the gold bursts out of. Under the wreath they fill
   exactly the ring's transparent hole.

   Timeline (ms from data-sv-ready, which is set at settle once the wreath has
   decoded and Cinzel has loaded, bounded at 1500 ms; the shot's `at` is the
   same instant + 600 ms, so CSS and particles share one clock). Phase G fix:
   the burst plays on the pastel ring, the dusk comes in only for the gather
   and lifts as the names part, and the light is gone before they part:
     0     wreath in (700, expo-out)
     600   nameAssemble hits (JS); the canvas spans the page, so the burst's
           fall over the flowers and the gather rising back stay visible
     2700  dusk disc in, to 0.8 (800, silk): the gather enters the ring ~3000
     3900  particles have landed (hit + 3.3 s); the one-line copy fades in
           ON them, --names-lit (200, silk)
     3950  JS stops the shot (the engine's 0.5 s fade): no light by 4450
     4500  line swaps for the stack; the stack FLIPs from the line's boxes
           (600, expo-out); dusk lifts and glow comes on (600, silk); the
           names' lit layer fades off the ink layer (600, silk)
     5100  done
   Colour is never animated: each word holds an ink layer (--ink-names) under
   an aria-hidden lit layer (--names-lit) whose opacity fades, so only
   opacity / transform animate.
   ═══════════════════════════════════════════ */

#screen-the-names {
    margin-top: -100dvh;
}

.the-names-container {
    position: relative;
    height: 100dvh;
    overflow: clip;
    scroll-snap-align: start;
    scroll-snap-stop: always;
    background: transparent;
}

/* The wreath's square box. Its RING centre (not the image centre) sits at 40%
   of the page. 64dvh keeps the ring on a short landscape page. */
.the-names-ring {
    --the-names-w: min(100cqi, 480px, 64dvh);
    --the-names-cy: 44.95%;                          /* JS: the names' centre, px */
    --the-names-size: var(--type-name-ring-max);     /* JS: the stack, 24-42px */
    --the-names-line-size: 1.625rem;                 /* JS: the one-line copy, >= 16px */
    position: absolute;
    left: 0;
    right: 0;
    margin-inline: auto;
    width: var(--the-names-w);
    height: var(--the-names-w);
    top: calc(40% - 0.4495 * var(--the-names-w));
    pointer-events: none;
}

/* ───── Ring glow + dusk disc: exactly the ring's measured interior ───── */
.the-names-glow,
.the-names-dusk {
    position: absolute;
    left: 7.625%;
    top: 2.575%;
    width: 84.75%;
    height: 84.75%;
    border-radius: 50%;
    opacity: 0;
}

.the-names-glow {
    background: var(--ring-glow);
}

.the-names-dusk {
    background: var(--names-dusk);
}

.the-names-wreath {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    opacity: 0;
    transform-origin: 50% 44.95%;
}

/* The only canvas. ReveelHero draws it (and may insert a same-class twin).
   It covers the whole page, not just the wreath box: the burst falls under
   gravity and the gather rises from below, and a wreath-sized canvas clipped
   both (the ring sat empty for ~2 s). Offsets undo the ring's own position:
   the ring's top is 40% (= 40dvh) - 0.4495 W, and it is centred in 100cqi. */
.the-names-fx {
    position: absolute;
    left: calc((var(--the-names-w) - 100cqi) / 2);
    top: calc(0.4495 * var(--the-names-w) - 40dvh);
    width: 100cqi;
    height: 100dvh;
    pointer-events: none;
}

/* ───── The names. Cinzel 700, no tracking: the particles are drawn by canvas
   fillText, which has none, so the real text and the light are one shape. ───── */
.the-names-line,
.the-names-stack {
    position: absolute;
    margin: 0;
    font-family: var(--font-display);
    font-weight: 700;
    font-style: normal;
    letter-spacing: 0;
    line-height: 1.18;
    text-transform: none;
    text-align: center;
    white-space: nowrap;
}

/* The one-line copy the light lands on, then parts into the stack. */
.the-names-line {
    left: 0;
    right: 0;
    width: fit-content;
    margin-inline: auto;
    top: calc(var(--the-names-cy) - 0.59 * var(--the-names-line-size));
    font-size: var(--the-names-line-size);
    white-space: pre;
    color: var(--names-lit);
    opacity: 0;
}

.the-names-part {
    display: inline-block;
}

/* The stack, centred on --the-names-cy (3 lines x 1.18 / 2 = 1.77). */
.the-names-stack {
    left: 0;
    right: 0;
    top: calc(var(--the-names-cy) - 1.77 * var(--the-names-size));
    font-size: var(--the-names-size);
}

.the-names-word {
    position: relative;
    display: block;
    width: fit-content;
    margin-inline: auto;
    transform-origin: 0 0;
    opacity: 0;
}

.the-names-ink {
    color: var(--ink-names);
}

.the-names-lit {
    position: absolute;
    inset: 0;
    color: var(--names-lit);
}

/* ───── Entrance: [data-sv-state="entering"][data-sv-ready] ───── */
#the-names-page[data-sv-state="entering"][data-sv-ready]:not(.the-names-ended) .the-names-wreath {
    animation: the-names-wreath-in 700ms var(--ease-expo-out) both;
}

#the-names-page[data-sv-state="entering"][data-sv-ready]:not(.the-names-ended) .the-names-dusk {
    animation: the-names-dusk 5100ms linear both;
}

#the-names-page[data-sv-state="entering"][data-sv-ready]:not(.the-names-ended) .the-names-glow {
    animation: the-names-fade-in 600ms var(--ease-silk) 4500ms both;
}

#the-names-page[data-sv-state="entering"][data-sv-ready]:not(.the-names-ended) .the-names-line {
    animation: the-names-line-flash 600ms linear 3900ms both;
}

/* FLIP: JS writes --the-names-fx / -fy / -fs on each word (its one-line box). */
#the-names-page[data-sv-state="entering"][data-sv-ready]:not(.the-names-ended) .the-names-word {
    animation:
        the-names-flip 600ms var(--ease-expo-out) 4500ms both,
        the-names-fade-in 1ms linear 4500ms both;
}

#the-names-page[data-sv-state="entering"][data-sv-ready]:not(.the-names-ended) .the-names-lit {
    animation: the-names-fade-out 600ms var(--ease-silk) 4500ms both;
}

/* ───── End state: done, or jumped to by sv:leave / a name edit. No animation. ───── */
#the-names-page[data-sv-state="done"] .the-names-wreath,
#the-names-page.the-names-ended .the-names-wreath {
    animation: none;
    opacity: 1;
    transform: none;
}

#the-names-page[data-sv-state="done"] .the-names-dusk,
#the-names-page.the-names-ended .the-names-dusk {
    animation: none;
    opacity: 0;
}

#the-names-page[data-sv-state="done"] .the-names-line,
#the-names-page.the-names-ended .the-names-line {
    animation: none;
    opacity: 0;
}

#the-names-page[data-sv-state="done"] .the-names-word,
#the-names-page.the-names-ended .the-names-word {
    animation: none;
    opacity: 1;
    transform: none;
}

#the-names-page[data-sv-state="done"] .the-names-lit,
#the-names-page.the-names-ended .the-names-lit {
    animation: none;
    opacity: 0;
}

/* Idle loop: the ring glow breathes, only while the page is on screen. */
#the-names-page[data-sv-state="done"] .the-names-glow,
#the-names-page.the-names-ended .the-names-glow {
    opacity: 1;
    animation: the-names-breathe 6s var(--ease-breath) infinite;
    animation-play-state: paused;
}

#the-names-page[data-sv-view="on"][data-sv-state="done"] .the-names-glow,
#the-names-page[data-sv-view="on"].the-names-ended .the-names-glow {
    animation-play-state: running;
}

/* ───── Keyframes ───── */
@keyframes the-names-wreath-in {
    from { opacity: 0; transform: scale(0.94); }
    to   { opacity: 1; transform: none; }
}

@keyframes the-names-fade-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}

@keyframes the-names-fade-out {
    from { opacity: 1; }
    to   { opacity: 0; }
}

/* 0-5100 ms: in at 2700 ms to 0.8 (800, silk), hold, lift at 4500 ms (600, silk).
   0.8 x --names-dusk is a dusty mauve, not a black hole (centre ~#634448 over
   the peach sky). --names-lit on it: 5.75-6.39 at the centre, 3.18-3.75 at
   r = 0.82 (display >= 3); the light golds (230,200,120) 4.76-5.29 at the centre. */
@keyframes the-names-dusk {
    0%      { opacity: 0; }
    52.941% { opacity: 0; animation-timing-function: var(--ease-silk); }
    68.627% { opacity: 0.8; }
    88.235% { opacity: 0.8; animation-timing-function: var(--ease-silk); }
    100%    { opacity: 0; }
}

/* 3900-4500 ms: fade in over 200 ms as the light lands, hold while the light
   fades off it, then hand over to the stack. */
@keyframes the-names-line-flash {
    0%      { opacity: 0; animation-timing-function: var(--ease-silk); }
    33.333% { opacity: 1; }
    99.9%   { opacity: 1; }
    100%    { opacity: 0; }
}

@keyframes the-names-flip {
    from {
        transform: translate(var(--the-names-fx, 0px), var(--the-names-fy, 0px)) scale(var(--the-names-fs, 1));
    }
    to {
        transform: none;
    }
}

@keyframes the-names-breathe {
    0%, 100% { opacity: 1; }
    50%      { opacity: 0.85; }
}

/* 0-4600 ms (reduced motion): dusk to 0.8 at 250 ms (400), lift at 4000 ms (600). */
@keyframes the-names-dusk-calm {
    0%      { opacity: 0; }
    5.435%  { opacity: 0; animation-timing-function: var(--ease-silk); }
    14.13%  { opacity: 0.8; }
    86.957% { opacity: 0.8; animation-timing-function: var(--ease-silk); }
    100%    { opacity: 0; }
}

/* ───── Reduced motion: wreath fades in, dusk to 0.8, the calm shot, no FLIP.
   The stack cross-fades in at 1000 ms where the line of light was (JS stops
   the calm shot at the same moment), then lit -> ink as the dusk lifts. ───── */
@media (prefers-reduced-motion: reduce) {
    .the-names-line {
        display: none;
    }

    #the-names-page[data-sv-state="entering"][data-sv-ready]:not(.the-names-ended) .the-names-wreath {
        animation: the-names-fade-in 400ms var(--ease-silk) both;
    }

    #the-names-page[data-sv-state="entering"][data-sv-ready]:not(.the-names-ended) .the-names-dusk {
        animation: the-names-dusk-calm 4600ms linear both;
    }

    #the-names-page[data-sv-state="entering"][data-sv-ready]:not(.the-names-ended) .the-names-glow {
        animation: the-names-fade-in 600ms var(--ease-silk) 4000ms both;
    }

    #the-names-page[data-sv-state="entering"][data-sv-ready]:not(.the-names-ended) .the-names-word {
        animation: the-names-fade-in 400ms var(--ease-silk) 1000ms both;
    }

    #the-names-page[data-sv-state="entering"][data-sv-ready]:not(.the-names-ended) .the-names-lit {
        animation: the-names-fade-out 600ms var(--ease-silk) 4000ms both;
    }

    #the-names-page[data-sv-state="done"] .the-names-glow,
    #the-names-page.the-names-ended .the-names-glow {
        animation: none;
    }
}