/* ═══════════════════════════════════════════
   the-envelope — beat 3 of birthday-scrapbook (6.4 s, verb open, hold `open-now` at 3.4 s)

   A red envelope on the knit stripes, a cream card tucked in it that types
   "hey, i have a surprise for you", four gold foil stars sticking on, a
   hand-inked heart on the card's corner. At 3.4 s "open now" appears (white
   on a crimson chip: no text ever sits bare on the stripes). The tap peels
   the heart, lifts the flap, slides the card up out of the envelope as the
   envelope slips away, and swells the card until its cream fills the screen.

   This file is the beat's ENTRY state (what prepare() returns to) plus the
   CSS-only ambient loops (star twinkle, envelope sway, heart beat), which are
   parked while the section is not the active screen. Every reveal and the
   whole payoff are Web Animations started by js/the-envelope.js. Only
   transform and opacity animate (plus the heart's ink stroke-dashoffset);
   shadows, grain and filters are static, rasterised once.

   2.5D: the stripes sit at translateZ(-120px) (over-scaled so the push never
   shows an edge), the stars at 0, the envelope plane at translateZ(30px), the
   end flood nearest. All CSS; identical on both paths.

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

#screen-the-envelope {
    transform-style: preserve-3d;
}

.the-envelope-container {
    /* Geometry. Phone (portrait, primary): the envelope about 74vw wide, centred in the upper-middle. */
    --the-envelope-w: min(74vw, 42vh);
    --the-envelope-h: calc(var(--the-envelope-w) * 0.75);
    --the-envelope-cy: 45%;
    --the-envelope-open-y: 12%;          /* "open now" centre, up from the bottom (thumb zone) */

    position: absolute;
    inset: 0;
    transform-style: preserve-3d;
    pointer-events: none;
    font-family: var(--font-body);
    color: var(--text-primary);
    user-select: none;
    -webkit-user-select: none;
}
@supports (height: 1svh) {
    .the-envelope-container {
        --the-envelope-w: min(74vw, 42svh);
    }
}

/* ───── The ground: pink gingham underneath, the knit stripes cross-fading in over it ───── */
.the-envelope-ground {
    position: absolute;
    inset: -8%;
    transform: translateZ(-120px) scale(1.134);
}
.the-envelope-gingham {
    position: absolute;
    inset: 0;
    background: var(--ground-gingham-pink);
}
.the-envelope-stripes {
    position: absolute;
    inset: 0;
    opacity: 0;
    background:
        /* fine knit fibres: dark wine speckle, stretched vertically (the slight streak) */
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='k'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.15 0.3' numOctaves='3' seed='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.2  0 0 0 0 0  0 0 0 0 0.03  1.7 0 0 0 -0.66'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23k)'/%3E%3C/svg%3E"),
        /* heathered light fibres */
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='h'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' seed='11' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1  0 0 0 0 0.9  0 0 0 0 0.92  0 1.5 0 0 -0.8'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23h)'/%3E%3C/svg%3E"),
        /* the bands, with a 3 px feathered edge */
        repeating-linear-gradient(180deg,
            var(--stripe-cherry) 3px,
            var(--stripe-cherry) calc(var(--stripe-h) - 3px),
            var(--stripe-pink) calc(var(--stripe-h) + 3px),
            var(--stripe-pink) calc(var(--stripe-h) * 2 - 3px),
            var(--stripe-cherry) calc(var(--stripe-h) * 2 + 3px));
    background-size: 220px 220px, 180px 180px, auto;
}

/* ───── Gold foil stars ───── */
.the-envelope-stars {
    position: absolute;
    inset: 0;
    pointer-events: none;
}
.the-envelope-defs {
    position: absolute;
    width: 0;
    height: 0;
    overflow: hidden;
}
.the-envelope-stop-gold-light { stop-color: var(--star-gold-light); }
.the-envelope-stop-gold { stop-color: var(--star-gold); }
.the-envelope-stop-gold-shade { stop-color: var(--star-gold-shade); }

