/* „Aitvaro naktis" — iPad-Safari-first. One stage, letterboxed, never scrolls.
   Everything inside #frame is laid out in 1600×1000 scene units; #frame is
   scaled to fit the viewport, so no CSS below needs media queries.

   The palette is the night one „Užburtas miškas" was lit by — the forest after
   dark, the moon, and small warm things — plus the ember Žėrutis himself is
   made of and the grey-rose the sky turns at the end. Paper and ink stay warm
   so every sentence the child has to READ keeps the daylight contrast a
   beginner needs. */

@font-face {
  font-family: 'Andika';
  src: url('/fonts/Andika-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Andika';
  src: url('/fonts/Andika-Bold.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

:root {
  --night: #101A22;
  --moon: #C8D8C0;
  --mist: #9FB8AC;
  --amber: #F5C86E;
  --paper: #F6EBD7;
  --paper-2: #E4D3B6;
  --ink: #3A2A1C;
  --bark: #4A3626;
  --bark-dark: #32241A;
  --moss: #7A8C5A;
  --cap: #C0503C;
  /* Žėrutis's own three: the body he is made of, the light coming off him, and
     the sky at the very end. Nothing else in the game is allowed to use them. */
  --ember: #F2A24A;
  --spark: #FFD9A0;
  --dawn: #E9A6A0;
  --font: 'Andika', 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  position: fixed;
  overscroll-behavior: none;
  background: #0B1114;
  font-family: var(--font);
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
  touch-action: manipulation;
}

#app { width: 100%; height: 100%; }

/* The letterbox is darker than any scene, so the stage reads as a window cut
   into the night rather than as a picture pasted on a background. */
#stage {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background:
    radial-gradient(ellipse at 50% 45%, #16232B00 0%, #070C0F 100%),
    #0B1114;
}

#frame {
  position: relative;
  width: 1600px;
  height: 1000px;
  flex: 0 0 auto;
  transform-origin: 50% 50%;
  overflow: hidden;
  border-radius: 6px;
  box-shadow: 0 0 90px rgba(0, 0, 0, 0.8);
}

#scene {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

#ui {
  position: absolute;
  inset: 0;
  pointer-events: none;
  font-family: var(--font);
  color: var(--ink);
}

button {
  font-family: var(--font);
  -webkit-appearance: none;
  appearance: none;
  cursor: pointer;
  touch-action: manipulation;
}

/* ---------- hotspots ---------- */

.hs { cursor: pointer; }
.hitrect { fill: transparent; }

#scene.pulsing .hs { animation: hspulse 1.05s ease-in-out 2; }
@keyframes hspulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.6; }
}

.shaking {
  transform-box: fill-box;
  transform-origin: center;
  animation: shake 0.6s ease-in-out;
}
@keyframes shake {
  10%, 90% { transform: translateX(-7px); }
  30%, 70% { transform: translateX(9px); }
  50% { transform: translateX(-9px); }
}

/* A tap that arrived while an encounter is still pausing after a wrong sentence.
   The dweller twitches just enough to say „I felt that", and nothing happens.
   This is the ONLY thing a pause ever shows: no spinner, no counter, no scold. */
.nudging {
  transform-box: fill-box;
  transform-origin: center;
  animation: nudge 0.4s ease-in-out;
}
@keyframes nudge {
  25% { transform: translateX(-3px); }
  60% { transform: translateX(3px); }
  85% { transform: translateX(-1.5px); }
}

/* a thing already read, still sitting in the nest — a ghost, so the child can
   see how far through the nest they are */
.used { opacity: 0.32; transition: opacity 0.35s ease; }
/* …and once it has gone home the ghost goes entirely */
.consumed { display: none; }

/* delight-only idle reactions */
.twitch { transform-box: fill-box; transform-origin: 50% 100%; animation: twitch 1.4s ease-in-out; }
@keyframes twitch { 20% { transform: rotate(-2.5deg); } 45% { transform: rotate(2deg); } 70% { transform: rotate(-1deg); } }

