/* ================================================================
   OZ ANIMATIONS — Unified scroll-reveal system
   Theme-level. Loaded on all frontend pages.
   JS (oz-animations.js) adds .oz-visible via IntersectionObserver.
   
   Three reveal types:
     [data-reveal]         — fade + slide up (sections, headings, blocks)
     [data-reveal-stagger] — children animate in sequence (cards, columns)
     [data-reveal-img]     — clip-path + scale reveal (images)
   ================================================================ */

/* ── Fade + slide up ──
   NOTE: start opacity at 0.0001 instead of 0 to avoid the documented
   Chromium LCP bug (lighthouse#10869 / renaissance-design article).
   Fully invisible elements (opacity:0) cause Chrome's LCP scanner to
   ignore the page and emit NO_LCP. A tiny non-zero value is
   imperceptible to users but keeps the element visible to the LCP
   scanner, preventing the bug while preserving the fade-in look. */
[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);
}

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

/* ── Staggered children ── */
[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);
}

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

/* Cascading delays — tight 50ms steps so the last child still
   lands within ~750ms of the trigger, even with 8 siblings. */
[data-reveal-stagger].oz-visible > *:nth-child(1) { transition-delay: 0s; }
[data-reveal-stagger].oz-visible > *:nth-child(2) { transition-delay: .05s; }
[data-reveal-stagger].oz-visible > *:nth-child(3) { transition-delay: .10s; }
[data-reveal-stagger].oz-visible > *:nth-child(4) { transition-delay: .15s; }
[data-reveal-stagger].oz-visible > *:nth-child(5) { transition-delay: .20s; }
[data-reveal-stagger].oz-visible > *:nth-child(6) { transition-delay: .25s; }
[data-reveal-stagger].oz-visible > *:nth-child(7) { transition-delay: .30s; }
[data-reveal-stagger].oz-visible > *:nth-child(8) { transition-delay: .35s; }

/* ── Image clip-path reveal ── */
[data-reveal-img] {
  overflow: hidden;
  border-radius: var(--oz-radius-lg, 12px);
  clip-path: inset(4% 4% 4% 4% round 12px);
  transition: clip-path .6s cubic-bezier(.22, 1, .36, 1);
}

[data-reveal-img].oz-visible {
  clip-path: inset(0% 0% 0% 0% round 12px);
}

[data-reveal-img] img {
  transform: scale(1.04);
  transition: transform .8s cubic-bezier(.22, 1, .36, 1);
}

[data-reveal-img].oz-visible img {
  transform: scale(1);
}

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