/* ═══════════════════════════════════════════
   the-question — beat 1 of best-boyfriend (4 s · tap · no hold: its tap is begin())

   The armed first frame is the whole scene: the buyer's greeting, the
   recipient's name huge in gold foil, the question on a dark gilt plaque,
   "Yes, obviously" and the No that runs away. On the Yes the plaque is swept
   with light and fades, the No slides off muttering "…fine.", the name's glow
   travels as a ribbon of light to the envelope's address, and the envelope
   rises into the continuity position the-seal opens on.

   States live in data-* attributes (data-the-question-state="armed|tapped")
   so the platform badge guard, which re-measures on class/style mutations,
   is not woken by the film. All payoff motion is the Web Animations API from
   js/the-question.js (transform + opacity only); the CSS here is the at-rest
   look plus two pre-tap ornaments (the foil sheen and the halo's breath).

   Zone geometry (the card's lower half, px), shared with the JS:
     row A (No spots)  0 – 38      Yes  68 – 126 (58 tall)     row C  156 – 194
     30 px between each row and the Yes; the No's home sits beside the Yes.
   ═══════════════════════════════════════════ */

.the-question-container {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: clamp(18px, 4.4vh, 52px);
    padding:
        calc(env(safe-area-inset-top, 0px) + 58px)
        0
        calc(env(safe-area-inset-bottom, 0px) + 20px);
    box-sizing: border-box;
}

/* ───── The masthead: greeting + name (the first thing on screen) ───── */
.the-question-masthead {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    text-align: center;
}

.the-question-eyebrow {
    position: relative;
    z-index: 1;
    margin: 0 0 0.8rem;
    max-width: 88%;
    padding-left: 0.3em;                  /* balances the tracking after the last letter */
    font-family: var(--font-body);
    font-weight: 500;
    font-size: clamp(0.76rem, 3.4vw, 0.9rem);
    line-height: 1.55;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color: var(--accent-warm);
    text-wrap: balance;
    box-sizing: border-box;
}

.the-question-name {
    position: relative;
    isolation: isolate;                    /* the halo paints behind the lines, inside the heading */
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 0;
    max-width: 100%;
}

.the-question-name-line {
    display: block;
    position: relative;
    padding: 0 0.06em;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: min(8rem, 21vw);           /* replaced by the fit (setQuestionName) */
    line-height: 1.06;
    white-space: nowrap;
    color: var(--accent-warm);
}
.the-question-name-line[hidden] {
    display: none;
}
.the-question-name-rest {
    margin-top: 0.06em;
    line-height: 1.12;
}

/* Gold foil: the foil gradient clipped to the letters, under a narrow light band
   (the sheen) that crosses the name now and then while the frame waits. */
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
    .the-question-name-line {
        background-image:
            linear-gradient(100deg, transparent 41%, rgba(249, 238, 219, 0.9) 50%, transparent 59%),
            var(--foil-gradient);
        background-size: 260% 100%, 100% 100%;
        background-position: 165% 0, 0 0;
        background-repeat: no-repeat;
        -webkit-background-clip: text;
        background-clip: text;
        -webkit-text-fill-color: transparent;
    }
}

.the-question-halo {
    position: absolute;
    left: 50%;
    top: 50%;
    z-index: -1;
    width: var(--the-question-halo-w, 360px);
    height: var(--the-question-halo-h, 220px);
    border-radius: 50%;
    background: radial-gradient(closest-side, var(--halo) 0%, rgba(226, 177, 85, 0.12) 52%, rgba(226, 177, 85, 0) 100%);
    transform: translate(-50%, -50%);
    pointer-events: none;
}

.the-question-container[data-the-question-state="armed"] .the-question-name-line {
    animation: the-question-sheen 7.2s var(--ease-silk) 1.4s infinite;
}
.the-question-container[data-the-question-state="armed"] .the-question-halo {
    animation: the-question-halo-breathe 5.4s var(--ease-breath) infinite;
}

@keyframes the-question-sheen {
    0% { background-position: 165% 0, 0 0; }
    24%, 100% { background-position: -65% 0, 0 0; }
}
@keyframes the-question-halo-breathe {
    0%, 100% { opacity: 0.78; transform: translate(-50%, -50%) scale(0.97); }
    50% { opacity: 1; transform: translate(-50%, -50%) scale(1.03); }
}

/* ───── The card: the question plaque ─────
   overflow: hidden is the No's "edge": it parks tucked behind it, and
   slides off behind it at the payoff. The selector carries the container so
   ReveelStage.lightSweep's .reveel-sweep (position: relative) never moves it. */
