/* ================================================================
   HOMEPAGE V2 — LOAD-TIME ANIMATIONS
   Extracted from homepage-v2.css so each block can be toggled
   independently for NO_LCP diagnostics (?nocss=oz-homepage-v2-animations).

   Only rules that RUN at page load live here:
     - S03 trust bar marquee (declared on .is-running only)
     - Scroll-reveal state for .oz-hp [data-reveal] / [data-reveal-stagger]

   Hover transitions (e.g. card :hover { transform }) stay in
   homepage-v2.css — they don't fire at load and don't affect LCP.
   ================================================================ */

/* ── S03 — Trust bar marquee ──
   Animation shorthand is declared only on .is-running so Chromium's
   LCP scanner doesn't see an active infinite animation at page load.
   JS (homepage-v2.js) adds .is-running via requestIdleCallback. */
.oz-hp-trust-track.is-running {
  animation: oz-hp-marquee 30s linear infinite;
}

@media (prefers-reduced-motion: reduce) {
  .oz-hp-trust-track {
    animation: none;
  }
}

@keyframes oz-hp-marquee {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

/* ================================================================
   SCROLL REVEAL ANIMATIONS
   Sections start invisible + shifted, then animate in when visible.
   JS adds .is-visible via IntersectionObserver.
   ================================================================ */

/* All non-hero sections: fade + slide up on reveal.
   Start opacity at 0.0001 (not 0) to avoid the Chromium NO_LCP bug —
   see oz-animations.css for the full explanation. */
.oz-hp [data-reveal] {
  opacity: 0.0001;
  transform: translateY(14px);
  transition: opacity .45s cubic-bezier(.22, 1, .36, 1),
              transform .45s cubic-bezier(.22, 1, .36, 1);
}

.oz-hp [data-reveal].is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Staggered children: product cards, step items, ruimtes cards */
.oz-hp [data-reveal-stagger] > * {
  opacity: 0.0001;
  transform: translateY(10px);
  transition: opacity .4s cubic-bezier(.22, 1, .36, 1),
              transform .4s cubic-bezier(.22, 1, .36, 1);
}

.oz-hp [data-reveal-stagger].is-visible > * {
  opacity: 1;
  transform: translateY(0);
}

/* Tight 50ms cascade. Eight children land in ~750ms total, still
   subtle enough not to feel like a wave but distinct per-card. */
.oz-hp [data-reveal-stagger].is-visible > *:nth-child(1) { transition-delay: 0s; }
.oz-hp [data-reveal-stagger].is-visible > *:nth-child(2) { transition-delay: .05s; }
.oz-hp [data-reveal-stagger].is-visible > *:nth-child(3) { transition-delay: .10s; }
.oz-hp [data-reveal-stagger].is-visible > *:nth-child(4) { transition-delay: .15s; }
.oz-hp [data-reveal-stagger].is-visible > *:nth-child(5) { transition-delay: .20s; }
.oz-hp [data-reveal-stagger].is-visible > *:nth-child(6) { transition-delay: .25s; }
.oz-hp [data-reveal-stagger].is-visible > *:nth-child(7) { transition-delay: .30s; }
.oz-hp [data-reveal-stagger].is-visible > *:nth-child(8) { transition-delay: .35s; }

/* Respect prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {
  .oz-hp [data-reveal],
  .oz-hp [data-reveal-stagger] > * {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}