/* ==========================================================================
   WORD THIEF — The manor floor, Nox, scenery and transitions
   Loaded after style.css.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. The stage
   -------------------------------------------------------------------------- */
.manor { position: relative; }

.manor__view {
  position: relative;
  width: 100%;
  aspect-ratio: 2 / 1;
  max-height: 62vh;
  border-radius: var(--r-lg);
  overflow: hidden;
  border: 1px solid rgba(232,196,112,.26);
  box-shadow: var(--sh-3), inset 0 0 0 1px rgba(255,240,200,.07);
  background: #05080f;
  cursor: pointer;
}
.manor__svg { display: block; width: 100%; height: 100%; }

.manor__hint {
  margin: 10px 0 0; text-align: center;
  font-size: .78rem; color: var(--text-dim);
}

.manor__card {
  position: absolute; left: 14px; bottom: 14px;
  width: min(280px, 62%);
  pointer-events: none;
  background: linear-gradient(160deg, rgba(16,26,51,.96), rgba(6,10,22,.97));
}
.manor__card h3 { font-size: 1.06rem; margin: 2px 0 4px; }
.manor__card p { margin: 0 0 3px; font-size: .8rem; }

/* --------------------------------------------------------------------------
   1b. The level board
   Three levels per grade, four rooms per level, and the average each level
   has to reach.
   -------------------------------------------------------------------------- */
.levelcard {
  position: relative;
  margin-bottom: clamp(14px, 2vw, 22px);
  padding: clamp(16px, 2.4vw, 26px);
  border-radius: var(--r-lg);
  border: 1px solid rgba(232,196,112,.26);
  background: linear-gradient(158deg, rgba(30,48,83,.9), rgba(9,15,30,.96));
  box-shadow: var(--sh-2), inset 0 1px 0 rgba(255,240,200,.08);
}
.levelcard::before {
  content: ""; position: absolute; inset: 7px;
  border: 1px solid rgba(232,196,112,.12);
  border-radius: calc(var(--r-lg) - 6px); pointer-events: none;
}
.levelcard.is-done { border-color: rgba(58,210,159,.45); }
.levelcard.is-locked { opacity: .62; }

.levelcard__head { display: flex; align-items: flex-start; gap: 14px; margin-bottom: 16px; }
.levelcard__no {
  flex: none;
  width: 52px; height: 52px; border-radius: 14px;
  display: grid; place-items: center;
  font-family: var(--font-display); font-size: 1.8rem;
  color: var(--brass-100);
  background: linear-gradient(160deg, rgba(232,196,112,.22), rgba(232,196,112,.05));
  border: 1px solid rgba(232,196,112,.4);
}
.levelcard.is-done .levelcard__no { color: var(--jade); border-color: rgba(58,210,159,.5); }
.levelcard__head h3 { margin: 0; font-size: 1.2rem; }
.levelcard__act { margin-top: 14px; }

/* The four room tiles */
.roomrow { display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(146px, 1fr)); }

.roomtile {
  display: flex; flex-direction: column; gap: 4px;
  padding: 12px 12px 11px;
  text-align: left; cursor: pointer;
  border-radius: var(--r-md);
  border: 1px solid rgba(232,196,112,.22);
  background: linear-gradient(165deg, rgba(24,38,66,.9), rgba(7,12,24,.95));
  color: var(--text);
  transition: transform var(--t-fast) var(--ease-out),
              border-color var(--t-fast) linear,
              box-shadow var(--t-fast) var(--ease-out);
}
.roomtile:hover:not([disabled]) { transform: translateY(-3px); border-color: var(--brass-300); box-shadow: var(--sh-2); }
.roomtile[disabled] { cursor: not-allowed; filter: grayscale(.6); opacity: .55; }
.roomtile.is-done { border-color: rgba(58,210,159,.42); }

.roomtile__top { display: flex; align-items: center; gap: 8px; }
.roomtile__no {
  font-family: var(--font-display); font-size: 1.2rem; color: var(--brass-300);
  min-width: 1.1em;
}
.roomtile__icon { width: 26px; height: 26px; margin-left: auto; }
.roomtile__icon svg { width: 100%; height: 100%; }
.roomtile__name { font-weight: 800; font-size: .9rem; line-height: 1.2; }
.roomtile__topic { font-size: .74rem; color: var(--text-soft); line-height: 1.3; min-height: 2.1em; }
.roomtile__kind {
  font-size: .6rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
  color: var(--brass-400);
}
.roomtile__score {
  font-size: .82rem; font-weight: 800; font-variant-numeric: tabular-nums;
  color: var(--text-soft); margin-top: 2px;
}
.roomtile.is-done .roomtile__score { color: var(--jade); }

