/*! MRG redesign — scroll-animation engine (CSS layer)
 *  Self-contained, dependency-free. Pairs with anim.js.
 *  Motion vocabulary:
 *    [data-anim]           reveal-on-enter primitives (fade-up | fade | scale | blur-in)
 *    [data-scrolly]        sticky/pinned scrollytelling; anim.js writes --p (0→1)
 *    .mrg-parallax-layer   hero depth layers; anim.js writes --py (px offset)
 *  One ease-out curve for everything (matches styles.css --ease); durations
 *  200–400ms for UI, 600–900ms for hero. All motion is gated on
 *  prefers-reduced-motion at the bottom of this file. */

:root{
  /* Mirror the site token so this file works even if loaded standalone. */
  --mrg-ease: cubic-bezier(.22,.61,.36,1);
  /* Spring reserved for the segmented pill; not used by the primitives here. */
  --mrg-spring: cubic-bezier(.34,1.56,.64,1);
}

/* ============ (1) DATA-ATTRIBUTE REVEAL SYSTEM ============ */
/* Start hidden; anim.js adds .in via IntersectionObserver.
   --d = travel distance (set per element role, defaults below).
   --anim-delay = staggered start (anim.js reads data-anim-delay). */
[data-anim]{
  opacity:0;
  transition:
    opacity .7s var(--mrg-ease),
    transform .7s var(--mrg-ease),
    filter .8s var(--mrg-ease);
  transition-delay: var(--anim-delay, 0ms);
  will-change: opacity, transform;
}
[data-anim].in{
  opacity:1;
  transform:none;
  filter:none;
}

/* fade-up: rise + fade. Distance hierarchy via --d.
   small text 6px · cards/paragraphs 12px · headings 20px · hero/large 24px. */
[data-anim="fade-up"]{ transform: translateY(var(--d, 12px)); }

/* fade: opacity only, no transform (calm, for dense/tabular content). */
[data-anim="fade"]{ transform:none; }

/* scale: gentle scale-in for illustrations / device shots. */
[data-anim="scale"]{ transform: scale(.97); }

/* blur-in: hero headline — blur-to-focus. GPU-friendly (opacity+filter+transform). */
[data-anim="blur-in"]{
  filter: blur(6px);
  transform: translateY(var(--d, 20px));
}

/* Role-based travel-distance defaults (override inline with --d if needed). */
[data-anim][data-role="text"]    { --d: 6px; }
[data-anim][data-role="card"],
[data-anim][data-role="para"]    { --d: 12px; }
[data-anim][data-role="heading"] { --d: 20px; }
[data-anim][data-role="hero"]    { --d: 24px; }

/* Longer, softer timing for hero-scale elements. */
[data-anim][data-role="hero"],
[data-anim="blur-in"]{
  transition-duration: .85s;
}

/* ============ STAGGER GROUPS ============ */
/* Opt a container in with data-stagger; anim.js sets each child's
   --anim-delay = index * step (default 80ms). Children still need
   their own [data-anim] to actually move. */

/* ============ (2) SCROLLYTELLING PROGRESS ============ */
/* anim.js writes --p (0→1) as the element passes through the viewport.
   Consumers read var(--p) for pins, cross-fades, scaled bars, etc.
   Example use in page CSS:
     .scene-fill{ transform: scaleX(var(--p,0)); transform-origin:left; }
     [dir="rtl"] .scene-fill{ transform-origin:right; }
   A sticky child pins while --p advances: */
[data-scrolly]{ position: relative; }
[data-scrolly] > .mrg-pin{
  position: sticky;
  top: var(--mrg-pin-top, 0px);
}

/* ============ (3) HERO PARALLAX LAYERS ============ */
/* anim.js writes --py (a px value) each frame; layer moves slower than
   scroll for depth. Rate is per-layer via data-parallax-rate in JS.
   Composited transform only — no layout thrash. */
.mrg-parallax-layer{
  transform: translate3d(0, var(--py, 0px), 0);
  will-change: transform;
}

/* ============ (4) PREFERS-REDUCED-MOTION FALLBACKS ============ */
/* Everything visible, no transforms, no filters, no parallax. anim.js
   also short-circuits (no observers, no rAF) so --p / --py stay unset. */
@media (prefers-reduced-motion: reduce){
  [data-anim]{
    opacity:1 !important;
    transform:none !important;
    filter:none !important;
    transition:none !important;
  }
  .mrg-parallax-layer{ transform:none !important; }
  [data-scrolly] > .mrg-pin{ position: static; }
}