/* ═══════════════════════════════════════════
   birthday-scrapbook — beat 6: love-note
   Blue gingham with glitter stars; a taped polaroid (photo slot 4) and a
   butter deckled sheet on which the buyer's love note types itself out,
   ends on a small glossy heart and is signed "— {fromName}".

   Phone (portrait, primary): the sheet fills ~92vw of the height between
   the top chrome and the next >> row, its text box auto-fitted
   (1.25rem down to the 1.05rem floor); the polaroid peeks from behind its
   top-left corner. Desktop / landscape: the reference's composition,
   polaroid left (~31vw), sheet right (~55vw), next >> under the polaroid.

   Every page fits one screen: the text box auto-fits; only past the
   floor does it auto-scroll while typing and turn pan-y afterwards.
   ═══════════════════════════════════════════ */

.love-note-container {
    --love-note-vh: 1vh;
    --love-note-top: calc(env(safe-area-inset-top, 0px) + 54px);      /* mute pill + progress tape */
    --love-note-bottom: calc(env(safe-area-inset-bottom, 0px) + 60px); /* the next >> row */
    /* Phone: the taped polaroid sits at the top, above the sheet, and overlaps
       the sheet's top edge by --love-note-overlap (its blank bottom margin
       only: 22% of its width, more than the overlap plus the tilt's drop). */
    --love-note-pol-w: clamp(124px, 38vw, 168px);
    --love-note-overlap: 18px;
    --love-note-peek: calc(var(--love-note-pol-w) * 1.38 - var(--love-note-overlap));
    --love-note-sheet-max: calc(100 * var(--love-note-vh) - var(--love-note-top) - var(--love-note-bottom) - var(--love-note-peek));
    --love-note-scallop: 7px;

    position: absolute;
    inset: 0;
    width: 100%;
    min-height: 100%;
    overflow: hidden;
    color: var(--ink);
    font-family: var(--font-body);
}
@supports (height: 1svh) {
    .love-note-container { --love-note-vh: 1svh; }
}

/* ─────────── The ground: blue gingham, full bleed, over-scaled for the far plane ─────────── */
.love-note-ground {
    position: absolute;
    inset: 0;
    background: var(--ground-gingham-blue);
    transform: translateZ(-100px) scale(1.12);
    pointer-events: none;
}
.love-note-grain {
    position: absolute;
    inset: 0;
    opacity: 0.22;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .16 0 0 0 0 .2 0 0 0 0 .32 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23g)'/%3E%3C/svg%3E");
    background-size: 180px 180px;
}
.love-note-defs {
    position: absolute;
    width: 0;
    height: 0;
    overflow: hidden;
}

/* ─────────── Glitter stars ─────────── */
.love-note-stars {
    position: absolute;
    inset: 0;
    pointer-events: none;
}
.love-note-star {
    position: absolute;
    left: var(--px, 50%);
    top: var(--py, 50%);
    width: calc(var(--s, 1) * (24px + 4.2vmin));
    aspect-ratio: 1;
    color: var(--c, var(--glitter-pink));
    opacity: 0;
    transform: translate(-50%, -50%) rotate(var(--r, 0deg)) scale(0.6);
    transition: transform 0.3s var(--ease-expo-out), opacity 0.18s var(--ease-silk);
    transition-delay: calc(var(--i, 0) * 20ms);
}
.love-note-star svg {
    display: block;
    width: 100%;
    height: 100%;
    filter: drop-shadow(0 2px 2px rgba(31, 63, 122, 0.28));
}
/* phone: the first 14 */
.love-note-star:nth-child(n + 15) { display: none; }

.love-note--in .love-note-star {
    opacity: 1;
    transform: translate(-50%, -50%) rotate(var(--r, 0deg)) scale(1);
}

/* The shimmer: a highlight crossing the star, clipped to its shape. Only the
   six --shine stars carry one, so at most six layers ever animate. */