.the-question-container .the-question-card {
    position: relative;
    z-index: 2;
    flex: none;
    width: min(calc(100% - 48px), 400px);
    padding: 20px 0 10px;
    border-radius: 22px;
    overflow: hidden;
    text-align: center;
    box-sizing: border-box;
}
.the-question-card.reveel-sweep::after {
    z-index: 6;                            /* the sweep crosses the Yes as well */
    border-radius: inherit;
}

.the-question-card-face {
    position: absolute;
    inset: 0;
    z-index: 0;
    border-radius: inherit;
    border: 1px solid var(--foil-line-soft);
    background: var(--plaque-fill);
    box-shadow: var(--plaque-inset);
    box-sizing: border-box;
    pointer-events: none;
}

.the-question-ornament {
    position: relative;
    z-index: 1;
    display: block;
    width: 84px;
    height: 9px;
    margin: 0 auto 12px;
    background:
        linear-gradient(90deg, transparent 0%, var(--foil-line) 100%) left center / 38px 1px no-repeat,
        linear-gradient(270deg, transparent 0%, var(--foil-line) 100%) right center / 38px 1px no-repeat;
}
.the-question-ornament::before {
    content: '';
    position: absolute;
    left: 50%;
    top: 50%;
    width: 5px;
    height: 5px;
    background: var(--accent-warm);
    transform: translate(-50%, -50%) rotate(45deg);
}

.the-question-question {
    position: relative;
    z-index: 1;
    margin: 0 auto;
    padding: 0 22px;
    max-width: 19em;
    font-family: var(--font-display);
    font-style: italic;
    font-weight: 400;
    font-size: clamp(1.26rem, 5.3vw, 1.6rem);
    line-height: 1.3;
    color: var(--text-primary);
    text-wrap: balance;
    box-sizing: border-box;
}

/* ───── The zone: the Yes, its bloom, and the No's lattice (see header) ───── */
.the-question-zone {
    position: relative;
    z-index: 1;
    width: 100%;
    height: 194px;
    margin-top: 12px;
}

.the-question-yes {
    position: absolute;
    z-index: 3;                            /* the No passes (and ducks) behind it */
    left: calc(20% - 43px);
    top: 68px;
    width: 60%;
    height: 58px;
    margin: 0;
    padding: 0 12px;
    border: 0;
    border-radius: 999px;
    overflow: hidden;
    isolation: isolate;
    background: var(--btn-fill);
    box-shadow: var(--btn-shadow);
    color: var(--btn-ink);
    font-family: var(--font-body);
    font-weight: 600;
    font-size: clamp(1rem, 4.4vw, 1.12rem);
    line-height: 1;
    letter-spacing: 0.01em;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    -webkit-user-select: none;
    user-select: none;
}
.the-question-yes:focus-visible {
    outline: 2px solid var(--focus-ring);
    outline-offset: 3px;
}
.the-question-yes-label {
    position: relative;
    z-index: 1;
}
/* The gold flood: a disc of gold light spreading from the thumb (JS places and scales it). */
.the-question-yes-flood {
    position: absolute;
    left: 0;
    top: 0;
    z-index: 0;
    width: 150px;
    height: 150px;
    border-radius: 50%;
    background: radial-gradient(circle, var(--light-core) 0%, var(--accent-warm-bright) 40%, var(--accent-warm) 74%, rgba(226, 177, 85, 0) 100%);
    opacity: 0;
    transform: translate(-50%, -50%) scale(0);
    pointer-events: none;
}
/* The Yes's glow (the --btn-shadow bloom), pre-painted: only its opacity and scale move. */
.the-question-yes-bloom {
    position: absolute;
    z-index: 2;
    left: calc(2% - 43px);
    top: 40px;
    width: 96%;
    height: 114px;
    border-radius: 50%;
    background: radial-gradient(closest-side, rgba(246, 220, 154, 0.55) 0%, rgba(226, 177, 85, 0.22) 55%, rgba(226, 177, 85, 0) 100%);
    opacity: 0;
    pointer-events: none;
}

/* The No: a small blush ghost. Its anchor is its home beside the Yes (the
   JS offsets it from here with a transform); the body inside carries the
   squash, lean, duck and wiggle, pivoting on its feet. */
.the-question-no {
    position: absolute;
    z-index: 2;
    left: calc(80% + 14px);
    top: 97px;
    display: block;
    margin: 0;
    padding: 0;
    border: 0;
    background: none;
    color: inherit;
    font: inherit;
    cursor: pointer;
    transform: translate(-50%, -50%);
    -webkit-tap-highlight-color: transparent;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    user-select: none;
    touch-action: none;
}
.the-question-no:focus {
    outline: none;                         /* it never keeps focus: a focus is answered with a dodge */
}
.the-question-no-body {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 58px;
    height: 38px;
    padding: 0 16px;
    border: 1.5px solid var(--no-outline);
    border-radius: 999px;
    background: var(--no-fill);
    color: var(--no-ink);
    font-family: var(--font-body);
    font-weight: 500;
    font-size: 0.82rem;
    line-height: 1;
    letter-spacing: 0.05em;
    white-space: nowrap;
    transform-origin: 50% 100%;
    box-sizing: border-box;
}
.the-question-no-label {
    display: inline-block;
}

