/* Not My Event: the look of "After Hours: The Final Countdown" (public/templates/after-hours.html). One page that scrolls DOWN through five places of one night; each scene is a tall section with a
   stage pinned to the screen (position: sticky) while the guest scrolls through it, so the scroll moves the camera. The drawings are SVG (afterhours-art.js), the fireworks a canvas (afterhours-fx.js).
   Speed rules (the user feels lag on a phone): the scroll frame only writes transform and opacity on a few layers; nothing sets custom properties on a scene during a scroll; no blur filters; scenes off
   the screen pause their animations (.off). People who asked for less motion (or chose "Reduce motion" in the menu) get still pictures with all the words showing. */
:root { --ac: #E8C26A; --ac2: #FFF1C8; --ink: #F6EEDC; --dim: rgba(246, 238, 220, .72); --bg: #05040C; --display: "Italiana", "Bodoni Moda", Georgia, serif; --caps: "Josefin Sans", system-ui, sans-serif; --body: "Cormorant Garamond", Georgia, serif; }
* { box-sizing: border-box; }
html { background: var(--bg); color-scheme: dark; }
body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--body); -webkit-font-smoothing: antialiased; overflow-x: hidden; }
.sr, .skip:not(:focus) { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip:focus { position: fixed; left: 12px; top: 12px; z-index: 9100; padding: 10px 14px; border-radius: 10px; background: #fff; color: #111; font: 700 14px var(--caps); }
button { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid var(--ac); outline-offset: 3px; }

/* ---------------- the two controls at the top (the Menu, and the speaker drawn by speaker.js) and the Event details pill ---------------- */
#menu-wrap { position: fixed; left: max(12px, env(safe-area-inset-left)); top: max(12px, env(safe-area-inset-top)); z-index: 9000; }
#b-menu { min-height: 44px; padding: 0 18px; border-radius: 999px; border: 1px solid rgba(232, 194, 106, .55); background: rgba(8, 6, 14, .72); color: var(--ink); font: 700 13px/1 var(--caps); letter-spacing: .18em; text-transform: uppercase; cursor: pointer; }
#menu { position: absolute; left: 0; top: 52px; display: grid; gap: 4px; min-width: 238px; padding: 8px; border-radius: 16px; background: #0C0A14; border: 1px solid rgba(232, 194, 106, .35); box-shadow: 0 18px 50px rgba(0, 0, 0, .6); }
#menu[hidden] { display: none; }
#menu button { min-height: 44px; padding: 0 14px; border: 0; border-radius: 10px; background: none; text-align: left; font: 600 15px/1.2 var(--caps); letter-spacing: .04em; cursor: pointer; }
#menu button:hover, #menu button:focus-visible { background: rgba(232, 194, 106, .14); }
#menu button[aria-pressed="true"]::after { content: " ✓"; color: var(--ac); }
#ev-pill { position: fixed; left: max(12px, env(safe-area-inset-left)); bottom: max(12px, env(safe-area-inset-bottom)); z-index: 8900; min-height: 40px; padding: 0 16px; border-radius: 999px; border: 1px solid rgba(232, 194, 106, .5); background: rgba(8, 6, 14, .78); color: var(--ink); font: 700 12px/1 var(--caps); letter-spacing: .16em; text-transform: uppercase; cursor: pointer; }
#snd-hint { position: fixed; right: max(14px, env(safe-area-inset-right)); bottom: max(16px, env(safe-area-inset-bottom)); z-index: 8900; margin: 0; padding: 8px 12px; border-radius: 999px; background: rgba(8, 6, 14, .7); font: 600 12px/1 var(--caps); letter-spacing: .08em; color: var(--dim); pointer-events: none; transition: opacity .6s ease; }
#snd-hint.gone { opacity: 0; }

/* ---------------- the scenes: tall sections with a pinned stage ---------------- */
.sc { position: relative; }
#s1 { height: 290vh; } #s2 { height: 290vh; } #s3 { height: 250vh; } #s4 { height: 330vh; } #s5 { height: 170vh; }
.stage { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; contain: layout paint; }
.ly { position: absolute; inset: 0; pointer-events: none; transform-origin: 50% 50%; }
.ly > svg, .ly .part > svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; overflow: visible; pointer-events: none; }
.ly .part { position: absolute; inset: 0; }
.hit { pointer-events: all; cursor: pointer; }
.hit:focus-visible { outline: none; }
.hit:focus-visible > * { stroke: var(--ac); }
.ov { position: absolute; inset: 0; pointer-events: none; opacity: 0; }

/* the words: real text, one line at a time, in a different place in every scene */
.lines { position: absolute; z-index: 20; pointer-events: none; display: grid; }
.ln { grid-area: 1 / 1; margin: 0; font: 700 clamp(26px, 6.2vw, 64px)/1.04 var(--caps); letter-spacing: .06em; text-transform: uppercase; color: var(--ink); text-shadow: 0 2px 18px rgba(0, 0, 0, .75), 0 0 2px rgba(0, 0, 0, .9); opacity: 0; will-change: opacity, transform; }
#s1 .lines { left: max(20px, 5vw); right: 20px; bottom: 16vh; } #s1 .ln { max-width: 15ch; }
#s2 .lines { left: 0; right: 0; top: 13vh; justify-items: center; text-align: center; } #s2 .ln { color: #fff; max-width: 18ch; text-shadow: 0 0 22px rgba(61, 226, 255, .55), 0 2px 10px rgba(0, 0, 0, .8); }
#s3 .lines { right: max(20px, 6vw); top: 12vh; justify-items: end; text-align: right; } #s3 .ln { font-family: var(--display); font-weight: 400; text-transform: none; letter-spacing: .01em; font-size: clamp(30px, 6.4vw, 70px); max-width: 14ch; color: #FFE9C8; }
#s5 .lines { left: 0; right: 0; top: 9vh; justify-items: center; text-align: center; } #s5 .ln { font-family: var(--display); font-weight: 400; letter-spacing: .04em; font-size: clamp(26px, 5vw, 56px); max-width: 20ch; color: var(--ac2); }

/* ---------------- 1. the street ---------------- */
#s1 .stage { background: #05061A; }
#s1 .rain { will-change: transform; }
#s1 .rain > svg { height: 200%; top: -100%; }
#s1 .rain { animation: ah-rain .9s linear infinite; }
@keyframes ah-rain { from { transform: translateY(0); } to { transform: translateY(50%); } }
#s1 .bulb { animation: ah-blink 1.1s steps(1, end) infinite; } #s1 .bulb.b1 { animation-delay: -.55s; }
@keyframes ah-blink { 0%, 100% { opacity: 1; } 50% { opacity: .25; } }
#s1 .flick .mq { animation: ah-flick 1.2s steps(6, end); }
@keyframes ah-flick { 0%, 30%, 60%, 100% { opacity: 1; } 15%, 45%, 75% { opacity: .2; } }
#s1 .rip { transform-box: fill-box; transform-origin: 50% 50%; animation: ah-rip 2.6s ease-out infinite; } #s1 .rip.r1 { animation-delay: -.9s; } #s1 .rip.r2 { animation-delay: -1.7s; }
#s1 .splash .rip { animation-duration: .7s; }
@keyframes ah-rip { from { transform: scale(.3); opacity: .9; } to { transform: scale(1.7); opacity: 0; } }
/* the limo at the door: the page drives it in and out (Web Animations); its hubcaps turn while it moves. The couple it brings gets out and walks in with the scroll (afterhours.js), bobbing while they walk */
#s1 .hub { transform-box: fill-box; transform-origin: 50% 50%; }
#s1 .limo.moving .hub { animation: ah-spin .42s linear infinite; }
@keyframes ah-spin { to { transform: rotate(360deg); } }
#s1 .couple { opacity: 0; transform-box: fill-box; transform-origin: 50% 100%; }
/* people never bob (the user, 2026-11-09): while they walk, their legs step, the body stays level */
.lg { transform-box: fill-box; transform-origin: 50% 0; } #s1 .couple.walking .lg { animation: ah-leg .34s ease-in-out infinite alternate; } #s1 .couple.walking .lgB { animation-delay: -.34s; }
@keyframes ah-leg { from { transform: rotate(-13deg); } to { transform: rotate(13deg); } }

/* ---------------- 2. the main room ---------------- */
#s2 .stage { background: #05051A; }
/* through the door (the user, 2026-11-08: no gold flash, "just have it automatic transition to the party scene"): the main room starts 115vh early, so it is already pinned on top of the street's
   last moment, and it fades in on its own (afterhours.js adds .in once the camera has pushed into the door). No split screen, no second glow. */
#s2 { margin-top: -115vh; }
#s2 .stage { opacity: 0; visibility: hidden; transition: opacity .9s ease, visibility 0s linear .9s; }
#s2.in .stage { opacity: 1; visibility: visible; transition: opacity .9s ease, visibility 0s; }
#s2 .ring { animation: ah-ring .95s ease-in-out infinite; } #s2 .ring.g1 { animation-delay: .12s; } #s2 .ring.g2 { animation-delay: .24s; } #s2 .ring.g3 { animation-delay: .36s; } #s2 .ring.g4 { animation-delay: .48s; } #s2 .ring.g5 { animation-delay: .6s; } #s2 .ring.g6 { animation-delay: .72s; }
@keyframes ah-ring { 0%, 100% { opacity: .35; } 40% { opacity: .95; } }
#s2 .eq { transform-box: fill-box; transform-origin: 50% 100%; animation: ah-eq .95s ease-in-out infinite; } #s2 .eq.e1 { animation-delay: -.3s; } #s2 .eq.e2 { animation-delay: -.6s; }
@keyframes ah-eq { 0%, 100% { opacity: .35; } 50% { opacity: 1; } }
#s2 .beam { transform-box: fill-box; transform-origin: 50% 0; animation: ah-sweep 6s ease-in-out infinite alternate; } #s2 .beam.m1 { animation-duration: 7.4s; animation-direction: alternate-reverse; } #s2 .beam.m2 { animation-duration: 5.2s; } #s2 .beam.m3 { animation-duration: 8.6s; animation-direction: alternate-reverse; }
@keyframes ah-sweep { from { transform: rotate(-26deg); } to { transform: rotate(26deg); } }
#s2.drop .beam { animation-duration: 1.6s; } #s2.drop .ring { animation-duration: .48s; }
#s2 .tile { animation: ah-tile .95s ease-in-out infinite; } #s2 .tile.t1 { animation-delay: .16s; } #s2 .tile.t2 { animation-delay: .32s; } #s2 .tile.t3 { animation-delay: .48s; } #s2 .tile.t4 { animation-delay: .64s; } #s2 .tile.t5 { animation-delay: .8s; }
@keyframes ah-tile { 0%, 100% { opacity: .1; } 35% { opacity: .42; } }
#s2 .haze { transform-box: fill-box; animation: ah-haze 14s ease-in-out infinite alternate; } #s2 .haze.h1 { animation-duration: 18s; animation-direction: alternate-reverse; }
@keyframes ah-haze { from { transform: translateX(-6%); } to { transform: translateX(6%); } }
#s2 .booth-led { animation: ah-ring .95s ease-in-out infinite; }
#s2 .balc { inset: auto 0 auto 0; top: -36%; height: 36%; }
#s2 .lights { position: absolute; left: 50%; bottom: max(64px, 8vh); z-index: 22; width: min(320px, 76vw); margin-left: min(-160px, -38vw); display: grid; gap: 6px; justify-items: center; pointer-events: auto; }
#s2 .lights label { font: 700 11px/1 var(--caps); letter-spacing: .2em; text-transform: uppercase; color: #CFF8FF; text-shadow: 0 1px 6px #000; }
#s2 .lights input { width: 100%; height: 44px; accent-color: #3DE2FF; cursor: grab; }
#s2 .ly.back, #s2 .ly.beams { filter: hue-rotate(var(--hue, 0deg)); }

/* ---------------- 3. the mezzanine ---------------- */
#s3 .stage { background: #1E0A20; }
#s3 .lamp .lamp-glow { transition: opacity .5s ease; } #s3 .lamp:not(.on) .lamp-glow { opacity: .08; }
#s3 .hand-h, #s3 .hand-m { transform-box: view-box; }
#s3 .warm { background: radial-gradient(ellipse at 30% 70%, rgba(255, 170, 80, .55), transparent 70%); }
#s3 .dim { background: #000; }

/* ---------------- 4. midnight ---------------- */
#s4 .stage { background: #010109; }
#s4 canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; pointer-events: none; }
#s4 .sky-tap { position: absolute; inset: 0 0 30% 0; z-index: 12; pointer-events: auto; cursor: crosshair; background: none; border: 0; }
#s4 .room { background: radial-gradient(ellipse at 50% 120%, rgba(255, 160, 80, .45), transparent 60%); opacity: 1; transition: opacity 2.2s ease; }
#s4 .black { background: radial-gradient(ellipse at 50% 38%, transparent 28%, rgba(0, 0, 0, .9) 82%); transition: opacity 1.8s ease; }
#s4.counting .room { opacity: 0; } #s4.counting .black { opacity: 1; } #s4.ny .black { opacity: .35; }
#s4 .crowd { transform: translateY(14%); transition: transform 1.6s cubic-bezier(.2, .8, .2, 1); }
#s4.counting .crowd, #s4.ny .crowd { transform: translateY(0); }
#s4 .crowd .pp { transform-box: fill-box; transform-origin: 50% 100%; }
/* the midnight crowd stands still (no jumping loop) */
@keyframes ah-jump { from { transform: translateY(0); } to { transform: translateY(-4%); } }
#s4 .lit { background: radial-gradient(ellipse at 50% 100%, rgba(255, 230, 190, .7), transparent 62%); }
#s4 .fog { background: radial-gradient(ellipse at 20% 100%, rgba(170, 160, 220, .28), transparent 55%), radial-gradient(ellipse at 80% 100%, rgba(200, 160, 220, .22), transparent 55%); transition: opacity 2s ease; }
#s4.ny .fog { opacity: 1; animation: ah-fog 9s ease-in-out infinite alternate; }
@keyframes ah-fog { from { transform: translateX(-4%); } to { transform: translateX(4%); } }
#s4 .laser { position: absolute; bottom: 0; width: 3px; height: 120vh; transform-origin: 50% 100%; opacity: 0; transition: opacity 1s ease; }
#s4 .laser.l0 { left: 2%; background: linear-gradient(transparent, #FF3DCB); } #s4 .laser.l1 { right: 2%; background: linear-gradient(transparent, #3DE2FF); }
#s4.ny .laser { opacity: .55; animation: ah-laser 5s ease-in-out infinite alternate; } #s4.ny .laser.l1 { animation-direction: alternate-reverse; animation-duration: 6.2s; }
@keyframes ah-laser { from { transform: rotate(20deg); } to { transform: rotate(52deg); } }
#s4 .laser.l1 { transform: rotate(-20deg); } #s4.ny .laser.l1 { animation-name: ah-laser-r; }
@keyframes ah-laser-r { from { transform: rotate(-20deg); } to { transform: rotate(-52deg); } }
#s4 .num { position: absolute; inset: 0; z-index: 24; display: grid; place-items: center; pointer-events: none; }
#s4 .num b { font: 400 clamp(56px, 16vw, 210px)/1 var(--display); letter-spacing: .04em; color: #FFF4D6; text-shadow: 0 0 40px rgba(255, 210, 122, .65), 0 0 2px #000; opacity: 0; }
#s4 .num b.go { animation: ah-num .85s ease-out both; }
@keyframes ah-num { 0% { opacity: 0; transform: scale(1.35); } 18% { opacity: 1; transform: scale(1); } 80% { opacity: 1; } 100% { opacity: 0; transform: scale(.92); } }
#s4 .say { position: absolute; left: 0; right: 0; top: 20vh; z-index: 24; display: grid; justify-items: center; gap: 2vh; padding: 0 20px; text-align: center; pointer-events: none; }
#s4 .say p { margin: 0; opacity: 0; transform: translateY(16px); transition: opacity 1s ease, transform 1s ease; }
#s4 .say .hny { font: 400 clamp(40px, 9vw, 112px)/1 var(--display); color: #FFF4D6; text-shadow: 0 0 30px rgba(255, 210, 122, .6), 0 2px 8px #000; }
#s4 .say .more { font: 700 clamp(16px, 2.6vw, 26px)/1.2 var(--caps); letter-spacing: .14em; text-transform: uppercase; color: var(--ac2); text-shadow: 0 2px 10px #000; }
#s4 .say p.on { opacity: 1; transform: none; }
#s4 .ctl { position: absolute; left: 0; right: 0; bottom: max(70px, 9vh); z-index: 26; display: flex; justify-content: center; gap: 10px; pointer-events: none; }
#s4 .ctl button { pointer-events: auto; min-height: 46px; padding: 0 20px; border-radius: 999px; border: 1px solid rgba(232, 194, 106, .6); background: rgba(8, 6, 14, .78); font: 700 13px/1 var(--caps); letter-spacing: .14em; text-transform: uppercase; cursor: pointer; }
#s4 .ctl button[hidden] { display: none; }
#s4 .still { display: none; }

/* ---------------- 5. the VIP table and the invitation ---------------- */
#s5 .stage { background: #07060B; }
#s5 .card { position: absolute; left: 50%; top: 52%; z-index: 21; width: min(440px, 86vw); margin-left: max(-220px, -43vw); transform: translateY(-50%); padding: clamp(22px, 4vh, 38px) clamp(20px, 5vw, 40px); text-align: center; border-radius: 6px;
  background: linear-gradient(160deg, #15121A, #08070B 60%, #120F16); border: 1px solid var(--ac); box-shadow: 0 0 0 6px #08070B, 0 0 0 7px rgba(232, 194, 106, .5), 0 30px 80px rgba(0, 0, 0, .7); }
#s5 .card::before, #s5 .card::after { content: ""; position: absolute; width: 38px; height: 38px; border: 1px solid var(--ac); pointer-events: none; }
#s5 .card::before { left: 10px; top: 10px; border-right: 0; border-bottom: 0; } #s5 .card::after { right: 10px; bottom: 10px; border-left: 0; border-top: 0; }
.tl { opacity: 0; transform: translateY(14px); }
.k-list { margin: 0 0 1.2vh; font: 700 clamp(11px, 1.6vw, 13px)/1.2 var(--caps); letter-spacing: .32em; color: var(--ac); }
#t-title { margin: 0; font: 400 clamp(40px, 9vw, 72px)/.98 var(--display); color: var(--ac2); letter-spacing: .02em; }
#t-sub { margin: .6vh 0 0; font: 700 clamp(12px, 1.8vw, 15px)/1.3 var(--caps); letter-spacing: .3em; text-transform: uppercase; color: var(--ink); }
#t-invite { margin: 2vh auto 0; max-width: 30ch; font: italic 500 clamp(17px, 2.4vw, 21px)/1.35 var(--body); color: var(--dim); }
.rule { width: 60%; height: 1px; margin: 2.2vh auto; background: linear-gradient(90deg, transparent, var(--ac), transparent); }
.card .when, .card .where { margin: .5vh 0 0; font: 600 clamp(16px, 2.2vw, 19px)/1.35 var(--body); color: var(--ink); }
.card .with { margin: 1.4vh 0 0; font: 700 11px/1.3 var(--caps); letter-spacing: .2em; text-transform: uppercase; color: var(--dim); }
.card .acts { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 2.4vh; }
.btn { min-height: 46px; padding: 0 20px; border-radius: 999px; border: 1px solid var(--ac); background: var(--ac); color: #120E06; font: 700 13px/1 var(--caps); letter-spacing: .14em; text-transform: uppercase; cursor: pointer; }
.btn.ghost { background: transparent; color: var(--ac2); }
#s5 .confetti i { position: absolute; top: -4vh; width: 8px; height: 13px; border-radius: 1px; background: var(--ac); opacity: .85; animation: ah-fall 9s linear infinite; }
@keyframes ah-fall { from { transform: translateY(0) rotate(0); } to { transform: translateY(112vh) rotate(540deg); } }

/* the details and the reply, below the table (no animation here: everything is stable to read and press) */
.after { position: relative; z-index: 2; padding: 9vh max(20px, 5vw) 16vh; background: linear-gradient(#07060B, #0C0A12 40%, #07060B); }
.after section { max-width: 640px; margin: 0 auto 8vh; }
.after h2 { margin: 0 0 2vh; font: 400 clamp(30px, 5vw, 46px)/1.05 var(--display); color: var(--ac2); }
.det { margin: 0; display: grid; gap: 0; border-top: 1px solid rgba(232, 194, 106, .3); }
.det > div { display: grid; grid-template-columns: minmax(110px, 32%) 1fr; gap: 14px; padding: 12px 0; border-bottom: 1px solid rgba(232, 194, 106, .2); }
.det dt { font: 700 11px/1.5 var(--caps); letter-spacing: .2em; text-transform: uppercase; color: var(--ac); }
.det dd { margin: 0; font: 500 18px/1.4 var(--body); color: var(--ink); overflow-wrap: anywhere; }
#live-cd { margin: 2.4vh 0 0; font: 700 14px/1.4 var(--caps); letter-spacing: .12em; color: var(--ac2); }
.row-acts { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 3vh; }
#rsvp-form { display: grid; gap: 16px; }
.f { display: grid; gap: 8px; font: 700 12px/1.3 var(--caps); letter-spacing: .14em; text-transform: uppercase; color: var(--dim); }
.f input[type=text] { min-height: 50px; padding: 0 14px; border-radius: 10px; border: 1px solid rgba(232, 194, 106, .45); background: #0E0C14; color: var(--ink); font: 500 18px var(--body); letter-spacing: 0; text-transform: none; }
.ans { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; border: 0; }
.ans label { flex: 1 1 140px; }
.ans input { position: absolute; opacity: 0; }
.ans span { display: grid; place-items: center; min-height: 50px; padding: 0 12px; border-radius: 10px; border: 1px solid rgba(232, 194, 106, .45); font: 700 13px/1.2 var(--caps); letter-spacing: .1em; text-transform: uppercase; cursor: pointer; text-align: center; }
.ans input:checked + span { background: var(--ac); color: #120E06; }
.ans input:focus-visible + span { outline: 3px solid var(--ac); outline-offset: 3px; }
.step { display: inline-flex; align-items: center; gap: 12px; }
.step button { width: 46px; height: 46px; border-radius: 50%; border: 1px solid var(--ac); background: none; font: 700 20px/1 var(--caps); cursor: pointer; }
.step output { min-width: 2ch; text-align: center; font: 700 20px var(--caps); }
#err { min-height: 1.4em; margin: 0; font: 600 16px/1.4 var(--body); }
#err.err { color: #FF9AA8; }
#done[hidden], #rsvp-form[hidden], #r-closed[hidden], #going[hidden] { display: none; }
.going { margin: -1vh 0 2.4vh; font: 700 12px/1.4 var(--caps); letter-spacing: .16em; text-transform: uppercase; color: var(--ac); }
#done h3 { margin: 0 0 1vh; font: 400 clamp(26px, 4.4vw, 38px)/1.1 var(--display); color: var(--ac2); }
#done p { margin: 0 0 2vh; font: 500 18px/1.45 var(--body); color: var(--ink); }
.linkish { min-height: 44px; border: 0; background: none; color: var(--ac); font: 700 12px var(--caps); letter-spacing: .14em; text-transform: uppercase; text-decoration: underline; cursor: pointer; }
.foot { margin: 0; text-align: center; font: 600 12px/1.6 var(--caps); letter-spacing: .14em; color: var(--dim); }

/* a line a tapped thing says, for a few seconds */
.bub { position: fixed; z-index: 9050; max-width: min(300px, 80vw); padding: 10px 14px; border-radius: 12px; background: #F6EEDC; color: #1A1210; font: 600 15px/1.3 var(--body); box-shadow: 0 12px 30px rgba(0, 0, 0, .55); transform: translate(-50%, calc(-100% - 12px)); pointer-events: none; animation: ah-bub 2.4s ease both; }
@keyframes ah-bub { 0% { opacity: 0; translate: 0 8px; } 10%, 85% { opacity: 1; translate: 0 0; } 100% { opacity: 0; } }

/* ---------------- people move at their own pace (the inner group moves; the outer one places them) ---------------- */
.pp { transform-box: fill-box; transform-origin: 50% 100%; }
@keyframes ah-dance { from { transform: rotate(-3deg); } to { transform: rotate(3deg) translateY(-2%); } }
@keyframes ah-bounce { from { transform: translateY(0); } to { transform: translateY(-3%); } }
/* no looping dance, bounce, sway or slow sway on people any more (the user, 2026-11-09): they stand still; a tap makes one real jump */
.hit.tap > g > .pp, .hit.tap .pp { animation: ah-hop .5s ease-out; }
@keyframes ah-hop { 40% { transform: translateY(-6%); } }

/* ---------------- off-screen scenes rest; fewer effects; reduced motion ---------------- */
.sc.off * { animation-play-state: paused !important; }
body.lite #s1 .rain, body.lite .pp, body.lite #s2 .haze, body.lite #s2 .tile { animation: none !important; }
body.lite #s1 .rain { display: none; }
body.rm .sc { height: auto !important; }
body.rm .stage { position: relative; height: 100vh; height: 100svh; }
body.rm #s2 { margin-top: 0; } body.rm #s2 .stage { opacity: 1; visibility: visible; transition: none; }
body.rm .lines { display: grid; gap: 1.2vh; }
body.rm .ln { grid-area: auto; opacity: 1 !important; transform: none !important; font-size: clamp(22px, 4.6vw, 44px); }
body.rm .ly, body.rm .ly .part { transform: none !important; }
body.rm .ov:not(.keep) { opacity: 0 !important; }
body.rm .tl { opacity: 1 !important; transform: none !important; }
body.rm * { animation: none !important; transition-duration: .01ms !important; }
body.rm #s4 .still { display: block; } body.rm #s4 canvas, body.rm #s4 .num, body.rm #s4 .ctl, body.rm #s4 .sky-tap { display: none; }
body.rm #s4 .say p { opacity: 1; transform: none; } body.rm #s4 .crowd { transform: none; } body.rm #s4 .black { opacity: .35; }
body.rm #s2 .balc { display: none; }
@media (max-width: 640px) {
  .ln { font-size: clamp(24px, 8.2vw, 40px); }
  #s1 .lines { bottom: 22vh; }
  .det > div { grid-template-columns: 1fr; gap: 4px; }
}