/* ==========================================================================
   TENET — the entrance lounge that opens onto an endless world
   ========================================================================== */
.tenet { position: fixed; inset: 0; z-index: 10; background: #030303; opacity: 0; transform-origin: 50% 50%; }
.tenet[hidden] { display: none; }
.tenet__scroller { position: absolute; inset: 0; overflow: hidden; }
.tenet.is-pan .tenet__scroller {
  overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain; scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.tenet.is-pan .tenet__scroller::-webkit-scrollbar { display: none; }
.tenet__content { position: relative; height: 100%; }
.tenet__cam { position: absolute; inset: 0; transition: transform 1s cubic-bezier(.6, 0, .35, 1); will-change: transform; }
.tenet__world { position: absolute; transform-origin: 0 0; }
.tenet__base { position: absolute; inset: 0; width: 100%; height: 100%; }

/* leaving through an object: a veil in the object's own material */
.tenet__veil { position: absolute; inset: 0; opacity: 0; pointer-events: none; transition: opacity .6s ease-in .35s; }
.tenet__veil[data-veil="fog"]   { background: radial-gradient(ellipse at 40% 45%, #f7f4ee, #c9c4bb 80%); }
.tenet__veil[data-veil="paper"] { background: var(--offwhite); }
.tenet__veil[data-veil="red"]   { background: radial-gradient(ellipse at 50% 40%, #d40f16, #3a0003 75%); }
.tenet__veil[data-veil="dark"]  { background: #050505; }
.tenet.is-leaving .tenet__veil { opacity: 1; }
.tenet.is-leaving .hs-label { opacity: 0 !important; }

/* ---------- hotspots: the object is the button ---------- */
.hs {
  position: absolute; margin: 0; padding: 0; border: 0; background: none; cursor: pointer;
  -webkit-tap-highlight-color: transparent; outline: none; pointer-events: none;
}
.tenet.is-live .hs { pointer-events: auto; }
.hs__lens {
  position: absolute; inset: 0; opacity: 0; pointer-events: none;
  background-image: var(--room); background-size: var(--room-size, 1672px 941px); background-position: var(--bx) var(--by);
  -webkit-mask-image: radial-gradient(closest-side, #000 62%, transparent 100%);
          mask-image: radial-gradient(closest-side, #000 62%, transparent 100%);
  transition: opacity .5s ease, filter .6s ease, transform .9s cubic-bezier(.3, 0, .2, 1);
}
.hs.is-hot .hs__lens { opacity: 1; }
.react--fog.is-hot .hs__lens   { filter: brightness(1.12) contrast(.94); transform: scale(1.018); }
.react--lift.is-hot .hs__lens  { filter: brightness(1.45) contrast(1.05); transform: translateY(-3px); }
.react--tilt.is-hot .hs__lens  { filter: brightness(1.18); transform: rotate(-.7deg) scale(1.012); }
.react--shelf.is-hot .hs__lens { filter: brightness(1.35) saturate(1.2); }
.react--breathe.is-hot .hs__lens { filter: saturate(1.35) brightness(1.1); }
.react--ajar .hs__lens::after {
  /* light leaking along the door's edge */
  content: ''; position: absolute; right: 4px; top: 22%; width: 14px; height: 74%;
  background: linear-gradient(90deg, transparent, rgba(255, 42, 42, .95) 55%, transparent);
  filter: blur(2px);
}
.react--ajar.is-hot .hs__lens { filter: brightness(1.15); }
.react--candle .hs__lens { display: none; }

/* SHOP: the door opens into red before the push */
.tenet.is-door-open [data-hs="shop"] .hs__lens {
  opacity: 1; filter: brightness(.7) sepia(1) saturate(7) hue-rotate(-50deg); transition-duration: .45s;
}
/* TENET centre: you are already here */
.tenet.is-pulse .hs--center .hs__lens { animation: centre-pulse 1.6s ease; }
@keyframes centre-pulse { 0% { opacity: 0; } 30% { opacity: 1; filter: saturate(1.6) brightness(1.18); } 100% { opacity: 0; } }

/* the word, near the object, only when interacting */
.hs-label {
  position: absolute; pointer-events: none; white-space: nowrap; opacity: 0;
  font: 400 19px/1 var(--font-display); letter-spacing: .34em; padding-left: .34em;
  color: var(--offwhite); text-shadow: 0 1px 12px rgba(0,0,0,.9), 0 0 3px rgba(0,0,0,.9);
  --shift: 6px;
  transition: opacity .45s ease, transform .6s cubic-bezier(.3, 0, .2, 1);
}
.hs-label::after {
  content: ''; position: absolute; left: 50%; bottom: -9px; width: 0; height: 1px; background: var(--red-light);
  transform: translateX(-50%); transition: width .6s ease .1s;
}
.hs-label.is-on { opacity: 1; --shift: 0px; }
.hs-label.is-on::after { width: 42%; }
.hs-label--below { transform-origin: 0 0;   transform: scale(var(--inv)) translate(-50%, var(--shift)); }
.hs-label--above { transform-origin: 0 0;   transform: scale(var(--inv)) translate(-50%, calc(-100% - var(--shift))); }
.hs-label--right { transform-origin: 0 0;   transform: scale(var(--inv)) translate(var(--shift), -50%); }
.hs-label--left  { transform-origin: 0 0;   transform: scale(var(--inv)) translate(calc(-100% - var(--shift)), -50%); }

/* ---------- candelabra → Girl Cat ---------- */
.tenet-light {
  position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity 1.1s ease;
  background:
    radial-gradient(ellipse 12% 20% at 60% 43%, rgba(255, 60, 50, .2), transparent 70%),
    radial-gradient(ellipse 26% 42% at 68% 60%, rgba(241, 237, 228, .12), transparent 72%),
    radial-gradient(ellipse 70% 85% at 66% 55%, transparent 45%, rgba(0, 0, 0, .5) 100%);
}
.tenet__world.is-lit .tenet-light { opacity: 1; }
.tenet-girl {
  position: absolute; opacity: 0; pointer-events: none; transition: opacity 1.3s ease;
  /* in candlelight: a touch warmer and softer than the flat drawing */
  filter: brightness(.9) sepia(.12) contrast(1.02) drop-shadow(0 0 4px rgba(255, 60, 40, .18));
}
.tenet-girl-shadow {
  position: absolute; opacity: 0; pointer-events: none; transition: opacity 1.3s ease;
  background: radial-gradient(ellipse at center, rgba(0, 0, 0, .55), transparent 70%);
}
.tenet__world.is-present .tenet-girl, .tenet__world.is-present .tenet-girl-shadow { opacity: 1; }
.flames { position: absolute; inset: 0; pointer-events: none; }
.flame {
  position: absolute; width: 12px; height: 22px; margin: -21px 0 0 -6px; opacity: 0;
  border-radius: 50% 50% 46% 46% / 64% 64% 36% 36%;
  background: radial-gradient(ellipse at 50% 72%, #fff 0%, var(--offwhite) 28%, var(--red-light) 62%, transparent 74%);
  box-shadow: 0 0 22px 10px rgba(255, 42, 42, .28);
  transform-origin: 50% 90%; transition: opacity .5s ease;
  animation: flicker 2.3s ease-in-out infinite;
}
.tenet__world.is-lit .flame { opacity: 1; }
.tenet__world:not(.is-lit):has(.react--candle.is-hot) .flame { opacity: .35; }
/* hover / focus: a soft red halo around the candelabra (pre-baked, outside the iron only) — it can be clicked */
.candle-halo { position: absolute; pointer-events: none; opacity: 0; mix-blend-mode: screen; transition: opacity .45s ease; }
.tenet__world:has(.react--candle.is-hot) .candle-halo { opacity: .85; }
@keyframes flicker {
  0%, 100% { transform: scale(1, 1) rotate(0); }
  25% { transform: scale(.94, 1.06) rotate(-2deg); }
  50% { transform: scale(1.04, .95) rotate(1.5deg); }
  75% { transform: scale(.97, 1.04) rotate(-1deg); }
}

/* ---------- ambient ---------- */
.fog {
  position: absolute; overflow: hidden; pointer-events: none;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 80%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 12%, #000 80%, transparent);
}
.fog__band {
  position: absolute; top: 10%; left: -60%; width: 220%; height: 80%;
  background:
    radial-gradient(ellipse 18% 40% at 25% 55%, rgba(241, 237, 228, .38), transparent 70%),
    radial-gradient(ellipse 14% 30% at 55% 40%, rgba(241, 237, 228, .3), transparent 70%),
    radial-gradient(ellipse 16% 36% at 82% 60%, rgba(241, 237, 228, .34), transparent 70%);
  animation: fog-drift 70s linear infinite;
}
.fog__band--b { top: 30%; animation-duration: 95s; animation-direction: reverse; opacity: .7; }
@keyframes fog-drift { from { transform: translateX(0); } to { transform: translateX(27%); } }
.leaf--red { width: 16px; height: 16px; }

/* AREPO: the giant cat is wrapped in fog; hovering (or focusing / first tap) clears it and the
   head shows as painted, its eyes flaring and beating faster */
.react--monster .hs__lens { display: none; }
.monster-fog { position: absolute; pointer-events: none; transition: opacity 1.3s ease, transform 1.8s cubic-bezier(.2, .7, .2, 1); }
.monster-fog__veil { position: absolute; inset: 0; width: 100%; height: 100%; animation: veil-breathe 12s ease-in-out infinite; }
@keyframes veil-breathe { 0%, 100% { opacity: 1; } 50% { opacity: .9; } }
/* banks of mist drifting across the veil */
.mf { position: absolute; border-radius: 50%; filter: blur(22px); opacity: .55; animation: mf-drift 16s ease-in-out infinite alternate; }
.mf--a { left: 0%;  top: 18%; width: 64%; height: 40%; background: radial-gradient(ellipse, rgba(214, 213, 213, .8), transparent 70%); }
.mf--b { left: 38%; top: 40%; width: 60%; height: 36%; background: radial-gradient(ellipse, rgba(200, 199, 199, .8), transparent 70%); animation-duration: 21s; animation-delay: -6s; }
.mf--c { left: 14%; top: 60%; width: 70%; height: 34%; background: radial-gradient(ellipse, rgba(222, 222, 222, .8), transparent 70%); animation-duration: 18s; animation-delay: -11s; }
@keyframes mf-drift { from { transform: translate(-3%, 0) scale(1); } to { transform: translate(4%, -2%) scale(1.06); } }
/* through the fog only the eyes are guessed; on hover the fog lifts and parts */
.monster-fog ~ .sky-eye { transition: filter .8s ease, opacity .8s ease; }
.tenet__world:not(:has(.react--monster.is-hot)) .monster-fog ~ .sky-eye { opacity: .3 !important; }
.tenet__world:has(.react--monster.is-hot) .monster-fog { opacity: 0; transform: scale(1.12) translateY(-3%); }
.tenet__world:has(.react--monster.is-hot) .sky-eye { animation-duration: 1.4s; filter: brightness(1.5); }

/* the tree: sky under the moving parts, swaying branches, fluttering leaves
   (.leafc / .leafc__flutter / crown-sway come from intro.css) */
.tree-sky { position: absolute; pointer-events: none; }
.tree-trunk { position: absolute; pointer-events: none; }
.tree-branch { position: absolute; pointer-events: none; will-change: transform; animation: crown-sway 8s ease-in-out infinite; }
.tree-branch__img { position: absolute; inset: 0; width: 100%; height: 100%; }
.tree-leaf { display: block; width: 100%; height: 100%; }

/* THE SATOR SQUARE — appears on the carpet with the centre's red glow */
.sator { position: absolute; left: 0; top: 0; transform-origin: 0 0; pointer-events: none;
  opacity: 0; transition: opacity 1.1s ease; }
.sator text { font: 500 64px/1 'Cormorant Garamond', 'Times New Roman', serif; text-anchor: middle; dominant-baseline: central; }
.sator__letters text { fill: rgba(255, 232, 222, .9); }
.sator__glow text { fill: none; stroke: rgba(255, 40, 30, .85); stroke-width: 7; filter: blur(5px); }
.tenet__world:has(.hs--center.is-hot) .sator,
.tenet.is-pulse .sator { opacity: .56; }   /* 30% softer than full, then 20% less (2026-10-06) */
.tenet__world:has(.hs--center.is-hot) .sator__glow { animation: sator-glow 3.2s ease-in-out infinite; }
@keyframes sator-glow { 0%, 100% { opacity: .75; } 50% { opacity: 1; } }

/* THE CAT ON THE PLATFORM */
.room-cat-bg { position: absolute; pointer-events: none; }
.room-cat { position: absolute; pointer-events: none; }
.room-cat svg { display: block; overflow: visible; }
.rc__ink { fill: #0a0909; stroke: #0a0909; }
.rc__ink ellipse, .rc__ink path:not(.rc__tail) { stroke: none; }
.rc__eyes ellipse { fill: #a3121a; filter: drop-shadow(0 0 1px rgba(255, 40, 30, .55)); }
.rc__body { transform-box: view-box; transform-origin: 722px 713px; animation: rc-breathe 3.8s ease-in-out infinite; }
.rc__head { transform-box: view-box; transform-origin: 705px 666px; animation: rc-head var(--rc-every, 9s) ease-in-out infinite; }
.rc__ear--l { transform-box: view-box; transform-origin: 695px 648px; animation: rc-ear var(--rc-every, 9s) ease-in-out 2.1s infinite; }
.rc__ear--r { transform-box: view-box; transform-origin: 713px 648px; animation: rc-ear-r var(--rc-every, 9s) ease-in-out 5.2s infinite; }
.rc__eyes { transform-box: view-box; transform-origin: 704px 654px; animation: rc-blink 5.1s linear infinite; }
@keyframes rc-breathe { 0%, 100% { transform: scale(1, 1); } 50% { transform: scale(1.01, 1.025); } }
/* mostly still, watching the valley; now and then it turns its head, then comes back */
@keyframes rc-head {
  0%, 40%, 100% { transform: rotate(0deg) translateX(0); }
  46%, 60% { transform: rotate(-12deg) translateX(-1px); }
  66% { transform: rotate(4deg); }
  72%, 90% { transform: rotate(0deg); }
}
@keyframes rc-ear { 0%, 30%, 38%, 100% { transform: rotate(0deg); } 32% { transform: rotate(-18deg); } 34% { transform: rotate(5deg); } 36% { transform: rotate(-8deg); } }
@keyframes rc-ear-r { 0%, 60%, 66%, 100% { transform: rotate(0deg); } 62% { transform: rotate(16deg); } 64% { transform: rotate(-4deg); } }
@keyframes rc-blink { 0%, 90%, 95%, 100% { transform: scaleY(1); } 92.5% { transform: scaleY(.1); } }

/* crows over the valley: out from behind the wall, off to the left (then a long pause) */
.crow--tenet { animation-name: tenet-crow-fly; opacity: 0; }
@keyframes tenet-crow-fly {
  0% { opacity: 0; transform: translate(1080px, 0); }
  2% { opacity: .9; }
  25% { transform: translate(640px, -30px); }
  48% { opacity: .9; transform: translate(-120px, 14px); }
  49%, 100% { opacity: 0; transform: translate(-120px, 14px); }
}

/* SPIDERS running from the bookshelf (placed and scaled by spiders.js; 40×40 box, centred) */
.spider { position: absolute; left: -20px; top: -20px; width: 40px; height: 40px; pointer-events: none; opacity: 0;
  will-change: transform;
  /* a thin cold rim so they read on the dark planks, and their shadow on the floor */
  filter: drop-shadow(0 0 .8px rgba(225, 222, 216, .75)) drop-shadow(0 3px 2px rgba(0, 0, 0, .6)); }
.sp__gloss { fill: rgba(235, 232, 226, .55); }
.sp__mark { fill: #c0141a; }
.spider svg { display: block; width: 100%; height: 100%; overflow: visible; fill: #070606; }
.sp__legs path { fill: none; stroke: #070606; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.sp__eye { fill: #b3121a; }
.sp__legs--a { animation: sp-scuttle .11s ease-in-out infinite alternate; }
.sp__legs--b { animation: sp-scuttle .11s ease-in-out infinite alternate-reverse; }
@keyframes sp-scuttle { from { transform: rotate(-9deg) scaleY(.92); } to { transform: rotate(9deg) scaleY(1.06); } }

/* the painting shivers while the worms come out (a cut-out of the room image) */
.painting-shake { position: absolute; pointer-events: none; opacity: 0; transition: opacity .3s ease;
  background-image: var(--room); background-size: var(--room-size, 1672px 941px); background-repeat: no-repeat;
  transform-origin: 50% 50%; }
.painting-shake.is-on { opacity: 1; animation: painting-shiver .19s linear infinite, painting-sway 1.7s ease-in-out infinite; }
@keyframes painting-shiver {
  0%   { translate: 0 0; }
  20%  { translate: var(--j) calc(var(--j) * -.6); }
  40%  { translate: calc(var(--j) * -.7) calc(var(--j) * .8); }
  60%  { translate: calc(var(--j) * .5) calc(var(--j) * .4); }
  80%  { translate: calc(var(--j) * -.9) calc(var(--j) * -.3); }
  100% { translate: 0 0; }
}
@keyframes painting-sway { 0%, 100% { rotate: 0deg; } 30% { rotate: .35deg; } 70% { rotate: -.3deg; } }

/* WORMS out of the painting (drawn by worms.js) */
.worms { position: absolute; left: 0; top: 0; width: 1672px; height: 941px; pointer-events: none; opacity: 0; overflow: visible; }
.worms__ink path { fill: rgba(6, 5, 5, .66); }
.worms__halo path { fill: none; stroke: rgba(215, 210, 204, .32); stroke-width: 7; }

/* PEOPLE ON THE DISTANT STAIRS: dark figures, softened by the distance */
.walkers { position: absolute; left: 0; top: 0; width: 1672px; height: 941px; pointer-events: none; overflow: visible; }
.sw__body { fill: #202020; opacity: .88; }
.sw__leg, .sw__arm { fill: none; stroke: #202020; stroke-width: 1.7; stroke-linecap: round; }
.sw.is-walking .sw__leg--a { animation: sw-leg .42s ease-in-out infinite alternate; transform-origin: 0 -8px; }
.sw.is-walking .sw__leg--b { animation: sw-leg .42s ease-in-out infinite alternate-reverse; transform-origin: 0 -8px; }
.sw.is-walking .sw__arm { animation: sw-leg .42s ease-in-out infinite alternate-reverse; transform-origin: 0 -14.5px; }
@keyframes sw-leg { from { transform: rotate(-28deg); } to { transform: rotate(28deg); } }

/* LAYERED FOG — each layer masked to its zone, its band scrolling one tile (1024 px) per cycle */
.fogl { position: absolute; left: 0; top: 0; width: 1672px; height: 941px; pointer-events: none; overflow: hidden;
  -webkit-mask-size: 100% 100%; mask-size: 100% 100%; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  transition: opacity 1.2s ease; }
.fogl__band { position: absolute; left: 0; width: calc(1672px + 1024px); background-repeat: repeat-x;
  will-change: transform; animation: fog-scroll 120s linear infinite; }
.fogl__band--flip { animation-name: fog-scroll-flip; }
@keyframes fog-scroll { from { transform: translateX(0); } to { transform: translateX(-1024px); } }
@keyframes fog-scroll-flip { from { transform: translateX(0) scaleY(-1); } to { transform: translateX(-1024px) scaleY(-1); } }
/* hovering AREPO: the sky fog thins too, so the giant cat reads clearly */
.tenet__world:has(.react--monster.is-hot) .fogl--sky { opacity: .3; }

/* GREY CLOUDS — drifting across the open sky under the sky mist, behind the wall's edge (the box
   clips them), melting into the valley fog at the bottom (mask). Each slowly swells and shrinks
   (not in step with its trip), and churns: two versions of it crossfade. The --life ones form in
   mid-sky and dissolve before reaching the wall. */
.clouds { position: absolute; overflow: hidden; pointer-events: none; transition: opacity 1.2s ease; }
.cloud { position: absolute; left: 0; will-change: transform; animation: cloud-drift 200s linear infinite; }
.cloud--life { animation-name: cloud-life; }
.cloud__shape { position: relative; transform-origin: 50% 85%; animation: cloud-swell 50s ease-in-out infinite alternate; }
.cloud__img { position: absolute; inset: 0; width: 100%; height: 100%; }
.cloud__img:first-child { position: relative; display: block; height: auto; }   /* sets the cloud's height */
.cloud__img--b { opacity: 0; animation: cloud-churn 16s ease-in-out infinite alternate; transform-origin: 50% 80%; }
@keyframes cloud-drift { from { transform: translateX(var(--x0)); } to { transform: translateX(var(--x1)); } }
@keyframes cloud-life {
  0%   { transform: translateX(var(--x0)); opacity: 0; }
  22%  { opacity: 1; }
  70%  { opacity: 1; }
  100% { transform: translateX(var(--x1)); opacity: 0; } }
@keyframes cloud-swell {
  0%   { transform: scale(var(--g0)); }
  35%  { transform: scale(calc((var(--g0) + var(--g1)) / 2 * 1.04), calc((var(--g0) + var(--g1)) / 2 * .95)); }
  70%  { transform: scale(calc((var(--g0) + var(--g1)) / 2 * .97), calc((var(--g0) + var(--g1)) / 2 * 1.05)); }
  100% { transform: scale(var(--g1)); } }
@keyframes cloud-churn { from { opacity: 0; transform: scale(1); } to { opacity: 1; transform: scale(1.04, 1.07); } }
/* THUNDER under the clouds (js/tenet/ambient.js → buildStorm): a glow that lights them from behind
   (two pulses, the second brighter: the flicker of a real strike, < 3 flashes / s) and sometimes a bolt */
.storm { position: absolute; overflow: hidden; pointer-events: none; }
.storm__glow { position: absolute; width: 620px; height: 420px; opacity: 0;
  background: radial-gradient(ellipse closest-side, rgba(255, 244, 245, .9), rgba(255, 228, 231, .5) 40%, rgba(255, 228, 231, 0)); }   /* a barely-red light */
.storm__bolt { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; overflow: visible; }
.storm__bolt path { fill: none; stroke-linejoin: round; stroke-linecap: round; }
.storm__bolt .storm__halo { stroke: rgba(255, 236, 238, .5); stroke-width: 12; }
.storm__bolt .storm__edge { stroke: rgba(232, 148, 158, .8); stroke-width: 5; }    /* a pale red, almost pink edge: the bolt reads on the pale sky */
.storm__bolt .storm__core { stroke: #fff; stroke-width: 2.6; }
.storm--light.is-flash .storm__glow { animation: storm-glow .9s ease-out; }
.storm.is-flash.has-bolt .storm__bolt { animation: storm-bolt .9s ease-out; }
@keyframes storm-glow { 0% { opacity: 0; } 6% { opacity: .55; } 16% { opacity: .1; } 30% { opacity: .9; } 100% { opacity: 0; } }
@keyframes storm-bolt { 0%, 22% { opacity: 0; } 28% { opacity: 1; } 55% { opacity: .6; } 100% { opacity: 0; } }
/* hovering AREPO: the clouds thin out with the fog, so the giant cat reads clearly */
.tenet__world:has(.react--monster.is-hot) .clouds { opacity: .25; }

/* the giant cat in the sky: its eyes glow and breathe */
.sky-eye {
  position: absolute; border-radius: 50%; pointer-events: none; mix-blend-mode: screen;
  background: radial-gradient(circle, rgba(255, 70, 50, .9), rgba(212, 15, 22, .35) 40%, transparent 70%);
  animation: sky-eye 5.5s ease-in-out infinite;
}
.sky-eye + .sky-eye { animation-delay: -.4s; }
@keyframes sky-eye { 0%, 100% { opacity: .35; transform: scale(.9); } 50% { opacity: .9; transform: scale(1.1); } }

/* ?debug */
.hs-debug { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 5; }
.hs-debug polygon { fill: rgba(0, 255, 255, .12); stroke: #0ff; stroke-width: 2; }
.hs-debug text { fill: #0ff; font: 22px ui-monospace, monospace; }

/* ---------- mobile ---------- */
@media (hover: none) {
  .hs-label { font-size: 17px; }
}

/* ---------- reduced motion: same room, no travel ---------- */
@media (prefers-reduced-motion: reduce) {
  .cloud { animation: none !important; transform: translateX(var(--xs)); opacity: 1; }
  .cloud__shape { animation: none !important; }
  .storm, .fog__band, .flame, .leaf, .sky-eye, .mf, .monster-fog__veil, .tree-branch, .tree-branch .leafc, .tree-leaf, .sator__glow, .fogl__band, .rc__body, .rc__head, .rc__ear--l, .rc__ear--r, .rc__eyes, .sw__leg, .sw__arm, .cloud__img--b { animation: none !important; }
  .tenet__cam { transition: none; }
  .tenet__veil { transition: opacity .25s ease; }
  .hs__lens { transform: none !important; }
  .room, .tenet { transition-duration: .2s; }
}

/* the constellation (js/tenet/constellation.js — TENET and the AREPO intro's gate): a canvas, never in the way of clicks */
.constellation { position: absolute; pointer-events: none; }