/* The level average meter */
.levelmeter { margin-top: 16px; }
.levelmeter__row { display: flex; align-items: baseline; gap: 10px; margin-bottom: 6px; }
.levelmeter__lbl { font-size: .66rem; letter-spacing: .16em; text-transform: uppercase; color: var(--text-dim); font-weight: 800; }
.levelmeter__val { font-family: var(--font-display); font-size: 1.35rem; color: var(--brass-200); font-variant-numeric: tabular-nums; }
.levelmeter__val.is-ok { color: var(--jade); }
.levelmeter__need { margin-left: auto; font-size: .72rem; color: var(--text-dim); }

.levelmeter__track {
  position: relative;
  height: 12px; border-radius: 999px;
  background: rgba(255,255,255,.09);
  border: 1px solid rgba(255,255,255,.12);
  overflow: hidden;
}
.levelmeter__track > i {
  display: block; height: 100%;
  background: linear-gradient(90deg, var(--brass-500), var(--brass-200));
  border-radius: 999px;
  transition: width var(--t-slow) var(--ease-out);
}
/* The 80% line the average has to cross */
.levelmeter__mark {
  position: absolute; top: -3px; bottom: -3px; width: 3px;
  background: var(--jade);
  box-shadow: 0 0 8px rgba(58,210,159,.8);
  transform: translateX(-1.5px);
}
.levelmeter__note { margin: 7px 0 0; font-size: .78rem; color: var(--text-soft); }

.levelprogress .levelmeter__track { margin-top: 4px; }

@media (max-width: 560px) {
  .roomrow { grid-template-columns: 1fr 1fr; }
  .levelcard__no { width: 44px; height: 44px; font-size: 1.45rem; }
  .roomtile__topic { min-height: 0; }
}

/* --------------------------------------------------------------------------
   1c. Report
   -------------------------------------------------------------------------- */
.namerow { display: flex; align-items: center; gap: 12px; margin: 4px 0 18px; flex-wrap: wrap; }
.namerow label {
  font-size: .68rem; font-weight: 800; letter-spacing: .18em;
  text-transform: uppercase; color: var(--text-dim);
}
.namerow input {
  flex: 1 1 240px; min-width: 0;
  padding: 10px 14px; border-radius: var(--r-md);
  border: 1px solid rgba(232,196,112,.32);
  background: rgba(10,16,32,.8); color: var(--text);
  font-size: .95rem; font-weight: 600;
}
.namerow input::placeholder { color: var(--text-dim); font-weight: 400; }

.reportlevel {
  display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
  margin: 22px 0 8px; padding-top: 14px;
  border-top: 1px solid rgba(232,196,112,.16);
}
.reportlevel h4 { margin: 0; font-size: 1.02rem; color: var(--brass-200); }
.reportlevel__avg { font-size: .78rem; color: var(--text-soft); margin-left: auto; font-variant-numeric: tabular-nums; }
.reportlevel__avg.is-ok { color: var(--jade); font-weight: 700; }

.table tr.is-done td:first-child { color: var(--jade); }

/* --------------------------------------------------------------------------
   2. Doors
   -------------------------------------------------------------------------- */
.mdoorwrap { cursor: pointer; outline: none; }
.mdoorwrap .mdoor__leaf,
.mdoorwrap .mdoor__frame,
.mdoorwrap .mdoor__glow { transition: transform 460ms var(--ease-out), opacity 320ms linear, stroke 200ms linear; }

.mdoorwrap .mdoor__leaf { transform-box: fill-box; transform-origin: left center; }

@media (hover: hover) {
  .mdoorwrap:not(.is-locked):hover .mdoor__frame { stroke: var(--brass-200); }
  .mdoorwrap:not(.is-locked):hover .mdoor__plate { transform: translateY(-3px); }
}
.mdoorwrap:focus-visible .mdoor__frame { stroke: var(--brass-100); stroke-width: 8; }
.mdoorwrap .mdoor__plate { transition: transform 220ms var(--ease-out); }

