/* ═══════════════════════════════════════════
   the-award — beat 6: His name in gold
   A dark oxblood-and-foil certificate rises into a narrow lamp cone; the
   recipient taps to accept and his name gathers out of gold light
   (ReveelHero.nameAssemble) onto it, on the music's hit; the rosette is
   stamped and its ribbons unfurl; the citation, the date and the
   signature write in. Then a still, square keepsake frame.

   Rules here are ENTRY STATES and RESTING STATES only. Every reveal, loop
   and move is a Web Animation started by a cue in js/the-award.js (no DOM
   events, no class/style churn for the badge guard to re-measure on).

   The certificate (#the-award-certificate) is cloned by the finale (deep
   clone, ids stripped), so everything that styles it keys off its own
   classes and its own data-the-award-pending attribute -- never an
   ancestor outside it -- and its finished state is its default state:
   the beat's entrance marks the parts still to come as pending, and each
   cue clears its own. Its inner geometry is in % of the certificate (it
   keeps a fixed 18:25 face) and its type in cqi of the certificate (it is
   an inline-size container), with px fallbacks at a 304 px reference,
   so a clone at any size keeps its proportions.
   ═══════════════════════════════════════════ */

/* ───── The beat's layer ───── */
.the-award-container {
    position: absolute;
    inset: 0;
    pointer-events: none;
    /* The certificate's width W (shots.md, "Certificate size and place"): the
       gap between the Mute band (58px) and the badge band (96.5% - 143px),
       less both safe-area insets, over 1.59 W (the certificate with its
       ribbons hanging). The same expression is the certificate's own width,
       finale.css's --finale-cert-w and js certWidth()'s fallback. */
    --the-award-w: min(88vw, 520px, (96.5vh - 201px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px)) / 1.59);
}
@supports (height: 1svh) {
    .the-award-container { --the-award-w: min(88vw, 520px, (96.5svh - 201px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px)) / 1.59); }
}

/* ───── The room: pre-painted light layers, opacity only ─────
   Each covers the stage (inset 0). Where a layer's edge is dark, a
   box-shadow spread carries that edge out past the stage, so a camera
   pull-back (z -120 at most: 0.88x) never shows a seam -- as ink overflow,
   which (unlike an oversized box) never makes #stage scrollable. */
