/* ═══════════════════════════════════════════
   cap-toss — the second set piece: the recipient throws their cap and
   the sky answers on the music's one hit (goldBurst lives on the spine's
   fx-burst canvas; everything here is DOM light).

   Performance model: the CSS below is the beat's ENTRY state and nothing
   else. Every reveal, loop and flight is a Web Animation started from a
   cue in js/cap-toss.js (fill: forwards; prepare() cancels them all).
   Web Animations fire no DOM events and write no attributes, so the
   injected badge guard -- which re-measures the page on every class/style
   mutation and every transition/animation event -- stays asleep while the
   rain falls and the years come back. Every class is prefixed `cap-toss-`.
   ═══════════════════════════════════════════ */

.cap-toss-container {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: visible;
    color: var(--text-primary);
    font-family: var(--font-body);
    user-select: none;
    -webkit-user-select: none;
}

/* ───── The sky clears: a dim veil (the letter's hush) lifts away ───── */
.cap-toss-sky {
    position: absolute;
    inset: -20%;
    pointer-events: none;
    background:
        radial-gradient(120% 60% at 50% 100%, var(--sky-horizon-glow), transparent 64%),
        radial-gradient(90% 50% at 50% 0%, var(--sky-wine-haze), transparent 70%);
    opacity: 0.35;
}
.cap-toss-veil {
    position: absolute;
    inset: 0;
    background: var(--scrim);
    opacity: 0.7;
}

/* ───── The years, back overhead: the-years' own photos as small
   gilt-framed stars on an arc framing the name (from ~20 s) ───── */
.cap-toss-stars {
    position: absolute;
    inset: 0;
    pointer-events: none;
}
.cap-toss-star {
    position: absolute;
    left: calc(var(--cap-toss-sx, 50) * 1%);
    top: calc(var(--cap-toss-sy, 50) * 1%);
    height: 34px;
    width: min(46px, calc(34px * var(--cap-toss-ar, 1.333)));
    margin: -17px 0 0 calc(min(46px, calc(34px * var(--cap-toss-ar, 1.333))) / -2);
    opacity: 0;
}
.cap-toss-star::before {
    content: '';
    position: absolute;
    inset: -14px;
    border-radius: 50%;
    background: radial-gradient(closest-side, var(--halo), transparent);
}
.cap-toss-star-img {
    position: relative;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border: 1px solid var(--gilt-line-strong);
    box-shadow: var(--photo-star-glow);
    background: var(--bg-elevated);
    -webkit-user-drag: none;
}
.cap-toss-star-glint {
    position: relative;
    display: block;
    width: 10px; height: 10px;
    margin: 12px auto 0;
    border-radius: 50%;
    background: radial-gradient(circle, var(--light-core) 0%, var(--accent-warm) 55%, transparent 72%);
    box-shadow: var(--photo-star-glow);
}

/* ───── Under the name: "{classOf}", then the one line slot ─────
   The name is name-in-lights' masthead (screen space, posed at a 20%
   centre, 0.56x). JS measures its real bottom edge once it has landed and
   writes --cap-toss-below-top so this block clears it by >= 16 px under
   every camera pose of the beat. Keeping classOf below the name also keeps
   it out of the top-right Mute zone. */
.cap-toss-below {
    position: absolute;
    left: 0; right: 0;
    top: var(--cap-toss-below-top, calc(20% + 3.6rem));
    display: grid;
    justify-items: center;
    row-gap: 0.9rem;
    padding-inline: 16px;
    text-align: center;
    pointer-events: none;
}

/* A light glint crossing a plate (the look of ReveelStage.lightSweep),
   driven by a Web Animation on its transform. */
.cap-toss-glint {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(75deg, transparent 40%, rgba(255, 255, 255, 0.55) 50%, transparent 60%);
    transform: translateX(-110%);
}

/* Fixed padding and a transparent edge from the start, so the 22 s plating
   changes light only, never layout. */
