/* ============================================================
   ANIMATION VARIANT A — "Restrained"
   Hero entrance on page load, plus a light fade-in on each
   section's intro text (eyebrow/heading/paragraph) as it scrolls
   into view. Sections, cards, and steps themselves are NOT
   animated — no whole-block slide/fade, so images and product
   mockups are simply always there. The text trigger fires well
   before it reaches the viewport (see reveal.js's rootMargin) and
   resolves in well under half a second, so normal or fast
   scrolling can't outrun it and land on blank text.
   ============================================================ */

/* Scoped under html.reveal-ready, a class an inline bootstrap script adds
   before paint. If JS is disabled or blocked, that class never appears,
   these rules never apply, and the hero renders fully visible immediately
   — motion is strictly additive, never a dependency for seeing content. */

html.reveal-ready [data-reveal="hero-1"],
html.reveal-ready [data-reveal="hero-2"],
html.reveal-ready [data-reveal="hero-3"],
html.reveal-ready [data-reveal="hero-4"] {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.55s ease-out, transform 0.55s ease-out;
}
html.reveal-ready.is-loaded [data-reveal="hero-1"] { opacity: 1; transform: none; transition-delay: 0ms; }
html.reveal-ready.is-loaded [data-reveal="hero-2"] { opacity: 1; transform: none; transition-delay: 110ms; }
html.reveal-ready.is-loaded [data-reveal="hero-3"] { opacity: 1; transform: none; transition-delay: 220ms; }
html.reveal-ready.is-loaded [data-reveal="hero-4"] { opacity: 1; transform: none; transition-delay: 320ms; }

html.reveal-ready [data-reveal="text"] {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.55s ease-out, transform 0.55s ease-out;
}
html.reveal-ready [data-reveal="text"].is-visible { opacity: 1; transform: none; }

/* prefers-reduced-motion: reveal.js adds .reveal-reduced instead of .reveal-ready */
html.reveal-reduced [data-reveal] {
  opacity: 1 !important;
  transform: none !important;
  transition: none !important;
}