/* ───── The warm light pool the envelope rises into ─────
   the-seal's key light exactly (.the-seal-key: same box, same gradient),
   so it can land at the opacity the-seal's key picks up from and the cut
   stays invisible. Under the envelope, over the card. JS rises and fades it. */
.the-question-pool {
    position: absolute;
    z-index: 3;
    left: var(--env-x);
    top: calc(var(--env-y) - var(--env-h) * 0.35);
    width: calc(var(--env-w) * 2.8);
    aspect-ratio: 1;
    margin: calc(var(--env-w) * -1.4) 0 0 calc(var(--env-w) * -1.4);
    border-radius: 50%;
    background: radial-gradient(closest-side, var(--halo) 0%, var(--room-gold-light) 30%, var(--halo-far) 55%, transparent 100%);
    opacity: 0;
    pointer-events: none;
}

/* Its brighter core, centred where the envelope comes to rest: it leads the
   envelope up out of the bottom of the frame and is gone by the cut. */
.the-question-pool-core {
    position: absolute;
    z-index: 3;
    left: calc(var(--env-x) - var(--env-w) * 0.95);
    top: calc(var(--env-y) - var(--env-w) * 0.62);
    width: calc(var(--env-w) * 1.9);
    height: calc(var(--env-w) * 1.24);
    border-radius: 50%;
    background: radial-gradient(closest-side, rgba(246, 220, 154, 0.4) 0%, rgba(226, 177, 85, 0.18) 45%, rgba(226, 177, 85, 0) 100%);
    opacity: 0;
    pointer-events: none;
}

/* ───── The envelope (continuity: tokens.css "Continuity geometry") ─────
   Positioned without a transform, so its layout box is exactly the
   continuity box; the rise is the inner wrapper's transform alone. */
.the-question-envelope {
    position: absolute;
    z-index: 4;
    left: calc(var(--env-x) - var(--env-w) / 2);
    top: calc(var(--env-y) - var(--env-h) / 2);
    width: var(--env-w);
    height: var(--env-h);
    visibility: hidden;
    pointer-events: none;
}
.the-question-container[data-the-question-state="tapped"] .the-question-envelope {
    visibility: visible;
}
.the-question-envelope-rise {
    position: absolute;
    inset: 0;
}
/* Every part below is drawn exactly as the-seal draws its own copy (its
   css: env-back, pocket, fold / mouth / edge strokes, flap, wax, monogram,
   address), so the cut at the beat boundary is invisible. */
.the-question-envelope-back {
    position: absolute;
    inset: 0;
    border-radius: 3px;
    background: linear-gradient(180deg, var(--void) 0%, var(--bg-primary) 58%, var(--bg-elevated) 100%);
    box-shadow: var(--envelope-shadow);
}
/* The pocket: the envelope's front, its V mouth (38% deep) hidden under the closed flap. */
.the-question-envelope-pocket {
    position: absolute;
    inset: 0;
    background: var(--envelope-body);
    clip-path: polygon(0 0, 50% 38%, 100% 0, 100% 100%, 0 100%);
}
.the-question-envelope-lines {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}
.the-question-envelope-edge {
    fill: none;
    stroke: var(--envelope-edge);
    stroke-width: 2px;
    vector-effect: non-scaling-stroke;
}
.the-question-envelope-fold {
    fill: none;
    stroke: var(--foil-line-soft);
    stroke-width: 1px;
    vector-effect: non-scaling-stroke;
}
.the-question-envelope-mouth {
    fill: none;
    stroke: var(--foil-line-strong);
    stroke-width: 2px;
    vector-effect: non-scaling-stroke;
    stroke-linejoin: round;
}
/* The closed flap: a triangle from the top edge, its tip at --flap-depth. */
.the-question-envelope-flap {
    position: absolute;
    inset: 0;
    background: var(--envelope-flap);
    clip-path: polygon(0 0, 100% 0, 50% var(--flap-depth));
}
.the-question-envelope-flap-line {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: visible;
}
.the-question-envelope-flap-line path {
    fill: none;
    stroke: var(--envelope-edge);
    stroke-width: 2px;
    vector-effect: non-scaling-stroke;
    stroke-linejoin: round;
}
/* "Its foil edge glimmering": a soft band of light that crosses the envelope as it rises. */
.the-question-envelope-glint-clip {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
}
.the-question-envelope-glint {
    position: absolute;
    top: -30%;
    bottom: -30%;
    left: 0;
    width: 30%;
    background: linear-gradient(90deg, rgba(246, 220, 154, 0) 0%, rgba(246, 220, 154, 0.3) 50%, rgba(246, 220, 154, 0) 100%);
    transform: translateX(-160%) skewX(-18deg);
}

