/* ═══════════════════════════════════════════
   the-seal — beat 2 (18 s, verb hold, hold `crack` at 1.2 s)
   The film's first wow: the recipient's thumb warms the gold wax white-hot
   and breaks it, and goldBurst (the spine's fx-burst canvas) lands on the
   score's first hit.

   Performance model (as graduation-glow-v2's cap-toss): this file is the
   beat's ENTRY state and nothing else. Every reveal, loop, the hold's ring
   and the whole payoff are Web Animations started by js/the-seal.js
   (prepare() cancels them all, so the CSS below is what a replay returns
   to). Web Animations fire no DOM events and write no attributes, so the
   injected badge guard stays asleep. Only transform and opacity animate
   (plus the hairline stroke-dashoffset of the ring, the cracks and the
   ribbon glints, and the background-position of the line's sheen, which
   repaint a few pixels); the glow, the lamp, the rays and the dim are
   pre-painted layers whose opacity moves, never an animating box-shadow
   or filter.

   Geometry: the envelope, its seal and the three gifts lay out ONLY from
   tokens.css's continuity block (--env-*, --flap-depth, --seal-d,
   --gift-*, --letter-peek), so the cut from the-question (closed, seal
   breathing) and the cut to three-gifts (open, gifts in their arc, the
   letter peeking, the halves on the table) are invisible.

   Every class and keyframe here is prefixed `the-seal-`.
   ═══════════════════════════════════════════ */

.the-seal-container {
    position: absolute;
    inset: 0;
    overflow: visible;
    pointer-events: none;
    color: var(--text-primary);
    font-family: var(--font-body);
    user-select: none;
    -webkit-user-select: none;
}

/* ───── The room: a step darker, the key light warming behind the envelope ───── */
.the-seal-dim {
    position: absolute;
    inset: -25%;
    background: radial-gradient(56% 44% at 50% 56%, transparent 0%, transparent 34%, var(--scrim) 100%);
    opacity: 0;
}
.the-seal-key {
    position: absolute;
    left: var(--env-x);
    top: calc(var(--env-y) - var(--env-h) * 0.35);
    width: calc(var(--env-w) * 2.8);
    aspect-ratio: 1;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    background: radial-gradient(closest-side, var(--halo) 0%, var(--room-gold-light) 30%, var(--halo-far) 55%, transparent 100%);
    opacity: 0;
}

/* ───── The envelope (continuity geometry) ─────
   Positioned, but no transform, opacity or z-index: not a stacking
   context, so its children paint strictly in DOM order. */
.the-seal-envelope {
    position: absolute;
    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);
}
.the-seal-defs {
    position: absolute;
    width: 0;
    height: 0;
    overflow: hidden;
}
.the-seal-stop-paper { stop-color: var(--paper); }
.the-seal-stop-champagne { stop-color: var(--accent-celestial); }
.the-seal-stop-cream { stop-color: var(--text-secondary); }
.the-seal-stop-gold-hi { stop-color: var(--accent-warm-bright); }
.the-seal-stop-gold { stop-color: var(--accent-warm); }
.the-seal-stop-gold-deep { stop-color: var(--accent-warm-deep); }
.the-seal-stop-wine { stop-color: var(--wine); }
.the-seal-stop-ground { stop-color: var(--bg-primary); }
.the-seal-stop-pool { stop-color: var(--bg-elevated); }
.the-seal-stop-void { stop-color: var(--void); }
.the-seal-stop-light { stop-color: var(--crack-light); }

/* The inside of the envelope (seen through the open mouth), carrying the
   envelope's drop shadow on the table. */
.the-seal-env-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);
}

/* Foil hairlines along a flap's edges (1px seen inside the clip). */
.the-seal-flap-line {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: visible;
}
.the-seal-flap-line path {
    fill: none;
    stroke: var(--envelope-edge);
    stroke-width: 2px;
    vector-effect: non-scaling-stroke;
    stroke-linejoin: round;
}

/* The open flap: the champagne lining, standing up off the top edge.
   Entry: edge-on (rotateX -90deg, hinge at its bottom) and unseen. */
.the-seal-flap-open {
    position: absolute;
    left: 0;
    top: -100%;
    width: 100%;
    height: 100%;
    background: var(--envelope-lining);
    clip-path: polygon(0 100%, 100% 100%, 50% calc(100% - var(--flap-depth)));
    transform-origin: 50% 100%;
    transform: perspective(700px) rotateX(-90deg);
    opacity: 0;
}

