/* ═══════════════════════════════════════════
   birthday-scrapbook — beat 4: the-letter
   Solid crimson (data-ground="red"). Phone: the couple photo is a
   full-width band across the top with a taped lower edge, the script
   heading under it, the typed letter in an auto-fitting box below, and
   next >> bottom right. Desktop / landscape: the reference's split, the
   photo full height on the left 40%, the crimson panel on the right 60%.
   Every state is a class on #the-letter-container toggled by a cue
   (js/the-letter.js); the typewriter toggles .the-letter-on per character.
   ═══════════════════════════════════════════ */

.the-letter-container {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    color: var(--text-primary);
    background:
        radial-gradient(ellipse 120% 90% at 50% 45%, rgba(110, 8, 22, 0) 55%, rgba(110, 8, 22, 0.85) 100%),
        var(--ground-crimson);
}

/* Entry state applied instantly (prepare on goto / replay). */
.the-letter-container.the-letter-instant,
.the-letter-container.the-letter-instant *,
.the-letter-container.the-letter-instant *::before,
.the-letter-container.the-letter-instant *::after {
    transition: none !important;
    animation: none !important;
}

/* ───── The photo ───── */
.the-letter-photo {
    position: relative;
    flex: none;
    width: 100%;
    height: 26vh;
    height: 26svh;
    margin: 0;
    background: var(--wine);
    opacity: 0;
    transform: translate3d(0, 18px, 0);
    transition:
        opacity 400ms var(--ease-expo-out),
        transform 400ms var(--ease-expo-out);
}
.the-letter-img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 50% 38%;
}
/* Washi tape across the band's lower edge (phone only). */
.the-letter-tape {
    position: absolute;
    bottom: -11px;
    width: 26%;
    max-width: 120px;
    height: 22px;
    background:
        repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.12) 0 2px, rgba(255, 255, 255, 0) 2px 6px),
        var(--washi);
    opacity: 0.88;
    box-shadow: 0 1px 2px rgba(58, 0, 8, 0.35);
    clip-path: polygon(0 12%, 4% 0, 8% 14%, 12% 0, 100% 0, 96% 14%, 100% 30%, 96% 50%, 100% 70%, 96% 86%, 100% 100%, 8% 100%, 4% 86%, 0 100%, 3% 60%, 0 40%);
    pointer-events: none;
}
.the-letter-tape-a { left: 7%; transform: rotate(-4deg); }
.the-letter-tape-b { right: 7%; transform: rotate(3deg); }

/* ───── The crimson panel ───── */
.the-letter-panel {
    position: relative;
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    padding: 0.55rem 1rem 0;
    padding-bottom: max(0.5rem, env(safe-area-inset-bottom));
    transition: opacity 400ms var(--ease-silk);
}

/* ───── The heading: "Happy Birthday," + {toName} ───── */
.the-letter-heading {
    position: relative;
    flex: none;
    margin: 0;
    font-family: var(--font-script);
    font-weight: 400;
    line-height: 1.12;
    text-align: center;
    color: var(--text-primary);
    white-space: nowrap;
}
.the-letter-hb {
    display: inline-block;
    font-size: 3rem;
    clip-path: inset(-0.5em 100% -0.5em -0.5em);
    transition: clip-path 550ms var(--ease-expo-out);
}
/* The name: its own line by default; on the heading's line when both fit (JS). */
.the-letter-name {
    position: relative;
    display: block;
    margin-top: -0.12em;
    font-size: clamp(3.4rem, 10vw, 7rem);
    line-height: 1.2;
}
.the-letter-heading--one .the-letter-name {
    display: inline-block;
    margin-top: 0;
    margin-left: 0.22em;
}
.the-letter-name-1,
.the-letter-name-2 {
    position: relative;
    display: inline-block;
    color: #fffaf2;
    -webkit-text-stroke: 0.6px #fffaf2;
    text-shadow: 0 0 10px rgba(255, 224, 138, 0.35);
    opacity: 0;
    transition: opacity 250ms var(--ease-silk);
}
.the-letter-name-1.the-letter-tight { letter-spacing: -0.01em; }
.the-letter-name-2 {
    margin-left: 0.25em;
    clip-path: inset(-0.5em 100% -0.5em -0.5em);
    transition:
        opacity 250ms var(--ease-silk),
        clip-path 500ms var(--ease-expo-out);
}
.the-letter-name-2:empty { display: none; }
/* A long name with a space: line 2, the rest of it, at 0.56x (size set by JS). */
.the-letter-name--stack .the-letter-name-2 {
    display: block;
    margin-left: 0;
    margin-top: -0.1em;
}
/* The settle's light sweep runs on this empty layer, not on the heading:
   .reveel-sweep sets overflow:hidden, which would clip the script's swashes. */
.the-letter-heading .the-letter-sweep {
    position: absolute;
    inset: 0 4%;
    pointer-events: none;
    border-radius: 40%;
}
/* The settle's warm glow: a pre-painted layer whose opacity animates. */
.the-letter-glow {
    position: absolute;
    left: -18%;
    right: -18%;
    top: -35%;
    bottom: -35%;
    background: radial-gradient(ellipse 50% 50% at 50% 50%, rgba(255, 224, 138, 0.55), rgba(255, 224, 138, 0.18) 45%, rgba(255, 224, 138, 0) 72%);
    opacity: 0;
    pointer-events: none;
}

