/* Rooms, part two: the ambient loops that belong to the newer rooms (Fin, Live, Clearance) and the
   stepped timing they share with Kai, so a still moment costs nothing to repaint.
   Every loop here is a plain CSS animation on a small group; the page pauses them off screen
   (.is-paused in town.css) and removes them under reduced motion (the .room * rule in town.css). */

@keyframes a-hand { to { transform: rotate(360deg); } }
.a-hand { animation: a-hand 60s steps(60) infinite; }
.a-hand.slow { animation-duration: 720s; animation-timing-function: steps(720); }

/* ---------------------------------------------------------------- Fin */
@keyframes f-reel { to { transform: rotate(calc(360deg * var(--dir, 1))); } }
.f-reel { animation: f-reel 9s steps(36) infinite; }
@keyframes f-cone { 0%, 100% { opacity: .55; } 50% { opacity: 1; } }
.f-cone { animation: f-cone 4.6s steps(12) infinite; animation-delay: calc(var(--d, 0s) * -1); }
@keyframes f-lava { 0%, 100% { transform: translateY(0) scale(1); } 50% { transform: translateY(-15px) scale(1.35); } }
.f-lava { animation: f-lava 6s steps(30) infinite; }
.f-lava.b { animation-duration: 8s; animation-delay: -3s; }
@keyframes f-vu { 0%, 100% { transform: scaleY(.25); } 30% { transform: scaleY(1); } 60% { transform: scaleY(.5); } }
.f-vu { animation: f-vu .9s steps(6) infinite; animation-delay: var(--d, 0s); }
@keyframes f-play { from { transform: translateX(0); } to { transform: translateX(900px); } }
.f-play { animation: f-play 48s steps(480) infinite; }
@keyframes f-fog { 0% { transform: translate(0, 0) scale(.5); opacity: 0; } 22% { opacity: .85; } 100% { transform: translate(-34px, -140px) scale(2.5); opacity: 0; } }
.f-fog { animation: f-fog 7s steps(40) infinite; animation-delay: var(--d, 0s); }
@keyframes f-robot { 0%, 4% { transform: translateX(0); } 46%, 54% { transform: translateX(230px); } 96%, 100% { transform: translateX(0); } }
.f-robot { animation: f-robot 26s steps(120) infinite; }

@keyframes f-render { from { transform: translateX(0); } to { transform: translateX(900px); } }
.f-render { animation: f-render 14s steps(140) infinite; }
@keyframes f-drone { 0%, 100% { transform: translate(0, 0); } 25% { transform: translate(18px, -8px); } 50% { transform: translate(2px, -16px); } 75% { transform: translate(-18px, -6px); } }
.f-drone { animation: f-drone 9s steps(60) infinite; }
@keyframes f-rotor { 0%, 49% { transform: scaleX(1); } 50%, 100% { transform: scaleX(.45); } }
.f-rotor { animation: f-rotor .12s steps(1) infinite; animation-delay: var(--d, 0s); }
@keyframes f-search { 0%, 100% { transform: rotate(-26deg); } 50% { transform: rotate(22deg); } }
.f-search { animation: f-search 11s steps(60) infinite; }

.room-fin .a-twk { animation-timing-function: steps(8); }
.room-fin .a-sway, .room-fin .swing { animation-timing-function: steps(40); }
.room-fin .a-mote, .room-fin .a-note, .room-fin .a-smoke { animation-timing-function: steps(30); }

/* ---------------------------------------------------------------- Live */
@keyframes l-wlit { 0%, 18% { opacity: 0; } 24%, 100% { opacity: 1; } }
.l-wlit { animation: l-wlit 22s steps(1) infinite; animation-delay: calc(var(--d, 0s) * -1); }
@keyframes l-vinyl { to { transform: rotate(360deg); } }
.l-vinyl { animation: l-vinyl 3.6s steps(24) infinite; }
@keyframes l-water { 0%, 60%, 100% { transform: rotate(0deg); } 70%, 90% { transform: rotate(-24deg); } }
.l-water { animation: l-water 9s steps(30) infinite; }