.the-award-veil,
.the-award-cone,
.the-award-narrow,
.the-award-warm,
.the-award-candle,
.the-award-dusk {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

/* The dark room around a single pool of light: the frame reasons leaves. */
.the-award-veil {
    background: radial-gradient(ellipse 46% 35% at 50% 44%,
        rgba(22, 5, 9, 0.16) 0%,
        rgba(22, 5, 9, 0.6) 60%,
        rgba(22, 5, 9, 0.88) 100%);
    box-shadow: 0 0 0 14vmax rgba(22, 5, 9, 0.88);
}

/* The narrow lamp cone from above (fades up 0-2.6 s), its pool on the certificate. */
.the-award-cone {
    background:
        radial-gradient(ellipse 36% 28% at 50% 44%, rgba(246, 220, 154, 0.12), transparent 72%),
        conic-gradient(from 160deg at 50% -8%,
            transparent 0deg,
            var(--lamp-cone-narrow) 12deg,
            rgba(246, 220, 154, 0.34) 20deg,
            var(--lamp-cone-narrow) 28deg,
            transparent 40deg);
    -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 55%, transparent 96%);
    mask-image: linear-gradient(180deg, #000 0%, #000 55%, transparent 96%);
    transform-origin: 50% -8%;
    opacity: 0;
}

/* The tap: the room narrows to the cone. */
.the-award-narrow {
    background: radial-gradient(ellipse 38% 31% at 50% 44%,
        transparent 0%,
        transparent 58%,
        rgba(22, 5, 9, 0.5) 86%,
        rgba(22, 5, 9, 0.72) 100%);
    box-shadow: 0 0 0 14vmax rgba(22, 5, 9, 0.72);
    opacity: 0;
}

/* 29-35 s: the cone widens into the room's warm light. */
.the-award-warm {
    background:
        radial-gradient(ellipse 64% 50% at 50% 50%, rgba(226, 177, 85, 0.2) 0%, rgba(226, 177, 85, 0.07) 56%, transparent 100%),
        radial-gradient(ellipse 73% 22% at 50% 82%, rgba(238, 106, 69, 0.07), transparent 72%);
    opacity: 0;
}

/* 38-42 s: a single candle-warm glow on the table, ready for the finale. */
.the-award-candle {
    background:
        radial-gradient(ellipse 34% 17% at 50% 80%, rgba(246, 220, 154, 0.2) 0%, rgba(238, 106, 69, 0.12) 42%, transparent 100%),
        radial-gradient(ellipse 56% 25% at 46% 78%, rgba(226, 177, 85, 0.07), transparent 80%);
    opacity: 0;
}

/* In front of the certificate: the room around the table goes dark. */
.the-award-dusk {
    background: radial-gradient(ellipse 50% 29% at 44% 74%,
        transparent 0%,
        rgba(22, 5, 9, 0.32) 62%,
        rgba(22, 5, 9, 0.62) 100%);
    box-shadow: 0 0 0 14vmax rgba(22, 5, 9, 0.62);
    opacity: 0;
}

/* ───── The gold rain: painted sheets of motes, moved by transform ─────
   Each sheet's tile height is the distance its loop travels, so the loop
   is seamless (the JS animates translateY(0 -> tile)); the wrappers clip
   them, so a sheet in flight never adds to #stage's scrollable overflow. */
.the-award-rain,
.the-award-rain-near {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
    opacity: 0;
}

.the-award-rain-sheet {
    position: absolute;
    left: 0;
    right: 0;
    background-repeat: repeat;
}
.the-award-rain-far {
    top: -220px;
    height: calc(100% + 220px);
    background-size: 150px 220px;
    background-image:
        radial-gradient(1.4px 3.4px at 12% 14%, rgba(246, 220, 154, 0.7), transparent),
        radial-gradient(1.2px 3px at 46% 58%, rgba(246, 220, 154, 0.55), transparent),
        radial-gradient(1.4px 3.6px at 78% 30%, rgba(249, 238, 219, 0.6), transparent),
        radial-gradient(1.2px 3px at 30% 84%, rgba(226, 177, 85, 0.6), transparent),
        radial-gradient(1.3px 3.2px at 64% 8%, rgba(246, 220, 154, 0.5), transparent),
        radial-gradient(1.1px 2.8px at 90% 70%, rgba(226, 177, 85, 0.55), transparent);
}
.the-award-rain-mid {
    top: -280px;
    height: calc(100% + 280px);
    background-size: 210px 280px;
    background-image:
        radial-gradient(1.8px 4.6px at 20% 22%, rgba(246, 220, 154, 0.8), transparent),
        radial-gradient(1.6px 4.2px at 58% 66%, rgba(249, 238, 219, 0.7), transparent),
        radial-gradient(1.8px 4.8px at 84% 12%, rgba(226, 177, 85, 0.72), transparent),
        radial-gradient(1.5px 4px at 38% 90%, rgba(246, 220, 154, 0.65), transparent);
}
.the-award-rain-edge {
    top: -320px;
    height: calc(100% + 320px);
    width: 18%;
    left: auto;
    right: auto;
    background-size: 120px 320px;
    background-image:
        radial-gradient(2.6px 7px at 30% 18%, rgba(249, 238, 219, 0.75), transparent),
        radial-gradient(2.2px 6px at 70% 62%, rgba(246, 220, 154, 0.7), transparent);
}
.the-award-rain-edge-left { left: 0; }
.the-award-rain-edge-right { right: 0; background-position: 60px 140px; }

/* Reduced motion: no falling, a still gold glow fading up instead. */
.the-award-rain-glow {
    display: none;
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse 34% 26% at 50% 46%, rgba(246, 220, 154, 0.12), transparent 72%);
}

