/* ═══════════════════════════════════════════
   caution — beat 2 of 8 (6.0 s, verb tap, hold `next-caution` at 5.4 s)
   The film's wow is the slap: a CAUTION sticker flies in from the camera,
   wipes on left to right and slaps onto the pink gingham at 0.55 s (on
   the swell's hit). No particles and no dim: the gingham stays as it is.

   This file is the beat's ENTRY state and its layout, nothing else. The
   flight, slap, contact shadow, the figure's fall and the peel are Web
   Animations started by js/caution.js (prepare() cancels them, so the CSS
   below is what a replay returns to). Only transform, opacity and the
   wipe's clip-path animate: the contact shadow and both drop shadows are
   pre-painted layers whose opacity moves, never an animating box-shadow
   or filter.

   Layout: portrait phone first (the sticker ~78vw wide and at most ~52svh
   tall in the upper middle, `next >>` in the thumb zone); landscape /
   desktop is the reference's: the tilted triangle centred at ~50vh tall
   with `next >>` just under it. The top ~60px is left to the progress
   tape and the mute pill (the stage's chrome).

   Every class and keyframe here is prefixed `caution-`.
   ═══════════════════════════════════════════ */

.caution-container {
    --caution-w: min(78vw, 57.5svh);           /* 400:362 art, so the height is <= 52svh */
    --caution-tilt: -8deg;                     /* the reference's tilt: the bottom edge rises to the right */
    position: absolute;
    inset: 0;
    transform-style: preserve-3d;              /* the ground sits back with special-delivery's; the sticker's own layer stays flat */
    display: flex;
    flex-direction: column;
    align-items: center;
    padding:
        calc(60px + env(safe-area-inset-top, 0px))
        16px
        calc(7svh + env(safe-area-inset-bottom, 0px));
    color: var(--ink);
    font-family: var(--font-body);
    user-select: none;
    -webkit-user-select: none;
}

/* ───── The ground: pink watercolour gingham, full bleed ─────
   Built exactly as special-delivery's ground (same tile, size, position,
   blend, over-size and depth), so the cut between the two beats never
   shows: the ground does not change into this beat. The watercolour
   mottle is a feTurbulence tile rasterised once and multiplied over the
   bands. */
.caution-ground {
    position: absolute;
    inset: -12%;
    background:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='640' height='640'%3E%3Cfilter id='w' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.006' numOctaves='3' seed='11' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.86 0 0 0 0 0.42 0 0 0 0 0.55 0 0 0 1.25 -0.5'/%3E%3C/filter%3E%3Crect width='640' height='640' filter='url(%23w)'/%3E%3C/svg%3E"),
        var(--ground-gingham-pink);
    background-size:
        640px 640px,
        calc(var(--gingham-cell) * 2) calc(var(--gingham-cell) * 2),
        calc(var(--gingham-cell) * 2) calc(var(--gingham-cell) * 2);
    background-position: center;
    background-repeat: repeat;
    background-blend-mode: multiply, normal, normal;
    transform: translateZ(-120px);
    pointer-events: none;
}

/* ───── The sticker's place ───── */
.caution-stage {
    position: relative;
    flex: 1 1 auto;
    min-height: 0;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding-bottom: 3svh;                       /* a touch above centre: the upper middle */
    pointer-events: none;
}

/* The sticker's layout box: never transformed itself. */
.caution-sticker {
    position: relative;
    width: var(--caution-w);
    aspect-ratio: 400 / 362;
    flex: 0 0 auto;
}

/* The contact shadow: a soft wine shadow just under the sticker, a little
   larger than the triangle and set a touch below and right of its
   centroid (the art's (50%, 63%) turned through the -8deg tilt), as a
   shadow falls. Js peaks it at 0.5 as the sticker lands and rests it at
   0.3, so it reads as the sticker's shadow, not a glow. Entry: unseen. */
.caution-halo {
    position: absolute;
    left: 52.4%;
    top: 65.5%;
    width: 118%;
    aspect-ratio: 1;
    border-radius: 50%;
    background: radial-gradient(closest-side,
        var(--sticker-halo) 0%,
        rgba(110, 6, 36, 0.3) 40%,
        rgba(110, 6, 36, 0.08) 72%,
        rgba(110, 6, 36, 0) 100%);
    transform: translate(-50%, -50%) scale(0.9);
    opacity: 0;
    will-change: transform, opacity;
}

/* The flight: entry pose is near the camera (translateZ 260px, scale 1.9,
   turned 20deg the other way); js lands it on the page at 0.55 s. Its own
   perspective, since the section is a flat layer in the world. */
.caution-fly {
    position: absolute;
    inset: 0;
    transform: perspective(900px) translateZ(260px) scale(1.9) rotate(20deg);
    transform-origin: 50% 50%;
    will-change: transform;
}

/* The wipe: entry is fully clipped from the right (it wipes on left to right). */
.caution-wipe {
    position: absolute;
    inset: 0;
    clip-path: inset(-16% 116% -16% -16%);
}

/* ───── Shadows: pre-painted, opacity only ───── */
.caution-shadow {
    position: absolute;
    inset: 0;
    will-change: opacity;
}
.caution-shadow-shape {
    position: absolute;
    inset: 0;
    background: rgba(70, 6, 24, 0.5);
    clip-path: polygon(50% 4.6%, 3.6% 95.6%, 96.4% 95.6%);
}
.caution-shadow--far {
    transform: translate(3.5%, 5%);
    filter: blur(14px);
    opacity: 0.6;
}
.caution-shadow--near {
    transform: translate(0.5%, 1.3%);
    filter: blur(4px);
    opacity: 0;
}

