/* ═══════════════════════════════════════════
   birthday-scrapbook — beat 5: ten-things
   Solid crimson; "{N} THINGS I LOVE ABOUT YOU" typed in League Spartan 800;
   an airmail sheet wiped in by a torn-paper matte (an SVG alpha mask whose
   mask-position sweeps); polaroids with washi tape; a small ink heart by
   each reason in turn; `next >>` under the paper at the hold.

   Phone (portrait): the heading in two lines across the top, the sheet at
   92vw filling the height to `next >>`, the polaroids tucked BEHIND the
   sheet so they only peek from its corners (the third only on a phone at
   least 700 px tall). The list never sits under a photo.
   Desktop / landscape: the heading stacked in four lines on the left, the
   sheet in the centre, one polaroid at the top right and one at the bottom
   left, in front of the sheet but over its airmail border only.

   Play-state classes live on #ten-things-container (js/ten-things.js):
     ten-things--wiping    the matte sweeps (1.9-2.7 s)
     ten-things--revealed  the matte is done: the mask is dropped, the paper's shadow comes up
     ten-things--idle      the polaroids sway, the tape glints
     ten-things--asking    `next >>` is shown (the hold)
     ten-things--leaving   the exit: `next >>` fades, the loops park
     ten-things--whole     reduced motion: the heading fades in whole
     ten-things--overflow  the fit's safety net: the text box is pan-y scrollable
     ten-things-instant    prepare(): every transition suspended for one frame
   ═══════════════════════════════════════════ */

.ten-things-container {
    position: absolute;
    inset: 0;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto minmax(0, 1fr) auto;
    grid-template-areas:
        "head"
        "board"
        "ctrl";
    /* The top 52 px belong to the stage chrome (mute pill left, progress tape right). */
    padding:
        calc(env(safe-area-inset-top, 0px) + 54px)
        4vw
        calc(env(safe-area-inset-bottom, 0px) + 4px);
    box-sizing: border-box;
    overflow: hidden;
    color: var(--text-primary);
}

/* ───── 1. The ground: solid crimson with the faintest corner vignette ───── */
.ten-things-ground {
    position: absolute;
    inset: 0;
    z-index: 0;
    background:
        radial-gradient(ellipse 85% 80% at 50% 48%, rgba(110, 8, 22, 0) 62%, rgba(110, 8, 22, 0.75) 100%),
        var(--ground-crimson);
    pointer-events: none;
}

/* ───── 2. The heading ───── */
.ten-things-heading {
    grid-area: head;
    position: relative;
    z-index: 3;
    margin: 0 0 10px;
    font-family: var(--font-display);
    font-weight: 800;
    font-size: clamp(1.5rem, min(8.2vw, 5.2svh), 2.7rem);
    line-height: 0.98;
    letter-spacing: 0.005em;
    color: var(--text-primary);
    pointer-events: none;
}

.ten-things-heading-type,
.ten-things-heading-line {
    display: block;
}

.ten-things-heading-group {
    white-space: nowrap;
}

.ten-things-ch {
    opacity: 0;
}

.ten-things-ch.is-on,
.ten-things--whole .ten-things-ch {
    opacity: 1;
}

.ten-things--whole .ten-things-heading-type {
    animation: ten-things-fade 0.3s var(--ease-silk) both;
}

/* ───── 3. The board: polaroids and the paper ───── */
.ten-things-board {
    grid-area: board;
    position: relative;
    z-index: 1;
    min-height: 0;
}

.ten-things-paper {
    position: absolute;
    inset: 0;
    z-index: 2;
}

/* The paper's own shadow sits under the sheet; it comes up once the matte is done
   (the mask would clip it during the wipe). */
.ten-things-paper::before {
    content: '';
    position: absolute;
    inset: 0;
    box-shadow: var(--paper-shadow-lifted);
    opacity: 0;
    transition: opacity 0.4s var(--ease-silk);
    pointer-events: none;
}

.ten-things-paper .ten-things-page {
    position: absolute;
    inset: 0;
    box-sizing: border-box;
    padding: 9px;                          /* the airmail border's width */
}