/* ───── The motes: placed and flown by the JS (container px) ───── */
.the-award-motes {
    position: absolute;
    left: 0;
    top: 0;
    width: 0;
    height: 0;
    pointer-events: none;
}
.the-award-mote {
    position: absolute;
    left: 0;
    top: 0;
    width: 8px;
    height: 8px;
    margin: -4px 0 0 -4px;
    border-radius: 50%;
    background: radial-gradient(circle,
        rgba(249, 238, 219, 1) 0%,
        rgba(246, 220, 154, 0.85) 26%,
        rgba(226, 177, 85, 0.3) 52%,
        rgba(226, 177, 85, 0) 72%);
    opacity: 0;
}

/* ───── The rig: the certificate's rise and its exit (never cloned) ─────
   Centred in the frame above the control band where there is room (1.59 W
   is the certificate plus the ribbons hanging under it), and held between
   the Mute pill (58px + the top inset) and the lifted badge (the ribbons
   stop 8px above it: 96.5% - 143px - the bottom inset) where there is not.
   Entry state: hidden in place (the rise starts it below the frame), so it
   adds no scrollable overflow. */
.the-award-rig {
    position: absolute;
    left: 50%;
    top: clamp(58px + env(safe-area-inset-top, 0px),
        (100% - max(124px, 20%) - var(--the-award-w) * 1.59) / 2,
        96.5% - 143px - env(safe-area-inset-bottom, 0px) - var(--the-award-w) * 1.59);
    width: var(--the-award-w);
    margin-left: calc(var(--the-award-w) / -2);
    transform-origin: 50% 50%;
    opacity: 0;
    visibility: hidden;
    pointer-events: auto;
    -webkit-tap-highlight-color: transparent;
}

/* ═══════════ The certificate (self-contained: the finale clones it) ═══════════ */
.the-award-certificate {
    position: relative;
    z-index: 0;
    width: min(88vw, 520px, (96.5vh - 201px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px)) / 1.59);
    height: calc(min(88vw, 520px, (96.5vh - 201px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px)) / 1.59) / 0.72);
    container-type: inline-size;
    border-radius: 4px;
    box-shadow: var(--cert-shadow);
    color: var(--cert-ink);
    font-family: var(--font-body);
    text-align: center;
    -webkit-user-select: none;
    user-select: none;
}
@supports (height: 1svh) {
    .the-award-certificate {
        width: min(88vw, 520px, (96.5svh - 201px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px)) / 1.59);
        height: calc(min(88vw, 520px, (96.5svh - 201px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px)) / 1.59) / 0.72);
    }
}
@supports (aspect-ratio: 1) {
    .the-award-certificate {
        height: auto;
        aspect-ratio: 18 / 25;
    }
}
.the-award-certificate p {
    margin: 0;
}

/* The face: oxblood, lit from above, with a faint guilloche of foil rings. */
.the-award-cert-face {
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background:
        radial-gradient(120% 55% at 50% 0%, rgba(246, 220, 154, 0.1), transparent 62%),
        repeating-radial-gradient(circle at 50% 40%, rgba(226, 177, 85, 0.045) 0 1px, transparent 1px 7px),
        var(--cert-fill);
}

/* The foil border (3% in), its fine inner rule (5% in). */
.the-award-cert-frame {
    position: absolute;
    top: 2.16%;
    bottom: 2.16%;
    left: 3%;
    right: 3%;
    border: 1.5px solid var(--cert-border);
    border-radius: 2px;
    box-shadow: inset 0 0 0 1px rgba(22, 5, 9, 0.35), 0 0 12px rgba(226, 177, 85, 0.12);
}
.the-award-cert-inner {
    position: absolute;
    top: 3.6%;
    bottom: 3.6%;
    left: 5%;
    right: 5%;
    border: 1px solid var(--foil-line-soft);
}

/* Corner ornaments, on the inner rule's corners. */
.the-award-corner {
    position: absolute;
    width: 11%;
    height: auto;
    overflow: visible;
}
.the-award-corner-tl { left: 5%; top: 3.6%; }
.the-award-corner-tr { right: 5%; top: 3.6%; transform: scaleX(-1); }
.the-award-corner-bl { left: 5%; bottom: 3.6%; transform: scaleY(-1); }
.the-award-corner-br { right: 5%; bottom: 3.6%; transform: scale(-1, -1); }
.the-award-corner-arc,
.the-award-corner-curl {
    fill: none;
    stroke: var(--foil-line);
    stroke-width: 1.2;
    stroke-linecap: round;
}
.the-award-corner-curl { stroke: var(--foil-line-soft); }
.the-award-corner-gem { fill: var(--accent-warm); }