@keyframes l-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(8px); } }
.l-bob { animation: l-bob 1.4s steps(14) infinite; }
@keyframes l-spider { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(18px); } }
.l-spider { animation: l-spider 6s steps(36) infinite; }
@keyframes l-flutter { 0% { transform: translate(0, 0); } 25% { transform: translate(34px, -26px); } 50% { transform: translate(70px, -4px); } 75% { transform: translate(30px, 24px); } 100% { transform: translate(0, 0); } }
.l-flutter { animation: l-flutter 11s steps(66) infinite; }
@keyframes l-wings { 0%, 100% { transform: scaleX(1); } 50% { transform: scaleX(.3); } }
.l-wings { animation: l-wings .4s steps(2) infinite; transform-origin: 0px 0px; }
@keyframes l-plane { 0%, 100% { transform: translateY(0) rotate(-4deg); } 50% { transform: translateY(-26px) rotate(6deg); } }
.l-plane { animation: l-plane 7s steps(42) infinite; }
@keyframes l-flame { 0%, 100% { transform: scaleY(1); } 40% { transform: scaleY(.7); } 70% { transform: scaleY(1.12); } }
.l-flame { animation: l-flame .7s steps(4) infinite; animation-delay: var(--d, 0s); }
@keyframes l-moth { to { transform: rotate(360deg); } }
.l-moth { animation: l-moth 3.4s steps(34) infinite; transform-origin: 0px 0px; }
.l-moth.b { animation-duration: 4.6s; animation-direction: reverse; }
@keyframes l-wave { 0%, 100% { transform: rotate(0deg); } 50% { transform: rotate(-30deg); } }
.l-wave { animation: l-wave .8s steps(6) infinite; }
.live-world { position: absolute; inset: 0; transform-origin: 0 0; will-change: transform; }
@keyframes l-zz { 0% { transform: translate(0, 0); opacity: 0; } 25% { opacity: .8; } 100% { transform: translate(18px, -44px); opacity: 0; } }
.l-zz { animation: l-zz 4.6s steps(24) infinite; animation-delay: var(--d, 0s); }

.room-live .a-twk { animation-timing-function: steps(8); }
.room-live .a-sway, .room-live .swing, .room-live .a-curtain { animation-timing-function: steps(40); }
.room-live .a-mote, .room-live .a-foam, .room-live .a-note, .room-live .a-smoke { animation-timing-function: steps(30); }
.room-live .a-fish { animation-timing-function: steps(70); }

/* ---------------------------------------------------------------- Clearance */
@keyframes c-sec { to { transform: rotate(360deg); } }
.c-sec { animation: c-sec 12s steps(12) infinite; }

