/* ============================================================================
   THE LAST PREY: the calm motion tier (site polish items 3 and 19)

   Linked after css/site.css with media="(prefers-reduced-motion: reduce)",
   so with JS on or off it follows the OS setting by default. The footer's
   Motion switch overrides that per visitor: the inline head script on each
   page reads localStorage 'tlp-motion' and sets this link's media to 'all'
   (calm) or 'not all' (full) before first paint, and mirrors the result as
   html.calm for js/motion.js (window.TLP.reduce).

   The rule: calm stops what TRAVELS across the screen (walkers, lunges and
   rattles, the mode slide, parallax, the hero pan, entrance drops, the
   magnet) and keeps what moves IN PLACE (idle sprite loops and the still
   sway, the feeding loop, LEDs, the lamp flicker, the grain,
   the threat pulse). The site never goes fully still (Ren, #1025).
   ========================================================================== */

html {
  scroll-behavior: auto;
  /* --descent stops being scroll-driven, so the wall layers hold still */
  animation: none !important;
}
:root {
  --descent: 0.55;
}

/* transitions land at once: nothing slides between states */
*,
*::before,
*::after {
  transition-duration: 1ms !important;
  transition-delay: 0ms !important;
}

/* --- parallax, pan and drift ---------------------------------------------- */
.hero {
  animation: none !important;
}
.wall::before,
.wall::after{
  transform: none !important;
}
.vignette {
  opacity: 0.56;
}
.brand:hover .brand-crest,
.brand:focus-visible .brand-crest {
  transform: none;
}

/* --- one-shot shakes and drops: final state, no travel --------------------- */
.plate.denied {
  animation: none !important;
}
.js-anim .slam,
.js-anim .rise,
.js-anim .bloom {
  opacity: 1 !important;
  transform: none !important;
  mask-image: none !important;
  animation: none !important;
}
.js-anim .peel::before {
  display: none;
}
.file-art {
  position: static;
}
.file[role='tabpanel'] {
  transform: none !important;
}

/* --- modes: the pinned slide becomes a swipe carousel ----------------------- */
/* desktop only: at 940 and under the modes are already a plain stack */
@media (min-width: 941px) {
  .modes {
    height: auto;
  }
  .mode {
    flex: 0 0 min(560px, 88vw);
    min-height: 58svh;
    scroll-snap-align: center;
    /* text sits right under the art band, whose height follows the same
       min(560px, 88vw) width its aspect-ratio reads */
    align-content: start;
    padding-top: calc(min(560px, 88vw) / 2 + 20px);
  }
  .mode h3 {
    display: inline-block;
    background: rgba(6, 7, 8, 0.85);
    padding: 0 10px;
    border-radius: 2px;
  }
  .mode .players {
    background: rgba(6, 7, 8, 0.92);
  }
  .mode p {
    background: rgba(6, 7, 8, 0.92);
    padding: 10px 14px;
    border-radius: 2px;
  }
}