/* ═══════════════════════════════════════════
   the-gift — beat 1 of gift-of-flowers (2.0 s · tap · no hold: its tap IS begin())

   The hushed overture: cream paper, a gift box drawn in red pencil (it draws
   itself on arrival, off the film clock), "For you, {toName}." in Pinyon
   Script, and a quiet "tap to open". The whole screen is the tap target.

   Layers (back to front, inside .the-gift-container):
     .the-gift-paper   the cream paper this beat owns (--paper + a static grain
                       tile, rasterised once), full-bleed over #gof-ground
     .the-gift-box     the button: float (idle) > dip (payoff) > body / lid > bow
     .the-gift-core    a zero-size anchor on the bloom's centre (50%, 46%): the
                       bloom's rings 0-1, built by the-bloom's mountCore()
     .the-gift-copy    the script line and the hint

   The draw-in (armed, CSS, off the film clock): every stroke is a
   pathLength="1" path; `--t` is its start and `--d` its duration, inline.
     outline 0-0.9 s (two passes) · bow 0.5-1.3 s · ribbon 0.9-1.4 s ·
     hatching 1.1-1.9 s · the hint 3.0-3.8 s
   The recipient's name comes first (BRAND §6): "For you, {toName}." writes on
   0.3-1.5 s, alongside the box, so it is whole long before most taps land.
   Idle: the box floats 3 px (breath, 4 s), the bow tilts ±1.4° (5 s), the
   hint's underline breathes (the underline, never the text).

   The payoff is js/the-gift.js (Web Animations, on the tap). States are
   data-the-gift-state on the container: armed · tapped · gone · reset (reset
   only for the one style flush that restarts the draw-in in prepare()).

   Only transform and opacity move on the payoff. The strokes' dashoffset and
   the line's clip wipe are paint, on a ~140 px sketch and one line, before
   the tap only.
   ═══════════════════════════════════════════ */

.the-gift-container {
    /* the button: the drawn box (111 of the sketch's 150 units) is about 36 vw on a phone,
       never so tall it crowds a landscape window */
    --the-gift-box-w: max(150px, min(48vw, 32vh));
    position: absolute;
    inset: 0;
    overflow: hidden;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    user-select: none;
    touch-action: manipulation;
}
@supports (height: 1dvh) {
    .the-gift-container { --the-gift-box-w: max(150px, min(48vw, 32dvh)); }
}

/* ───── The paper ───── */
.the-gift-paper {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-color: var(--paper);
    /* a fine wine-tinted tooth (~3.5% mean alpha), one 160 px tile, never animated */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.557 0 0 0 0 0.165 0 0 0 0 0.231 0 0 0 0.07 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    background-size: 160px 160px;
}

/* ───── The box (a button; its 150 px floor is far over the 44 px minimum) ─────
   The sketch's viewBox is 150 x 160; its mass (lid + body) centres on (75, 95),
   which sits on the bloom's centre. */
.the-gift-box {
    position: absolute;
    left: var(--bloom-cx);
    top: var(--bloom-cy);
    width: var(--the-gift-box-w);
    height: calc(var(--the-gift-box-w) * 160 / 150);
    margin: calc(var(--the-gift-box-w) * -95 / 150) 0 0 calc(var(--the-gift-box-w) * -0.5);
    padding: 0;
    border: 0;
    border-radius: 14px;
    background: none;
    color: inherit;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}
.the-gift-box:focus { outline: none; }
.the-gift-box:focus-visible {
    outline: 2px solid var(--wine);
    outline-offset: 6px;
}

.the-gift-float,
.the-gift-dip,
.the-gift-layer {
    position: absolute;
    inset: 0;
    display: block;
}
.the-gift-float {
    animation: the-gift-float 4s var(--ease-breath) 2s infinite;
}
.the-gift-dip { transform-origin: 50% 59%; }
.the-gift-lid { transform-origin: 50.3% 41%; }
/* the bow tilts about its knot (76, 52) */
.the-gift-bow {
    transform-origin: 50.7% 32.5%;
    animation: the-gift-tilt 5s var(--ease-breath) 2.2s infinite;
}
.the-gift-art {
    display: block;
    width: 100%;
    height: 100%;
    overflow: visible;
}

/* ───── The pencil ───── */
.the-gift-stroke {
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-dasharray: 1 3;
    stroke-dashoffset: 0;
    animation: the-gift-draw var(--d, 0.25s) var(--ease-silk) var(--t, 0s) both;
}
.the-gift-pen {
    stroke: var(--pencil);
    stroke-width: 2.2;
}
.the-gift-pen2 {
    stroke: var(--pencil-light);
    stroke-width: 1.5;
    stroke-opacity: 0.9;
}
.the-gift-rib {
    stroke: var(--pencil);
    stroke-width: 1.5;
}
.the-gift-hatch {
    stroke: var(--pencil);
    stroke-width: 1.05;
    stroke-opacity: 0.85;
}
.the-gift-hatch-light { stroke-opacity: 0.6; }
.the-gift-shade {
    stroke: var(--pencil-shade);
    stroke-width: 1.1;
    stroke-opacity: 0.85;
}
/* the hatch layer rests at 0.8 (paper through the strokes); the tap deepens it to 1 */
.the-gift-hatching { opacity: 0.8; }