/* ───── The art ───── */
.caution-art,
.caution-figure-art {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: visible;
}
.caution-die-edge {
    fill: var(--paper-edge);
    stroke: var(--paper-edge);
    stroke-width: 47px;
    stroke-linejoin: round;
}
.caution-die {
    fill: var(--sticker-border);
    stroke: var(--sticker-border);
    stroke-width: 44px;
    stroke-linejoin: round;
}
.caution-pink {
    fill: var(--sticker-pink);
    stroke: var(--sticker-pink);
    stroke-width: 16px;
    stroke-linejoin: round;
}
.caution-speckle { opacity: 0.85; }
.caution-splash {
    fill: var(--sticker-pink-light);
    opacity: 0.6;
}
.caution-streak {
    fill: none;
    stroke: var(--sticker-pink-light);
    stroke-width: 1.8px;
    stroke-linecap: round;
    opacity: 0.55;
}
.caution-panel {
    fill: var(--sticker-border);
    stroke: var(--sticker-border);
    stroke-width: 8px;
    stroke-linejoin: round;
}
.caution-panel-wear { opacity: 0.16; }
.caution-word,
.caution-subline {
    fill: var(--sticker-border);
    font-family: var(--font-display);
    font-weight: 800;
    letter-spacing: 0;
}

/* The figure: its own clipped layer (the panel, from the art's path, +4 units
   of its rounded stroke), so the fall is a compositor transform. */
.caution-figure-clip {
    position: absolute;
    inset: 0;
    clip-path: polygon(31.9% 50.3%, 68.1% 50.3%, 82.6% 80.1%, 17.4% 80.1%);
}
.caution-figure {
    position: absolute;
    inset: 0;
    transform-origin: 41.5% 76.24%;            /* (166, 276): between the hip and the planted foot */
    transform: translate(0%, 0%) rotate(0deg);
    will-change: transform;
}
.caution-head { fill: var(--sticker-pink); }
.caution-limb {
    fill: none;
    stroke: var(--sticker-pink);
    stroke-width: 12px;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* The sweep's host, clipped to the sticker's outline. (Two classes, so
   .reveel-sweep's `position: relative` never displaces it.) */
.caution-wipe .caution-sweep {
    position: absolute;
    inset: 0;
    pointer-events: none;
    clip-path: polygon(50% 1.5%, 1% 97.5%, 99% 97.5%);
}

/* ───── next >> ───── */
.caution-controls {
    position: relative;
    flex: 0 0 auto;
    display: flex;
    justify-content: center;
    min-height: 56px;
    pointer-events: none;
}
.caution-next {
    pointer-events: auto;
    min-height: 48px;
    min-width: 132px;
    padding: 0.45rem 1.4rem;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: var(--btn-ink);
    font-family: var(--font-body);
    font-weight: 700;
    font-size: 1.35rem;
    line-height: 1;
    letter-spacing: var(--label-tracking);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    /* Entry: not shown, not tappable (a tap before 5.4 s does nothing). */
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition:
        opacity 250ms var(--ease-silk),
        transform 250ms var(--ease-expo-out),
        visibility 0s linear 250ms;
}
.caution-next.caution-next--on {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    transition:
        opacity 250ms var(--ease-silk),
        transform 250ms var(--ease-expo-out),
        visibility 0s linear 0s;
}
.caution-next.caution-next--on.caution-next--pressed {
    transform: translateY(0) scale(0.93);
    transition:
        opacity 250ms var(--ease-silk),
        transform 80ms var(--ease-snap),
        visibility 0s linear 0s;
}
.caution-next:focus-visible {
    outline: 2px solid var(--focus-ring);
    outline-offset: 3px;
}
.caution-next:disabled { cursor: default; }

/* ───── Landscape / desktop: the reference's composition ─────
   The tilted triangle centred at about 50vh tall, `next >>` just under it. */
@media (min-aspect-ratio: 1/1) and (min-width: 700px) {
    .caution-container {
        --caution-w: min(55.25vh, 62vw);
        justify-content: center;
        padding: calc(64px + env(safe-area-inset-top, 0px)) 24px calc(5vh + env(safe-area-inset-bottom, 0px));
    }
    .caution-stage {
        flex: 0 0 auto;
        padding-bottom: 0;
    }
    .caution-controls {
        margin-top: 1.6vh;
    }
    .caution-next { font-size: 1.5rem; }
}

/* Landscape phones: keep the sticker and the control inside a short screen. */
@media (min-aspect-ratio: 1/1) and (max-height: 480px) {
    .caution-container {
        --caution-w: min(60svh, 62vw);
        padding-top: calc(44px + env(safe-area-inset-top, 0px));
        padding-bottom: calc(2svh + env(safe-area-inset-bottom, 0px));
    }
}

/* ───── Reduced motion: the sticker wipes on in place and stays ───── */
@media (prefers-reduced-motion: reduce) {
    .caution-fly {
        transform: perspective(900px) translateZ(0px) scale(1) rotate(-8deg);
    }
    .caution-shadow--far { opacity: 0; }
    .caution-next,
    .caution-next.caution-next--on,
    .caution-next.caution-next--on.caution-next--pressed {
        transform: none;
    }
}