/* ===== Core ===== */

:root {
    --reveal-duration: 600ms;
    --reveal-delay: 0ms;
    --reveal-distance: 20px;
}


/* Base state: hidden until in view */
[data-anim] {
    opacity: 0;
    will-change: transform, opacity, filter, clip-path;
}

[data-anim].is-inview {
    opacity: 1;
}


/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
    [data-anim] {
        opacity: 1 !important;
        transform: none !important;
        filter: none !important;
        clip-path: none !important;
        animation: none !important;
        transition: none !important;
    }
}


/* Utility to read per-element vars from attributes (set by JS) */
[data-anim] {
    --d: var(--reveal-duration);
    --dl: var(--reveal-delay);
    --e: var(--reveal-ease);
    --dist: var(--reveal-distance);
}


/* ===== Keyframes ===== */
@keyframes fade-in-kf {
    from {
        opacity: 0
    }

    to {
        opacity: 1
    }
}

@keyframes pop-kf {
    0% {
        opacity: 0;
        transform: scale(.92)
    }

    60% {
        opacity: 1;
        transform: scale(1.02)
    }

    100% {
        transform: scale(1)
    }
}

@keyframes zoom-in-kf {
    from {
        opacity: 0;
        transform: scale(.85)
    }

    to {
        opacity: 1;
        transform: scale(1)
    }
}

@keyframes zoom-out-kf {
    from {
        opacity: 0;
        transform: scale(1.15)
    }

    to {
        opacity: 1;
        transform: scale(1)
    }
}

@keyframes tilt-in-kf {
    from {
        opacity: 0;
        transform: perspective(800px) rotateX(8deg) translateY(var(--dist, 24px))
    }

    to {
        opacity: 1;
        transform: none
    }
}

@keyframes flip-up-kf {
    from {
        opacity: 0;
        transform: perspective(800px) rotateX(-90deg)
    }

    to {
        opacity: 1;
        transform: rotateX(0)
    }
}

@keyframes rotate-in-kf {
    from {
        opacity: 0;
        transform: rotate(-8deg) scale(.96)
    }

    to {
        opacity: 1;
        transform: none
    }
}

@keyframes bounce-in-kf {
    0% {
        opacity: 0;
        transform: translateY(20px) scale(.98)
    }

    60% {
        opacity: 1;
        transform: translateY(-6px) scale(1.01)
    }

    100% {
        transform: none
    }
}

@keyframes glow-in-kf {
    from {
        opacity: 0;
        filter: drop-shadow(0 0 0 rgba(0, 0, 0, 0.25))
    }

    to {
        opacity: 1;
        filter: drop-shadow(0 10px 24px rgba(0, 0, 0, .18))
    }
}

@keyframes slide-up-kf {
    from {
        opacity: 0;
        transform: translateY(var(--dist, 24px))
    }

    to {
        opacity: 1;
        transform: none
    }
}

@keyframes slide-down-kf {
    from {
        opacity: 0;
        transform: translateY(calc(var(--dist, 24px) * -1))
    }

    to {
        opacity: 1;
        transform: none
    }
}

@keyframes slide-left-kf {
    from {
        opacity: 0;
        transform: translateX(var(--dist, 24px))
    }

    to {
        opacity: 1;
        transform: none
    }
}

@keyframes slide-right-kf {
    from {
        opacity: 0;
        transform: translateX(calc(var(--dist, 24px) * -1))
    }

    to {
        opacity: 1;
        transform: none
    }
}

@keyframes blur-in-kf {
    from {
        opacity: 0;
        filter: blur(8px)
    }

    to {
        opacity: 1;
        filter: blur(0)
    }
}

@keyframes clip-up-kf {
    from {
        opacity: .001;
        clip-path: inset(100% 0 0 0)
    }

    to {
        opacity: 1;
        clip-path: inset(0 0 0 0)
    }
}

@keyframes mask-right-kf {
    from {
        opacity: .001;
        clip-path: inset(0 100% 0 0)
    }

    to {
        opacity: 1;
        clip-path: inset(0 0 0 0)
    }
}

@keyframes typewriter-kf {
    from {
        opacity: 1;
        clip-path: inset(0 100% 0 0)
    }

    to {
        opacity: 1;
        clip-path: inset(0 0 0 0)
    }
}