/* The letter: cream paper inside, its top edge to show --letter-peek above
   the mouth. Entry: 25% of its height lower, i.e. below the mouth. */
.the-seal-letter {
    position: absolute;
    left: 7%;
    width: 86%;
    top: calc(var(--letter-peek) * -1);
    height: 80%;
    border-radius: 2px 2px 0 0;
    background:
        repeating-linear-gradient(180deg, transparent 0, transparent 13px, var(--paper-rule) 13px, var(--paper-rule) 14px) 0 10px / 100% 100% no-repeat,
        linear-gradient(180deg, var(--paper) 0%, var(--paper) 55%, var(--accent-celestial) 100%);
    box-shadow: inset 0 1px 0 var(--paper-edge), 0 -2px 10px var(--accent-warm-glow-soft);
    transform: translateY(25%);
}

/* Rays pouring out of the mouth: a pre-painted fan, opacity + scaleY only. */
.the-seal-rays {
    position: absolute;
    left: 50%;
    bottom: 80%;
    width: 230%;
    height: 190%;
    margin-left: -115%;
    transform-origin: 50% 100%;
    transform: scaleY(0.3);
    opacity: 0;
    background: repeating-conic-gradient(from 0deg at 50% 100%,
        transparent 0deg, var(--ray) 2.4deg, transparent 6deg, transparent 11deg);
    -webkit-mask-image: radial-gradient(46% 100% at 50% 100%, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0.55) 42%, transparent 80%);
    mask-image: radial-gradient(46% 100% at 50% 100%, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0.55) 42%, transparent 80%);
}
.the-seal-rays::before {
    content: '';
    position: absolute;
    left: 50%;
    bottom: 0;
    width: 64%;
    height: 56%;
    transform: translateX(-50%);
    background: radial-gradient(50% 100% at 50% 100%, var(--light-core) 0%, var(--halo) 38%, transparent 76%);
}

/* ───── The three gifts ─────
   Their resting places are the continuity arc: the side gifts centred
   --gift-spread left/right of the envelope's centre and --gift-rise above
   it, the middle one --gift-rise-mid above. Entry: inside the envelope,
   below the mouth (behind the pocket), drawn in toward the centre. The
   start offsets are fractions of the gift's own size, derived from the
   token ratios (gift-w 0.34 env-w, spread 0.38 env-w, env-h 0.66 env-w):
   x 0.5 x spread = 56%; y (rise + 0.25 env-h) = 239%, mid 278%. */
.the-seal-gift {
    position: absolute;
    width: var(--gift-w);
    height: var(--gift-w);
    top: calc(50% - var(--gift-rise) - var(--gift-w) / 2);
    opacity: 0;
}
.the-seal-gift--strips {
    left: calc(50% - var(--gift-spread) - var(--gift-w) / 2);
    transform: translate(56%, 239%) rotate(-7deg) scale(0.85);
}
.the-seal-gift--song {
    left: calc(50% - var(--gift-w) / 2);
    top: calc(50% - var(--gift-rise-mid) - var(--gift-w) / 2);
    transform: translate(0%, 278%) rotate(3deg) scale(0.85);
}
.the-seal-gift--coupons {
    left: calc(50% + var(--gift-spread) - var(--gift-w) / 2);
    transform: translate(-56%, 239%) rotate(7deg) scale(0.85);
}
/* A soft halo in the key light, so cream reads against the dark. */
.the-seal-gift::before {
    content: '';
    position: absolute;
    inset: -32%;
    border-radius: 50%;
    background: radial-gradient(closest-side, var(--halo) 0%, var(--halo-far) 55%, transparent 100%);
}
.the-seal-gift-bob {
    position: absolute;
    inset: 0;
}
.the-seal-gift-art {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: visible;
    transform-origin: 50% 92%;            /* the invite's swell grows up from the gift's base */
}
/* The invite's warm swell behind each gift (pre-painted; only opacity moves). */
.the-seal-gift-glow {
    position: absolute;
    inset: -38%;
    border-radius: 50%;
    background: radial-gradient(closest-side, rgba(249, 238, 219, 0.42) 0%, rgba(246, 220, 154, 0.2) 42%, rgba(226, 177, 85, 0) 74%);
    opacity: 0;
}
/* A glint along the gold ribbon (stroke-dashoffset: a short bright dash
   travels the path, passing under the bow), and a twinkle where it runs
   off the gift's right edge, against the dark room. */