/* A tapped plant pivots where it is rooted: the base stays planted and the
   crown leans over. Anything that HANGS wants .sway-hang instead. */
.sway { transform-box: fill-box; transform-origin: 50% 100%; animation: sway 1.5s ease-in-out; }
@keyframes sway { 25% { transform: rotate(3deg); } 60% { transform: rotate(-2.4deg); } 85% { transform: rotate(1deg); } }

.shine { animation: shine 1.5s ease-in-out; }
@keyframes shine { 40% { filter: brightness(1.35); } }

.glow { animation: glow 4.2s ease-in-out; }
@keyframes glow { 10%, 90% { filter: brightness(1.25); } }

/* Both characters idle the same way: breathing always, mouth only while they
   speak. The engine puts `.guide` on the group it mounts each of them into and
   `.talking` on whichever one is currently in a bubble, so an art module only
   has to name three parts. */
.guide .g-body { transform-box: fill-box; transform-origin: 50% 100%; animation: breathe 4.6s ease-in-out infinite; }
@keyframes breathe { 50% { transform: scaleY(1.025) scaleX(0.99); } }

.guide .g-eyes { transform-box: fill-box; transform-origin: 50% 50%; animation: blink 6.2s ease-in-out infinite; }
@keyframes blink { 0%, 95%, 100% { transform: scaleY(1); } 97.5% { transform: scaleY(0.08); } }

.guide.talking .g-mouth { transform-box: fill-box; transform-origin: 50% 50%; animation: talk 0.34s ease-in-out infinite; }
@keyframes talk { 50% { transform: scaleY(2.1) scaleX(0.85); } }

/* Žėrutis is a smaller, quicker thing than Giliukas: he breathes faster, blinks
   more often, and his mouth is a small one. The art module owns everything
   else about him, scoped `ak-*` inside its own <style>. */
.guide.spark .g-body { animation-duration: 3.1s; }
.guide.spark .g-eyes { animation-duration: 4.4s; }
.guide.spark.talking .g-mouth { animation-duration: 0.28s; }

/* ---------- speech bubbles ---------- */

/* Explicit stacking, so DOM insertion order never decides who gets a tap:
   hud 5 < game layers 10 < tap catcher 50 < bubble 51 < sheets 60 < title 70. */
.tapcatch {
  position: absolute;
  inset: 0;
  z-index: 50;
  pointer-events: auto;
}

.bubble {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 51;
  /* Narrow on purpose. A bubble anchored on Giliukas in his corner gets pushed
     back into the middle of the glade by its own width, and a wide one lands on
     whatever just opened. Short lines also suit a reader who is still sounding
     words out. */
  max-width: 640px;
  padding: 26px 36px;
  background: var(--paper);
  color: var(--ink);
  font-size: 38px;
  line-height: 1.34;
  border-radius: 30px;
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.55);
  pointer-events: none;
}
/* The resting state is VISIBLE and the entrance animates away from hidden, so
   a browser that suppresses animations (reduced motion) still shows the text. */
.bubble.in { animation: bubblein 0.22s ease-out; }
@keyframes bubblein { from { opacity: 0; transform: translateY(10px); } }

.bubble::after {
  content: '';
  position: absolute;
  left: var(--tail-x, 50%);
  margin-left: -18px;
  border: 18px solid transparent;
}
.bubble.tail-down::after { top: 100%; border-top-color: var(--paper); border-bottom: 0; }
.bubble.tail-up::after { bottom: 100%; border-bottom-color: var(--paper); border-top: 0; }

/* Giliukas — plain warm paper, the voice the child hears most. Spelled out
   rather than left to the base rule so the four styles read as four. */
.bubble-guide { background: var(--paper); }
.bubble-guide.tail-down::after { border-top-color: var(--paper); }
.bubble-guide.tail-up::after { border-bottom-color: var(--paper); }

/* the dwellers: Gurgis, Ūkė, the stone head. Darker paper inside a bark border
   — heavier than Giliukas, so who is speaking is legible before a word of it is
   read. */