@keyframes parallax-up-kf {
    from {
        opacity: 0;
        transform: translateY(10vh)
    }

    to {
        opacity: 1;
        transform: translateY(0)
    }
}


/* ===== Animation bindings (once the .is-inview class is added) ===== */
[data-anim="fade-in"].is-inview {
    animation: fade-in-kf var(--d) var(--e) both;
    animation-delay: var(--dl);
}

[data-anim="pop"].is-inview {
    animation: pop-kf var(--d) var(--e) both;
    animation-delay: var(--dl);
}

[data-anim="zoom-in"].is-inview {
    animation: zoom-in-kf var(--d) var(--e) both;
    animation-delay: var(--dl);
}

[data-anim="zoom-out"].is-inview {
    animation: zoom-out-kf var(--d) var(--e) both;
    animation-delay: var(--dl);
}

[data-anim="tilt-in"].is-inview {
    animation: tilt-in-kf var(--d) var(--e) both;
    animation-delay: var(--dl);
}

[data-anim="flip-up"].is-inview {
    transform-origin: center bottom;
    animation: flip-up-kf var(--d) var(--e) both;
    animation-delay: var(--dl);
}

[data-anim="rotate-in"].is-inview {
    animation: rotate-in-kf var(--d) var(--e) both;
    animation-delay: var(--dl);
}

[data-anim="bounce-in"].is-inview {
    animation: bounce-in-kf var(--d) var(--e) both;
    animation-delay: var(--dl);
}

[data-anim="glow-in"].is-inview {
    animation: glow-in-kf var(--d) var(--e) both;
    animation-delay: var(--dl);
}


[data-anim="fade-up"].is-inview {
    animation: slide-up-kf var(--d) var(--e) both;
    animation-delay: var(--dl);
}

[data-anim="fade-down"].is-inview {
    animation: slide-down-kf var(--d) var(--e) both;
    animation-delay: var(--dl);
}

[data-anim="fade-left"].is-inview {
    animation: slide-left-kf var(--d) var(--e) both;
    animation-delay: var(--dl);
}

[data-anim="fade-right"].is-inview {
    animation: slide-right-kf var(--d) var(--e) both;
    animation-delay: var(--dl);
}


[data-anim="blur-in"].is-inview {
    animation: blur-in-kf var(--d) var(--e) both;
    animation-delay: var(--dl);
}

[data-anim="clip-up"].is-inview {
    animation: clip-up-kf var(--d) var(--e) both;
    animation-delay: var(--dl);
}

[data-anim="mask-right"].is-inview {
    animation: mask-right-kf var(--d) var(--e) both;
    animation-delay: var(--dl);
}

[data-anim="typewriter"].is-inview {
    animation: typewriter-kf var(--d) steps(20, end) both;
    animation-delay: var(--dl);
}


[data-anim="slide-up-lg"].is-inview {
    --dist: 48px;
    animation: slide-up-kf var(--d) var(--e) both;
    animation-delay: var(--dl);
}

[data-anim="slide-left-lg"].is-inview {
    --dist: 48px;
    animation: slide-left-kf var(--d) var(--e) both;
    animation-delay: var(--dl);
}

[data-anim="slide-right-lg"].is-inview {
    --dist: 48px;
    animation: slide-right-kf var(--d) var(--e) both;
    animation-delay: var(--dl);
}

[data-anim="parallax-up"].is-inview {
    animation: parallax-up-kf 900ms var(--e) both;
    animation-delay: var(--dl);
}


/* Stagger children: these target direct children */
[data-anim="stagger-fade-up"].is-inview>* {
    opacity: 0;
    animation: slide-up-kf var(--d) var(--e) both;
}

[data-anim="stagger-pop"].is-inview>* {
    opacity: 0;
    animation: pop-kf var(--d) var(--e) both;
}

[data-anim="stagger-zoom-in"].is-inview>* {
    opacity: 0;
    animation: zoom-in-kf var(--d) var(--e) both;
}

[data-anim="stagger-clip-up"].is-inview>* {
    opacity: 0;
    animation: clip-up-kf var(--d) var(--e) both;
}