/* LiminalWorld performance layer
   Keep motion on opacity/transform only and avoid broad transitions. */
:root {
  --lw-motion-fast: 160ms;
  --lw-motion-base: 240ms;
  --lw-motion-ease: cubic-bezier(.22, 1, .36, 1);
}

html {
  scroll-behavior: auto;
}

body {
  animation: lw-page-enter 220ms var(--lw-motion-ease) both;
}

body.page-exit {
  animation: lw-page-exit 170ms ease-in both;
  pointer-events: none;
}

@keyframes lw-page-enter {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes lw-page-exit {
  from { opacity: 1; }
  to { opacity: 0; }
}

/* Scroll progress is scaled on the compositor instead of laying out width. */
.scroll-progress {
  width: 100%;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 80ms linear;
  will-change: transform;
}

.reveal {
  transition-delay: var(--reveal-delay, 0ms);
  transition-duration: 480ms;
  contain: layout style;
}

.hero-bg-static,
.hero-bg-slide {
  transform: translate3d(0, var(--hero-shift, 0px), 0) scale(1.04);
  will-change: transform;
}

/* Keep tilt isolated to cards and cap the amount of movement. */
.feature-card-icon,
.race-card,
.tier-card,
.pcard,
.class-card,
.boss-card {
  transform: var(--tilt, none);
  transform-origin: center;
  transition: transform var(--lw-motion-base) var(--lw-motion-ease),
              border-color var(--lw-motion-fast) ease,
              box-shadow var(--lw-motion-fast) ease;
  will-change: transform;
}

/* Heavy blur behind a fixed header is only enabled while it is visible. */
.site-header.scrolled,
.auth-body .site-header,
.page-rules .site-header,
.cabinet-page .site-header,
.page-donate .site-header,
.page-start .site-header {
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
}

@media (max-width: 900px), (pointer: coarse) {
  .hero-bg-static,
  .hero-bg-slide {
    transform: none;
    will-change: auto;
  }

  .feature-card-icon,
  .race-card,
  .tier-card,
  .pcard,
  .class-card,
  .boss-card {
    will-change: auto;
  }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto !important; }
  body,
  body.page-exit,
  .reveal {
    animation: none !important;
    transition: none !important;
  }

  .hero-bg-static,
  .hero-bg-slide,
  .feature-card-icon,
  .race-card,
  .tier-card,
  .pcard,
  .class-card,
  .boss-card {
    transform: none !important;
    will-change: auto;
  }
}