.the-envelope-star {
    --the-envelope-star-s: 16vw;
    --the-envelope-star-r: 0deg;
    --the-envelope-star-d: 0s;
    position: absolute;
    width: var(--the-envelope-star-s);
    height: var(--the-envelope-star-s);
}
.the-envelope-star-stick {
    width: 100%;
    height: 100%;
    opacity: 0;
}
.the-envelope-star-art {
    display: block;
    width: 100%;
    height: 100%;
    overflow: visible;
    transform: rotate(var(--the-envelope-star-r));
    animation: the-envelope-twinkle 3.2s var(--ease-breath) var(--the-envelope-star-d) infinite;
}
.the-envelope-star-body {
    fill: url(#the-envelope-g-foil);
    stroke: url(#the-envelope-g-foil);
    stroke-width: 7;
    stroke-linejoin: round;
}
.the-envelope-star-hi {
    fill: url(#the-envelope-g-foil-hi);
    opacity: 0.75;
}

/* Phone: the four corners (the top right one runs off the edge, as the reference's). */
.the-envelope-star--1 { --the-envelope-star-s: 24vw; --the-envelope-star-r: 14deg;  --the-envelope-star-d: 0s;   right: -5vw; top: 10%; }
.the-envelope-star--2 { --the-envelope-star-s: 14vw; --the-envelope-star-r: -16deg; --the-envelope-star-d: 0.9s; left: 3vw;   top: 17%; }
.the-envelope-star--3 { --the-envelope-star-s: 27vw; --the-envelope-star-r: -6deg;  --the-envelope-star-d: 1.7s; left: -6vw;  bottom: 3%; }
.the-envelope-star--4 { --the-envelope-star-s: 16vw; --the-envelope-star-r: 20deg;  --the-envelope-star-d: 2.4s; right: 7vw;  bottom: 22%; }

@keyframes the-envelope-twinkle {
    0%, 100% { transform: rotate(var(--the-envelope-star-r)) scale(1); }
    30%      { transform: rotate(calc(var(--the-envelope-star-r) + 4deg)) scale(1.08); }
    65%      { transform: rotate(calc(var(--the-envelope-star-r) - 4deg)) scale(1.03); }
}

/* ───── The envelope plane ───── */
.the-envelope-scene {
    position: absolute;
    left: calc(50% - var(--the-envelope-w) / 2);
    top: calc(var(--the-envelope-cy) - var(--the-envelope-h) / 2);
    width: var(--the-envelope-w);
    height: var(--the-envelope-h);
    transform: translateZ(30px);
    opacity: 0;
    pointer-events: none;
}
.the-envelope-sway {
    position: absolute;
    inset: 0;
    transform-origin: 50% 62%;
}
.the-envelope-back,
.the-envelope-front {
    position: absolute;
    inset: 0;
    transform: rotate(-12deg);
    transform-origin: 50% 50%;
}
.the-envelope-back-art,
.the-envelope-front-art {
    display: block;
    width: 100%;
    height: 100%;
    overflow: visible;
}

.the-envelope-shadow { fill: rgba(58, 0, 8, 0.55); }
.the-envelope-rear { fill: var(--bg-primary); }
.the-envelope-inside { fill: var(--bg-primary); }
.the-envelope-inside-shade { fill: rgba(58, 0, 8, 0.32); }
.the-envelope-grain { opacity: 0.4; }

/* The open flap, hinged on the body's top edge (viewBox y 100 of 8..102). */
.the-envelope-flap {
    position: absolute;
    left: 5%;
    top: 2.667%;
    width: 90%;
    height: 31.333%;
    transform-origin: 50% 97.9%;
}
.the-envelope-flap-art {
    display: block;
    width: 100%;
    height: 100%;
    overflow: visible;
}
.the-envelope-flap-face { fill: var(--bg-elevated); }
.the-envelope-flap-crease {
    fill: none;
    stroke: rgba(58, 0, 8, 0.22);
    stroke-width: 1.4;
}

.the-envelope-fold-left,
.the-envelope-fold-right,
.the-envelope-fold-bottom { fill: var(--bg-elevated); }
.the-envelope-fold-shade { fill: rgba(58, 0, 8, 0.13); }
.the-envelope-pocket-edge {
    fill: none;
    stroke: rgba(255, 214, 222, 0.3);
    stroke-width: 1.6;
    stroke-linejoin: round;
}
.the-envelope-fold-crease {
    fill: none;
    stroke: rgba(58, 0, 8, 0.3);
    stroke-width: 1.3;
    stroke-linejoin: round;
}
.the-envelope-rim {
    fill: none;
    stroke: rgba(58, 0, 8, 0.32);
    stroke-width: 1.2;
}

/* ───── The cream card (ink 15.98:1 on it) ───── */
.the-envelope-card {
    position: absolute;
    left: 11%;
    top: 13.333%;
    width: 78%;
    height: 70%;
    box-sizing: border-box;
    padding: calc(var(--the-envelope-w) * 0.055) 12% 0;
    border-radius: 3px;
    background:
        linear-gradient(160deg, rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0) 45%),
        linear-gradient(0deg, rgba(124, 92, 40, 0.08), rgba(124, 92, 40, 0) 30%),
        var(--paper-cream);
    box-shadow: var(--paper-shadow);
    transform: rotate(-8deg);
    transform-origin: 50% 50%;
}
.the-envelope-line {
    margin: 0;
    font-family: var(--font-body);
    font-weight: 400;
    font-size: max(1.05rem, calc(var(--the-envelope-w) * 0.084));
    line-height: 1.12;
    letter-spacing: var(--body-tracking);
    text-align: center;
    color: var(--ink);
}
.the-envelope-word {
    display: inline-block;
    white-space: nowrap;
}
.the-envelope-char {
    opacity: 0;
}
.the-envelope-sr {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

/* The hand-inked heart on the card's corner. */
.the-envelope-heart {
    position: absolute;
    right: 3%;
    top: 2.5%;
    width: 12%;
    aspect-ratio: 100 / 92;
}
.the-envelope-heart-beat {
    width: 100%;
    height: 100%;
    transform-origin: 50% 55%;
}
.the-envelope-heart-art {
    display: block;
    width: 100%;
    height: 100%;
    overflow: visible;
}
.the-envelope-heart-fill {
    fill: var(--stripe-cherry);
    opacity: 0;
}
.the-envelope-heart-scribble {
    fill: none;
    stroke: var(--wine);
    stroke-width: 3;
    stroke-linecap: round;
    stroke-linejoin: round;
    opacity: 0;
}
.the-envelope-heart-ink {
    fill: none;
    stroke: var(--wine);
    stroke-width: 3.4;
    stroke-linejoin: round;
    stroke-dasharray: 100;
    stroke-dashoffset: 100;
}

/* ───── Idle loops (from 1.3 s) and the invite (from the hold) ───── */
.the-envelope-container.is-idle .the-envelope-sway {
    animation: the-envelope-sway 4s var(--ease-breath) infinite;
}
.the-envelope-container.is-idle .the-envelope-heart-beat {
    animation: the-envelope-heartbeat 2s var(--ease-breath) infinite;
}
.the-envelope-container.is-invite .the-envelope-heart-beat {
    animation: the-envelope-invite 1.333s var(--ease-breath) infinite;
}
@keyframes the-envelope-sway {
    0%, 100% { transform: rotate(0deg); }
    25%      { transform: rotate(1deg); }
    75%      { transform: rotate(-1deg); }
}
@keyframes the-envelope-heartbeat {
    0%, 40%, 100% { transform: scale(1); }
    10%           { transform: scale(1.14); }
    20%           { transform: scale(1); }
    30%           { transform: scale(1.08); }
}
@keyframes the-envelope-invite {
    0%, 54%, 100% { transform: scale(1); }
    14%           { transform: scale(1.26); }
    28%           { transform: scale(1); }
    40%           { transform: scale(1.14); }
}

/* Looping ornaments are parked while this beat is not the active screen. */
#screen-the-envelope:not(.active) .the-envelope-star-art,
#screen-the-envelope:not(.active) .the-envelope-sway,
#screen-the-envelope:not(.active) .the-envelope-heart-beat {
    animation-play-state: paused;
}

/* ───── The end: the card's cream floods the screen ───── */
.the-envelope-flood {
    position: absolute;
    inset: -14%;
    background: var(--paper-cream);
    opacity: 0;
    transform: translateZ(80px);
    pointer-events: none;
}

/* ───── "open now" ───── */
.the-envelope-controls {
    position: absolute;
    left: 0;
    right: 0;
    bottom: calc(var(--the-envelope-open-y) - 24px);
    display: flex;
    justify-content: center;
    pointer-events: none;
    visibility: hidden;
    opacity: 0;
}
.the-envelope-open {
    pointer-events: auto;
    min-height: 48px;
    min-width: 44px;
    margin: 0;
    padding: 0.55rem 1.55rem 0.68rem;
    border: 2px solid rgba(255, 250, 242, 0.5);
    border-radius: 999px;
    background: var(--chip-crimson);
    color: var(--btn-ink-on-chip);
    font-family: var(--font-body);
    font-weight: 700;
    font-size: 1.35rem;
    line-height: 1;
    letter-spacing: var(--label-tracking);
    box-shadow: 0 6px 14px rgba(58, 0, 8, 0.42), 0 1px 2px rgba(58, 0, 8, 0.4);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
    transition: transform 80ms var(--ease-snap);
}
.the-envelope-open:active {
    transform: scale(0.96);
}
.the-envelope-open:focus-visible {
    outline: 3px solid var(--focus-ring);
    outline-offset: 3px;
}

/* ───── Desktop / landscape: the reference's composition ─────
   The tilted envelope centred (about 50vh), stars top right, left lower-middle,
   bottom left and bottom right, "open now" below the envelope. */
@media (min-aspect-ratio: 1/1) {
    .the-envelope-container {
        --the-envelope-w: min(58vh, 44vw);
        --the-envelope-cy: 47%;
        --the-envelope-open-y: 10%;
    }
    @supports (height: 1svh) {
        .the-envelope-container {
            --the-envelope-w: min(58svh, 44vw);
        }
    }
    .the-envelope-star--1 { --the-envelope-star-s: 15vh; left: 62%; top: 15%; right: auto; bottom: auto; }
    .the-envelope-star--2 { --the-envelope-star-s: 9vh;  left: 18%; top: 62%; right: auto; bottom: auto; }
    .the-envelope-star--3 { --the-envelope-star-s: 17vh; left: 9%;  top: 84%; right: auto; bottom: auto; }
    .the-envelope-star--4 { --the-envelope-star-s: 11vh; left: 83%; top: 80%; right: auto; bottom: auto; }
    .the-envelope-open {
        font-size: clamp(1.35rem, 2.6vh, 1.75rem);
    }
}

/* ───── Reduced motion: every beat still plays, calmly ───── */
@media (prefers-reduced-motion: reduce) {
    .the-envelope-star-art,
    .the-envelope-container.is-idle .the-envelope-sway,
    .the-envelope-container.is-idle .the-envelope-heart-beat,
    .the-envelope-container.is-invite .the-envelope-heart-beat {
        animation: none;
    }
    .the-envelope-open {
        transition: none;
    }
}