.the-seal-glint,
.the-seal-glint-soft {
    fill: none;
    stroke-linecap: round;
    stroke-dasharray: 22px 140px;
    stroke-dashoffset: 22px;
}
.the-seal-glint { stroke: var(--light-core); stroke-width: 2.2px; }
.the-seal-glint-soft { stroke: var(--accent-warm-bright); stroke-width: 6.5px; opacity: 0.85; }
.the-seal-gift-twinkle {
    position: absolute;
    left: 94%;
    top: 63%;
    width: 34px;
    height: 34px;
    margin: -17px 0 0 -17px;
    border-radius: 50%;
    background: radial-gradient(closest-side, var(--light-core) 0%, rgba(246, 220, 154, 0.55) 22%, rgba(226, 177, 85, 0) 72%);
    opacity: 0;
    transform: scale(0);
}
/* Its four points: two thin bars of light, crossed. */
.the-seal-gift-twinkle::before,
.the-seal-gift-twinkle::after {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    width: 100%;
    height: 2px;
    margin-top: -1px;
    background: linear-gradient(90deg, rgba(249, 238, 219, 0) 0%, var(--light-core) 50%, rgba(249, 238, 219, 0) 100%);
}
.the-seal-gift-twinkle::after {
    transform: rotate(90deg);
}