@keyframes c-pend { 0%, 100% { transform: rotate(-9deg); } 50% { transform: rotate(9deg); } }
.c-pend { animation: c-pend 2s steps(16) infinite; }
@keyframes c-heat { 0% { transform: translateY(0); opacity: 0; } 25% { opacity: .55; } 100% { transform: translateY(-24px); opacity: 0; } }
.c-heat { animation: c-heat 3.2s steps(20) infinite; animation-delay: var(--d, 0s); }
@keyframes c-bell { 0%, 70%, 100% { transform: rotate(0deg); } 74% { transform: rotate(-9deg); } 78% { transform: rotate(8deg); } 82% { transform: rotate(-6deg); } 86% { transform: rotate(4deg); } 90% { transform: rotate(0deg); } }
.c-bell { animation: c-bell 6.8s steps(1) infinite; }
@keyframes c-key { 0%, 100% { transform: translateY(0); } 30% { transform: translateY(2px); } 60% { transform: translateY(0); } }
.c-key { animation: c-key .5s steps(3) infinite; animation-delay: var(--d, 0s); }
@keyframes c-mouse { 0%, 42% { transform: translateX(12px); } 52%, 66% { transform: translateX(0); } 76%, 100% { transform: translateX(12px); } }
.c-mouse { animation: c-mouse 17s steps(60) infinite; }
@keyframes c-envl { 0%, 55%, 100% { transform: translate(0, 0); } 62%, 90% { transform: translate(0, -7px); } }
.c-envl { animation: c-envl 9s steps(12) infinite; }
@keyframes c-tick { 0%, 40% { transform: translateY(0); } 50%, 100% { transform: translateY(16px); opacity: 0; } }
.c-tick { animation: c-tick 5s steps(14) infinite; }
@keyframes c-flag { 0%, 100% { transform: skewY(0deg) scaleX(1); } 50% { transform: skewY(5deg) scaleX(.92); } }
.c-flag { animation: c-flag 2.4s steps(12) infinite; }
@keyframes c-slidebook { 0%, 60%, 100% { transform: translateX(0); } 66%, 90% { transform: translateX(7px); } }
.c-slidebook { animation: c-slidebook 11s steps(14) infinite; }
.room-clearance .a-twk { animation-timing-function: steps(8); }
.room-clearance .a-sway, .room-clearance .swing { animation-timing-function: steps(40); }
.room-clearance .a-fan { animation-timing-function: steps(23); }
.room-clearance .a-mote, .room-clearance .a-smoke { animation-timing-function: steps(30); }

