/* ============================================================
   motion.css — scroll-reveal, tilt, reduced-motion guards
   ============================================================ */

/* Scroll-reveal base state */
[data-reveal] {
  opacity: 0;
  transform: translateY(28px);
  transition:
    opacity var(--dur-slow) var(--ease-soft),
    transform var(--dur-slow) var(--ease-soft);
  transition-delay: var(--reveal-delay, 0ms);
}
[data-reveal="fade"]  { transform: none; }
[data-reveal="left"]  { transform: translateX(-32px); }
[data-reveal="right"] { transform: translateX(32px); }
[data-reveal="scale"] { transform: scale(0.94); }

[data-reveal].is-revealed {
  opacity: 1;
  transform: none;
}

/* Reset reveal when motion disabled */
@media (prefers-reduced-motion: reduce) {
  [data-reveal] { opacity: 1 !important; transform: none !important; transition: none !important; }
  * { scroll-behavior: auto !important; }
}

/* ---- Glass tilt (parallax) ----
   Apply .tilt to a glass panel; JS adds mouse-tracked rotate.
   Max ±4deg — subtle to keep it premium, not gimmicky. */
.tilt {
  transform-style: preserve-3d;
  transition: transform 360ms var(--ease-soft),
              box-shadow var(--dur) var(--ease-soft);
  will-change: transform;
}
.tilt__inner { transform: translateZ(0); transition: transform 360ms var(--ease-soft); }

@media (hover: hover) and (pointer: fine) {
  .tilt:hover { box-shadow: 0 30px 80px -40px rgba(0,0,0,0.9), inset 0 1px 0 rgba(255,255,255,0.18); }
}

/* No tilt on touch or reduced motion */
@media (hover: none), (pointer: coarse), (prefers-reduced-motion: reduce) {
  .tilt { transform: none !important; transition: none !important; }
}

/* Pause particle canvas / scramble gracefully */
.canvas-paused { animation-play-state: paused; }

/* Neon edge on approach step when active */
.step.is-active {
  border-color: rgba(228,201,122,0.4);
  box-shadow: 0 14px 40px -22px rgba(0,0,0,0.7),
              inset 0 1px 0 rgba(255,255,255,0.18);
}

/* Scramble subtitle pre-init state */
[data-scramble] { min-height: 1em; }