/* ───── The letter's auto-fitting box ───── */
.the-letter-box {
    --the-letter-max: 1.25;           /* rem: phone */
    --the-letter-floor: 1;            /* rem: the phone floor (1.05 on desktop) */
    position: relative;
    flex: 1 1 0;
    min-height: 0;
    display: flex;
    flex-direction: column;
    margin-top: 0.35rem;
    overflow: hidden;
    overscroll-behavior: contain;
}
/* Past the floor only (a safety net): a static edge fade while it auto-scrolls,
   room below the last line to clear the fade, and after the last character
   it becomes pan-y scrollable for rereading. */
.the-letter-box.the-letter-over {
    -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 0.9rem, #000 calc(100% - 1.1rem), transparent 100%);
    mask-image: linear-gradient(180deg, transparent 0, #000 0.9rem, #000 calc(100% - 1.1rem), transparent 100%);
}
.the-letter-box.the-letter-over .the-letter-body:not(.the-letter-twin) { padding-bottom: 1.2rem; }
.the-letter-box.the-letter-scroll {
    overflow-y: auto;
    touch-action: pan-y;
    -webkit-overflow-scrolling: touch;
}
.the-letter-body {
    position: relative;
    margin-block: auto;               /* centred when it fits, top-aligned when it scrolls */
    margin-inline: auto;
    width: 100%;
    max-width: 34rem;
    font-family: var(--font-body);
    font-weight: 400;
    font-size: 1.25rem;
    line-height: 1.42;
    letter-spacing: var(--body-tracking);
    text-align: center;
    color: var(--text-primary);
    overflow-wrap: anywhere;
}
/* The fit's plain-text twin (js): measured, never shown, out of layout otherwise. */
.the-letter-body.the-letter-twin {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    display: none;
    margin-block: 0;
    visibility: hidden;
    pointer-events: none;
}
.the-letter-para + .the-letter-para { margin-top: 0.5em; }   /* a blank line: a half-line gap */
.the-letter-line { min-height: 1.42em; }
.the-letter-ch { visibility: hidden; }
.the-letter-ch.the-letter-on { visibility: visible; }
.the-letter-tail { white-space: nowrap; }
.the-letter-heart {
    display: inline-block;
    width: 0.95em;
    height: 0.86em;
    margin-left: 0.3em;
    vertical-align: -0.08em;
    opacity: 0;
    transform: scale(0.4);
    transition:
        opacity 220ms var(--ease-silk),
        transform 380ms var(--ease-expo-out);
}
.the-letter-heart svg { display: block; width: 100%; height: 100%; overflow: visible; }
.the-letter-heart.the-letter-on { opacity: 1; transform: scale(1); }

/* ───── next >> ───── */
.the-letter-foot {
    flex: none;
    display: flex;
    justify-content: flex-start;      /* bottom-left: the platform badge owns the bottom-right corner */
    padding-top: 0.2rem;
}
.the-letter-next {
    min-height: 44px;
    min-width: 44px;
    padding: 0.35rem 0.55rem;
    border: 0;
    border-radius: 999px;
    background: transparent;
    font-family: var(--font-body);
    font-weight: 700;
    font-size: 1.35rem;
    line-height: 1;
    letter-spacing: var(--label-tracking);
    color: var(--text-primary);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    visibility: hidden;
    opacity: 0;
    transform: translate3d(0, 8px, 0);
    transition:
        opacity 250ms var(--ease-expo-out),
        transform 250ms var(--ease-expo-out),
        visibility 0s linear 250ms;
}
.the-letter-next:focus-visible {
    outline: 2px solid var(--focus-ring);
    outline-offset: 2px;
}

/* ═══════════ States (cues) ═══════════ */
.the-letter--hb .the-letter-hb { clip-path: inset(-0.5em -0.5em -0.5em -0.5em); }
.the-letter--photo .the-letter-photo { opacity: 1; transform: none; }
.the-letter--name .the-letter-name-1,
.the-letter--name .the-letter-name-2 { opacity: 1; }
.the-letter--settled .the-letter-name-2 { clip-path: inset(-0.5em -0.5em -0.5em -0.5em); }
.the-letter--settled .the-letter-glow { animation: the-letter-glow 1400ms var(--ease-silk) both; }
.the-letter--next .the-letter-next {
    visibility: visible;
    opacity: 1;
    transform: none;
    transition:
        opacity 250ms var(--ease-expo-out),
        transform 250ms var(--ease-expo-out),
        visibility 0s;
}
.the-letter-next.the-letter-pressed {
    transform: scale(0.94);
    transition: transform 80ms var(--ease-snap);
}
/* The payoff: the letter and the photo fade; the crimson stays for ten-things. */
.the-letter--leaving .the-letter-photo,
.the-letter--leaving .the-letter-panel {
    opacity: 0;
    transform: none;
    transition: opacity 400ms var(--ease-silk);
}

@keyframes the-letter-glow {
    0% { opacity: 0; }
    12% { opacity: 1; }
    100% { opacity: 0; }
}

/* ═══════════ Calm (reduced motion; JS sets .the-letter--calm from film.reduced()) ═══════════ */
.the-letter--calm .the-letter-hb {
    clip-path: none;
    opacity: 0;
    transition: opacity 300ms var(--ease-silk);
}
.the-letter--calm.the-letter--hb .the-letter-hb { opacity: 1; }
.the-letter--calm .the-letter-photo { transform: none; }
.the-letter--calm .the-letter-name-1,
.the-letter--calm .the-letter-name-2 {
    transition: opacity 600ms var(--ease-silk);
}
.the-letter--calm .the-letter-name-2 { clip-path: none; }
.the-letter--calm .the-letter-next { transform: none; }
/* The body fades in line by line on the same schedule (no typewriter). */
.the-letter--calm .the-letter-ch { visibility: visible; }
.the-letter--calm .the-letter-line {
    opacity: 0;
    transition: opacity 400ms var(--ease-silk);
}
.the-letter--calm .the-letter-line.the-letter-on { opacity: 1; }
.the-letter--calm .the-letter-heart { transform: none; }

@media (prefers-reduced-motion: reduce) {
    .the-letter-hb { clip-path: none; }
    .the-letter-photo,
    .the-letter-next { transform: none; }
    .the-letter-name-2 { clip-path: none; }
}

/* ═══════════ Phone: the photo yields to a longer letter ═══════════
   js/the-letter.js picks the first tier at which the letter fits whole at
   the floor: tier 0 the full-width band (26svh), tier 1 a slimmer band
   (17svh), tier 2 a small taped landscape polaroid at the top left, in the
   chrome row between the mute pill (x 8-56) and the progress tape (top
   right), never under the tape; at least 96 px wide.
   The tiers never apply on the desktop / landscape split. */
@media (max-aspect-ratio: 999/1000), (max-width: 699px) {
    .the-letter-heading { line-height: 1.02; }
    .the-letter-name { line-height: 1.1; margin-top: -0.16em; }
    .the-letter-body { line-height: 1.36; }
    .the-letter-line { min-height: 1.36em; }

    .the-letter--tier1 .the-letter-photo { height: 17vh; height: 17svh; }

    .the-letter--tier2 .the-letter-photo {
        align-self: flex-start;
        width: clamp(96px, 30vw, 124px);
        height: auto;
        margin: 5px 0 0 66px;          /* clear of the mute pill (48 px wide at 8 px) */
        padding: 4px 4px 12px;
        background: var(--paper-white);
        box-shadow: var(--paper-shadow);
        rotate: -3deg;
    }
    .the-letter--tier2 .the-letter-img {
        height: auto;
        aspect-ratio: 4 / 3;
    }
    .the-letter--tier2 .the-letter-tape-a {
        top: -9px;
        bottom: auto;
        left: 50%;
        width: 58%;
        transform: translateX(-50%) rotate(2deg);
    }
    .the-letter--tier2 .the-letter-tape-b { display: none; }
}

/* ═══════════ A short phone (360x640): the band shrinks to 18svh ═══════════ */
@media (max-height: 700px) and (max-aspect-ratio: 1/1) {
    .the-letter-photo { height: 18vh; height: 18svh; }
    .the-letter-panel { padding-left: 0.75rem; padding-right: 0.75rem; }
    .the-letter--tier1 .the-letter-photo { height: 13vh; height: 13svh; }
    .the-letter--tier2 .the-letter-photo { margin-top: 3px; }
    .the-letter-panel { padding-top: 0.2rem; padding-bottom: max(0.3rem, env(safe-area-inset-bottom)); }
    .the-letter-name { line-height: 1.02; margin-top: -0.2em; }
    .the-letter-box { --the-letter-floor: 0.98; margin-top: 0.1rem; }
    .the-letter-body { line-height: 1.27; }
    .the-letter-line { min-height: 1.27em; }
}

/* ═══════════ Desktop / landscape: the reference's side-by-side ═══════════ */
@media (min-aspect-ratio: 1/1) and (min-width: 700px) {
    .the-letter-container { flex-direction: row; }
    .the-letter-photo {
        width: 40%;
        height: 100%;
        transform: translate3d(0, 24px, 0);
    }
    .the-letter-tape { display: none; }
    .the-letter-panel {
        width: 60%;
        height: 100%;
        padding: 3.6rem 3vw 0.75rem;
        padding-bottom: max(0.75rem, env(safe-area-inset-bottom));
    }
    .the-letter-hb { font-size: clamp(3rem, 5vw, 5.4rem); }
    .the-letter-name { font-size: max(3rem, min(clamp(3.4rem, 10vw, 7rem), 15svh)); }
    .the-letter-box { --the-letter-max: 1.5; --the-letter-floor: 1.05; margin-top: 0.6rem; }
    .the-letter-body { font-size: 1.5rem; line-height: 1.5; max-width: 44rem; }
    .the-letter-line { min-height: 1.5em; }
    .the-letter-foot { padding-left: 0.5vw; }
}