/* ---------------------------------------------------------------- Ars Nunc */
@keyframes n-gear { to { transform: rotate(calc(360deg * var(--dir, 1))); } }
.n-gear { animation: n-gear 7s steps(28) infinite; }
@keyframes n-swirl { to { transform: rotate(360deg); } }
.n-swirl { animation: n-swirl 5s steps(30) infinite; }
@keyframes n-piston { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-22px); } }
.n-piston { animation: n-piston 1.2s steps(10) infinite; animation-delay: var(--d, 0s); }
@keyframes n-press { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(18px); } }
.n-piston.p2 { animation-name: n-press; animation-duration: 1.6s; }
@keyframes n-nod { 0%, 100% { transform: rotate(-18deg); } 50% { transform: rotate(22deg); } }
.n-nod { animation: n-nod 3.6s steps(18) infinite; }
@keyframes n-beacon { to { transform: rotate(360deg); } }
.n-beacon { animation: n-beacon 1.8s steps(18) infinite; }
@keyframes n-reel { to { transform: rotate(calc(360deg * var(--dir, 1))); } }
.n-reel { animation: n-reel 3s steps(24) infinite; }
@keyframes n-film { to { stroke-dashoffset: -18; } }
.n-film { animation: n-film .7s steps(6) infinite; }
@keyframes n-fan { 0%, 49% { transform: scaleX(1); } 50%, 100% { transform: scaleX(.42); } }
.n-fan { animation: n-fan .12s steps(1) infinite; }
@keyframes n-vent { 0%, 49% { transform: scaleX(1); } 50%, 100% { transform: scaleX(.3); } }
.n-vent { animation: n-vent .1s steps(1) infinite; }
@keyframes n-flag { 0%, 100% { transform: skewY(0deg) scaleX(1); } 50% { transform: skewY(5deg) scaleX(.93); } }
.n-flag { animation: n-flag 2.2s steps(12) infinite; }
@keyframes n-cone { 0%, 100% { opacity: .55; } 50% { opacity: 1; } }
.n-cone { animation: n-cone 4.6s steps(12) infinite; animation-delay: calc(var(--d, 0s) * -1); }
@keyframes n-cloud { from { transform: translateX(-70px); } to { transform: translateX(170px); } }
.n-cloud { animation: n-cloud var(--dur, 30s) steps(150) infinite; animation-delay: calc(var(--d, 0s) * -1); }
@keyframes n-plane { from { transform: translate(0, 0); } to { transform: translate(120px, -14px); } }
.n-plane { animation: n-plane 16s steps(80) infinite; }
@keyframes n-rail { 0%, 6% { transform: translateX(0); } 46%, 56% { transform: translateX(560px); } 96%, 100% { transform: translateX(0); } }
.n-rail { animation: n-rail 44s steps(220) infinite; }
@keyframes n-hop3 { 0%, 32% { transform: translateX(0); } 33%, 65% { transform: translateX(18px); } 66%, 100% { transform: translateX(36px); } }
.n-hop3 { animation: n-hop3 1.2s steps(1) infinite; }
@keyframes n-flow { 0%, 60%, 100% { opacity: 0; } 20% { opacity: .5; } }
.n-flow { animation: n-flow 3s steps(8) infinite; animation-delay: var(--d, 0s); }
@keyframes n-drip { 0% { transform: translateY(0); opacity: 0; } 8% { opacity: 1; } 56% { transform: translateY(190px); opacity: 1; } 62%, 100% { transform: translateY(190px); opacity: 0; } }
.n-drip { animation: n-drip 3.4s steps(17) infinite; }
@keyframes n-robot { 0%, 4% { transform: translateX(0); } 46%, 54% { transform: translateX(170px); } 96%, 100% { transform: translateX(0); } }
.n-robot { animation: n-robot 22s steps(100) infinite; }
@keyframes n-mouse { 0%, 68%, 100% { transform: translateX(16px); } 74%, 92% { transform: translateX(0); } }
.n-mouse { animation: n-mouse 16s steps(32) infinite; }
.room-ars-nunc .a-twk { animation-timing-function: steps(8); }
.room-ars-nunc .a-sway, .room-ars-nunc .swing { animation-timing-function: steps(40); }
.room-ars-nunc .a-mote, .room-ars-nunc .a-note, .room-ars-nunc .a-smoke { animation-timing-function: steps(30); }
.room-ars-nunc .a-fish { animation-timing-function: steps(60); }
.room-ars-nunc .a-pulse { animation-timing-function: steps(18); }
.room-ars-nunc .a-blink { animation-timing-function: steps(6); }
.room-ars-nunc .a-bird { animation-timing-function: steps(3); }
.room-ars-nunc .a-peck { animation-timing-function: steps(28); }
.room-ars-nunc .a-walk { animation-timing-function: steps(800); }
.room-ars-nunc .a-step { animation-timing-function: steps(4); }
.room-ars-nunc .n-cloud { animation-timing-function: steps(150); }
.room-ars-nunc .n-plane { animation-timing-function: steps(80); }
@keyframes n-chase { to { stroke-dashoffset: -163.8; } }
.n-chase { animation: n-chase 2.8s steps(7) infinite; }