.ten-things-text {
    height: 100%;
    box-sizing: border-box;
    padding: 10px 9px 10px 7px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* The ghost: the list, faint, straight on the crimson (the beat's first frame).
   12% of ink on #860a1a measures 1.05:1 and cannot be seen, so the ghost is
   ink at 32%, which reads like the reference's faint pre-wipe list. */
.ten-things-ghost {
    z-index: 1;
    opacity: 0.32;
}

.ten-things--revealed .ten-things-ghost {
    opacity: 0;
}

/* The airmail sheet: the chevron border is the sheet's own background, the cream
   panel is the text box laid over it. */
.ten-things-paper .ten-things-sheet {
    z-index: 2;
    background: var(--airmail-stripe);
    -webkit-mask-image: url(../assets/ten-things/torn-matte.svg);
    mask-image: url(../assets/ten-things/torn-matte.svg);
    -webkit-mask-size: 250% 100%;
    mask-size: 250% 100%;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: 100% 0;
    mask-position: 100% 0;
}

/* The torn-paper matte: the mask's ragged leading edge crosses the sheet left to right. */
.ten-things--wiping .ten-things-sheet {
    -webkit-mask-position: 0% 0;
    mask-position: 0% 0;
    transition:
        -webkit-mask-position var(--dur-torn) var(--ease-stage),
        mask-position var(--dur-torn) var(--ease-stage);
}

.ten-things--revealed .ten-things-sheet {
    -webkit-mask-image: none;
    mask-image: none;
}

.ten-things--revealed .ten-things-paper::before {
    opacity: 1;
}

.ten-things-scroll {
    background: var(--paper-cream);
}

/* Past the 0.95rem floor (a safety net only): pan-y scrollable with an edge fade. */
.ten-things--overflow .ten-things-scroll {
    overflow-y: auto;
    padding-bottom: 28px;                 /* the last row clears the 24px edge fade at full scroll */
    touch-action: pan-y;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 14px, #000 calc(100% - 24px), transparent 100%);
    mask-image: linear-gradient(to bottom, transparent 0, #000 14px, #000 calc(100% - 24px), transparent 100%);
}

/* "more ↓": at the hold, only while the list overflows; on the sheet's bottom edge, over
   the edge fade, at the right (polaroid 2 and `next >>` are at the left, the badge is
   below the sheet). Ink on cream 15.98:1. Gone once the reader is within 8px of the end. */
.ten-things-more {
    position: absolute;
    right: 16px;
    bottom: 11px;
    z-index: 3;
    padding: 0 8px;
    border-radius: 999px;
    background: var(--paper-cream);
    font-family: var(--font-body);
    font-weight: 700;
    font-size: 0.95rem;
    line-height: 1.35;
    letter-spacing: var(--body-tracking);
    color: var(--ink);
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.25s var(--ease-silk);
}

.ten-things--more .ten-things-more {
    opacity: 1;
    transition-delay: 0.3s;               /* after the scroll back to the top */
}

/* ───── The list ───── */
.ten-things-list {
    margin: auto 0;                       /* centred when short; flush when it fills */
    padding: 0;
    list-style: none;
    font-family: var(--font-body);
    font-weight: 400;
    font-size: var(--ten-things-fs, 1.15rem);
    line-height: 1.2;
    letter-spacing: 0.02em;
    color: var(--ink);
}

.ten-things-row {
    display: grid;
    grid-template-columns: 1.6em minmax(0, 1fr);
    column-gap: 0.12em;
    margin: 0 0 0.34em;
}

.ten-things-row:last-child {
    margin-bottom: 0;
}

.ten-things-reason {
    overflow-wrap: anywhere;
}

.ten-things-tail {
    white-space: nowrap;
}

/* The ink heart doodled beside reason k at 2.8 + 0.45k s (cherry on cream, 6.47:1). */
.ten-things-heart {
    display: inline-block;
    width: 0.92em;
    height: 0.82em;
    margin-left: 0.3em;
    vertical-align: -0.08em;
    opacity: 0;
    transform: scale(0.3) rotate(-24deg);
    transition:
        opacity 0.18s linear,
        transform 0.38s var(--ease-expo-out);
}

.ten-things-heart svg {
    display: block;
    width: 100%;
    height: 100%;
    overflow: visible;
}

.ten-things-heart path {
    fill: var(--stripe-cherry);
    stroke: var(--ink);
    stroke-width: 1.1;
    stroke-linejoin: round;
}

.ten-things-heart.is-on {
    opacity: 1;
    transform: scale(1) rotate(-8deg);
}

/* ───── The polaroids ───── */
.ten-things-polaroid {
    --tilt: 6deg;
    position: absolute;
    z-index: 1;                           /* phone: behind the sheet, peeking from its corners */
    width: 28vw;
    margin: 0;
    opacity: 0;
    transform: rotate(calc(var(--tilt) * 0.4)) scale(0.92);
    transition:
        opacity 0.3s linear,
        transform 0.45s var(--ease-expo-out);
}

.ten-things-polaroid.is-in {
    opacity: 1;
    transform: rotate(var(--tilt)) scale(1);
}

.ten-things-polaroid--1 {
    --tilt: 8deg;
    top: -28px;
    right: -1vw;
}

.ten-things-polaroid--2 {
    --tilt: -7deg;
    bottom: -52px;
    left: min(-7vw, calc(100vw - 404px)); /* phone: peeks left of `next >>`, further out on narrow screens */
}

.ten-things-polaroid--3 {
    --tilt: 6deg;
    bottom: -48px;
    right: -1.5vw;
}

.ten-things-polaroid-body {
    position: relative;
    box-sizing: border-box;
    padding: 7% 7% 24%;
    background: var(--paper-white);
    box-shadow: var(--paper-shadow);
}

.ten-things-polaroid--2 .ten-things-polaroid-body { animation-delay: -1.6s; }
.ten-things-polaroid--3 .ten-things-polaroid-body { animation-delay: -3.1s; }

.ten-things-polaroid-photo {
    display: block;
    aspect-ratio: 4 / 5;
    overflow: hidden;
    background: #e9b7ad;
}

.ten-things-polaroid-img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Washi tape across the top: torn zigzag ends, a faint fibre, a glint while idle. */
.ten-things-tape {
    position: absolute;
    top: -6%;
    left: 50%;
    width: 58%;
    aspect-ratio: 4 / 1;
    transform: translateX(-50%) rotate(-4deg);
    background:
        repeating-linear-gradient(92deg, rgba(124, 92, 40, 0.08) 0 2px, transparent 2px 7px),
        var(--washi);
    opacity: 0.9;
    box-shadow: inset 0 0 0 1px var(--washi-edge);
    clip-path: polygon(
        0 8%, 3% 0, 97% 0, 100% 10%, 97% 24%, 100% 38%, 97% 52%, 100% 66%, 97% 80%, 100% 92%, 97% 100%,
        3% 100%, 0 90%, 3% 76%, 0 62%, 3% 48%, 0 34%, 3% 20%);
    overflow: hidden;
}

.ten-things-polaroid--2 .ten-things-tape { transform: translateX(-50%) rotate(5deg); }

.ten-things-tape::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(100deg, transparent 30%, rgba(255, 250, 242, 0.7) 50%, transparent 70%);
    opacity: 0;
}

/* Idle (2.7 s to the hold): sway ±1° on `breath`, the tape glints. Six layers at most. */
.ten-things--idle .ten-things-polaroid-body {
    animation-name: ten-things-sway;
    animation-duration: 5s;
    animation-timing-function: var(--ease-breath);
    animation-iteration-count: infinite;
    animation-direction: alternate;
}

.ten-things--idle .ten-things-tape::after {
    animation: ten-things-glint 5s var(--ease-breath) infinite;
}

.ten-things--idle .ten-things-polaroid--2 .ten-things-tape::after { animation-delay: 1.7s; }
.ten-things--idle .ten-things-polaroid--3 .ten-things-tape::after { animation-delay: 3.3s; }

.ten-things--leaving .ten-things-polaroid-body,
.ten-things--leaving .ten-things-tape::after {
    animation-play-state: paused;
}

@keyframes ten-things-sway {
    from { transform: rotate(-1deg); }
    to { transform: rotate(1deg); }
}

@keyframes ten-things-glint {
    0%, 55%, 100% { opacity: 0; }
    68% { opacity: 1; }
}

@keyframes ten-things-fade {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* ───── 4. `next >>` ───── */
.ten-things-controls {
    grid-area: ctrl;
    position: relative;
    z-index: 3;
    pointer-events: none;                 /* only the button takes taps; the row never shields a photo */
    display: flex;
    justify-content: flex-end;
    align-items: center;
    min-height: 48px;
    padding-top: 2px;
    /* Phone: the platform's "Made with Reveel" badge sits bottom-right (16px in, ~145px
       wide) and cannot lift above a control in this row, so `next >>` ends 170px in from
       the viewport's right (the container already pads 4vw), between the bottom-left
       polaroid peek and the badge. Never fought with z-index (build-contract §6). */
    padding-right: max(0px, calc(170px - 4vw));
}

.ten-things-next {
    pointer-events: auto;
    min-width: 44px;
    min-height: 44px;
    padding: 0 12px;
    border: 0;
    border-radius: 999px;
    background: transparent;
    font-family: var(--font-body);
    font-weight: 700;
    font-size: 1.35rem;
    letter-spacing: var(--label-tracking);
    color: var(--text-primary);           /* cream-white on crimson: 9.75:1 */
    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;
}

.ten-things--asking .ten-things-next {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    transition:
        opacity 0.25s var(--ease-expo-out),
        transform 0.25s var(--ease-expo-out),
        visibility 0s;
}

.ten-things--asking .ten-things-next.ten-things-next--pressed {
    transform: scale(0.94);
    transition: transform 80ms var(--ease-snap);
}

.ten-things--leaving .ten-things-next {
    opacity: 0;
    transition: opacity 0.2s var(--ease-silk), transform 80ms var(--ease-snap);
}

.ten-things-next:focus-visible {
    outline: 2px solid var(--focus-ring);
    outline-offset: 2px;
}

/* ───── prepare(): the entry state, applied instantly ───── */
.ten-things-instant,
.ten-things-instant *,
.ten-things-instant *::before,
.ten-things-instant *::after {
    transition: none !important;
    animation: none !important;
}

/* ───── Phone (portrait): the polaroids IN FRONT, over the paper's border only ─────
   The heading is three lines on the left ("{N} THINGS / I LOVE / ABOUT YOU") so
   polaroid 1 stands beside it at the top right, its bottom margin over the sheet's
   top border; polaroid 2 hangs below the sheet's bottom-left border beside `next >>`
   (which stays clear of the badge corner); polaroid 3 (phones ≥ 700 px tall, N > 6)
   fans behind polaroid 1. The bands the polaroids need are taken from the sheet:
   --pw1/--pw2 drive the heading's and the controls' heights. --tt-ps is set by
   js/ten-things.js: above 1 when N ≤ 6 (the sheet gives its spare height to the photos). */
@media (orientation: portrait) {
    .ten-things-container {
        --tt-ps: 1;
        --tt-hf: clamp(1.45rem, min(7.4vw, 4.4svh), 2.4rem);   /* the heading's size */
        --pw1: min(calc(23vw * var(--tt-ps)), 44vw);
        --pw2: min(calc(20vw * var(--tt-ps)), calc(100vw - 290px));
        --pw3: max(48px, min(21vw, calc(95vw - var(--pw1) * 0.72 - var(--tt-hf) * 5.6 - 30px)));
    }

    .ten-things-heading {
        box-sizing: border-box;
        min-height: calc(var(--pw1) * 1.17 - 12px);
        margin: 0;
        padding-bottom: 8px;
        font-size: var(--tt-hf);
    }

    .ten-things-heading-line:first-child .ten-things-heading-group {
        display: block;
    }

    .ten-things-polaroid {
        z-index: 3;
    }

    .ten-things-polaroid-photo {
        aspect-ratio: 1 / 1;              /* square on phone: the photo shows whole in the band */
    }

    .ten-things-polaroid--1 {
        --tilt: 5deg;
        z-index: 4;
        width: var(--pw1);
        top: auto;
        bottom: calc(100% - 12px);        /* 12px of its bottom margin on the 19px border + padding */
        right: 1vw;
        left: auto;
    }

    .ten-things-polaroid--2 {
        --tilt: -6deg;
        width: var(--pw2);
        top: calc(100% - 4px);            /* only its top margin and tape touch the bottom border */
        bottom: auto;
        left: -1vw;
        right: auto;
    }

    .ten-things-polaroid--3 {
        --tilt: -8deg;
        width: var(--pw3);
        top: auto;
        bottom: calc(100% - 6px);
        right: calc(1vw + var(--pw1) * 0.72);
        left: auto;
    }

    .ten-things--few .ten-things-polaroid--3 {
        display: none;
    }

    .ten-things-controls {
        /* tall enough for polaroid 2's whole photo; its bottom margin may run off the edge */
        min-height: max(48px, calc(var(--pw2) * 0.98 - 6px));
    }

    /* N ≤ 6: the sheet's height follows its rows; the page's spare height goes to the
       polaroids (js/ten-things.js picks --tt-ps) and the sheet sits between the bands. */
    .ten-things-container.ten-things--few {
        grid-template-rows: auto auto auto;
        align-content: space-between;
    }

    .ten-things--few .ten-things-paper,
    .ten-things--few .ten-things-paper .ten-things-sheet {
        position: relative;
        inset: auto;
    }

    .ten-things--few .ten-things-text {
        height: auto;
    }
}

/* Short phones: a little tighter, never under the 0.95rem floor. */
@media (orientation: portrait) and (max-height: 700px) {
    .ten-things-heading {
        line-height: 0.93;
    }

    .ten-things-list {
        line-height: 1.16;
    }

    .ten-things-row {
        margin-bottom: 0.28em;
    }
}

@media (orientation: portrait) and (max-height: 680px) {
    .ten-things-container {
        padding-top: calc(env(safe-area-inset-top, 0px) + 50px);   /* main.css: 50px on short phones */
    }
}

/* ───── Phone: the third polaroid only where there is room ───── */
@media (max-height: 699.98px) {
    .ten-things-polaroid--3 {
        display: none;
    }
}

/* ───── Desktop / landscape: the reference's composition ───── */
@media (orientation: landscape) {
    .ten-things-container {
        grid-template-columns: 27vw 44vw minmax(0, 1fr);
        grid-template-rows: minmax(0, 1fr) auto;
        grid-template-areas:
            "head board ."
            "head ctrl  .";
        padding:
            calc(env(safe-area-inset-top, 0px) + max(60px, 8vh))
            0
            calc(env(safe-area-inset-bottom, 0px) + max(4px, 0.8vh));
    }

    .ten-things-heading {
        align-self: start;
        margin: 0;
        padding-left: 3vw;
        font-size: min(8.6vh, 4.8vw);
        line-height: 0.96;
    }

    .ten-things-heading-group {
        display: block;                   /* "{N} THINGS / I LOVE / ABOUT / YOU" */
    }

    .ten-things-text {
        padding: max(12px, 2.2vh) 2.6vw max(12px, 2.2vh) 2.4vw;
    }

    .ten-things-paper .ten-things-page {
        padding: 11px;
    }

    .ten-things-list {
        font-size: var(--ten-things-fs, 1.3rem);
        line-height: 1.26;
        letter-spacing: var(--body-tracking);
    }

    .ten-things-row {
        grid-template-columns: 1.75em minmax(0, 1fr);
        margin-bottom: 0.42em;
    }

    .ten-things-controls {
        justify-content: center;
        padding-right: 0;
    }

    .ten-things-next {
        padding: 0 18px;
    }

    .ten-things-polaroid {
        z-index: 3;                       /* in front, over the airmail border only */
    }

    .ten-things-polaroid--1 {
        --tilt: 7deg;
        top: 1vh;
        right: auto;
        left: calc(100% - 1.6vw);
        width: min(20vw, 36vh);
    }

    .ten-things-polaroid--2 {
        --tilt: -7deg;
        top: auto;
        bottom: 2vh;
        left: auto;
        right: calc(100% - 1.4vw);
        width: min(18vw, 32vh);
    }

    .ten-things-polaroid--3 {
        display: none;
    }
}

/* ───── Reduced motion: plays in full, calmer ───── */
@media (prefers-reduced-motion: reduce) {
    .ten-things-paper .ten-things-sheet {
        -webkit-mask-image: none;
        mask-image: none;
        opacity: 0;
    }

    .ten-things--wiping .ten-things-sheet {
        opacity: 1;
        transition: opacity var(--dur-torn) var(--ease-silk);
    }

    .ten-things-polaroid,
    .ten-things-polaroid.is-in {
        transform: rotate(var(--tilt));
        transition: opacity 0.4s var(--ease-silk);
    }

    .ten-things-heart,
    .ten-things-heart.is-on {
        transform: rotate(-8deg);
        transition: opacity 0.3s linear;
    }

    .ten-things--idle .ten-things-polaroid-body,
    .ten-things--idle .ten-things-tape::after {
        animation: none;
    }

    .ten-things-next,
    .ten-things--asking .ten-things-next {
        transform: none;
    }
}