/* ==========================================================================
   scroll-reveal.css
   Unifies and upgrades the on-scroll reveal motion across every page so
   content glides in smoothly (slide up + fade + soft blur) with a gentle
   stagger, instead of the old flat quick fade.

   Why it is built this way:
   - Several components hard-lock `transform` with `!important` (e.g. the
     service cards, for their hover lift) and set their own short `transition`.
     Animating `transform`/`transition` therefore fights the cascade.
   - So the entrance rides on the INDEPENDENT `translate` property (which
     nothing in this codebase locks) and is driven by a keyframe ANIMATION
     (which ignores each component's own `transition`). This composes cleanly
     with hover transforms and can't be blocked by `transform: none`.

   Safe by construction:
   - Reveal targets are already hidden from first paint by each page's own
     CSS (.reveal{opacity:0}) / the motion-ready guards, so there is no flash.
   - The revealed state resolves to fully visible even if the animation is
     unsupported, so nothing can get stuck invisible.
   - The sticky header and mini footer are excluded from the hidden state.
   Loaded LAST on every page.
   ========================================================================== */

@keyframes srReveal {
  from { opacity: 0; translate: 0 40px; filter: blur(4px); }
  to   { opacity: 1; translate: none;   filter: none; }
}

/* --------------------------------------------------------------------------
   Resting hidden state (matches the animation's first frame) so revealing
   never jumps. Covers all three reveal systems used across the site.
   -------------------------------------------------------------------------- */
.reveal:not(.in):not(.site-header):not(.mini-site-footer),
.unified-motion-ready .unified-reveal:not(.unified-visible),
.reveal-ready .scroll-reveal:not(.is-visible) {
  opacity: 0;
  translate: 0 40px;
  filter: blur(4px);
}

/* --------------------------------------------------------------------------
   Revealed state: play the entrance and hold the final frame. The final
   values are also set as plain declarations so content is guaranteed visible
   even where the animation can't run (old browsers / reduced motion).
   -------------------------------------------------------------------------- */
.reveal.in:not(.site-header),
.unified-reveal.unified-visible:not(.site-header),
.scroll-reveal.is-visible:not(.site-header) {
  opacity: 1;
  translate: none;
  filter: none;
  animation: srReveal .9s cubic-bezier(.22, 1, .36, 1) both;
  animation-delay: var(--reveal-delay, var(--unified-delay, 0ms));
  will-change: opacity, translate, filter;
}

/* --------------------------------------------------------------------------
   Reduced motion: show everything immediately, no movement.
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .reveal,
  .unified-reveal,
  .scroll-reveal,
  .reveal.in,
  .unified-reveal.unified-visible,
  .scroll-reveal.is-visible {
    animation: none !important;
    translate: none !important;
    filter: none !important;
    opacity: 1 !important;
  }
}

/* ==========================================================================
   Authoritative native-scroll guard (must win over the many per-page
   !important html/body overflow/height rules that otherwise make BODY a
   scroll container and break the sticky header on mobile). `:root` and
   `:root > body` out-specify plain element selectors, and this file loads
   last. The document/viewport owns vertical scroll; horizontal decoration
   is clipped without creating a scroll container.
   ========================================================================== */
:root {
  overflow-x: clip !important;
  overflow-y: visible !important;
  height: auto !important;
  min-height: 100% !important;
  max-height: none !important;
  position: static !important;
}

:root > body {
  overflow-x: clip !important;
  overflow-y: visible !important;
  height: auto !important;
  min-height: 100% !important;
  max-height: none !important;
  position: static !important;
}