/* Light running along the foil border: each glint is moved by transform,
   clipped to a thin strip laid over the rule. */
.the-award-edge {
    position: absolute;
    overflow: hidden;
    pointer-events: none;
}
.the-award-edge-top,
.the-award-edge-bottom {
    left: 3%;
    right: 3%;
    height: 5px;
}
.the-award-edge-top { top: 2.16%; margin-top: -2px; }
.the-award-edge-bottom { bottom: 2.16%; margin-bottom: -2px; }
.the-award-edge-left,
.the-award-edge-right {
    top: 2.16%;
    bottom: 2.16%;
    width: 5px;
}
.the-award-edge-left { left: 3%; margin-left: -2px; }
.the-award-edge-right { right: 3%; margin-right: -2px; }
.the-award-edge-glint {
    position: absolute;
    background: radial-gradient(closest-side, rgba(249, 238, 219, 1), rgba(246, 220, 154, 0.55) 45%, transparent);
}
.the-award-edge-top .the-award-edge-glint,
.the-award-edge-bottom .the-award-edge-glint {
    top: 0;
    bottom: 0;
    left: 0;
    width: 34%;
    transform: translateX(-110%);
}
.the-award-edge-left .the-award-edge-glint,
.the-award-edge-right .the-award-edge-glint {
    left: 0;
    right: 0;
    top: 0;
    height: 28%;
    transform: translateY(-110%);
}

/* ───── The writing wipe (transform only) ─────
   The window (.the-award-wipe) slides in from the left while its content
   (.the-award-wipe-in) slides the other way by the same amount, so the
   text stands still and is uncovered left to right. Both have the same
   border-box width (no horizontal padding on the window). */
.the-award-wipe {
    position: relative;
    display: block;
    overflow: hidden;
    padding: 0.6em 0;
    margin: -0.6em 0;
}
.the-award-wipe-in {
    position: relative;
    display: block;
}
.the-award-wipe-nib {
    position: absolute;
    top: 0.5em;
    bottom: 0.5em;
    right: 0;
    width: 16px;
    background: linear-gradient(90deg, transparent, rgba(246, 220, 154, 0.6));
    opacity: 0;
    pointer-events: none;
}

/* ───── {awardTitle}: Playfair 700 in gold foil, at most three balanced lines ───── */
.the-award-title {
    position: absolute;
    left: 4%;
    right: 4%;
    top: 7.92%;
    height: 14.4%;
    z-index: 3;
    display: flex;
    flex-direction: column;
    justify-content: center;
    font-family: var(--font-display);
    font-weight: 700;
    line-height: 1.08;
    letter-spacing: 0.01em;
    font-size: 32px;
    font-size: 10.5cqi;
    color: var(--accent-warm);
}
.the-award-title .the-award-wipe-in {
    padding: 0 6.5%;
    text-wrap: balance;
    overflow-wrap: anywhere;
}
.the-award-title-text {
    position: relative;
    color: var(--accent-warm);
}
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
    .the-award-title-text {
        background: var(--foil-gradient);
        -webkit-background-clip: text;
        background-clip: text;
        -webkit-box-decoration-break: clone;
        box-decoration-break: clone;
        color: transparent;
        -webkit-text-fill-color: transparent;
    }
}
/* The title's glow: its own layer (text-shadow would paint over the foil). */
.the-award-title-glow {
    position: absolute;
    inset: 0;
    display: block;
    padding: 0 6.5%;
    text-wrap: balance;
    overflow-wrap: anywhere;
    color: transparent;
    -webkit-text-fill-color: transparent;
    text-shadow: 0 0 18px rgba(226, 177, 85, 0.42), 0 0 2px rgba(246, 220, 154, 0.45);
    pointer-events: none;
}
.the-award-title-glow::before { content: attr(data-text); }