/* The address, "For {toName}": one gold Pinyon line on the pocket, below the
   seal, in the-seal's box (top 79%, 4% in from each side, line-height 1.15),
   so its glyphs sit exactly where the-seal's copy of them will. The
   font-size is the fit (the-seal copies it from here as it enters). */
.the-question-address {
    position: absolute;
    left: 4%;
    right: 4%;
    top: 79%;
    margin: 0;
    text-align: center;
    white-space: nowrap;
    font-family: var(--font-script);
    font-weight: 400;
    font-size: var(--the-question-address-size, calc(var(--env-w) * 0.1));
    line-height: 1.15;
    color: var(--accent-warm-bright);
    text-shadow: 0 0 12px var(--accent-warm-glow-soft);
}
/* The wipe's window: room around the script's swashes, given back by the
   negative margins so the glyphs stay on the plain line's position. */
.the-question-address-clip {
    display: inline-block;
    vertical-align: top;
    overflow: hidden;
    padding: 0.32em 0.24em;
    margin: -0.32em -0.24em;
}
.the-question-address-text {
    display: inline-block;
    vertical-align: top;
}
.the-question-address-nib {
    position: absolute;
    left: 0;
    top: 50%;
    width: 16px;
    height: 16px;
    margin: -8px 0 0 -8px;
    border-radius: 50%;
    background: radial-gradient(circle, var(--light-core) 0%, var(--accent-warm-bright) 38%, rgba(226, 177, 85, 0) 72%);
    opacity: 0;
    pointer-events: none;
}

/* The wax seal: --seal-d, centred on the flap's tip, in the-seal's wax.
   Centred with margins, so its transform is free for the breath. Its
   ::after belongs to ReveelStage.lightSweep. */
.the-question-envelope .the-question-seal {
    position: absolute;
    left: 50%;
    top: var(--flap-depth);
    width: var(--seal-d);
    height: var(--seal-d);
    margin: calc(var(--seal-d) / -2) 0 0 calc(var(--seal-d) / -2);
    border-radius: 47% 53% 49% 51% / 52% 46% 54% 48%;
    background: var(--wax-gold);
    box-shadow: var(--wax-rim), 0 3px 7px rgba(22, 5, 9, 0.5), 0 0 0 1px rgba(184, 134, 47, 0.55);
}
/* The stamp's impression ring. */
.the-question-seal::before {
    content: '';
    position: absolute;
    inset: 15%;
    border-radius: 50%;
    border: 1px solid rgba(184, 134, 47, 0.8);
    box-shadow: inset 0 1px 2px rgba(22, 5, 9, 0.35), 0 1px 0 rgba(246, 220, 154, 0.45);
}
.the-question-seal-initial {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding-bottom: 0.05em;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: calc(var(--seal-d) * 0.44);
    line-height: 1;
    color: var(--accent-warm-deep);
    text-shadow: 0 1px 0 rgba(246, 220, 154, 0.6), 0 -1px 0 rgba(22, 5, 9, 0.3);
}

/* ───── The ribbon of light (the name's glow, travelling to the address) ───── */
.the-question-ribbon {
    position: absolute;
    left: 0;
    top: 0;
    z-index: 5;
    width: 120px;
    height: 120px;
    border-radius: 50%;
    background: radial-gradient(closest-side, rgba(249, 238, 219, 0.95) 0%, rgba(246, 220, 154, 0.7) 30%, rgba(226, 177, 85, 0.26) 62%, rgba(226, 177, 85, 0) 100%);
    opacity: 0;
    pointer-events: none;
}
.the-question-ribbon-trail {
    background: radial-gradient(closest-side, rgba(246, 220, 154, 0.7) 0%, rgba(226, 177, 85, 0.22) 55%, rgba(226, 177, 85, 0) 100%);
}

/* ───── Reduced motion: every part plays, calmly ─────
   The sheen and the halo's breath stop; the JS cross-fades the No between
   its spots, fades the plaque, cross-fades the name onto the envelope and
   fades the envelope up in place (no ribbon, no rise, no camera push). */
@media (prefers-reduced-motion: reduce) {
    .the-question-container[data-the-question-state] .the-question-name-line,
    .the-question-container[data-the-question-state] .the-question-halo {
        animation: none;
    }
}