/* ---------------------------------------------------------------- Alignment */
@keyframes p-flutter { 0% { transform: translate(0, 0); } 25% { transform: translate(34px, -22px); } 50% { transform: translate(70px, -4px); } 75% { transform: translate(30px, 20px); } 100% { transform: translate(0, 0); } }
.p-flutter { animation: p-flutter 11s steps(66) infinite; animation-delay: calc(var(--d, 0s) * -1); }
.p-flutter.b { animation-direction: reverse; }
@keyframes p-wings { 0%, 100% { transform: scaleX(1); } 50% { transform: scaleX(.3); } }
.p-wings { animation: p-wings .4s steps(2) infinite; transform-origin: 0 0; }
@keyframes p-bee { 0% { transform: translate(0, 0); } 20% { transform: translate(26px, -10px); } 45% { transform: translate(8px, -24px); } 70% { transform: translate(-18px, -6px); } 100% { transform: translate(0, 0); } }
.p-bee { animation: p-bee 5s steps(40) infinite; animation-delay: calc(var(--d, 0s) * -1); }
.p-bee.b { animation-direction: reverse; }
@keyframes p-petal { 0% { transform: translate(0, 0) rotate(0); opacity: 0; } 12% { opacity: .9; } 100% { transform: translate(var(--x, 20px), 440px) rotate(260deg); opacity: 0; } }
.p-petal { animation: p-petal var(--t, 9s) steps(60) infinite; animation-delay: calc(var(--d, 0s) * -1); }
@keyframes p-hop { 0%, 70%, 100% { transform: translateY(0); } 76% { transform: translateY(-6px); } 82% { transform: translateY(0); } 88% { transform: translateY(-4px); } }
.p-hop { animation: p-hop 3.2s steps(16) infinite; }
@keyframes p-cloud { from { transform: translateX(-60px); } to { transform: translateX(150px); } }
.p-cloud { animation: p-cloud var(--dur, 26s) steps(130) infinite; animation-delay: calc(var(--d, 0s) * -1); }
@keyframes p-vane { 0%, 100% { transform: rotate(-18deg); } 50% { transform: rotate(22deg); } }
.p-vane { animation: p-vane 6s steps(30) infinite; }
.room-alignment .a-twk { animation-timing-function: steps(8); }
.room-alignment .a-sway, .room-alignment .swing, .room-alignment .a-curtain { animation-timing-function: steps(40); }
.room-alignment .a-mote, .room-alignment .a-note, .room-alignment .a-smoke { animation-timing-function: steps(30); }
.room-alignment .a-fish { animation-timing-function: steps(60); }
.room-alignment .a-air { animation-timing-function: steps(4); }
.room-alignment .a-blink { animation-timing-function: steps(6); }
.room-alignment .a-bird { animation-timing-function: steps(3); }
.room-alignment .a-peck { animation-timing-function: steps(28); }
.room-alignment .a-walk { animation-timing-function: steps(800); }
.room-alignment .a-step { animation-timing-function: steps(4); }
.room-alignment .a-pulse { animation-timing-function: steps(18); }
@keyframes p-spin { to { transform: rotate(360deg); } }
.p-spin { animation: p-spin 1.2s steps(12) infinite; }

/* ---------------------------------------------------------------- Agent Deck */
@keyframes d-shoot { 0%, 88% { transform: translate(100px, 250px); opacity: 0; } 90% { opacity: 1; } 100% { transform: translate(360px, 330px); opacity: 0; } }
.d-shoot { animation: d-shoot 11s steps(60) infinite; }
@keyframes d-plane { from { transform: translateX(0); } to { transform: translateX(520px); } }
.d-plane { animation: d-plane 40s steps(200) infinite; }
@keyframes d-cloud { from { transform: translateX(-60px); } to { transform: translateX(420px); } }
.d-cloud { animation: d-cloud var(--dur, 50s) steps(180) infinite; animation-delay: calc(var(--d, 0s) * -1); }
@keyframes d-wlit { 0%, 20% { opacity: 0; } 26%, 100% { opacity: 1; } }
.d-wlit { animation: d-wlit 18s steps(1) infinite; animation-delay: calc(var(--d, 0s) * -1); }
@keyframes d-wave { 0%, 100% { transform: rotate(-30deg); } 50% { transform: rotate(30deg); } }
.d-wave { animation: d-wave .8s steps(6) infinite; }
@keyframes d-row { 0%, 40%, 100% { opacity: .12; } 50%, 90% { opacity: .95; } }
.d-row { animation: d-row 3.6s steps(6) infinite; animation-delay: calc(var(--d, 0s) * -1); }
@keyframes d-fan { to { transform: rotate(360deg); } }
.d-fanring { animation: d-fan 1.1s steps(11) infinite; animation-delay: var(--d, 0s); }
.room-agent-deck .a-twk { animation-timing-function: steps(8); }
.room-agent-deck .a-sway, .room-agent-deck .swing, .room-agent-deck .a-curtain { animation-timing-function: steps(40); }
.room-agent-deck .a-mote, .room-agent-deck .a-note, .room-agent-deck .a-smoke { animation-timing-function: steps(30); }
.room-agent-deck .a-fish { animation-timing-function: steps(60); }
.room-agent-deck .a-blink { animation-timing-function: steps(6); }
.room-agent-deck .a-bird { animation-timing-function: steps(3); }
.room-agent-deck .a-peck { animation-timing-function: steps(28); }
.room-agent-deck .a-walk { animation-timing-function: steps(800); }
.room-agent-deck .a-step { animation-timing-function: steps(4); }
.room-agent-deck .a-pulse { animation-timing-function: steps(18); }
.room-agent-deck .a-fan { animation-timing-function: steps(23); }
@keyframes d-balloon { from { transform: translate(0, 0); } to { transform: translate(430px, -60px); } }
.d-balloon { animation: d-balloon 80s steps(300) infinite; }
@keyframes d-spin { to { transform: rotate(360deg); } }
.d-spin { animation: d-spin 1.6s steps(16) infinite; }
@keyframes d-vac { 0%, 4% { transform: translateX(0); } 46%, 54% { transform: translateX(380px); } 96%, 100% { transform: translateX(0); } }
.d-vac { animation: d-vac 26s steps(120) infinite; }