.bubble-stone {
  background: var(--paper-2);
  border: 5px solid var(--bark);
  color: #3B2A19;
  font-weight: 700;
}
.bubble-stone.tail-down::after { border-top-color: var(--paper-2); }
.bubble-stone.tail-up::after { border-bottom-color: var(--paper-2); }

/* Žėrutis — the same darker paper the dwellers get, but rimmed in his own
   ember and lit from just inside the edge. The inner glow is an inset shadow
   rather than a filter, because a filter on a text box costs a layer on every
   line he says and this game already runs a flight loop. */
.bubble-spark {
  background: var(--paper-2);
  border: 5px solid var(--ember);
  color: #3B2A19;
  box-shadow:
    0 14px 34px rgba(0, 0, 0, 0.55),
    inset 0 0 22px rgba(255, 217, 160, 0.85),
    inset 0 0 6px rgba(242, 162, 74, 0.5);
}
.bubble-spark.tail-down::after { border-top-color: var(--ember); }
.bubble-spark.tail-up::after { border-bottom-color: var(--ember); }

/* the forest itself, narrating. Nobody's mouth moves and nothing is answered
   here, so the bubble steps back a little. */
.bubble-quiet {
  background: rgba(246, 235, 215, 0.92);
  font-style: italic;
}
.bubble-quiet.tail-down::after { border-top-color: rgba(246, 235, 215, 0.92); }
.bubble-quiet.tail-up::after { border-bottom-color: rgba(246, 235, 215, 0.92); }

/* ---------- paper overlays & panels ---------- */

.sheetwrap {
  position: absolute;
  inset: 0;
  z-index: 60;
  background: rgba(6, 12, 14, 0.7);
  pointer-events: auto;
  display: flex;
  align-items: center;
  justify-content: center;
}

.paper, .panel {
  position: relative;
  background: var(--paper);
  color: var(--ink);
  border-radius: 12px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6);
}
.paper.in, .panel.in { animation: sheetin 0.2s ease-out; }
@keyframes sheetin { from { opacity: 0; transform: scale(0.96); } }

.paper {
  width: 900px;
  max-width: 90%;
  max-height: 88%;
  padding: 64px 74px 46px;
  overflow-y: auto;
  background-image: linear-gradient(rgba(140, 110, 70, 0.06) 1px, transparent 1px);
  background-size: 100% 56px;
}
.paper.wide { width: 1180px; }

.paper-close {
  position: absolute;
  top: 12px;
  right: 14px;
  width: 68px;
  height: 68px;
  border: none;
  border-radius: 50%;
  background: var(--bark);
  color: var(--paper);
  font-size: 34px;
  line-height: 1;
}
.paper-close:active { background: var(--bark-dark); }

.paper-body p { font-size: 35px; line-height: 1.45; margin: 0 0 24px; }
.paper-body h2 { font-size: 46px; margin: 0 0 30px; text-align: center; letter-spacing: 1px; }
.paper-body .riddle { font-weight: 700; font-size: 39px; line-height: 1.4; }
.paper-body .sign { text-align: right; font-style: italic; margin-bottom: 0; }

/* A mark carved into a thing. UPPERCASE, big, tracked out a little, and given
   the room a sentence a child is sounding out needs. It is the one text in the
   game the whole encounter depends on, so nothing shares its sheet.

   TWO lines, and they are two different questions: `.mark-who` says whose the
   thing is and sends the child somewhere, `.mark-ask` says how to give it back
   and is the only thing in the game that names the right sentence. They are set
   apart — a rule between them and the second in the warm ink — because a child
   who reads only the top half will otherwise walk off having read half a mark
   and not know it. */
