/* ------------------------------------------------------------------
   Entrance reveals — CSS-native replacement for the Webflow IX2
   opacity gate that was blocking hero LCP.

   This is a load-timing fix only: the look and timing intentionally
   match the previous IX2 entrance animations (hero = fade + 40px rise,
   below-the-fold = fade in on scroll). No visual or behavioral change.
   ------------------------------------------------------------------ */

/* Hero page-load choreography — faithful CSS-native reproduction of the
   Webflow IX2 "Into View - Hero A" interaction (actionList a-16). It fires
   on first paint with no JS gate. Timings/easing match the original 1:1:
     - section height  97vh -> 85vh (auto+min-height:85vh)  delay 1300ms / 1000ms
     - block opacity   0 -> 1                                delay 1300ms / 1000ms
     - hero-a rise     40px -> 0                             delay 1300ms / 1500ms
   i.e. the container shrinks, then the text fades and rises in.

   The background video is intentionally NOT faded (Webflow faded it 350ms
   -> 1350ms): it is the LCP element, so it paints immediately (poster is
   preloaded with fetchpriority=high in <head>). */
.section-hero-a { animation: dd-hero-shrink 1000ms ease 1300ms both; }
.block-hero-a   { animation: dd-hero-fade   1000ms ease 1300ms both; }
.hero-a         { animation: dd-hero-rise   1500ms ease 1300ms both; }

@keyframes dd-hero-shrink {
  from { height: 97vh; }
  to   { height: 85vh; }
}
@keyframes dd-hero-fade {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes dd-hero-rise {
  from { transform: translate3d(0, 40px, 0); }
  to   { transform: translate3d(0, 0, 0); }
}

/* Below-the-fold: fade in when scrolled into view.

   The `.reveal-ready` gate is added to <html> by a tiny inline script
   BEFORE first paint. With JS enabled, elements start hidden and fade
   in via IntersectionObserver. With JS disabled the gate never applies,
   so content stays fully visible — no permanently-invisible sections. */
.reveal-ready .reveal {
  opacity: 0;
  transition: opacity 0.6s ease;
  will-change: opacity;
}
.reveal-ready .reveal.is-visible {
  opacity: 1;
}

/* Subtle stagger for the services grid, matching the original cadence. */
.reveal-ready .grid-4-columns .reveal:nth-child(2) { transition-delay: 0.08s; }
.reveal-ready .grid-4-columns .reveal:nth-child(3) { transition-delay: 0.16s; }
.reveal-ready .grid-4-columns .reveal:nth-child(4) { transition-delay: 0.24s; }

@media (prefers-reduced-motion: reduce) {
  .section-hero-a,
  .block-hero-a,
  .hero-a { animation: none; }
  .reveal-ready .reveal { opacity: 1; transition: none; }
}