/* ============================================================
   components/reveal.css — scroll-reveal (the core motion pattern)
   Opt in with [data-dd-reveal] (single element) or wrap a group in
   [data-dd-reveal] and tag each child .dd-reveal for a staggered
   entrance. components.js adds .is-visible on intersection.

   No-JS / reduced-motion SAFE: content is visible by default and only
   hidden once components.js flags the document with .dd-js — so a failed
   or absent script never leaves content invisible. First consumer: P4
   home; shared with P5 service pages onward. Token-driven; gated by
   prefers-reduced-motion.
   ============================================================ */

.dd-reveal {
  transition: opacity var(--dur-slow) var(--ease-dreamy),
              transform var(--dur-slow) var(--ease-dreamy);
}

/* Hidden initial state applies ONLY when JS is live (see components.js
   adding .dd-js). Fade + a gentle rise (design-language §5: 16–28px). */
html.dd-js .dd-reveal {
  opacity: 0;
  transform: translateY(22px);
  will-change: opacity, transform;
}

/* Revealed: directly (single) or via an intersecting group container. */
html.dd-js .dd-reveal.is-visible,
html.dd-js .is-visible > .dd-reveal {
  opacity: 1;
  transform: none;
}

/* Staggered children within a revealed group (the dot-by-dot cadence). */
html.dd-js .is-visible > .dd-reveal:nth-child(2) { transition-delay: 70ms; }
html.dd-js .is-visible > .dd-reveal:nth-child(3) { transition-delay: 140ms; }
html.dd-js .is-visible > .dd-reveal:nth-child(4) { transition-delay: 210ms; }
html.dd-js .is-visible > .dd-reveal:nth-child(5) { transition-delay: 280ms; }
html.dd-js .is-visible > .dd-reveal:nth-child(6) { transition-delay: 350ms; }

@media (prefers-reduced-motion: reduce) {
  html.dd-js .dd-reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
}