.cap-toss-eyebrow {
    position: relative;
    overflow: hidden;
    margin: 0;
    padding: 0.5rem 1.15rem;
    border-radius: 999px;
    max-width: min(88vw, 22rem);
    text-wrap: balance;
    font: 500 0.74rem/1.35 var(--font-body);
    letter-spacing: 0.34em;
    text-transform: uppercase;
    color: var(--accent-warm);
    text-shadow: 0 0 14px var(--accent-warm-glow-soft);
    opacity: 0;
}
.cap-toss-eyebrow-text { position: relative; }
.cap-toss-plate {
    position: absolute;
    inset: 0;
    border: 1px solid var(--gilt-line);
    border-radius: inherit;
    background: var(--plaque-fill);
    box-shadow: var(--plaque-inset);
    opacity: 0;
}

/* One slot under classOf: the invitation, then the verdict. */
.cap-toss-lines {
    display: grid;
    justify-items: center;
}
.cap-toss-lines > * { grid-area: 1 / 1; }

.cap-toss-plaque {
    position: relative;
    overflow: hidden;
    margin: 0;
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.62rem 1.25rem;
    border: 1px solid var(--gilt-line);
    border-radius: 999px;
    background: var(--plaque-fill);
    box-shadow: var(--plaque-inset);
    font: 500 0.78rem/1.3 var(--font-body);
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--text-primary);
    opacity: 0;
}
.cap-toss-plaque::before {
    content: '';
    width: 5px; height: 5px;
    border-radius: 50%;
    flex: none;
    background: var(--accent-warm-bright);
    box-shadow: 0 0 10px 2px var(--accent-warm-glow);
}

.cap-toss-official {
    margin: 0;
    padding-inline: 0.15em;
    font: 600 italic clamp(1.9rem, 8.6vw, 2.7rem)/1.15 var(--font-display);
    background: var(--gilt-gradient);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: var(--accent-warm-bright);
    filter: drop-shadow(0 0 14px var(--ink-glow));
    opacity: 0;
}

/* ───── The gold rain: 64 glowing drops in three depths ─────
   Each drop falls on its own infinite Web Animation (transform only, so it
   composites); the container fades in once. Reduced motion: a still glow. */
.cap-toss-rain {
    position: absolute;
    inset: -12% -8%;
    overflow: hidden;
    pointer-events: none;
    opacity: 0;
}
.cap-toss-rain::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(80% 50% at 50% 30%, var(--accent-warm-glow-soft), transparent 70%);
    opacity: 0;
}
.cap-toss-drop {
    position: absolute;
    top: 0;
    width: var(--cap-toss-size, 6px);
    height: calc(var(--cap-toss-size, 6px) * 3.2);
    border-radius: 999px;
    background:
        radial-gradient(circle at 50% calc(100% - var(--cap-toss-size, 6px) / 2), var(--light-core) 0%, var(--spark) 22%, transparent 34%),
        linear-gradient(to bottom, transparent, var(--accent-warm-glow-soft) 55%, var(--accent-warm-glow));
    box-shadow: 0 calc(var(--cap-toss-size, 6px) * 1.1) calc(var(--cap-toss-size, 6px) * 1.6) calc(var(--cap-toss-size, 6px) * -0.2) var(--accent-warm-glow);
    opacity: var(--cap-toss-o, 0.8);
    transform: translate3d(0, -14vh, 0);
}

/* ───── The swipe surface and the cap ───── */
.cap-toss-pad {
    position: absolute;
    left: 0; right: 0; bottom: 0;
    top: 44%;
    touch-action: none;
}
.cap-toss-cap-wrap {
    position: absolute;
    left: 0; right: 0;
    top: 12%;
    margin-inline: auto;
    width: min(44vw, 200px);
    aspect-ratio: 4 / 3;
    pointer-events: none;
}
.cap-toss-rise {
    width: 100%; height: 100%;
    opacity: 0;
    transform: translateY(38vh);
}
.cap-toss-fly {
    position: relative;
    width: 100%; height: 100%;
    perspective: 700px;
}
.cap-toss-cap {
    display: block;
    width: 100%;
    height: auto;
    transform: rotateX(18deg);
    filter: drop-shadow(0 18px 30px rgba(5, 5, 17, 0.55)) drop-shadow(0 0 22px var(--accent-warm-glow-soft));
}
.cap-toss-glow {
    position: absolute;
    left: 50%; top: 55%;
    width: 170%;
    aspect-ratio: 1;
    transform: translate(-50%, -50%);
    background: radial-gradient(circle, var(--halo), transparent 62%);
    pointer-events: none;
}

