/**
 * Scroll Reveal Animations (opt-in)
 *
 * Only elements that carry [data-reveal] ever animate, and only once
 * assets/js/scroll-reveal.js has set data-reveal-ready on <html>. Without
 * the script, with scripting off, or with reduced motion asked for, nothing
 * is hidden: the hidden start state exists only under all three conditions.
 * A bare .section is never hidden (that blanked the stack's pages, #61).
 *
 * Variants:
 *   data-reveal="fade"      - Fade in
 *   data-reveal="fade-up"   - Fade in from below
 *   data-reveal="fade-down" - Fade in from above
 *   data-reveal="fade-left" - Fade in from right
 *   data-reveal="fade-right"- Fade in from left
 *   data-reveal="scale"     - Scale up
 *   data-reveal="blur"      - Blur to focus
 *
 * Timing:
 *   data-reveal-delay="100" - Delay in ms (100, 200, 300, 400, 500)
 *   data-reveal-duration="slow" - Duration (fast, normal, slow)
 *   data-reveal-stagger on a parent staggers its [data-reveal] children
 */

@layer components {
  @media (prefers-reduced-motion: no-preference) {
    /* Hidden start state: the script is running and the element has not
       been revealed yet. */
    /* Headlines never animate in. A bare data-reveal rises 12px and fades. */
    :root[data-reveal-ready] [data-reveal]:not(.revealed, [data-revealed], h1, h2, h3, .display, .hero__headline) {
      opacity: 0;
    }

    :root[data-reveal-ready] [data-reveal=""]:not(.revealed, [data-revealed], h1, h2, h3, .display, .hero__headline) {
      translate: 0 12px;
    }

    :root[data-reveal-ready] [data-reveal="fade-up"]:not(.revealed, [data-revealed]) {
      transform: translateY(2rem);
    }

    :root[data-reveal-ready] [data-reveal="fade-down"]:not(.revealed, [data-revealed]) {
      transform: translateY(-2rem);
    }

    :root[data-reveal-ready] [data-reveal="fade-left"]:not(.revealed, [data-revealed]) {
      transform: translateX(2rem);
    }

    :root[data-reveal-ready] [data-reveal="fade-right"]:not(.revealed, [data-revealed]) {
      transform: translateX(-2rem);
    }

    :root[data-reveal-ready] [data-reveal="scale"]:not(.revealed, [data-revealed]) {
      transform: scale(0.95);
    }

    :root[data-reveal-ready] [data-reveal="blur"]:not(.revealed, [data-revealed]) {
      filter: blur(8px);
    }

    [data-reveal] {
      transition:
        opacity var(--reveal-duration, var(--duration-slow)) var(--reveal-easing, var(--ease-settle)),
        translate var(--reveal-duration, var(--duration-slow)) var(--reveal-easing, var(--ease-settle)),
        transform var(--reveal-duration, var(--duration-slow)) var(--reveal-easing, var(--ease-settle)),
        filter var(--reveal-duration, var(--duration-slow)) var(--reveal-easing, var(--ease-settle));
    }

    /* While the script switches the page to ready, below-the-fold content
       goes to its hidden start state at once instead of fading out. */
    [data-reveal-init] [data-reveal] {
      transition: none;
    }

    /* A sideways start position adds 2rem of horizontal overflow until the
       element is revealed, so a phone could scroll sideways (services
       template: 32px at every width up to 1024px). Sections holding one clip
       it; clip, unlike hidden, leaves vertical overflow and sticky alone. */
    .section:has([data-reveal="fade-left"], [data-reveal="fade-right"]) {
      overflow-x: clip;
    }

    /* Delays */
    [data-reveal-delay="100"] { transition-delay: 100ms; }
    [data-reveal-delay="200"] { transition-delay: 200ms; }
    [data-reveal-delay="300"] { transition-delay: 300ms; }
    [data-reveal-delay="400"] { transition-delay: 400ms; }
    [data-reveal-delay="500"] { transition-delay: 500ms; }

    /* Durations */
    [data-reveal-duration="fast"] { --reveal-duration: var(--duration-fast); }
    [data-reveal-duration="normal"] { --reveal-duration: var(--duration-slow); }
    [data-reveal-duration="slow"] { --reveal-duration: var(--duration-slower); }

    /* Stagger children - useful for grids and lists */
    [data-reveal-stagger] > [data-reveal]:nth-child(1) { transition-delay: calc(var(--reveal-stagger, 100ms) * 0); }
    [data-reveal-stagger] > [data-reveal]:nth-child(2) { transition-delay: calc(var(--reveal-stagger, 100ms) * 1); }
    [data-reveal-stagger] > [data-reveal]:nth-child(3) { transition-delay: calc(var(--reveal-stagger, 100ms) * 2); }
    [data-reveal-stagger] > [data-reveal]:nth-child(4) { transition-delay: calc(var(--reveal-stagger, 100ms) * 3); }
    [data-reveal-stagger] > [data-reveal]:nth-child(5) { transition-delay: calc(var(--reveal-stagger, 100ms) * 4); }
    [data-reveal-stagger] > [data-reveal]:nth-child(6) { transition-delay: calc(var(--reveal-stagger, 100ms) * 5); }
    [data-reveal-stagger] > [data-reveal]:nth-child(7) { transition-delay: calc(var(--reveal-stagger, 100ms) * 6); }
    [data-reveal-stagger] > [data-reveal]:nth-child(8) { transition-delay: calc(var(--reveal-stagger, 100ms) * 7); }
  }
}