/* ───── The bloom's anchor: zero size, on the bloom's centre ───── */
.the-gift-core {
    position: absolute;
    left: var(--bloom-cx);
    top: var(--bloom-cy);
    width: 0;
    height: 0;
    overflow: visible;
    pointer-events: none;
}

/* ───── The copy ───── */
.the-gift-copy {
    position: absolute;
    left: 0;
    right: 0;
    top: 64%;
    margin-top: calc(var(--type-script-gift) * -0.66);
    padding: 0 6vw;
    display: flex;
    flex-direction: column;
    align-items: center;
    pointer-events: none;
}
.the-gift-line {
    margin: 0;
    max-width: min(86vw, 24rem);
    font-family: var(--font-script);
    font-weight: 400;
    font-size: var(--type-script-gift);
    line-height: 1.3;
    color: var(--wine);
    -webkit-text-stroke: var(--script-stroke) var(--wine);
    text-align: center;
    text-wrap: balance;
    overflow-wrap: anywhere;
    animation: the-gift-write 1.2s var(--ease-silk) 0.3s both;
}
.the-gift-hint {
    position: relative;
    margin: 1.1rem 0 0;
    padding: 0 0 0.34rem 0.14em; /* the left pad balances the tracking after the last glyph */
    font-family: var(--font-body);
    font-weight: 400;
    font-size: var(--type-hint);
    line-height: 1.4;
    letter-spacing: 0.14em;
    color: var(--text-secondary); /* 7.13:1 on cream, at full opacity at rest */
    animation: the-gift-fade 0.8s var(--ease-silk) 3s both;
}
.the-gift-hint::after {
    content: '';
    position: absolute;
    left: 22%;
    right: 22%;
    bottom: 0;
    height: 1px;
    background: var(--text-secondary);
    opacity: 0.45;
    animation: the-gift-underline 4s var(--ease-breath) 3.8s infinite;
}

.the-gift-sr {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

/* ───── States ───── */
/* Early tap without Web Animations: the remaining strokes and the line snap in. */
.the-gift-container[data-the-gift-drawn] .the-gift-stroke,
.the-gift-container[data-the-gift-drawn] .the-gift-line { animation: none; }

/* The exit frame: the box and the copy are gone, their loops parked. */
.the-gift-container[data-the-gift-state="gone"] .the-gift-box,
.the-gift-container[data-the-gift-state="gone"] .the-gift-copy {
    opacity: 0;
    visibility: hidden;
}
.the-gift-container[data-the-gift-state="gone"] .the-gift-float,
.the-gift-container[data-the-gift-state="gone"] .the-gift-bow,
.the-gift-container[data-the-gift-state="gone"] .the-gift-hint::after,
.the-gift-container[data-the-gift-state="tapped"] .the-gift-hint::after {
    animation: none;
}

/* prepare(): one style flush with every armed animation removed, so that
   returning to "armed" restarts the draw-in from its first stroke. */
.the-gift-container[data-the-gift-state="reset"] .the-gift-stroke,
.the-gift-container[data-the-gift-state="reset"] .the-gift-line,
.the-gift-container[data-the-gift-state="reset"] .the-gift-hint,
.the-gift-container[data-the-gift-state="reset"] .the-gift-hint::after,
.the-gift-container[data-the-gift-state="reset"] .the-gift-float,
.the-gift-container[data-the-gift-state="reset"] .the-gift-bow {
    animation: none !important;
}

/* ───── Keyframes ───── */
@keyframes the-gift-draw {
    from { stroke-dashoffset: 1.1; }
    to { stroke-dashoffset: 0; }
}
/* the line is written on: a left-to-right clip wipe (the insets leave room for Pinyon's swashes) */
@keyframes the-gift-write {
    from { clip-path: inset(-0.5em 100% -0.6em -0.5em); }
    to { clip-path: inset(-0.5em -0.5em -0.6em -0.5em); }
}
@keyframes the-gift-fade {
    from { opacity: 0; }
    to { opacity: 1; }
}
@keyframes the-gift-underline {
    0%, 100% { opacity: 0.2; }
    50% { opacity: 0.65; }
}
@keyframes the-gift-float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-3px); }
}
@keyframes the-gift-tilt {
    0%, 100% { transform: rotate(0deg); }
    25% { transform: rotate(1.4deg); }
    75% { transform: rotate(-1.4deg); }
}

/* ───── Reduced motion: plays in full, calmer ─────
   The sketch is drawn already, the line and hint are simply there, nothing
   floats or tilts. (The tap's cross-fade is in js/the-gift.js.) */
@media (prefers-reduced-motion: reduce) {
    .the-gift-stroke,
    .the-gift-line,
    .the-gift-hint,
    .the-gift-hint::after,
    .the-gift-float,
    .the-gift-bow {
        animation: none;
    }
}