/*
 * Reveal animations (pages with ACF "include_reveal_animations"), enqueued only
 * on those pages. Paired with js-static/ampeco-reveal.js.
 *
 * A separate file, not part of app.css, and excluded in the NitroPack dashboard
 * (*ampeco-reveal.css*): NitroPack's remove-unused-CSS would strip
 * .reveal-pending (only JS adds it), and its frozen CSS bundles keep serving old
 * rules after a deploy. Excluded, this file is linked as-is with ?ver=filemtime.
 * Every selector starts with body.reveal_enabled so it outranks the old
 * `.reveal_enabled .reveal_stagger { opacity: 0 }` still inside those bundles.
 *
 * Rule: nothing is hidden unless JS is running and has decided to hide it.
 *  - Load intro: a one-off fade-up on every reveal element, no JS. Above the
 *    fold it is the hero intro; below the fold it plays unseen.
 *  - Scroll reveal: the script marks elements still below the fold
 *    .reveal-pending and releases them as they enter the viewport. No JS,
 *    failed JS, delayed JS: everything stays visible.
 * Not pure CSS view() timelines: .entry-content and many sections are
 * overflow: hidden, so each element's view timeline binds to a wrapper that
 * never scrolls.
 *
 * Below 768px and for reduced motion the animation stays attached but is
 * neutralised through --reveal-on. Never gate the `animation` itself behind a
 * media query: toggling it restarts it, and Chrome's full-page capture
 * re-evaluates media queries mid-shot — it caught the hero at opacity 0.
 */
@property --reveal-on {
  syntax: '<number>';
  inherits: false;
  initial-value: 1;
}

@property --reveal-i {
  syntax: '<number>';
  inherits: false;
  initial-value: 0;
}

@property --reveal-y {
  syntax: '<length>';
  inherits: false;
  initial-value: 100px;
}

@keyframes reveal-in {
  from {
    opacity: calc(1 - var(--reveal-on, 1));
    translate: 0 calc(var(--reveal-on, 1) * var(--reveal-y, 100px));
  }
}

/* power3.out, duration, delay and stagger as in the former GSAP calls. */
body.reveal_enabled .reveal_intro,
body.reveal_enabled .reveal_stagger,
body.reveal_enabled .reveal:not([data-reveal]),
body.reveal_enabled .is-style-white-text-boxes .wp-block-column {
  opacity: 1;
  animation: reveal-in 1.2s cubic-bezier(0.165, 0.84, 0.44, 1) calc(0.2s + var(--reveal-i, 0) * 0.11s) backwards;
}

@media (width < 768px), (prefers-reduced-motion: reduce) {
  body.reveal_enabled .reveal_intro,
  body.reveal_enabled .reveal_stagger,
  body.reveal_enabled .reveal:not([data-reveal]),
  body.reveal_enabled .is-style-white-text-boxes .wp-block-column {
    --reveal-on: 0;
  }
}

/* Set only by the script; removing it restarts the animation above. */
body.reveal_enabled .reveal_intro.reveal-pending,
body.reveal_enabled .reveal_stagger.reveal-pending,
body.reveal_enabled .reveal.reveal-pending:not([data-reveal]),
body.reveal_enabled .is-style-white-text-boxes .wp-block-column.reveal-pending {
  animation: none;
  opacity: 0;
}

body.reveal_enabled .reveal_intro {
  --reveal-y: 400px;
}

body.reveal_enabled .reveal:not([data-reveal]) {
  --reveal-y: 110px;
}

body.reveal_enabled :is(.reveal_intro, .reveal_stagger, .is-style-white-text-boxes .wp-block-column):nth-child(2) { --reveal-i: 1; }
body.reveal_enabled :is(.reveal_intro, .reveal_stagger, .is-style-white-text-boxes .wp-block-column):nth-child(3) { --reveal-i: 2; }
body.reveal_enabled :is(.reveal_intro, .reveal_stagger, .is-style-white-text-boxes .wp-block-column):nth-child(4) { --reveal-i: 3; }
body.reveal_enabled :is(.reveal_intro, .reveal_stagger, .is-style-white-text-boxes .wp-block-column):nth-child(5) { --reveal-i: 4; }
body.reveal_enabled :is(.reveal_intro, .reveal_stagger, .is-style-white-text-boxes .wp-block-column):nth-child(6) { --reveal-i: 5; }