/* Tissue, gold thread, a bow and a small blank tag. */
.the-seal-tissue-back { fill: var(--accent-celestial); stroke: var(--paper-edge); stroke-width: 0.6px; stroke-linejoin: round; }
.the-seal-tissue { fill: url(#the-seal-g-tissue); stroke: var(--paper-edge); stroke-width: 0.6px; }
.the-seal-tissue-shade { fill: var(--paper-shade); }
.the-seal-tissue-fold { fill: none; stroke: var(--paper-shade); stroke-width: 0.9px; stroke-linecap: round; }
.the-seal-thread { fill: none; stroke: var(--accent-warm); stroke-width: 2.6px; }
.the-seal-thread-hi { fill: none; stroke: var(--accent-warm-bright); stroke-width: 0.7px; opacity: 0.85; }
.the-seal-bow { fill: url(#the-seal-g-gilt); stroke: var(--accent-warm-deep); stroke-width: 0.6px; }
.the-seal-bow-tail { fill: none; stroke: var(--accent-warm); stroke-width: 2.2px; stroke-linecap: round; }
.the-seal-knot { fill: var(--accent-warm-bright); stroke: var(--accent-warm-deep); stroke-width: 0.6px; }
.the-seal-tag { fill: var(--accent-celestial); stroke: var(--accent-warm-deep); stroke-width: 0.6px; stroke-linejoin: round; }
.the-seal-tag-hole { fill: var(--accent-warm-deep); }
.the-seal-tag-string { fill: none; stroke: var(--accent-warm-deep); stroke-width: 0.6px; }

/* What peeks out: a strip's top frames, a record's gold edge, a ticket's stub. */
.the-seal-strip { fill: var(--paper); stroke: var(--paper-edge); stroke-width: 0.6px; }
.the-seal-photo-a { fill: url(#the-seal-g-photo-a); }
.the-seal-photo-b { fill: url(#the-seal-g-photo-b); }
.the-seal-record { fill: url(#the-seal-g-record); }
.the-seal-groove { fill: none; stroke: rgba(246, 220, 154, 0.14); stroke-width: 0.6px; }
.the-seal-record-label { fill: var(--wine); }
.the-seal-record-hole { fill: var(--void); }
.the-seal-record-edge { fill: none; stroke: var(--accent-warm); stroke-width: 2.2px; }
.the-seal-record-shine { fill: none; stroke: rgba(249, 238, 219, 0.42); stroke-width: 1.1px; stroke-linecap: round; }
.the-seal-ticket { fill: var(--paper); stroke: var(--paper-edge); stroke-width: 0.6px; }
.the-seal-ticket-under { fill: var(--accent-celestial); }
.the-seal-ticket-stub { fill: var(--wine); }
.the-seal-perf { fill: none; stroke: var(--coupon-perf); stroke-width: 0.8px; stroke-dasharray: 1.6 1.4; }
.the-seal-ticket-ink { fill: none; stroke: var(--ink-soft); stroke-width: 1px; stroke-linecap: round; opacity: 0.45; }
.the-seal-ticket-star { fill: var(--accent-warm-bright); }

/* ───── The pocket: the envelope's front, with a V mouth ─────
   The V (38% deep) sits inside the closed flap's triangle (--flap-depth,
   56%), so a closed envelope shows none of it. */
.the-seal-pocket {
    position: absolute;
    inset: 0;
    background: var(--envelope-body);
    clip-path: polygon(0 0, 50% 38%, 100% 0, 100% 100%, 0 100%);
}
.the-seal-pocket-lines {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}
.the-seal-pocket-edge { fill: none; stroke: var(--envelope-edge); stroke-width: 2px; vector-effect: non-scaling-stroke; }
.the-seal-fold { fill: none; stroke: var(--foil-line-soft); stroke-width: 1px; vector-effect: non-scaling-stroke; }
.the-seal-mouth { fill: none; stroke: var(--foil-line-strong); stroke-width: 2px; vector-effect: non-scaling-stroke; stroke-linejoin: round; }

/* "For {toName}", copied from the-question's envelope as the beat enters. */
.the-seal-address {
    position: absolute;
    left: 4%;
    right: 4%;
    top: 79%;
    margin: 0;
    text-align: center;
    white-space: nowrap;
    font: 400 calc(var(--env-w) * 0.1)/1.15 var(--font-script);
    color: var(--accent-warm-bright);
    text-shadow: 0 0 12px var(--accent-warm-glow-soft);
}

/* Light leaking from beneath the closed flap's edges during the lead:
   brightest at the tip (the seal), falling off toward the corners, and
   clipped to the envelope (the svg's own box). */
.the-seal-flap-glow {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    opacity: 0;
}
.the-seal-flap-glow-soft { fill: none; stroke: url(#the-seal-g-leak); stroke-width: 14px; opacity: 0.7; vector-effect: non-scaling-stroke; stroke-linejoin: round; }
.the-seal-flap-glow-core { fill: none; stroke: url(#the-seal-g-leak); stroke-width: 3.5px; vector-effect: non-scaling-stroke; stroke-linejoin: round; }

/* The closed flap: hinged at the top edge, its tip at --flap-depth. */
.the-seal-flap {
    position: absolute;
    inset: 0;
    background: var(--envelope-flap);
    clip-path: polygon(0 0, 100% 0, 50% var(--flap-depth));
    transform-origin: 50% 0;
}

/* ───── The wax (shared by the whole seal and its two halves) ───── */
.the-seal-wax-layer {
    position: absolute;
    inset: 0;
    border-radius: 47% 53% 49% 51% / 52% 46% 54% 48%;
}
.the-seal-wax-base {
    background: var(--wax-gold);
    box-shadow: 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-seal-wax-base::after {
    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-seal-wax-warm { background: var(--wax-warm); opacity: 0; }
.the-seal-wax-hot { background: var(--wax-hot); opacity: 0; }
.the-seal-wax-rim { box-shadow: var(--wax-rim); }
.the-seal-monogram {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding-bottom: 0.05em;
    font: 700 calc(var(--seal-d) * 0.44)/1 var(--font-display);
    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 halves: the same wax, split along the crack ───── */
.the-seal-half {
    position: absolute;
    left: calc(50% - var(--seal-d) / 2);
    top: calc(var(--flap-depth) - var(--seal-d) / 2);
    width: var(--seal-d);
    height: var(--seal-d);
    opacity: 0;
}
.the-seal-half-wax {
    position: absolute;
    inset: 0;
}
.the-seal-half--left .the-seal-half-wax {
    clip-path: polygon(0 0, 50% 0, 45% 13%, 55% 27%, 48% 40%, 51% 50%, 46% 61%, 55% 74%, 47% 87%, 50% 100%, 0 100%);
}
.the-seal-half--right .the-seal-half-wax {
    clip-path: polygon(50% 0, 100% 0, 100% 100%, 50% 100%, 47% 87%, 55% 74%, 46% 61%, 51% 50%, 48% 40%, 55% 27%, 45% 13%);
}
.the-seal-half-hot { background: var(--wax-warm); opacity: 0; }
.the-seal-half-edge {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}
.the-seal-half-edge path { fill: none; stroke: var(--accent-warm-bright); stroke-width: 2px; vector-effect: non-scaling-stroke; stroke-linejoin: round; }

/* Where the halves come to rest on the table (the transforms match the
   tumble's last pose in js/the-seal.js), and their contact shadows. */
.the-seal-rest-shadow {
    position: absolute;
    left: calc(50% - var(--seal-d) / 2);
    top: calc(var(--flap-depth) - var(--seal-d) / 2);
    width: var(--seal-d);
    height: var(--seal-d);
    border-radius: 50%;
    background: radial-gradient(closest-side, rgba(22, 5, 9, 0.62), transparent);
    opacity: 0;
}
.the-seal-rest-shadow--left { transform: translate(-150%, 176%) scale(1.15, 0.34); }
.the-seal-rest-shadow--right { transform: translate(129%, 187%) scale(1.15, 0.34); }

/* ───── The hold surface: the seal, its ring, its heat ───── */
.the-seal-press {
    position: absolute;
    left: calc(50% - var(--seal-d) * 0.95);
    top: calc(var(--flap-depth) - var(--seal-d) * 0.95);
    width: calc(var(--seal-d) * 1.9);
    height: calc(var(--seal-d) * 1.9);
    border-radius: 50%;
    pointer-events: auto;
    cursor: pointer;
    touch-action: none;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
}
.the-seal-ring {
    position: absolute;
    left: 50%;
    top: 50%;
    width: calc(var(--seal-d) + 24px);
    height: calc(var(--seal-d) + 24px);
    margin: calc((var(--seal-d) + 24px) / -2) 0 0 calc((var(--seal-d) + 24px) / -2);
    overflow: visible;
}
.the-seal-ring-track {
    fill: none;
    stroke: var(--ring-track);
    stroke-width: 2.2px;
    stroke-dasharray: 100px 100px;
    stroke-dashoffset: 100px;
}
.the-seal-ring-glow {
    fill: none;
    stroke: var(--accent-warm-glow);
    stroke-width: 7px;
    stroke-linecap: round;
    stroke-dasharray: 100px 100px;
    stroke-dashoffset: 100px;
    opacity: 0;
}
.the-seal-ring-fill {
    fill: none;
    stroke: var(--ring-fill);
    stroke-width: 3.2px;
    stroke-linecap: round;
    stroke-dasharray: 100px 100px;
    stroke-dashoffset: 100px;
    opacity: 0;
}
.the-seal-shudder {
    position: absolute;
    left: 50%;
    top: 50%;
    width: var(--seal-d);
    height: var(--seal-d);
    margin: calc(var(--seal-d) / -2) 0 0 calc(var(--seal-d) / -2);
}
/* The faint ember under the breathing seal. */
.the-seal-ember {
    position: absolute;
    inset: -55%;
    border-radius: 50%;
    background: radial-gradient(closest-side, rgba(238, 106, 69, 0.42) 0%, rgba(238, 106, 69, 0.12) 55%, transparent 100%);
    opacity: 0;
}
/* The heat the hold builds (--seal-glow): painted once, its opacity moves. */
.the-seal-heat-glow {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    box-shadow: var(--seal-glow), 0 0 90px rgba(246, 220, 154, 0.32);
    opacity: 0;
    transform: scale(0.85);
}
.the-seal-wax {
    position: absolute;
    inset: 0;
}
/* Light leaking through the cracks. */
.the-seal-leak {
    position: absolute;
    inset: -30%;
    border-radius: 50%;
    background: radial-gradient(closest-side, var(--crack-light) 0%, rgba(246, 220, 154, 0.42) 42%, transparent 100%);
    opacity: 0;
}
.the-seal-cracks {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: visible;
}
.the-seal-crack-glow {
    fill: none;
    stroke: rgba(246, 220, 154, 0.55);
    stroke-width: 5.5px;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-dasharray: 100px 100px;
    stroke-dashoffset: 100px;
}
.the-seal-crack {
    fill: none;
    stroke: var(--crack-light);
    stroke-width: 1.9px;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-dasharray: 100px 100px;
    stroke-dashoffset: 100px;
}

/* ───── The line, after the gifts rise ───── */
.the-seal-line {
    position: absolute;
    left: 0;
    right: 0;
    top: calc(var(--env-y) + var(--env-h) * 0.85);
    margin: 0;
    padding-inline: 16px;
    text-align: center;
    opacity: 0;
}
.the-seal-line-text {
    position: relative;
    display: inline-block;
    padding-inline: 0.12em;
    font: italic 400 clamp(1.7rem, 7.4vw, 2.4rem)/1.2 var(--font-display);
    color: var(--accent-warm-bright);
    /* the foil, under a narrow band of light (the sheen) the JS sends across it */
    background-image:
        linear-gradient(100deg, transparent 41%, rgba(249, 238, 219, 0.95) 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;
    transform-origin: 50% 60%;
}
/* A warm wash behind the line, so it lands in light (pre-painted; opacity only). */
.the-seal-line-glow {
    position: absolute;
    left: 50%;
    top: 0.1em;
    width: min(88%, 340px);
    height: 3.4em;
    margin-left: max(-44%, -170px);
    border-radius: 50%;
    background: radial-gradient(closest-side, rgba(246, 220, 154, 0.26) 0%, rgba(226, 177, 85, 0.1) 55%, rgba(226, 177, 85, 0) 100%);
    opacity: 0;
}
/* A gilt rule drawn out beneath it, centre outward: two hairlines and a diamond. */
.the-seal-line-rule {
    position: relative;
    display: block;
    width: 112px;
    height: 9px;
    margin: 0.35rem auto 0;
    background:
        linear-gradient(90deg, transparent 0%, var(--foil-line) 100%) left center / 50px 1px no-repeat,
        linear-gradient(270deg, transparent 0%, var(--foil-line) 100%) right center / 50px 1px no-repeat;
    transform: scaleX(0);
    opacity: 0;
}
.the-seal-line-rule::before {
    content: '';
    position: absolute;
    left: 50%;
    top: 50%;
    width: 5px;
    height: 5px;
    margin: -2.5px 0 0 -2.5px;
    background: var(--accent-warm);
    transform: rotate(45deg);
}

/* ───── The hint and its button ───── */
.the-seal-controls {
    position: absolute;
    left: 0;
    right: 0;
    bottom: calc(7% + env(safe-area-inset-bottom, 0px));
    display: grid;
    justify-items: center;
    gap: 0.8rem;
    padding-inline: 16px;
    text-align: center;
    opacity: 0;
    visibility: hidden;
}
.the-seal-hint {
    margin: 0;
    font: 500 0.78rem/1.35 var(--font-body);
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--text-secondary);
}
.the-seal-break {
    pointer-events: auto;
    min-height: 44px;
    padding: 0.72rem 1.4rem;
    font: 500 0.9rem/1 var(--font-body);
    letter-spacing: 0.02em;
    color: var(--text-primary);
    background: var(--glass);
    border: 1px solid var(--btn-ghost-border);
    border-radius: 999px;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}
.the-seal-break:focus-visible {
    outline: 2px solid var(--focus-ring);
    outline-offset: 3px;
}

/* ───── Reduced motion: the beat plays in full, calmly ─────
   The camera and the shake no-op in ReveelStage and goldBurst takes its
   calm variant (<= 60 particles); js/the-seal.js branches on
   film.reduced() and plays fades where the full path moves: the ring
   still fills and the wax still warms, the cracks fade in rather than
   draw, the seal does not shudder, the halves cross-fade apart to the
   table, the flap cross-fades to the open envelope, the gifts and the
   letter fade up in place. These are the in-place states those fades
   reveal. */
@media (prefers-reduced-motion: reduce) {
    .the-seal-gift--strips,
    .the-seal-gift--song,
    .the-seal-gift--coupons,
    .the-seal-flap-open,
    .the-seal-rays {
        transform: none;
    }
    .the-seal-letter {
        transform: none;
        opacity: 0;
    }
    .the-seal-half--left {
        transform: perspective(420px) translate(-150%, 154%) rotateZ(-24deg) rotateX(48deg);
    }
    .the-seal-half--right {
        transform: perspective(420px) translate(129%, 165%) rotateZ(31deg) rotateX(48deg);
    }
    .the-seal-cracks {
        opacity: 0;
    }
    .the-seal-crack,
    .the-seal-crack-glow {
        stroke-dashoffset: 0;
    }
    .the-seal-ring-track {
        stroke-dashoffset: 0;
        opacity: 0;
    }
}