/* A short foil rule with a gem, under the title. */
.the-award-divider {
    position: absolute;
    left: 33%;
    right: 33%;
    top: 23.4%;
    height: 2.16%;
}
.the-award-divider::before {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--foil-line) 30%, var(--foil-line) 70%, transparent);
}
.the-award-divider-gem {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 7px;
    height: 7px;
    margin: -3.5px 0 0 -3.5px;
    background: var(--accent-warm);
    box-shadow: 0 0 8px rgba(226, 177, 85, 0.5);
    transform: rotate(45deg);
}

/* "is proudly presented to": Outfit caps. */
.the-award-lead {
    position: absolute;
    left: 6%;
    right: 6%;
    top: 27%;
    z-index: 3;
    font-weight: 500;
    line-height: 1.4;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    white-space: nowrap;
    font-size: 0.72rem;
    font-size: max(0.72rem, 3.8cqi);
    color: var(--cert-ink);
}

/* ───── The name-line bloom: one pre-painted ellipse of light, no particles ─────
   It carries the empty line through nameAssemble's lull (+1.2 to +2.4 s
   after the tap), under the sprigs and the name, centred on the name zone.
   Opacity and transform only, by Web Animations from the JS; it rests at
   opacity 0, so the finished certificate (and the finale's clone) carries
   no bloom. Its paint is gold light, accent-warm at the core falling off
   through accent-warm-deep: a cream core read as a rose-grey haze over the
   oxblood (its blue outweighs its green), where gold keeps the foil's hue. */
.the-award-name-bloom {
    position: absolute;
    left: 2%;
    right: 2%;
    top: 28%;
    height: 26%;
    z-index: 1;
    background: radial-gradient(closest-side,
        rgba(226, 177, 85, 0.95) 0%,
        rgba(226, 177, 85, 0.8) 20%,
        rgba(226, 177, 85, 0.46) 44%,
        rgba(226, 177, 85, 0.18) 68%,
        rgba(184, 134, 47, 0.06) 86%,
        transparent 100%);
    opacity: 0;
    pointer-events: none;
}

/* ───── {toName}: Playfair 700 in gold foil, on the name line ───── */
.the-award-name {
    position: absolute;
    left: 7%;
    right: 7%;
    top: 31.68%;
    height: 18.72%;
    z-index: 3;
    display: flex;
    flex-direction: column;
    justify-content: center;
    font-family: var(--font-display);
    font-weight: 700;
}
.the-award-name-line {
    position: relative;
    display: block;
    white-space: nowrap;
    line-height: 1.06;
    font-size: 43px;
    font-size: 14cqi;
}
.the-award-name-text {
    position: relative;
    display: inline-block;
    color: var(--accent-warm-bright);
}
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
    .the-award-name-text {
        background: var(--foil-gradient);
        -webkit-background-clip: text;
        background-clip: text;
        color: transparent;
        -webkit-text-fill-color: transparent;
    }
}
/* The settled glow and the hit's flare: their own pre-painted layers
   (drawn from data-text, so the name is in the DOM's text once). The
   flare's opacity is what the hit animates. */
.the-award-name-glow,
.the-award-name-flare {
    position: absolute;
    inset: 0;
    display: block;
    color: transparent;
    -webkit-text-fill-color: transparent;
    pointer-events: none;
}
.the-award-name-glow::before,
.the-award-name-flare::before { content: attr(data-text); }
.the-award-name-glow { text-shadow: var(--name-shadow-settled); }
.the-award-name-flare {
    text-shadow: var(--name-shadow-flare);
    opacity: 0;
}
.the-award-name-rest {
    display: block;
    white-space: nowrap;
    margin-top: 0.04em;
    line-height: 1.12;
    font-size: 24px;
    font-size: 7.8cqi;
    color: var(--accent-warm);
    text-shadow: var(--name-shadow);
}
.the-award-name-rest[hidden] { display: none; }