.love-note-glint {
    position: absolute;
    inset: 0;
    overflow: hidden;
    clip-path: polygon(50% 8.93%, 61.02% 36.62%, 90.76% 38.54%, 67.83% 57.58%, 75.19% 86.46%, 50% 70.54%, 24.81% 86.46%, 32.17% 57.58%, 9.24% 38.54%, 38.98% 36.62%);
}
.love-note-glint i {
    position: absolute;
    top: -10%;
    bottom: -10%;
    left: 0;
    width: 100%;
    background: linear-gradient(105deg, rgba(255, 250, 245, 0) 30%, rgba(255, 250, 245, 0.85) 50%, rgba(255, 250, 245, 0) 70%);
    transform: translateX(-110%);
}
.love-note--in .love-note-glint i {
    animation: love-note-glint var(--gd, 5s) linear var(--gdl, 0s) infinite;
}
@keyframes love-note-glint {
    0% { transform: translateX(-110%); }
    20% { transform: translateX(110%); }       /* ~1.1 s of a 4.6-6.8 s cycle */
    100% { transform: translateX(110%); }
}
/* Parked whenever this beat is not the one on screen. */
#screen-love-note:not(.active) .love-note-glint i { animation: none; }

/* ─────────── The stage: polaroid + sheet ─────────── */
.love-note-stage {
    position: absolute;
    top: var(--love-note-top);
    bottom: var(--love-note-bottom);
    left: 4vw;
    right: 4vw;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: stretch;
}
.love-note-pair {
    position: relative;
    padding-top: var(--love-note-peek);
}

/* The polaroid: phone, at the top of the pair, a little left of centre
   (clear of the progress tape), in front of the sheet's top edge. */
.love-note-polaroid {
    position: absolute;
    top: 0;
    left: calc(46% - var(--love-note-pol-w) / 2);
    z-index: 2;
    width: var(--love-note-pol-w);
    margin: 0;
    opacity: 0;
    transform: translateX(-70vw) rotate(-5deg);
    transition: transform 0.5s var(--ease-expo-out), opacity 0.25s var(--ease-silk);
}
.love-note-frame {
    display: block;
    padding: 6% 6% 22%;
    background: var(--paper-white);
    box-shadow: var(--paper-shadow);
}
.love-note-photo {
    display: block;
    width: 100%;
    aspect-ratio: 4 / 5;
    object-fit: cover;
    background: #dfe6ef;
}
.love-note-tape {
    position: absolute;
    top: -5%;
    left: 50%;
    width: 64%;
    height: 13%;
    background:
        repeating-linear-gradient(90deg, rgba(255, 250, 245, 0.10) 0 2px, rgba(124, 92, 40, 0.06) 2px 5px),
        var(--washi);
    opacity: 0.88;
    box-shadow: inset 0 0 0 1px var(--washi-edge);
    transform: translateX(-50%) rotate(-3deg);
    clip-path: polygon(0 8%, 3% 0, 6% 10%, 9% 0, 91% 0, 94% 10%, 97% 0, 100% 8%, 100% 92%, 97% 100%, 94% 90%, 91% 100%, 9% 100%, 6% 90%, 3% 100%, 0 92%);
}
.love-note--photo .love-note-polaroid {
    opacity: 1;
    transform: translateX(0) rotate(-5deg);
}

/* The deckled sheet: the wrapper carries the wipe and the shadow; the paper the scallops. */
.love-note-sheet {
    position: relative;
    z-index: 1;
    filter: drop-shadow(0 12px 18px rgba(31, 63, 122, 0.26)) drop-shadow(0 2px 3px rgba(70, 6, 24, 0.18));
    clip-path: inset(-40px 100% -40px -40px);
    transition: clip-path 0.4s var(--ease-expo-out);
}
.love-note--sheet .love-note-sheet { clip-path: inset(-40px -40px -40px -40px); }

