/* Scroll reveal base logic */
:root {
    --scroll-reveal-default-duration: 600ms;
    --scroll-reveal-default-ease: cubic-bezier(0.2, 0.8, 0.2, 1);
}

[data-reveal] {
    --reveal-delay: 0ms;
    --reveal-duration: var(--scroll-reveal-default-duration);
    --reveal-ease: var(--scroll-reveal-default-ease);
    --scroll-parallax: translateY(0);
    will-change: opacity, transform;
}

.reveal-init {
    opacity: 0;
    transform: var(--reveal-init-transform, translateY(24px)) var(--scroll-parallax, translateY(0));
    transition:
        transform var(--reveal-duration) var(--reveal-ease) var(--reveal-delay),
        opacity var(--reveal-duration) var(--reveal-ease) var(--reveal-delay);
}

.reveal-visible {
    opacity: 1;
    transform: var(--reveal-visible-transform, translateY(0)) var(--scroll-parallax, translateY(0));
}

[data-reveal="fade"] {
    --reveal-init-transform: translateY(0);
}

[data-reveal="up"] {
    --reveal-init-transform: translateY(24px);
}

[data-reveal="down"] {
    --reveal-init-transform: translateY(-24px);
}

[data-reveal="left"] {
    --reveal-init-transform: translateX(-24px);
}

[data-reveal="right"] {
    --reveal-init-transform: translateX(24px);
}

[data-reveal="zoom"] {
    --reveal-init-transform: scale(0.92);
    --reveal-visible-transform: translateY(0) scale(1);
}

[data-parallax] {
    will-change: transform;
    --scroll-parallax: translateY(0);
}

[data-parallax]:not([data-reveal]) {
    transform: var(--scroll-parallax, translateY(0));
}

@media (prefers-reduced-motion: reduce) {
    .reveal-init,
    .reveal-visible {
        transition: none !important;
    }
}