/* The name line: a foil rule; the glimmer slides along it while it waits. */
.the-award-name-rule {
    position: absolute;
    left: 13%;
    right: 13%;
    top: 51.12%;
    height: 9px;
    margin-top: -4px;
    overflow: hidden;
    z-index: 3;
}
.the-award-name-rule::before {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: 4px;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--foil-line-strong) 16%, var(--foil-line-strong) 84%, transparent);
}
.the-award-glimmer {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 22%;
    background: radial-gradient(closest-side, rgba(249, 238, 219, 0.95), rgba(246, 220, 154, 0.4) 45%, transparent);
    transform: translateX(-110%);
}

/* The laurel: two sprigs cradling the name from under its line. */
.the-award-sprig {
    position: absolute;
    top: 51.48%;
    width: 31%;
    display: block;
    z-index: 2;
}
.the-award-sprig svg {
    display: block;
    width: 100%;
    height: auto;
    overflow: visible;
}
.the-award-sprig-left { right: 50.5%; }
.the-award-sprig-right { left: 50.5%; transform: scaleX(-1); }
.the-award-stem {
    fill: none;
    stroke: var(--accent-warm-deep);
    stroke-width: 1.4;
    stroke-linecap: round;
}
.the-award-leaf { fill: var(--accent-warm); }
.the-award-leaf-shade { fill: var(--accent-warm-deep); }

/* "for outstanding service to my heart": Playfair italic. */
.the-award-citation {
    position: absolute;
    left: 6%;
    right: 6%;
    top: 60.5%;
    z-index: 3;
    font-family: var(--font-display);
    font-style: italic;
    font-weight: 400;
    line-height: 1.3;
    font-size: 15px;
    font-size: 5cqi;
    color: var(--cert-ink);
}

/* "Presented {date}": Outfit caps (fitted to one line by the JS). */
.the-award-date {
    position: absolute;
    left: 6%;
    right: 6%;
    top: 66.6%;
    z-index: 3;
    font-weight: 500;
    line-height: 1.4;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    white-space: nowrap;
    font-size: 0.72rem;
    font-size: max(0.72rem, 3.8cqi);
    color: var(--cert-ink);
}

/* {fromName}: gold-light Pinyon on a gold rule (11.22:1 on this face). */
.the-award-sign {
    position: absolute;
    left: 17%;
    right: 17%;
    top: 71%;
    height: 9.64%;
    z-index: 3;
    display: flex;
    align-items: flex-end;
    justify-content: center;
}
.the-award-signature {
    width: 100%;
    font-family: var(--font-script);
    font-weight: 400;
    line-height: 1.15;
    white-space: nowrap;
    font-size: 29px;
    font-size: 9.5cqi;
    color: var(--accent-warm-bright);
    text-shadow: 0 0 12px rgba(226, 177, 85, 0.38);
}
.the-award-sign-rule {
    position: absolute;
    left: 24%;
    right: 24%;
    top: 80.64%;
    height: 1px;
    z-index: 3;
    background: linear-gradient(90deg, transparent, var(--foil-line) 14%, var(--foil-line) 86%, transparent);
    transform-origin: 0 50%;
}

/* ───── The rosette: its empty ring, then the stamp ───── */
.the-award-seat,
.the-award-rosette,
.the-award-stamp-ring {
    position: absolute;
    left: 40.5%;
    width: 19%;
    top: 83.16%;
    height: 13.68%;
    border-radius: 50%;
}
.the-award-seat {
    z-index: 3;
    border: 1px solid var(--foil-line-soft);
    box-shadow: inset 0 0 0 4px rgba(22, 5, 9, 0.25), inset 0 0 0 5px var(--foil-line-soft);
}
.the-award-rosette { z-index: 4; }

