/* Soocialy shared motion helpers - layout stays in each variant's own CSS.
 * Only rules scoped under .motion-ready may hide content (class added by motion.js
 * when GSAP + ScrollTrigger are present and the user has not asked for reduced motion). */

/* Lenis (desktop pointer only) */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }

/* Dust canvas: fills its position:relative parent, never intercepts input.
 * Put the parent's own content in a layer with position:relative; z-index:1. */
canvas[data-dust] {
  position: absolute; inset: 0; width: 100%; height: 100%;
  display: block; pointer-events: none; z-index: 0;
}

/* Pre-reveal state (opacity only - blur/translate are applied inline by GSAP) */
.motion-ready [data-reveal]:not([data-reveal-stagger]),
.motion-ready [data-reveal-stagger] > * { opacity: 0; }
/* Inside a pinned stage the timeline owns visibility - never hide there */
.motion-ready .is-pinned [data-reveal], .motion-ready .is-pinned [data-reveal-stagger] > * { opacity: 1; }

/* Pinned 3D stage - desktop + data-motion="full" only (classes added by motion.js).
 * Steps are stacked in one grid cell so a heading above them keeps its place. */
.motion-ready [data-pin].is-pinned { position: relative; min-height: 100vh; overflow: hidden; }
.motion-ready .motion-stage { display: grid; perspective: 1200px; transform-style: preserve-3d; }
.motion-ready .motion-stage > [data-pin-step] { grid-area: 1 / 1; backface-visibility: hidden; }

/* Counters: stable digit width while counting */
[data-count] { font-variant-numeric: tabular-nums; }

/* Hover effects need their own compositing layer */
.motion-ready [data-tilt], .motion-ready [data-magnetic] { transform-style: preserve-3d; }

/* Reduced motion: everything visible and static, no dust */
@media (prefers-reduced-motion: reduce) {
  .motion-ready [data-reveal], .motion-ready [data-reveal-stagger] > *,
  .motion-ready [data-pin-step] { opacity: 1 !important; filter: none !important; transform: none !important; }
  canvas[data-dust] { display: none; }
}