/* ═══════════════════════════════════════════
   gift-of-flowers — beat 3: from-me-to-you (6.0 s, watches)
   The reel's breath after the fall: "From me to you." is written on in
   Pinyon Script, "This is how much I love you." fades up under it in
   Caveat, both breathe, then lift and fade as the polaroids come in.

   The section is TRANSPARENT: the blush wash, its mottling and the ambient
   bubbles are the bridge's #gof-ground (screens.md, cross-beat contract 1).
   Nothing here paints a ground or a bubble.

   Play-state classes live on .from-me-to-you-container and are toggled by
   the module's cues (js/from-me-to-you.js):
     --write      0.4 s  the headline's clip wipe (2.2 s silk) and 6 px rise (expo-out)
     --sub        2.4 s  the sub-line fades up 8 px (0.9 s expo-out)
     --breathing  3.4 s  both lines breathe, scale 1 -> 1.015 (4 s breath)
     --exit       5.0 s  both lines lift 8 vh and fade (1.0 s expo-out)
   Only transform, opacity and a small-area clip-path move.
   ═══════════════════════════════════════════ */

.from-me-to-you-container {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

/* The lines' block: the headline's middle sits at 42% of the screen. */
.from-me-to-you-lines {
    position: absolute;
    left: 0;
    right: 0;
    top: 42%;
    padding: 0 6vw;
    text-align: center;
    transform: translateY(0);
    opacity: 1;
}

.from-me-to-you-breath {
    transform-origin: 50% 0;
}

.from-me-to-you-headline {
    margin: -0.66em 0 0;          /* half the headline's line box: centred on 42% */
    font-family: var(--font-script);
    font-weight: 400;
    font-size: var(--type-script-headline);
    line-height: 1.32;
    color: var(--wine);
    -webkit-text-stroke: var(--script-stroke) var(--wine);
    text-wrap: balance;
}

/* The writing-on: a left-to-right clip wipe with a 6 px rise. The inset's
   negative margins let Pinyon's swashes and the full stop's tail show once
   written; the entry state is clipped to nothing past the left edge. */
.from-me-to-you-ink {
    display: inline-block;
    padding: 0 0.12em;
    clip-path: inset(-0.6em calc(100% + 0.8em) -0.6em -0.8em);
    transform: translateY(6px);
}

.from-me-to-you-sub {
    margin: 0.35em 0 0;
    font-family: var(--font-hand);
    font-weight: 400;
    font-size: var(--type-hand-sub);
    line-height: 1.3;
    color: var(--wine);
    opacity: 0;
    transform: translateY(8px);
}

/* ───── 0.4 s: "From me to you." is written ───── */
.from-me-to-you-container.from-me-to-you--write .from-me-to-you-ink {
    clip-path: inset(-0.6em -0.8em -0.6em -0.8em);
    transform: translateY(0);
    transition:
        clip-path 2.2s var(--ease-silk),
        transform 2.2s var(--ease-expo-out);
}

/* ───── 2.4 s: "This is how much I love you." fades up ───── */
.from-me-to-you-container.from-me-to-you--sub .from-me-to-you-sub {
    opacity: 1;
    transform: translateY(0);
    transition:
        opacity 0.9s var(--ease-expo-out),
        transform 0.9s var(--ease-expo-out);
}

/* ───── 3.4 s: both hold, breathing (never a frozen frame) ───── */
.from-me-to-you-container.from-me-to-you--breathing .from-me-to-you-breath {
    animation: from-me-to-you-breathe 4s var(--ease-breath) infinite;
}

@keyframes from-me-to-you-breathe {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.015); }
}

/* ───── 5.0 s: both lines lift and fade as the first polaroid enters ───── */
.from-me-to-you-container.from-me-to-you--exit .from-me-to-you-lines {
    transform: translateY(-8vh);
    opacity: 0;
    transition:
        transform 1s var(--ease-expo-out),
        opacity 1s var(--ease-expo-out);
}

/* Entry states are applied instantly (prepare), never animated in. */
.from-me-to-you-instant,
.from-me-to-you-instant *,
.from-me-to-you-instant *::before,
.from-me-to-you-instant *::after {
    transition: none !important;
    animation: none !important;
}

/* ───── Reduced motion: plays in full, calmer ─────
   The lines fade in whole (0.6 s, silk): no wipe, no rise, no breath; the
   exit is a fade with no lift. (The bubbles' stillness is the ground's.) */
@media (prefers-reduced-motion: reduce) {
    .from-me-to-you-ink {
        clip-path: none;
        transform: none;
        opacity: 0;
    }
    .from-me-to-you-sub {
        transform: none;
    }
    .from-me-to-you-container.from-me-to-you--write .from-me-to-you-ink {
        clip-path: none;
        transform: none;
        opacity: 1;
        transition: opacity 0.6s var(--ease-silk);
    }
    .from-me-to-you-container.from-me-to-you--sub .from-me-to-you-sub {
        transform: none;
        transition: opacity 0.6s var(--ease-silk);
    }
    .from-me-to-you-container.from-me-to-you--breathing .from-me-to-you-breath {
        animation: none;
    }
    .from-me-to-you-container.from-me-to-you--exit .from-me-to-you-lines {
        transform: none;
        transition: opacity 1s var(--ease-silk);
    }
}