/* Available: the number plate glows and the threshold is lit */
.mdoorwrap.is-next .mdoor__frame { stroke: var(--brass-300); }
.mdoorwrap.is-next .mdoor__plate { animation: plateGlow 2.6s ease-in-out infinite; }
@keyframes plateGlow {
  0%, 100% { filter: none; }
  50% { filter: drop-shadow(0 0 10px rgba(232,196,112,.85)); }
}
.mdoorwrap.is-next .mdoor__glow { opacity: .28; }

/* Cleared */
.mdoorwrap.is-done .mdoor__frame { stroke: var(--jade); }
.mdoorwrap.is-done .mdoor__glow { opacity: .1; }
.mdoor__stars { filter: drop-shadow(0 2px 3px rgba(0,0,0,.7)); }
.mdoor__padlock { filter: drop-shadow(0 2px 3px rgba(0,0,0,.7)); }

/* Locked */
.mdoorwrap.is-locked { cursor: not-allowed; }
.mdoorwrap.is-locked .mdoor__leaf { filter: grayscale(.5) brightness(.6); }
.mdoorwrap.is-locked .mdoor__frame { stroke: #3d4759; }

/* Opening */
.mdoorwrap.is-opening .mdoor__leaf { transform: perspective(300px) rotateY(-72deg); }
.mdoorwrap.is-opening .mdoor__glow { opacity: .95; }
.mdoorwrap.is-entered .mdoor__glow { opacity: 1; }

/* A door unlocking for the first time */
.mdoorwrap.just-unlocked .mdoor__frame { animation: unlockRing 1.5s var(--ease-out) 2; }
@keyframes unlockRing {
  0%, 100% { stroke: var(--brass-300); filter: none; }
  40% { stroke: #fff3cf; filter: drop-shadow(0 0 16px rgba(255,243,207,.95)); }
}

/* --------------------------------------------------------------------------
   3. Nox
   -------------------------------------------------------------------------- */
.nox { pointer-events: none; }
.nox__legB, .nox__legF, .nox__armB, .nox__armF {
  transform-box: fill-box; transform-origin: top center;
}
.nox__body, .nox__head, .nox__sack { transform-box: fill-box; transform-origin: center bottom; }
.nox__scarftail { transform-box: fill-box; transform-origin: right top; }

/* Idle: breathing, with the scarf stirring */
.nox.is-idle .nox__body { animation: noxBreathe 3.4s ease-in-out infinite; }
.nox.is-idle .nox__head { animation: noxBreathe 3.4s ease-in-out infinite; }
.nox.is-idle .nox__scarftail { animation: scarfDrift 4s ease-in-out infinite; }
@keyframes noxBreathe { 0%, 100% { transform: translateY(0) } 50% { transform: translateY(-1.6px) } }
@keyframes scarfDrift { 0%, 100% { transform: rotate(0deg) } 50% { transform: rotate(7deg) } }

/* Walk */
.nox.is-walk .nox__legF { animation: legF .56s linear infinite; }
.nox.is-walk .nox__legB { animation: legB .56s linear infinite; }
.nox.is-walk .nox__armF { animation: legB .56s linear infinite; }
.nox.is-walk .nox__armB { animation: legF .56s linear infinite; }
.nox.is-walk .nox__body,
.nox.is-walk .nox__head { animation: bob .28s ease-in-out infinite; }
.nox.is-walk .nox__scarftail { animation: scarfFly .56s ease-in-out infinite; }

@keyframes legF { 0% { transform: rotate(24deg) } 50% { transform: rotate(-24deg) } 100% { transform: rotate(24deg) } }
@keyframes legB { 0% { transform: rotate(-24deg) } 50% { transform: rotate(24deg) } 100% { transform: rotate(-24deg) } }
@keyframes bob  { 0%, 100% { transform: translateY(0) } 50% { transform: translateY(-2.4px) } }
@keyframes scarfFly { 0%, 100% { transform: rotate(-8deg) } 50% { transform: rotate(14deg) } }

/* Sneak: crouched, slow, careful */
.nox.is-sneak { transform: translateY(0); }
.nox.is-sneak .nox__body { transform: translateY(5px) scaleY(.94); }
.nox.is-sneak .nox__head { transform: translateY(6px) translateX(3px); }
.nox.is-sneak .nox__legF { animation: legF 1.1s ease-in-out infinite; }
.nox.is-sneak .nox__legB { animation: legB 1.1s ease-in-out infinite; }
.nox.is-sneak .nox__armF { transform: rotate(-16deg); }

/* Run */
.nox.is-run .nox__legF { animation: legF .3s linear infinite; }
.nox.is-run .nox__legB { animation: legB .3s linear infinite; }
.nox.is-run .nox__armF { animation: legB .3s linear infinite; }
.nox.is-run .nox__armB { animation: legF .3s linear infinite; }
.nox.is-run .nox__body { transform: rotate(-9deg); }
.nox.is-run .nox__head { transform: rotate(-6deg) translateX(3px); }
.nox.is-run .nox__scarftail { animation: scarfFly .3s linear infinite; }

/* Looking around */
.nox.is-look .nox__head { animation: lookAbout 2.6s ease-in-out infinite; }
@keyframes lookAbout {
  0%, 100% { transform: rotate(0deg) }
  25% { transform: rotate(-11deg) translateX(-2px) }
  70% { transform: rotate(9deg) translateX(2px) }
}

/* Working a door */
.nox.is-open .nox__armF { animation: reach .7s ease-in-out infinite; }
.nox.is-open .nox__body { transform: translateX(3px); }
@keyframes reach { 0%, 100% { transform: rotate(-40deg) } 50% { transform: rotate(-58deg) } }

/* Celebrate */
.nox.is-celebrate { animation: noxHop .62s var(--ease-back) 3; }
.nox.is-celebrate .nox__armF { transform: rotate(-140deg); }
.nox.is-celebrate .nox__armB { transform: rotate(140deg); }
@keyframes noxHop { 0%, 100% { transform: translateY(0) } 40% { transform: translateY(-26px) } }

/* Startled */
.nox.is-startled { animation: noxJolt .5s var(--ease-out); }
.nox.is-startled .nox__head { transform: translateX(-4px) rotate(-10deg); }
.nox.is-startled .nox__armF { transform: rotate(-70deg); }
.nox.is-startled .nox__armB { transform: rotate(-40deg); }
@keyframes noxJolt {
  0%, 100% { transform: translate(0,0) }
  20% { transform: translate(-7px,-5px) }
  55% { transform: translate(4px,0) }
}

/* Fleeing */
.nox.is-flee .nox__legF { animation: legF .22s linear infinite; }
.nox.is-flee .nox__legB { animation: legB .22s linear infinite; }
.nox.is-flee .nox__body { transform: rotate(-15deg); }
.nox.is-flee .nox__head { transform: rotate(-10deg); }

/* --------------------------------------------------------------------------
   4. Living scenery
   Everything here is slow and low-contrast on purpose: the manor should feel
   inhabited, not busy.
   -------------------------------------------------------------------------- */
.mflame {
  transform-box: fill-box; transform-origin: center bottom;
  animation: flicker 2.4s ease-in-out infinite;
}
.mflame:nth-of-type(odd) { animation-duration: 3.1s; animation-delay: -.7s; }
@keyframes flicker {
  0%, 100% { transform: scale(1) skewX(0deg); opacity: .95; }
  25% { transform: scale(1.08, .93) skewX(4deg); opacity: 1; }
  50% { transform: scale(.93, 1.09) skewX(-3deg); opacity: .88; }
  75% { transform: scale(1.04, .97) skewX(2deg); opacity: 1; }
}
.mglow { animation: glowPulse 4.6s ease-in-out infinite; }
@keyframes glowPulse { 0%, 100% { opacity: .07 } 50% { opacity: .13 } }

.mclock__pend { transform-box: fill-box; transform-origin: center top; animation: pendulum 2s ease-in-out infinite; }
@keyframes pendulum { 0%, 100% { transform: rotate(-9deg) } 50% { transform: rotate(9deg) } }
.mclock__m { transform-box: fill-box; transform-origin: center bottom; animation: handSpin 60s linear infinite; }
.mclock__h { transform-box: fill-box; transform-origin: center bottom; animation: handSpin 720s linear infinite; }
@keyframes handSpin { to { transform: rotate(360deg) } }

.mchand { transform-box: fill-box; transform-origin: center top; animation: sway 7s ease-in-out infinite; }
@keyframes sway { 0%, 100% { transform: rotate(-.5deg) } 50% { transform: rotate(.5deg) } }

.mpot { transform-box: fill-box; transform-origin: center top; animation: sway 5.5s ease-in-out infinite; }

.mleaf { transform-box: fill-box; transform-origin: bottom center; animation: leafSway 6s ease-in-out infinite; }
@keyframes leafSway { 0%, 100% { transform: rotate(-1.6deg) } 50% { transform: rotate(1.6deg) } }

.mcurtain { transform-box: fill-box; transform-origin: top center; animation: sway 9s ease-in-out infinite; }

.mripple { animation: ripple 3.4s ease-out infinite; transform-box: fill-box; transform-origin: center; }
@keyframes ripple { 0% { transform: scale(.3); opacity: .8 } 100% { transform: scale(2.2); opacity: 0 } }
.mjet { transform-box: fill-box; transform-origin: center bottom; animation: jet 2.2s ease-in-out infinite; }
@keyframes jet { 0%, 100% { transform: scaleY(1) } 50% { transform: scaleY(1.16) } }

.msteam circle { animation: steam 4.5s ease-out infinite; transform-box: fill-box; transform-origin: center bottom; }
.msteam circle:nth-child(2) { animation-delay: 1.6s; }
@keyframes steam {
  0% { transform: translateY(0) scale(.5); opacity: .5 }
  100% { transform: translateY(-46px) scale(1.7); opacity: 0 }
}
.mfire { transform-box: fill-box; transform-origin: center bottom; animation: flicker 1.8s ease-in-out infinite; }

.mcat { animation: catPad 26s linear infinite; }
.mcat__tail { transform-box: fill-box; transform-origin: right bottom; animation: tailFlick 3.2s ease-in-out infinite; }
@keyframes tailFlick { 0%, 100% { transform: rotate(-8deg) } 50% { transform: rotate(16deg) } }
@keyframes catPad {
  0%   { transform: translateX(0) scaleX(1); opacity: 0 }
  4%   { opacity: 1 }
  44%  { transform: translateX(320px) scaleX(1); opacity: 1 }
  48%  { transform: translateX(320px) scaleX(1); opacity: 0 }
  52%  { transform: translateX(320px) scaleX(-1); opacity: 0 }
  56%  { opacity: 1 }
  96%  { transform: translateX(0) scaleX(-1); opacity: 1 }
  100% { transform: translateX(0) scaleX(-1); opacity: 0 }
}

.mstar { animation: twinkle 5s ease-in-out infinite; }
@keyframes twinkle { 0%, 100% { opacity: .25 } 50% { opacity: .95 } }

.mglobe__ball { transform-box: fill-box; transform-origin: center; animation: sway 12s ease-in-out infinite; }
.mscope__tube { transform-box: fill-box; transform-origin: center bottom; animation: scopeScan 18s ease-in-out infinite; }
@keyframes scopeScan { 0%, 100% { transform: rotate(-28deg) } 50% { transform: rotate(-12deg) } }

.mweb { animation: webShiver 9s ease-in-out infinite; transform-box: fill-box; transform-origin: left top; }
@keyframes webShiver { 0%, 92%, 100% { transform: scale(1) } 96% { transform: scale(1.03, .98) } }

/* Hidden gems */
.mgemwrap { cursor: default; }
.mgem__spin { transform-box: fill-box; transform-origin: center; animation: gemFloat 3.2s ease-in-out infinite; }
@keyframes gemFloat {
  0%, 100% { transform: translateY(0) rotate(-4deg) }
  50% { transform: translateY(-9px) rotate(4deg) }
}
.mgemwrap.is-taken { animation: gemTaken .5s var(--ease-out) forwards; pointer-events: none; }
@keyframes gemTaken {
  0% { transform: scale(1); opacity: 1 }
  100% { transform: scale(2.2) translateY(-30px); opacity: 0 }
}

/* Rain on the inside of a window */
.mwin__rain {
  background: none;
}
.mwin__flash { animation: winFlash 17s linear infinite; }
@keyframes winFlash {
  0%, 96%, 100% { opacity: 0 }
  96.6% { opacity: .55 }
  97.2% { opacity: .05 }
  97.8% { opacity: .38 }
  98.6% { opacity: 0 }
}

/* --------------------------------------------------------------------------
   5. Transitions
   -------------------------------------------------------------------------- */
.transition { position: fixed; inset: 0; z-index: 85; pointer-events: none; }

.transition--door .transition__leaf {
  position: absolute; top: 0; bottom: 0; width: 52%;
  background: linear-gradient(90deg, #05080f, #0d1730);
  box-shadow: 0 0 60px rgba(0,0,0,.9);
}
.transition--door .transition__leaf--l { left: 0; transform: translateX(-101%); }
.transition--door .transition__leaf--r { right: 0; transform: translateX(101%); }
.transition--door .transition__glow {
  position: absolute; inset: 0; opacity: 0;
  background: radial-gradient(40% 60% at 50% 50%, rgba(255,214,150,.5), transparent 70%);
}
.transition--door.is-in .transition__leaf { transition: transform 400ms cubic-bezier(.5,0,.3,1); transform: translateX(0); }
.transition--door.is-in .transition__glow { transition: opacity 400ms linear; opacity: 1; }
.transition--door.is-out .transition__leaf--l { transition: transform 440ms var(--ease-out); transform: translateX(-101%); }
.transition--door.is-out .transition__leaf--r { transition: transform 440ms var(--ease-out); transform: translateX(101%); }
.transition--door.is-out .transition__glow { transition: opacity 300ms linear; opacity: 0; }

.transition--pull { background: #05080f; opacity: 0; }
.transition--pull.is-in { transition: opacity 280ms linear; opacity: 1; }
.transition--pull.is-out { transition: opacity 380ms linear; opacity: 0; }

.transition--flash { background: var(--flash); animation: transFlash 480ms ease-out forwards; }
@keyframes transFlash { from { opacity: 1 } to { opacity: 0 } }

/* --------------------------------------------------------------------------
   6. Smaller screens
   -------------------------------------------------------------------------- */
@media (max-width: 700px) {
  /* A squarer window on a phone: the corridor is drawn to whatever shape
     this box is (see measureView in js/mansion.js), so a taller box simply
     means bigger doors and a shorter stretch of hallway — not a crop. */
  .manor__view { aspect-ratio: 5 / 4; max-height: 50vh; }
  .manor__card { width: min(240px, 74%); left: 10px; bottom: 10px; padding: 11px 13px; }
  .manor__card h3 { font-size: .96rem; }
  .manor__card p { font-size: .74rem; }
  .manor__hint { font-size: .74rem; }
}

/* A tablet held upright has height to spare: give the corridor more of it
   rather than leaving a third of the screen empty under the hint. */
@media (min-width: 701px) and (max-width: 900px) and (orientation: portrait) {
  .manor__view { aspect-ratio: 3 / 2; max-height: 54vh; }
}

/* --------------------------------------------------------------------------
   7. Motion off
   Every ambient loop stops; the game itself is unaffected because none of
   these animations carry information.
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .mflame, .mglow, .mclock__pend, .mclock__m, .mclock__h, .mchand, .mpot,
  .mleaf, .mcurtain, .mripple, .mjet, .msteam circle, .mfire, .mcat,
  .mcat__tail, .mstar, .mglobe__ball, .mscope__tube, .mweb, .mgem__spin,
  .mwin__flash, .nox * { animation: none !important; }
}
html[data-motion="off"] .mflame,
html[data-motion="off"] .mglow,
html[data-motion="off"] .mclock__pend,
html[data-motion="off"] .mclock__m,
html[data-motion="off"] .mclock__h,
html[data-motion="off"] .mchand,
html[data-motion="off"] .mpot,
html[data-motion="off"] .mleaf,
html[data-motion="off"] .mcurtain,
html[data-motion="off"] .mripple,
html[data-motion="off"] .mjet,
html[data-motion="off"] .msteam circle,
html[data-motion="off"] .mfire,
html[data-motion="off"] .mcat,
html[data-motion="off"] .mcat__tail,
html[data-motion="off"] .mstar,
html[data-motion="off"] .mglobe__ball,
html[data-motion="off"] .mscope__tube,
html[data-motion="off"] .mweb,
html[data-motion="off"] .mgem__spin,
html[data-motion="off"] .mwin__flash,
html[data-motion="off"] .nox * { animation: none !important; }