/* ---------------------------------------------------------------- Bell test */
@keyframes b-cloud { from { transform: translateX(-10px); } to { transform: translateX(110px); } }
.b-cloud { animation: b-cloud var(--dur, 40s) steps(80) infinite; animation-delay: calc(var(--d, 0s) * -1); }
@keyframes b-scope { from { transform: translateX(0); } to { transform: translateX(-24px); } }
.b-scope { animation: b-scope 1.2s steps(8) infinite; }
@keyframes b-vu { 0%, 100% { transform: scaleY(.22); } 30% { transform: scaleY(1); } 60% { transform: scaleY(.5); } }
.b-vu { animation: b-vu .9s steps(6) infinite; animation-delay: var(--d, 0s); }
@keyframes b-cl { 0% { transform: rotate(32deg); } 25%, 75% { transform: rotate(0deg); } 100% { transform: rotate(32deg); } }
@keyframes b-cr { 0%, 25%, 75%, 100% { transform: rotate(0deg); } 50% { transform: rotate(-32deg); } }
.b-cradle { animation: b-cl 2.4s steps(6) infinite; }
.b-cradle.b { animation-name: b-cr; }
@keyframes b-hop { 0%, 60%, 100% { opacity: .25; } 20%, 40% { opacity: 1; } }
.b-hop { animation: b-hop 1.2s steps(6) infinite; animation-delay: var(--d, 0s); }
@keyframes b-bubble { 0% { transform: translateY(0); opacity: 0; } 15% { opacity: .9; } 100% { transform: translateY(-44px); opacity: 0; } }
.b-bubble { animation: b-bubble 2.4s steps(14) infinite; animation-delay: var(--d, 0s); }
@keyframes b-vac { 0%, 4% { transform: translateX(0); } 46%, 54% { transform: translateX(480px); } 96%, 100% { transform: translateX(0); } }
.b-vac { animation: b-vac 30s steps(140) infinite; }
.room-bell-test .a-twk { animation-timing-function: steps(8); }
.room-bell-test .a-sway, .room-bell-test .swing, .room-bell-test .a-curtain { animation-timing-function: steps(40); }
.room-bell-test .a-mote, .room-bell-test .a-note, .room-bell-test .a-smoke { animation-timing-function: steps(30); }
.room-bell-test .a-fish { animation-timing-function: steps(60); }
.room-bell-test .a-blink { animation-timing-function: steps(6); }
.room-bell-test .a-bird { animation-timing-function: steps(3); }
.room-bell-test .a-peck { animation-timing-function: steps(28); }
.room-bell-test .a-walk { animation-timing-function: steps(800); }
.room-bell-test .a-step { animation-timing-function: steps(4); }
.room-bell-test .a-pulse { animation-timing-function: steps(18); }
.room-bell-test .a-fan { animation-timing-function: steps(23); }