/* The two claret tails, hanging from behind the pleats; notched ends. */
.the-award-ribbon {
    position: absolute;
    left: 31%;
    top: 78%;
    width: 38%;
    height: 158%;
    z-index: 0;
    transform-origin: 50% 0;
    background: var(--rosette-ribbon);
    box-shadow: inset 2px 0 0 rgba(226, 177, 85, 0.55), inset -2px 0 0 rgba(226, 177, 85, 0.55);
    -webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 91%, 0 100%);
    clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 91%, 0 100%);
}
.the-award-ribbon-left { transform: rotate(26deg); }
.the-award-ribbon-right { transform: rotate(-26deg); }
.the-award-ribbon-text {
    position: absolute;
    left: 50%;
    top: 56%;
    font-weight: 600;
    line-height: 1;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    white-space: nowrap;
    font-size: 0.72rem;
    font-size: max(0.72rem, 3.8cqi);
    color: var(--text-primary);
    transform: translate(-50%, -50%) rotate(90deg);
}
.the-award-rosette-pleats {
    position: absolute;
    inset: 0;
    z-index: 1;
    border-radius: 50%;
    background: repeating-conic-gradient(var(--accent-warm) 0deg 5deg, var(--accent-warm-deep) 5deg 10deg);
    box-shadow: 0 6px 16px rgba(22, 5, 9, 0.55), 0 0 18px rgba(226, 177, 85, 0.3);
}
.the-award-rosette-face {
    position: absolute;
    inset: 13%;
    z-index: 2;
    border-radius: 50%;
    background: var(--rosette);
    box-shadow: inset 0 0 0 1.5px rgba(246, 220, 154, 0.75), inset 0 -3px 6px rgba(22, 5, 9, 0.3), 0 0 0 1px rgba(22, 5, 9, 0.35);
}
.the-award-rosette-face::before {
    content: '';
    position: absolute;
    inset: 14%;
    border-radius: 50%;
    border: 1px solid rgba(50, 13, 22, 0.32);
}
.the-award-rosette-star {
    position: absolute;
    left: 30%;
    top: 30%;
    width: 40%;
    height: 40%;
    background: linear-gradient(160deg, var(--accent-warm-bright), var(--accent-warm-deep));
    -webkit-clip-path: polygon(50% 0, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
    clip-path: polygon(50% 0, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
}
/* A four-point glint, for the exit's "the rosette glints". */
.the-award-rosette-glint {
    position: absolute;
    left: 6%;
    top: 4%;
    width: 46%;
    height: 46%;
    z-index: 3;
    background:
        linear-gradient(90deg, transparent 0%, rgba(249, 238, 219, 0.95) 50%, transparent 100%) center / 100% 2px no-repeat,
        linear-gradient(0deg, transparent 0%, rgba(249, 238, 219, 0.95) 50%, transparent 100%) center / 2px 100% no-repeat,
        radial-gradient(circle, rgba(249, 238, 219, 0.9) 0%, transparent 34%);
    opacity: 0;
    pointer-events: none;
}
/* The stamp's ring of light. */
.the-award-stamp-ring {
    z-index: 5;
    border: 1.5px solid var(--chime-ring);
    box-shadow: 0 0 14px rgba(246, 220, 154, 0.45);
    opacity: 0;
    pointer-events: none;
}

/* The light sweep across the whole certificate (on the hit). */
.the-award-sheen {
    position: absolute;
    inset: 0;
    z-index: 6;
    overflow: hidden;
    border-radius: inherit;
    pointer-events: none;
}
.the-award-sheen-band {
    position: absolute;
    top: -20%;
    bottom: -20%;
    left: 0;
    width: 45%;
    background: linear-gradient(100deg,
        transparent 0%,
        rgba(249, 238, 219, 0) 22%,
        rgba(249, 238, 219, 0.24) 50%,
        rgba(249, 238, 219, 0) 78%,
        transparent 100%);
    transform: translateX(-170%) skewX(-14deg);
}

/* ───── Pending: the parts still to come (set by the entrance, cleared by each cue) ───── */
.the-award-certificate[data-the-award-pending~="title"] .the-award-title,
.the-award-certificate[data-the-award-pending~="lead"] .the-award-lead,
.the-award-certificate[data-the-award-pending~="name"] .the-award-name,
.the-award-certificate[data-the-award-pending~="rest"] .the-award-name-rest,
.the-award-certificate[data-the-award-pending~="laurel"] .the-award-sprig,
.the-award-certificate[data-the-award-pending~="seat"] .the-award-seat,
.the-award-certificate[data-the-award-pending~="rosette"] .the-award-rosette,
.the-award-certificate[data-the-award-pending~="cite"] .the-award-citation,
.the-award-certificate[data-the-award-pending~="date"] .the-award-date,
.the-award-certificate[data-the-award-pending~="sign"] .the-award-sign,
.the-award-certificate[data-the-award-pending~="sign"] .the-award-sign-rule {
    opacity: 0;
}
.the-award-certificate[data-the-award-pending~="ribbons"] .the-award-ribbon-left { transform: rotate(26deg) scaleY(0); }
.the-award-certificate[data-the-award-pending~="ribbons"] .the-award-ribbon-right { transform: rotate(-26deg) scaleY(0); }

/* ═══════════ The control band, under the certificate ═══════════
   Classes flip on show/hide (so the badge guard re-measures exactly when a
   control comes or goes); the fade is a transition it waits out. */
.the-award-band {
    position: absolute;
    left: 16px;
    right: 16px;
    bottom: calc(3.5% + env(safe-area-inset-bottom, 0px));
    height: 0;
}
.the-award-invite,
.the-award-keep {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.4s var(--ease-silk), visibility 0s linear 0.4s;
}
.the-award-invite.the-award-on,
.the-award-keep.the-award-on {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transition: opacity 0.8s var(--ease-silk);
}

/* "Tap to accept": the hint is the button, solid gold. */
.the-award-accept {
    position: relative;
    -webkit-appearance: none;
    appearance: none;
    min-height: 48px;
    padding: 0.95rem 2.1rem;
    border: 0;
    border-radius: 999px;
    background: var(--btn-fill);
    box-shadow: var(--btn-shadow);
    font: 600 0.8rem/1 var(--font-body);
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--btn-ink);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}
/* A pre-painted halo that breathes while the certificate waits. */
.the-award-accept::after {
    content: '';
    position: absolute;
    inset: -7px;
    border-radius: inherit;
    border: 1px solid var(--foil-line);
    box-shadow: 0 0 18px rgba(226, 177, 85, 0.3);
    opacity: 0;
    pointer-events: none;
}
.the-award-invite.the-award-on .the-award-accept::after {
    animation: the-award-breathe 2.67s var(--ease-breath) infinite;
}

/* "Yours to keep." and the quiet "Keep going". */
.the-award-keep-hint {
    margin: 0;
    max-width: 22rem;
    font: 500 0.74rem/1.55 var(--font-body);
    letter-spacing: 0.16em;
    text-transform: uppercase;
    text-wrap: balance;
    text-align: center;
    color: var(--text-secondary);
}
.the-award-keep-btn {
    -webkit-appearance: none;
    appearance: none;
    min-height: 46px;
    padding: 0.9rem 1.9rem;
    border: 1px solid var(--btn-ghost-border);
    border-radius: 999px;
    background: var(--glass);
    box-shadow: 0 0 24px var(--accent-warm-glow-soft), inset 0 1px 0 rgba(246, 220, 154, 0.14);
    font: 500 0.78rem/1 var(--font-body);
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--text-primary);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}
.the-award-accept:focus-visible,
.the-award-keep-btn:focus-visible {
    outline: 2px solid var(--focus-ring);
    outline-offset: 4px;
}

/* Entry states land instantly (prepare), never animated in. */
.the-award-instant,
.the-award-instant * {
    transition: none !important;
}

/* ───── Keyframes ───── */
@keyframes the-award-breathe {
    0%, 100% { opacity: 0.15; transform: scale(0.97); }
    50% { opacity: 0.85; transform: scale(1.03); }
}

/* ───── Reduced motion: the beat plays in full, calmly ─────
   The camera and the shake no-op by themselves and nameAssemble takes its
   calm variant (<= 60 particles at rest on the letters). The JS turns
   rises, wipes, flights and the stamp into fades (film.reduced()); here
   the rain becomes a still glow and the halo stops breathing. */
@media (prefers-reduced-motion: reduce) {
    .the-award-rain-sheet { display: none; }
    .the-award-rain-glow { display: block; }
    .the-award-invite.the-award-on .the-award-accept::after {
        animation: none;
        opacity: 0.6;
    }
}