/* animations.css — centralized reveal system
 *
 * Reference behavior (measured):
 *   Trigger:  IntersectionObserver, threshold 0.15, rootMargin 0 0 -10% 0
 *   Variant:  fade-up (reference uses data-aos="fade-up", ease-in-out)
 *   Duration: 0.6s   Delay: 0 / 200ms / 400ms stagger   Repeat: once
 *   Initial:  opacity 0, translateY(40px)   Final: opacity 1, translateY(0)
 */

[data-reveal] {
    opacity: 0;
    transition:
        opacity var(--reveal-duration) var(--reveal-ease),
        transform var(--reveal-duration) var(--reveal-ease),
        clip-path var(--reveal-duration) var(--reveal-ease);
    transition-delay: var(--reveal-delay);
}

[data-reveal="fade"] {
    transform: none;
}

[data-reveal="up"] {
    transform: translateY(var(--reveal-distance));
}

[data-reveal="down"] {
    transform: translateY(calc(-1 * var(--reveal-distance)));
}

/* direction = the side the element comes FROM */
[data-reveal="left"] {
    transform: translateX(calc(-1 * var(--reveal-distance)));
}

[data-reveal="right"] {
    transform: translateX(var(--reveal-distance));
}

[data-reveal="scale"] {
    transform: scale(0.94);
}

[data-reveal="image"] {
    clip-path: inset(0% 0% 100% 0%);
    opacity: 1;
}

[data-reveal="text"] {
    transform: translateY(32px);
}

[data-reveal].is-visible {
    opacity: 1;
    transform: none;
    clip-path: inset(0% 0% 0% 0%);
}

/* Stagger container: children delay in 200ms steps on top of the base delay */
[data-reveal-stagger] > [data-reveal]:nth-child(1) { transition-delay: var(--reveal-delay); }
[data-reveal-stagger] > [data-reveal]:nth-child(2) { transition-delay: calc(var(--reveal-delay) + 200ms); }
[data-reveal-stagger] > [data-reveal]:nth-child(3) { transition-delay: calc(var(--reveal-delay) + 400ms); }
[data-reveal-stagger] > [data-reveal]:nth-child(4) { transition-delay: calc(var(--reveal-delay) + 600ms); }

/* Explicit per-element delay (added to the base delay) */
[data-reveal-delay="200"] { transition-delay: calc(var(--reveal-delay) + 200ms); }
[data-reveal-delay="400"] { transition-delay: calc(var(--reveal-delay) + 400ms); }

/* Hero entrance on page load (reference: content fades up once on load) */
@keyframes hero-enter {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: none;
    }
}

/* Only the hero image animates on load; the title and intro are scroll reveals
   (reference: image fills the first view, text slides up as you scroll) */
.hero__figure {
    animation: hero-enter 0.8s var(--reveal-ease) both;
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }

    [data-reveal] {
        opacity: 1;
        transform: none;
        clip-path: none;
    }
}