/* ---------------------------------------------------------------- PSLV */
@keyframes s-cloud { from { transform: translateX(0); } to { transform: translateX(520px); } }
.s-cloud { animation: s-cloud var(--dur, 60s) steps(220) infinite; animation-delay: calc(var(--d, 0s) * -1); }
@keyframes s-truck { 0%, 3% { transform: translateX(0); } 40%, 100% { transform: translateX(520px); } }
.s-truck { animation: s-truck 34s steps(160) infinite; }
@keyframes s-radar { to { transform: rotate(360deg); } }
.s-radar { animation: s-radar 3s steps(18) infinite; }
@keyframes s-nod { 0%, 100% { transform: rotate(-6deg); } 50% { transform: rotate(8deg); } }
.s-nod { animation: s-nod 7s steps(40) infinite; }
.room-pslv .a-twk { animation-timing-function: steps(8); }
.room-pslv .a-sway, .room-pslv .swing, .room-pslv .a-curtain { animation-timing-function: steps(40); }
.room-pslv .a-mote, .room-pslv .a-note, .room-pslv .a-smoke { animation-timing-function: steps(30); }
.room-pslv .a-fish { animation-timing-function: steps(60); }
.room-pslv .a-blink { animation-timing-function: steps(6); }
.room-pslv .a-bird { animation-timing-function: steps(3); }
.room-pslv .a-peck { animation-timing-function: steps(28); }
.room-pslv .a-walk { animation-timing-function: steps(800); }
.room-pslv .a-step { animation-timing-function: steps(4); }
.room-pslv .a-pulse { animation-timing-function: steps(18); }
.room-pslv .a-vane { animation-timing-function: steps(20); }
.room-pslv .a-fan { animation-timing-function: steps(23); }

/* ---------------------------------------------------------------- A living text */
.room-living-text .a-twk { animation-timing-function: steps(8); }
.room-living-text .a-sway, .room-living-text .swing, .room-living-text .a-curtain { animation-timing-function: steps(40); }
.room-living-text .a-mote, .room-living-text .a-note, .room-living-text .a-smoke { animation-timing-function: steps(30); }
.room-living-text .a-fish { animation-timing-function: steps(60); }
.room-living-text .a-blink { animation-timing-function: steps(6); }
.room-living-text .a-bird { animation-timing-function: steps(3); }
.room-living-text .a-peck { animation-timing-function: steps(28); }
.room-living-text .a-walk { animation-timing-function: steps(800); }
.room-living-text .a-step { animation-timing-function: steps(4); }
.room-living-text .a-pulse { animation-timing-function: steps(18); }

/* ------------------------------------------------------------ Paintings (the eleventh room, round seven): hand-drawn, so every loop is stepped; the loops are `h-`.
   The painted background, the people, the three paintings and the cat are canvases (paintings.js) and cost nothing here; these are the small SVG things alive in the room. */
