/*
 * Theme addition: scroll animations and page fade (inc/animations.php, Settings → General → Animations).
 *
 * Enqueued on its own (not imported in main.css) and only when Animations is On. Joins the components layer.
 *
 * - [data-reveal]: set by assets/js/animations.js on content below the first screen. Hidden and 16px low until
 *   .is-revealed; --reveal-delay staggers grid items. The script removes both once the move has finished.
 * - Page fade: View Transitions for same-site page loads (Chrome, Edge, Safari; others load normally). The
 *   header is its own group, so it stays still while the page under it fades.
 *
 * Tokens: --reveal-distance (16px), --reveal-duration (600ms), --reveal-ease.
 */

@layer components {
  @media (prefers-reduced-motion: no-preference) {
    /* Hidden at once (no transition), so marking an item never fades it out first. */
    [data-reveal] {
      opacity: 0;
      translate: 0 var(--reveal-distance, 16px);
    }

    /* Only the way in is animated. */
    [data-reveal].is-revealed {
      opacity: 1;
      translate: 0 0;
      transition:
        opacity var(--reveal-duration, 600ms) var(--reveal-ease, ease-out),
        translate var(--reveal-duration, 600ms) var(--reveal-ease, cubic-bezier(0.2, 0.7, 0.2, 1));
      transition-delay: var(--reveal-delay, 0ms);
    }
  }

  @media print {
    [data-reveal] {
      opacity: 1 !important;
      translate: none !important;
    }
  }
}

@media (prefers-reduced-motion: no-preference) {
  @view-transition {
    navigation: auto;
  }

  .nav_wrap {
    view-transition-name: site-header;
  }
}