.love-note-paper {
    --r: var(--love-note-scallop);
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    box-sizing: border-box;
    min-height: min(46 * var(--love-note-vh), var(--love-note-sheet-max));
    max-height: var(--love-note-sheet-max);
    /* phone: the top padding also clears the polaroid's overlap */
    padding: calc(var(--r) + 0.9rem + var(--love-note-overlap)) calc(var(--r) + 0.85rem) calc(var(--r) + 0.55rem);
    background:
        radial-gradient(120% 90% at 30% 20%, rgba(255, 252, 230, 0.55), rgba(255, 252, 230, 0) 60%),
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='p'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.7' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .45 0 0 0 0 .38 0 0 0 0 .12 0 0 0 .22 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23p)'/%3E%3C/svg%3E") 0 0 / 160px 160px,
        var(--paper-butter);
    /* Scalloped edge on all four sides: a body inset by r, plus a row of
       r-radius circles along each edge (rounded so the count is whole). */
    -webkit-mask:
        linear-gradient(#000 0 0) center / calc(100% - 2 * var(--r)) calc(100% - 2 * var(--r)) no-repeat,
        radial-gradient(circle closest-side, #000 96%, transparent) top / calc(2 * var(--r)) calc(2 * var(--r)) round no-repeat,
        radial-gradient(circle closest-side, #000 96%, transparent) bottom / calc(2 * var(--r)) calc(2 * var(--r)) round no-repeat,
        radial-gradient(circle closest-side, #000 96%, transparent) left / calc(2 * var(--r)) calc(2 * var(--r)) no-repeat round,
        radial-gradient(circle closest-side, #000 96%, transparent) right / calc(2 * var(--r)) calc(2 * var(--r)) no-repeat round;
    mask:
        linear-gradient(#000 0 0) center / calc(100% - 2 * var(--r)) calc(100% - 2 * var(--r)) no-repeat,
        radial-gradient(circle closest-side, #000 96%, transparent) top / calc(2 * var(--r)) calc(2 * var(--r)) round no-repeat,
        radial-gradient(circle closest-side, #000 96%, transparent) bottom / calc(2 * var(--r)) calc(2 * var(--r)) round no-repeat,
        radial-gradient(circle closest-side, #000 96%, transparent) left / calc(2 * var(--r)) calc(2 * var(--r)) no-repeat round,
        radial-gradient(circle closest-side, #000 96%, transparent) right / calc(2 * var(--r)) calc(2 * var(--r)) no-repeat round;
}

/* The typed note: an auto-fitting box (font size written by love-note.js). */
.love-note-text {
    position: relative;
    flex: 0 1 auto;
    min-height: 0;
    overflow: hidden;
    font-size: var(--love-note-fs, 1.25rem);
    font-weight: 400;
    line-height: 1.32;
    letter-spacing: var(--body-tracking);
    text-align: center;
    color: var(--ink);
    overflow-wrap: break-word;
    scrollbar-width: none;
}
.love-note-text::-webkit-scrollbar { display: none; }
.love-note-para { margin: 0; }
.love-note-para + .love-note-para { margin-top: 0.5em; }   /* a blank line: a half-line gap */
.love-note-w { visibility: hidden; }
.love-note-w.love-note-on { visibility: visible; }

/* Past the floor only (a safety net): rereading by pan-y once typed. */
.love-note-text.love-note-scroll {
    overflow-y: auto;
    touch-action: pan-y;
    overscroll-behavior: contain;
}
/* While a note is longer than its box: a real fade at the bottom (and at the
   top once scrolled down), lifted at the end. Classes set by love-note.js on
   the paper: --over (overflows), --scrolled (off the top), --end (within 8 px
   of the end), --ready (typed: the "more" cue may show). */
.love-note-paper.love-note--over .love-note-text {
    -webkit-mask: linear-gradient(#000 calc(100% - 1.1rem), transparent);
    mask: linear-gradient(#000 calc(100% - 1.1rem), transparent);
}
.love-note-paper.love-note--over.love-note--scrolled .love-note-text {
    -webkit-mask: linear-gradient(transparent, #000 0.6em, #000 calc(100% - 1.1rem), transparent);
    mask: linear-gradient(transparent, #000 0.6em, #000 calc(100% - 1.1rem), transparent);
}
.love-note-paper.love-note--over.love-note--end .love-note-text {
    -webkit-mask: none;
    mask: none;
}
.love-note-paper.love-note--over.love-note--end.love-note--scrolled .love-note-text {
    -webkit-mask: linear-gradient(transparent, #000 0.6em);
    mask: linear-gradient(transparent, #000 0.6em);
}

/* "more ↓": a quiet cue on the paper's bottom edge while there is more below.
   Plum ink on butter (~8.6:1). Not a control. */
.love-note-more {
    position: absolute;
    left: 50%;
    bottom: calc(var(--r) - 1px);
    display: inline-flex;
    align-items: center;
    gap: 0.2em;
    padding: 0.05em 0.6em 0.1em;
    border-radius: 999px;
    background: var(--paper-butter);
    box-shadow: 0 0 6px 4px var(--paper-butter);
    color: var(--ink-soft);
    font: 700 0.95rem/1.1 var(--font-body);
    letter-spacing: var(--label-tracking);
    pointer-events: none;
    opacity: 0;
    transform: translateX(-50%);
    transition: opacity 0.3s var(--ease-silk);
}
.love-note-more-arrow { width: 0.7em; height: 0.85em; }
.love-note-paper.love-note--over.love-note--ready:not(.love-note--end) .love-note-more { opacity: 1; }
.love-note-text.love-note-scroll:focus-visible { outline: 2px dashed var(--focus-ring); outline-offset: 2px; }

/* The small glossy heart that ends the last line (art, not a typed character). */
.love-note-heart {
    display: inline-block;
    width: 1.05em;
    height: 1em;
    vertical-align: -0.12em;
    opacity: 0;
    transform: scale(0.3) rotate(-14deg);
    transition: transform 0.35s var(--ease-expo-out), opacity 0.2s var(--ease-silk);
}
.love-note-heart svg { display: block; width: 100%; height: 100%; }
.love-note--signed .love-note-heart { opacity: 1; transform: none; }

/* The signature, handwritten by a 0.8 s wipe; sized for a 24-character name. */
.love-note-sign {
    display: block;
    margin: 0.35rem 0 0;
    padding-right: 0.4rem;
    font-size: clamp(1.15rem, 3.6vw, 1.35rem);
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: var(--body-tracking);
    text-align: right;
    color: var(--ink);
    overflow-wrap: anywhere;
    clip-path: inset(-0.3em 100% -0.3em -0.3em);
    transition: clip-path 0.8s var(--ease-silk);
}
.love-note--signed .love-note-sign { clip-path: inset(-0.3em -0.3em -0.3em -0.3em); }

.love-note-sr {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: normal;
    border: 0;
}

/* ─────────── next >> ─────────── */
.love-note-controls {
    position: absolute;
    left: 4vw;
    bottom: calc(env(safe-area-inset-bottom, 0px) + 6px);
    z-index: 2;
}
.love-note-next {
    min-width: 44px;
    min-height: 48px;
    padding: 0 0.7rem;
    border: 0;
    background: transparent;
    color: var(--btn-ink);
    font: 700 1.35rem/1 var(--font-body);
    letter-spacing: var(--label-tracking);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    opacity: 0;
    visibility: hidden;
    transform: translateY(8px);
    transition: opacity 0.25s var(--ease-expo-out), transform 0.25s var(--ease-expo-out), visibility 0s linear 0.25s;
}
.love-note-next:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 3px; border-radius: 6px; }
.love-note--asking .love-note-next {
    opacity: 1;
    visibility: visible;
    transform: none;
    transition: opacity 0.25s var(--ease-expo-out), transform 0.25s var(--ease-expo-out), visibility 0s;
}
.love-note--pressed .love-note-next {
    transform: scale(0.93);
    transition: transform 80ms var(--ease-snap);
}

/* ─────────── The payoff: the sheet, the polaroid and next >> fade; the ground and stars stay ─────────── */
.love-note--leaving .love-note-stage,
.love-note--leaving .love-note-controls {
    opacity: 0;
    transition: opacity 0.3s var(--ease-silk) 0.08s;
}

/* Entry states are applied instantly (prepare / goto), never animated. */
.love-note-instant,
.love-note-instant * {
    transition: none !important;
}

/* ═══════════ Short phones (≤ 700 px tall): win back ~50 px so a typical
   note fits whole. A smaller polaroid whose photo stays ≥ 100 px wide (88% of
   114 px) with a slimmer bottom margin, less overlap and padding, tighter
   lines, a smaller signature; love-note.js lowers the fit's floor to 0.98rem. ═══════════ */
@media (orientation: portrait) and (max-height: 700px) {
    .love-note-container {
        --love-note-top: calc(env(safe-area-inset-top, 0px) + 50px);
        --love-note-bottom: calc(env(safe-area-inset-bottom, 0px) + 58px);
        --love-note-pol-w: clamp(114px, 31vw, 122px);
        --love-note-overlap: 10px;
        --love-note-peek: calc(var(--love-note-pol-w) * 1.33 - var(--love-note-overlap));
        --love-note-scallop: 6px;
    }
    .love-note-stage { left: 3vw; right: 3vw; }
    .love-note-frame { padding-bottom: 17%; }
    .love-note-paper { padding: calc(var(--r) + 0.4rem + var(--love-note-overlap)) calc(var(--r) + 0.5rem) calc(var(--r) + 0.3rem); }
    .love-note-text { line-height: 1.2; }
    .love-note-sign { margin-top: 0.2rem; font-size: 1.08rem; }
}

/* ═══════════ Desktop / landscape: the reference's composition ═══════════ */
@media (orientation: landscape) {
    .love-note-container {
        --love-note-top: calc(env(safe-area-inset-top, 0px) + 58px);
        --love-note-bottom: calc(env(safe-area-inset-bottom, 0px) + 64px);
        --love-note-peek: 0px;
        --love-note-scallop: 8px;
    }
    .love-note-star:nth-child(n + 15) { display: block; }
    .love-note-star {
        left: var(--x, 50%);
        top: var(--y, 50%);
        width: calc(var(--s, 1) * (18px + 4.4vmin));
    }
    .love-note-stage {
        left: 5vw;
        right: 4vw;
        bottom: var(--love-note-bottom);
        flex-direction: row;
        align-items: center;
        justify-content: flex-start;
    }
    .love-note-pair {
        display: flex;
        align-items: center;
        gap: 4vw;
        width: 100%;
        padding-top: 0;
    }
    .love-note-polaroid {
        position: relative;
        top: auto;
        left: auto;
        flex: 0 0 auto;
        width: min(31vw, calc((100 * var(--love-note-vh) - var(--love-note-top) - var(--love-note-bottom)) / 1.36));
        transform: translateX(-50vw) rotate(-3deg);
    }
    .love-note--photo .love-note-polaroid { transform: translateX(0) rotate(-3deg); }
    .love-note-sheet {
        flex: 0 1 55vw;
        width: 55vw;
        min-width: 0;
        margin-left: auto;
    }
    .love-note-paper {
        min-height: min(46 * var(--love-note-vh), var(--love-note-sheet-max));
        padding: calc(var(--r) + 1.6rem) calc(var(--r) + 2rem) calc(var(--r) + 1rem);
    }
    .love-note-text { font-size: var(--love-note-fs, 1.5rem); }
    .love-note-sign { font-size: clamp(1.25rem, 1.9vw, 1.6rem); padding-right: 1rem; }
    .love-note-controls {
        left: calc(5vw + 1rem);
        bottom: calc(env(safe-area-inset-bottom, 0px) + 8px);
    }
}

/* ═══════════ Reduced motion: every step still plays, calmly ═══════════ */
@media (prefers-reduced-motion: reduce) {
    .love-note-star,
    .love-note--in .love-note-star {
        transform: translate(-50%, -50%) rotate(var(--r, 0deg));
        transition: opacity 0.3s var(--ease-silk);
        transition-delay: 0s;
    }
    .love-note--in .love-note-glint i { animation: none; }
    .love-note-glint { display: none; }
    .love-note-polaroid,
    .love-note--photo .love-note-polaroid { transform: rotate(-5deg); transition: opacity 0.4s var(--ease-silk); }
    .love-note-sheet,
    .love-note--sheet .love-note-sheet { clip-path: none; opacity: 0; transition: opacity 0.4s var(--ease-silk); }
    .love-note--sheet .love-note-sheet { opacity: 1; }
    .love-note-w { visibility: visible; opacity: 0; transition: opacity 0.35s var(--ease-silk); }
    .love-note-w.love-note-on { opacity: 1; }
    .love-note-heart,
    .love-note--signed .love-note-heart { transform: none; }
    .love-note-sign,
    .love-note--signed .love-note-sign { clip-path: none; opacity: 0; transition: opacity 0.6s var(--ease-silk); }
    .love-note--signed .love-note-sign { opacity: 1; }
    .love-note-next,
    .love-note--asking .love-note-next,
    .love-note--pressed .love-note-next { transform: none; }
}
@media (prefers-reduced-motion: reduce) and (orientation: landscape) {
    .love-note-polaroid,
    .love-note--photo .love-note-polaroid { transform: rotate(-3deg); }
}