canvas.h-night { display: none; }
:root[data-theme=dark] canvas.h-day { display: none; }
:root[data-theme=dark] canvas.h-night { display: block; }
:root[data-theme=dark] canvas.h-paper { opacity: .55; }
@keyframes h-mote { 0%, 100% { transform: translate(0, 0); opacity: .15; } 35% { opacity: .95; } 60% { transform: translate(11px, -20px); opacity: .7; } 85% { opacity: .2; } }
.h-mote { animation: h-mote var(--t, 8s) steps(60) infinite; animation-delay: calc(var(--d, 0s) * -1); }
.h-mote.b { animation-direction: reverse; }
@keyframes h-moth { 0% { transform: translate(0, 0); } 25% { transform: translate(-22px, -16px); } 50% { transform: translate(-6px, -30px); } 75% { transform: translate(18px, -12px); } 100% { transform: translate(0, 0); } }
.h-moth { animation: h-moth 5.2s steps(40) infinite; animation-delay: calc(var(--d, 0s) * -1); }
@keyframes h-steam { 0% { transform: translate(0, 0) scale(.55); opacity: 0; } 22% { opacity: .75; } 100% { transform: translate(8px, -64px) scale(1.5); opacity: 0; } }
.h-steam { animation: h-steam 3.8s steps(24) infinite; animation-delay: calc(var(--d, 0s) * -1); transform-box: fill-box; transform-origin: 50% 100%; }
@keyframes h-smoke { 0% { transform: translate(0, 0) scale(.6); opacity: 0; } 20% { opacity: .75; } 100% { transform: translate(36px, -70px) scale(1.8); opacity: 0; } }
.h-smoke { animation: h-smoke 6.4s steps(40) infinite; animation-delay: calc(var(--d, 0s) * -1); transform-box: fill-box; transform-origin: 50% 50%; }
@keyframes h-flap { 0%, 100% { transform: rotate(-2.4deg); } 50% { transform: rotate(3.2deg); } }
.h-flap { animation: h-flap 3.6s steps(14) infinite; animation-delay: calc(var(--d, 0s) * -1); }
@keyframes h-curtain { 0%, 100% { transform: rotate(-.8deg); } 50% { transform: rotate(1.4deg); } }
.h-curtain { animation: h-curtain 6.4s steps(26) infinite; }
.h-curtain.b { animation-direction: reverse; animation-delay: -2.2s; }
@keyframes h-swing { 0%, 100% { transform: rotate(-1.6deg); } 50% { transform: rotate(1.6deg); } }
.h-swing { animation: h-swing 5.4s steps(22) infinite; animation-delay: calc(var(--d, 0s) * -1); }
@keyframes h-hand { to { transform: rotate(360deg); } }
.h-hand { animation: h-hand 120s steps(60) infinite; }
@keyframes h-drip { 0%, 30% { transform: translate(0, 0) scale(.4); opacity: 0; } 40% { transform: translate(0, 0) scale(1); opacity: 1; } 85% { transform: translate(0, 46px) scale(.9); opacity: 1; } 100% { transform: translate(0, 50px) scale(.5); opacity: 0; } }
.h-drip { animation: h-drip 4.2s steps(30) infinite; animation-delay: calc(var(--d, 0s) * -1); transform-box: fill-box; transform-origin: 50% 0; }
@keyframes h-spider { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(34px); } }
.h-spider { animation: h-spider 7s steps(30) infinite; animation-delay: calc(var(--d, 0s) * -1); }
@keyframes h-bird { 0% { transform: translate(-30px, 0); opacity: 0; } 8% { opacity: 1; } 50% { transform: translate(100px, -22px); } 92% { opacity: 1; } 100% { transform: translate(240px, 10px); opacity: 0; } }
.h-bird { animation: h-bird 10s steps(70) infinite; animation-delay: calc(var(--d, 0s) * -1); }
@keyframes h-cloud { from { transform: translateX(-30px); } to { transform: translateX(80px); } }
.h-cloud { animation: h-cloud 36s steps(90) infinite; }
.h-door .h-leaf { transition: transform .28s var(--kai-ease); transform-box: fill-box; transform-origin: 0 50%; }
.bld:hover .h-leaf, .bld:focus-visible .h-leaf { transform: scaleX(.8); }
:root { --h-ink: #2d2019; --h-frame: #efe3c4; --h-door: #4b8a8a; --h-board: #f1e5c6; --h-canvas: #f1e5c6; }
:root[data-theme=dark] { --h-ink: #120c1e; --h-frame: #8f86a6; --h-door: #2d5a6a; --h-board: #a89fb8; --h-canvas: #a89fb8; }