.paper-body .mark {
  font-size: 44px;
  font-weight: 700;
  line-height: 1.34;
  letter-spacing: 2px;
  text-align: center;
  margin: 0;
}
.paper-body .mark-ask {
  margin-top: 26px;
  padding-top: 24px;
  border-top: 3px solid rgba(58, 42, 28, 0.28);
  color: var(--cap, #C0503C);
  font-size: 40px;
}

.panel {
  padding: 56px 64px 48px;
  text-align: center;
  max-width: 94%;
}
.panel-note { font-size: 32px; margin: 0 0 18px; }
.panel-task { font-size: 38px; font-weight: 700; line-height: 1.4; margin: 0 0 24px; }

.panel-body { display: block; }
.panel-actions { display: flex; align-items: center; justify-content: center; gap: 26px; }

.bigbutton {
  border: none;
  border-radius: 22px;
  background: var(--cap);
  color: var(--paper);
  font-size: 46px;
  font-weight: 700;
  padding: 22px 60px;
  box-shadow: 0 8px 0 rgba(0, 0, 0, 0.28);
}
.bigbutton:active { transform: translateY(4px); box-shadow: 0 4px 0 rgba(0, 0, 0, 0.28); }
.bigbutton.ghost { background: var(--moss); }

/* ---------- the word-encounter ---------- */

/* The core verb of this game: a dweller's mood, and three whole sentences the
   child can say. It is as wide as the widest paper because a sentence must
   never wrap in the middle — a beginner reading „Šis šaukštas maišo tavo /
   sriubą." over two lines is reading two things. */
.encounter {
  width: 1180px;
  max-width: 94%;
  padding: 48px 64px 44px;
  text-align: left;
}
/* the mood, in the dweller's own voice: two lines at most, and never a demand */
.encounter .enc-mood {
  font-size: 36px;
  line-height: 1.4;
  font-style: italic;
  color: #4A3626;
  margin: 0 auto 34px;
  max-width: 900px;
  text-align: center;
}
.encounter .enc-choices {
  display: flex;
  flex-direction: column;
  gap: 22px;
}
/* Three big sentences. 44px of text inside a 108px-tall target: the tap area is
   generous because a child reading aloud points at the words with the same
   finger they answer with. */
.encounter .enc-say {
  display: block;
  width: 100%;
  min-height: 108px;
  border: 4px solid var(--bark);
  border-radius: 20px;
  background: var(--paper-2);
  color: var(--ink);
  font-family: var(--font);
  font-size: 44px;
  line-height: 1.3;
  font-weight: 700;
  text-align: left;
  padding: 22px 34px;
}
.encounter .enc-say:active { background: var(--bark); color: var(--paper); }
/* the pause after a wrong sentence: the panel is closed for it, so all this
   does is stop a stray tap landing on a button on the way out */
.encounter .enc-say[disabled] { opacity: 0.55; }

/* The panel sits low and dims lightly, so the dweller it is being said TO stays
   visible over its top edge while the child reads. */
.encounter-wrap {
  align-items: flex-end;
  padding-bottom: 26px;
  background: rgba(6, 12, 14, 0.45);
}

/* ---------- HUD ---------- */

.hud {
  position: absolute;
  z-index: 5;
  left: 28px;
  top: 22px;
  display: flex;
  align-items: center;
  gap: 24px;
  pointer-events: none;
  padding: 10px 20px 10px 14px;
  border-radius: 20px;
  background: rgba(8, 16, 20, 0.42);
}
.hud[hidden] { display: none; }
/* steps aside while anyone is speaking — see Engine.say() */
.hud { transition: opacity 0.18s ease; }
.hud.dimmed { opacity: 0; }

/* The three nest hollows. Empty: a dim woven ring with the night inside it.
   Filled: the same ring warm, holding the light of a thing that got home. It is
   a COUNT — three sockets and nothing else — so it can never be read as a word,
   a letter or a name. Which thing went where is the child's to remember. */
.hud-nest { display: flex; gap: 10px; }
.hud-hollow svg { width: 62px; height: 62px; display: block; }
.hud-hollow .h-inside { fill: rgba(4, 10, 12, 0.62); }
.hud-hollow .h-ring { stroke: rgba(200, 216, 192, 0.3); }
.hud-hollow .h-twig { stroke: rgba(200, 216, 192, 0.22); }
.hud-hollow .h-warm { fill: transparent; }
.hud-hollow.lit .h-inside { fill: #2A2018; }
.hud-hollow.lit .h-ring { stroke: rgba(242, 162, 74, 0.9); }
.hud-hollow.lit .h-twig { stroke: rgba(255, 217, 160, 0.55); }
.hud-hollow.lit .h-warm {
  fill: var(--spark);
  filter: drop-shadow(0 0 6px rgba(242, 162, 74, 0.85));
}

/* the one thing in the child's arms, on its way to whoever it belongs to */
.hud-items { display: flex; gap: 12px; }
.hud-item svg { width: 54px; height: 54px; display: block; }

/* The one tappable thing in the whole HUD: what the child is carrying. Its mark
   opens again on a tap, for as long as it is in their arms — so it has to look
   like it answers. A warm ring that is simply always there, and a press that
   gives under the finger. Nothing pulses and nothing nags: a child who never
   touches it loses nothing and is never told to.

   Scoped inside .hud on purpose — pickup() and give() CLONE this node for the
   flyer, and a ringed copy sailing across the stage would read as a second
   thing. Outline rather than padding, so the clone's box stays the slot's box. */
.hud .hud-hold.readable {
  pointer-events: auto;
  cursor: pointer;
  border-radius: 50%;
  outline: 2px solid rgba(255, 217, 160, 0.34);
  outline-offset: 5px;
  transition: outline-color 0.18s ease, transform 0.12s ease;
}
.hud .hud-hold.readable:hover { outline-color: rgba(255, 217, 160, 0.72); }
/* While anyone is speaking the HUD is faded out of the way, and a target you
   cannot see must not be a target you can hit. */
.hud.dimmed .hud-hold.readable { pointer-events: none; }
.hud .hud-hold.readable:active { transform: scale(0.92); }
@media (prefers-reduced-motion: reduce) {
  .hud .hud-hold.readable { transition: none; }
  .hud .hud-hold.readable:active { transform: none; }
}

.hud-saukstas .i-wood { fill: #C79A5E; }
.hud-saukstas .i-bowl { fill: #A87A45; }
.hud-saukstas .i-hollow { fill: #6F4E2B; }

.hud-dangtis .i-metal { fill: #8E9AA0; }
.hud-dangtis .i-rim { fill: #6E7A80; }
.hud-dangtis .i-knob { fill: var(--bark); }
.hud-dangtis .i-shine { stroke: rgba(240, 246, 240, 0.6); }

.hud-varpelis .i-cord { stroke: var(--bark); }
.hud-varpelis .i-brass { fill: var(--amber); }
.hud-varpelis .i-slit { stroke: rgba(58, 42, 28, 0.55); }
.hud-varpelis .i-clapper { fill: #B98A38; }

.hud-veidrodelis .i-handle { stroke: var(--bark); }
.hud-veidrodelis .i-rim2 { fill: #6B5334; }
.hud-veidrodelis .i-glass { fill: #33454A; }
.hud-veidrodelis .i-moon { fill: #E6F0E2; }

.hud-pagalve .i-moss { fill: var(--moss); }
.hud-pagalve .i-tuft { stroke: #9EB077; }

.hud-karolis .i-cord { stroke: #8A7048; }
.hud-karolis .i-pebble { fill: #96A29C; }
.hud-karolis .i-vein { stroke: rgba(240, 246, 240, 0.5); }

/* Sraigė's lantern: horn pane, brass cap and foot, one small flame */
.hud-zibintas .i-bail { stroke: #8A7454; }
.hud-zibintas .i-cap { fill: var(--amber); }
.hud-zibintas .i-pane { fill: #FFE9B4; }
.hud-zibintas .i-flame { fill: #FFF6D8; }
.hud-zibintas .i-wire { stroke: rgba(58, 46, 24, 0.75); }

/* Genys's pine cone: no face on it, and none is ever to be added */
.hud-kankorezis .i-stalk { stroke: #4A3626; }
.hud-kankorezis .i-cone { fill: #6E5238; }
.hud-kankorezis .i-scale { stroke: #B08A5C; }

/* ---------- prizes ---------- */
/* A thing is shown in the MIDDLE of the stage before it is filed in the corner
   — and on the way back OUT it is shown there again before it goes home. See
   Engine.prize(), pickup() and give(). The layer never takes taps: the game
   holds the forest still for the length of the ceremony, and the ceremony is
   short. */

.prizelayer { position: absolute; inset: 0; z-index: 62; pointer-events: none; }
.prize-scrim { position: absolute; inset: 0; background: rgba(4, 9, 12, 0.5); }

.prize-flyer { position: absolute; will-change: transform; }
.prize-art { position: absolute; inset: 0; }
/* the clone is a HUD slot, and its icon is sized for the corner */
.prize-art > div { width: 100%; height: 100%; }
.prize-art > div > svg { width: 100%; height: 100%; display: block; }

/* the warm light Žėrutis carries, rather than the moonlight of the miškas: what
   is being held up here is being given back by a small burning thing */
.prize-glow {
  position: absolute;
  inset: -38%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 217, 160, 0.5) 0%, rgba(255, 217, 160, 0) 64%);
}
/* Motes, not stars — the same round warm things that hang in the corridor. */
.prize-mote {
  position: absolute;
  left: 50%;
  top: 50%;
  border-radius: 50%;
  background: #FFF0BE;
  box-shadow: 0 0 14px rgba(242, 162, 74, 0.9);
}

/* The slot a thing is flying into stays empty until it lands, then takes it
   with a pop — the corner is where the thing ends up, not where it appears. */
.hud .awaiting { opacity: 0; }
.hud .landed { animation: prizeland 0.44s ease-out; }
@keyframes prizeland {
  0% { transform: scale(1.6); }
  55% { transform: scale(0.88); }
  100% { transform: scale(1); }
}

/* ---------- the flight ---------- */

/* The one layer in this game that takes pointer events, and the only place a
   drag means anything. It is opaque because it REPLACES the scene under it: the
   glade must not show through the sky. `touch-action: none` is what stops iOS
   turning a steering drag into a scroll or a swipe-back. */
.flightlayer {
  position: absolute;
  inset: 0;
  z-index: 10;
  pointer-events: auto;
  touch-action: none;
  overflow: hidden;
  background: var(--night);
}
.flightlayer canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}
/* Žėrutis stays SVG over the canvas corridor, so he keeps breathing, blinking
   and trailing sparks while the field behind him is painted in bulk. The loop
   sizes and moves that svg itself; all this says is that he is never a tap
   target and never clipped by his own box. */
.flightlayer > svg {
  overflow: visible;
  pointer-events: none;
}

/* ---------- title & ending ---------- */

.gamelayer { position: absolute; inset: 0; z-index: 10; pointer-events: none; }
.gamelayer > * { pointer-events: auto; }

.titlescreen {
  position: absolute;
  inset: 0;
  z-index: 70;
  pointer-events: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 24px;
  background: rgba(9, 20, 24, 0.82);
}
.title-h1 {
  margin: 0;
  font-size: 124px;
  font-weight: 700;
  color: var(--ember);
  text-shadow: 0 8px 26px rgba(0, 0, 0, 0.7);
  text-align: center;
}
.title-sub { margin: 0 0 26px; font-size: 46px; color: var(--moon); text-align: center; }
.title-buttons { display: flex; gap: 36px; }

.endingui {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  gap: 34px;
  padding-bottom: 64px;
}
/* The closing line lands on the busiest part of the picture — the grey-rose
   sky, the moss, the lit hollow — and dark brown on that is not a readable
   pair. It carries its own light instead: a halo that hugs the letters, so the
   line is legible over every colour under it while the picture stays whole. A
   scrim panel would read as a caption bar and wipe out the art it sits on. */
.ending-quiet {
  margin: 0;
  font-size: 44px;
  color: var(--ink);
  text-align: center;
  text-shadow:
    0 0 10px rgba(233, 166, 160, 0.98),
    0 0 20px rgba(255, 217, 160, 0.95),
    0 0 34px rgba(255, 217, 160, 0.82),
    0 0 54px rgba(242, 162, 74, 0.58);
}

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; }
}