.cap-toss-stop-board-a { stop-color: var(--bg-elevated); }
.cap-toss-stop-board-b { stop-color: var(--void); }
.cap-toss-stop-band-a { stop-color: var(--bg-primary); }
.cap-toss-stop-band-b { stop-color: var(--void); }
.cap-toss-stop-gilt-a { stop-color: var(--text-primary); }
.cap-toss-stop-gilt-b { stop-color: var(--accent-warm-bright); }
.cap-toss-stop-gilt-c { stop-color: var(--accent-warm-deep); }
.cap-toss-cap-band { fill: url(#cap-toss-g-band); stroke: var(--gilt-line); }
.cap-toss-cap-board { fill: url(#cap-toss-g-board); stroke: url(#cap-toss-g-gilt); stroke-width: 1.6; }
.cap-toss-cap-button { fill: url(#cap-toss-g-gilt); }
.cap-toss-cap-cord { fill: none; stroke: url(#cap-toss-g-gilt); stroke-width: 2.4; stroke-linecap: round; }
.cap-toss-cap-tassel { fill: url(#cap-toss-g-gilt); }

/* The bloom at the apex: a local pop of light where the burst lands, in
   the world (so the camera carries it with the cap). JS animates it. */
.cap-toss-bloom {
    position: absolute;
    left: 50%; top: 50%;
    width: 72vmin;
    aspect-ratio: 1;
    margin: -36vmin 0 0 -36vmin;
    border-radius: 50%;
    background: radial-gradient(circle, var(--flash-core) 0%, var(--flash-mid) 30%, transparent 66%);
    opacity: 0;
    pointer-events: none;
}

/* ───── The hint and its button ───── */
.cap-toss-hint {
    position: absolute;
    left: 0; right: 0;
    bottom: calc(9% + env(safe-area-inset-bottom, 0px));
    z-index: 2;
    display: grid;
    justify-items: center;
    gap: 0.85rem;
    padding-inline: 16px;
    text-align: center;
    pointer-events: none;
    opacity: 0;
    visibility: hidden;
}
.cap-toss-hint-text {
    margin: 0;
    font: 500 0.8rem/1.3 var(--font-body);
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--accent-warm);
}
.cap-toss-chevs { display: grid; justify-items: center; height: 26px; }
.cap-toss-chev {
    width: 14px; height: 14px;
    margin-top: -6px;
    border-left: 2px solid var(--accent-warm);
    border-top: 2px solid var(--accent-warm);
    transform: rotate(45deg);
}
.cap-toss-chev + .cap-toss-chev { opacity: 0.45; }

.cap-toss-throw {
    pointer-events: auto;
    min-height: 44px;
    font: 500 0.88rem/1 var(--font-body);
    color: var(--text-primary);
    cursor: pointer;
    background: var(--glass);
    border: 1px solid var(--glass-border-hover);
    border-radius: 999px;
    padding: 0.7rem 1.3rem;
}
.cap-toss-throw:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 3px; }

/* ───── Reduced motion: every moment still plays, calmly ─────
   The camera and shake no-op in ReveelStage and goldBurst takes its calm
   variant; js/cap-toss.js plays fades instead of flights, loops and sweeps
   (it branches on film.reduced()), and the rain becomes a still glow. */
@media (prefers-reduced-motion: reduce) {
    .cap-toss-rain::before { opacity: 1; }
    .cap-toss-drop { display: none; }
    .cap-toss-rise { transform: none; }
    .cap-toss-glint { display: none; }
}