/* ═══════════════════════════════════════════
   the-years — beat 3 (38 s, swipe, multi-step hold `years` at 8 s)
   Each photo surfaces from depth, then a swipe sends it up to its own
   star; the stars hang as a constellation, then fall as a road of light.

   Geometry: the camera looks up into the sky (--cam-y: 220px) for most of
   the beat, so the whole frame sits --the-years-lift above the stage and
   lands centred under that pose. The frame is a size container, so cqw /
   cqh are the stage's own width / height everywhere inside it.
   Every class and keyframe is prefixed `the-years-`.
   ═══════════════════════════════════════════ */

.the-years-container {
    --the-years-lift: 220px;            /* = the beat's camera y (js CAM_Y) */
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.the-years-frame {
    position: absolute;
    left: 0;
    width: 100%;
    height: 100%;
    top: calc(-1 * var(--the-years-lift));
    container-type: size;
    opacity: 0;
    transition: opacity 1.4s var(--ease-silk);
}

.the-years-container.the-years--entered .the-years-frame { opacity: 1; }

/* ───── The two lines ───── */
.the-years-line {
    position: absolute;
    left: 8%;
    right: 8%;
    margin: 0;
    text-align: center;
    font-family: var(--font-display);
    font-weight: 600;
    font-size: clamp(1.3rem, 5.8vw, 1.85rem);
    line-height: 1.25;
    letter-spacing: 0.005em;
    color: var(--text-primary);
    text-shadow: 0 0 22px var(--accent-warm-glow-soft), 0 1px 0 rgba(5, 5, 17, 0.6);
    text-wrap: balance;
    opacity: 0;
    transform: translateY(12px);
    transition: opacity 1.4s var(--ease-silk), transform 1.8s var(--ease-expo-out);
}

.the-years-line--high { top: var(--the-years-head-top, 22%); }   /* below the masthead, measured at entry */
.the-years-line--low { top: 70%; }   /* under the constellation, above the badge's quarter */

.the-years-line.the-years--on { opacity: 1; transform: none; }

/* ───── The sky: stars, and the thread between them ───── */
.the-years-sky {
    position: absolute;
    inset: 0;
    pointer-events: none;
    transform-origin: 50% 28%;
    translate: 0 var(--the-years-sky-shift, 0px);   /* below a tall masthead (js clearMasthead) */
    transition: transform 12s var(--ease-drift);
}

.the-years-container.the-years--constellation .the-years-sky { transform: rotate(2.5deg); }
.the-years-container.the-years--falling .the-years-sky { transform: none; transition-duration: 5s; }

.the-years-lines {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: visible;
    opacity: 0;
    clip-path: inset(0 100% 0 0);
    transition: clip-path 3.2s var(--ease-silk), opacity 1.2s var(--ease-silk);
}

.the-years-path {
    fill: none;
    stroke: var(--gilt-line-strong);
    stroke-width: 1;
    stroke-linejoin: round;
    vector-effect: non-scaling-stroke;
    opacity: 0.6;
}

.the-years-container.the-years--constellation .the-years-lines { opacity: 1; clip-path: inset(0 0 0 0); }
.the-years-container.the-years--shimmer .the-years-lines { opacity: 0; transition: opacity 1.6s var(--ease-silk); }

/* Per-item motion (label flicker, twinkle, the fall, trails) runs on Web
   Animations from js; this sheet holds each phase's END state only, with no
   per-item transitions or keyframes, so no DOM event fires per star. */
.the-years-stars {
    position: absolute;
    inset: 0;
    transition: opacity 1.4s var(--ease-silk);
}

.the-years-star {
    position: absolute;
    left: calc(var(--sx, 50) * 1%);
    top: calc(var(--sy, 30) * 1%);
    width: 40px;
    height: 40px;
    margin: -20px 0 0 -20px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.the-years-star-img {
    display: block;
    width: min(36px, calc(36px * var(--the-years-ar, 1.333)));
    aspect-ratio: var(--the-years-ar, 1.333);
    object-fit: cover;
    border: 1px solid var(--gilt-line-strong);
    box-shadow: var(--photo-star-glow);
    background: var(--bg-elevated);
    opacity: 0;
    transform: scale(0.3);
    transition: opacity 0.8s var(--ease-silk) 0.5s, transform 1.2s var(--ease-expo-out) 0.5s;
    -webkit-user-drag: none;
    user-select: none;
}

.the-years-star.the-years--lit .the-years-star-img { opacity: 1; transform: none; }

/* 0.84rem in the world reads >= 10.5 px through the constellation camera
   (z -200, 0.82x). Never clipped: it wraps (2 lines for 22 chars at N = 10). */
.the-years-star-label {
    position: absolute;
    top: calc(100% + 3px);
    left: 50%;
    width: max-content;
    max-width: calc(var(--the-years-lw, 24) * 1cqw);   /* per N: the same-row spacing, so neighbours clear */
    transform: translateX(-50%);
    font-family: var(--font-body);
    font-weight: 500;
    font-size: 0.84rem;
    line-height: 1.22;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    text-align: center;
    color: var(--text-secondary);
    text-shadow: 0 1px 6px rgba(5, 5, 17, 0.8);
    text-wrap: balance;
    overflow-wrap: break-word;   /* wraps, never clips */
    opacity: 0;
}

/* The outermost stars' labels align inward, so they stay on screen. */
.the-years-star.the-years-star--start .the-years-star-label { left: calc(20px - 6cqw); transform: none; text-align: left; }
.the-years-star.the-years-star--end .the-years-star-label { left: auto; right: calc(20px - 6cqw); transform: none; text-align: right; }

.the-years-container.the-years--constellation .the-years-star.the-years--lit .the-years-star-label { opacity: 0.92; }
.the-years-container.the-years--falling .the-years-star.the-years--lit .the-years-star-label { opacity: 0; }

/* The trail of light each star draws as it falls (animated from js). */
.the-years-star-trail {
    position: absolute;
    left: 50%;
    bottom: 50%;
    width: 2px;
    height: 72px;
    margin-left: -1px;
    border-radius: 1px;
    background: linear-gradient(to top, var(--light-core), var(--accent-warm-glow) 30%, transparent);
    opacity: 0;
    transform: scaleY(0.2);
    transform-origin: 50% 100%;
}

/* 21.5 s: the end state of the fall -- the stage floor, where
   years-in-order's tray catches them. The y term adds the lift back (the
   landing is in the camera's resting frame) and takes the sky shift out. */
.the-years-container.the-years--falling .the-years-star {
    transform: translate(
        calc((var(--lx, 50) - var(--sx, 50)) * 1cqw),
        calc((var(--ly, 86) - var(--sy, 30)) * 1cqh + var(--the-years-lift) - var(--the-years-sky-shift, 0px))
    );
}

/* 36.2 s: one fade for the whole sky, not one per star. */
.the-years-container.the-years--dim .the-years-stars { opacity: 0; }

/* ───── The deck: the photo on stage, surfacing from depth ───── */
.the-years-deck {
    position: absolute;
    inset: 0;
    /* The photo centres at 42.5% of the frame (43.5% on screen through the
       hold camera): photo + 2-line label end above where the badge guard
       lifts the badge over the hint (~73% at 360x640), and below the
       headline under a two-line masthead. */
    padding-bottom: 15cqh;
    box-sizing: border-box;
    display: grid;
    place-items: center;
    perspective: 900px;
    pointer-events: auto;
    touch-action: none;
    user-select: none;
    -webkit-user-select: none;
}

.the-years-photo {
    grid-area: 1 / 1;
    position: relative;
    margin: 0;
    pointer-events: none;
    opacity: 0;
    transform: translateZ(-600px);
    transition: transform 2.4s var(--ease-expo-out), opacity 1.2s var(--ease-silk);
}

.the-years-photo.the-years--up { opacity: 1; transform: none; }

/* A step: the next photo starts surfacing 0.5 s into the lift. */
.the-years-photo.the-years--up.the-years--delayed { transition-delay: 0.5s, 0.5s; }

/* A step: up and away into a small light at its own star. */
.the-years-photo.the-years--lifted {
    opacity: 0;
    transform: translate(
        calc((var(--sx, 50) - 50) * 1cqw),
        calc((var(--sy, 30) - 42.5) * 1cqh)
    ) scale(0.07);
    transition: transform 2.2s var(--ease-expo-out), opacity 0.9s var(--ease-silk) 0.45s;
}

.the-years-photo-frame {
    display: block;
    position: relative;
    line-height: 0;
    border: 1px solid var(--frame);
    box-shadow: var(--frame-shadow);
    background: var(--bg-elevated);
}

/* Shown whole, never cropped: the frame hugs the image's real ratio
   (--the-years-ar, set from the decoded image), inside an ~80vw x 54vh box
   as seen through the beat's camera (z -120 / -200 shrinks it ~12-18%). */
.the-years-photo-img {
    display: block;
    width: min(88cqw, calc(42cqh * var(--the-years-ar, 1.333)));
    aspect-ratio: var(--the-years-ar, 1.333);
    height: auto;
    object-fit: contain;
    -webkit-user-drag: none;
    user-select: none;
}

.the-years-photo-label {
    position: absolute;
    top: 100%;
    left: 50%;
    width: max-content;
    max-width: min(22ch, 80cqw);
    margin-top: 0.95rem;
    transform: translateX(-50%);
    font-family: var(--font-body);
    font-weight: 500;
    font-size: 0.8rem;
    line-height: 1.4;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    text-align: center;
    color: var(--accent-warm);
    text-wrap: balance;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    opacity: 0;
    clip-path: inset(0 100% 0 0);
    transition: clip-path 1.2s var(--ease-expo-out), opacity 0.7s var(--ease-silk);
}

.the-years-photo.the-years--labelled .the-years-photo-label { opacity: 1; clip-path: inset(0 0 0 0); }
.the-years-photo.the-years--delayed .the-years-photo-label { transition-delay: 2s; }
.the-years-photo.the-years--lifted .the-years-photo-label { opacity: 0; transition: opacity 0.3s var(--ease-silk); }

/* ───── Screen space: the lines, the hint and its button ─────
   Boot hoists .the-years-overlay to #stage, outside the camera world, so the
   control never moves while it is up (fade only) and the badge guard can
   lift above it. Shown only while this beat is live. */
.the-years-overlay {
    position: absolute;
    inset: 0;
    z-index: 5;
    pointer-events: none;
    display: none;
}

.the-years-overlay.the-years--live { display: block; }

/* Belt and braces: never outside this beat (dropped where :has is unsupported). */
.reveel-stage:has(.screen.active:not(#screen-the-years)) > .the-years-overlay { display: none; }

/* ───── The hint and its button ───── */
.the-years-hint {
    position: absolute;
    left: 0;
    right: 0;
    bottom: calc(5% + env(safe-area-inset-bottom, 0px));
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
    pointer-events: none;
}

.the-years-hint-text {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.35rem;
    opacity: 0;
    transition: opacity 0.8s var(--ease-silk);
}

.the-years-hint.the-years--on .the-years-hint-text { opacity: 1; }
.the-years-hint .the-years-hint-text.the-years--off { opacity: 0; }

.the-years-hint-copy {
    margin: 0;
    font-family: var(--font-body);
    font-weight: 500;
    font-size: 0.74rem;
    line-height: 1.3;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--accent-warm);
}

.the-years-chevs { display: grid; justify-items: center; height: 24px; }

.the-years-chev {
    width: 13px;
    height: 13px;
    margin-top: -6px;
    border-left: 2px solid var(--accent-warm);
    border-top: 2px solid var(--accent-warm);
    transform: rotate(45deg);
    animation: the-years-nudge 1.6s var(--ease-breath) infinite;
}

.the-years-chev + .the-years-chev { opacity: 0.45; animation-delay: 0.15s; }

/* Looping ornaments are parked while hidden. */
.the-years-hint:not(.the-years--on) .the-years-chev,
.the-years-hint-text.the-years--off .the-years-chev { animation: none; }

.the-years-next {
    font-family: var(--font-body);
    font-weight: 500;
    font-size: 0.88rem;
    line-height: 1;
    color: var(--text-primary);
    background: var(--glass);
    border: 1px solid var(--glass-border-hover);
    border-radius: 999px;
    padding: 0.8rem 1.45rem;
    min-height: 44px;
    cursor: pointer;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.6s var(--ease-silk), visibility 0s linear 0.6s;
}

.the-years-hint.the-years--on .the-years-next {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transition: opacity 0.6s var(--ease-silk), visibility 0s;
}

.the-years-next:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 3px; }

/* ───── Entry states are applied instantly (prepare / a re-render) ───── */
.the-years-container.the-years--instant,
.the-years-container.the-years--instant *,
.the-years-overlay.the-years--instant,
.the-years-overlay.the-years--instant * {
    transition: none !important;
    animation: none !important;
}

/* ───── Keyframes ───── */
@keyframes the-years-nudge {
    50% { transform: translateY(-7px) rotate(45deg); }
}

/* ───── Reduced motion: plays in full, calmer ─────
   No lift (the camera stays at rest), photos fade in in place, a swipe fades
   the photo out and its star in, and the fall becomes a slow fade-down. */
@media (prefers-reduced-motion: reduce) {
    .the-years-container { --the-years-lift: 0px; }

    .the-years-line,
    .the-years-line.the-years--on { transform: none; }

    .the-years-photo { transform: none; transition: opacity 1.2s var(--ease-silk); }
    .the-years-photo.the-years--lifted { transform: none; transition: opacity 1s var(--ease-silk); }
    .the-years-photo-img { width: min(80cqw, calc(36cqh * var(--the-years-ar, 1.333))); }
    .the-years-photo-label { clip-path: none; }

    .the-years-star-img { transform: none; transition: opacity 1.2s var(--ease-silk) 0.6s; }

    .the-years-sky,
    .the-years-container.the-years--constellation .the-years-sky,
    .the-years-container.the-years--falling .the-years-sky { transform: none; transition: none; }

    .the-years-lines { clip-path: none; transition: opacity 1.6s var(--ease-silk); }

    .the-years-container.the-years--falling .the-years-star { transform: none; opacity: 0.25; }

    /* No camera to frame it: the constellation is laid out as the camera
       would show it (82% of the width, labels >= 10.5 px). */
    .the-years-star { left: calc(9% + var(--sx, 50) * 0.82%); }
    .the-years-lines { transform: scaleX(0.82); }
    .the-years-star-label { font-size: 0.7rem; max-width: calc(var(--the-years-lw, 24) * 0.82cqw); }
    .the-years-star.the-years-star--start .the-years-star-label { left: calc(20px - 4.9cqw); }
    .the-years-star.the-years-star--end .the-years-star-label { right: calc(20px - 4.9cqw); }

    .the-years-chev { animation: none; }
}