/* =====================================================================
   Ryori — parallax hints + card reveal (v3 scroll colour)
   Colour lives on <html> (js/motion.js). This file only handles
   parallax compositor hints, the phone glow layer, and card stagger.
   Gated on html.js-motion (added by js/motion.js).
   ===================================================================== */

/* Parallax tuning lives in index.html as data attributes:
     data-parallax-speed  1.0 = moves with the page, <1 = lags (deeper).
                          translateY = (1 - speed) × scrollDelta
     data-parallax-max    clamp in px (±)
     data-parallax-rotate deg reached at the end of the hero (desktop only)
   Global knobs below (read by motion.js where needed). */
:root {
  --parallax-mobile-factor: 0.5;   /* <768px: offsets halved, rotate dropped */
  --reveal-distance: 32px;
  --reveal-duration: 500ms;
  --reveal-stagger: 80ms;
  --reveal-ease: cubic-bezier(0.33, 1, 0.68, 1); /* easeOutCubic */
}

/* ---- Hero phone: glow split onto its own parallax layer ---- */
.phone-mock { position: relative; }
.phone-glow { display: none; }
.phone-parallax { position: relative; }
/* Red ring + soft drop live on the frame so a lagged glow layer can't
   paint a second hard rectangle under the phone (the v6 375-hero nit). */
html.js-motion .phone-frame {
  box-shadow: 0 0 0 6px var(--red), 0 28px 60px rgba(204,0,51,0.28);
}
/* Glow = soft radial wash only (no box-shadow, no phone-shaped silhouette). */
html.js-motion .phone-glow {
  display: block;
  position: absolute;
  left: 50%;
  top: 50%;
  width: 120%;
  height: 70%;
  transform: translate(-50%, -45%);
  border-radius: 50%;
  background: radial-gradient(ellipse at center, rgba(204,0,51,0.4) 0%, rgba(204,0,51,0.12) 40%, transparent 70%);
  filter: blur(28px);
  pointer-events: none;
  box-shadow: none;
}

/* ---- Parallax elements: compositor hints only on the few movers ---- */
html.js-motion [data-parallax-speed] { will-change: transform; }

/* ---- Why cards: stagger-in once on enter ---- */
html.js-motion [data-reveal]:not(.is-revealed) {
  opacity: 0;
  transform: translate3d(0, var(--reveal-distance), 0);
}
html.js-motion [data-reveal].is-revealing {
  transition:
    opacity var(--reveal-duration) var(--reveal-ease),
    transform var(--reveal-duration) var(--reveal-ease);
}

/* ---- Reduced motion: no parallax / stagger ---- */
@media (prefers-reduced-motion: reduce) {
  html.js-motion [data-parallax-speed] { transform: none !important; will-change: auto; }
  html.js-motion [data-reveal]:not(.is-revealed) { opacity: 1; transform: none; }
}