/* =========================================================
   SCROLL REVEAL SYSTEM
   Reusable viewport entrance animations
   ========================================================= */


/*--------------------------------------------------
JavaScript-Safe Initialization
--------------------------------------------------*/

/*
Add this script as early as possible inside <head>:

<script>
    document.documentElement.classList.add("js");
</script>

Content remains visible when JavaScript is disabled or fails.
*/

.js .reveal {
    opacity: 0;
}


/*--------------------------------------------------
Base Reveal
--------------------------------------------------*/

.reveal {
    --reveal-duration: 720ms;
    --reveal-delay: 0ms;
    --reveal-ease: cubic-bezier(0.22, 1, 0.36, 1);

    transition:
        opacity var(--reveal-duration) var(--reveal-ease)
        var(--reveal-delay),
        transform var(--reveal-duration) var(--reveal-ease)
        var(--reveal-delay),
        filter var(--reveal-duration) var(--reveal-ease)
        var(--reveal-delay);

    will-change: opacity, transform, filter;
    backface-visibility: hidden;
}

.reveal.is-visible {
    opacity: 1;
    transform: none;
    filter: none;
}


/*--------------------------------------------------
Reveal Directions
--------------------------------------------------*/

.reveal--up {
    transform: translateY(32px);
}

.reveal--down {
    transform: translateY(-32px);
}

.reveal--left {
    transform: translateX(42px);
}

.reveal--right {
    transform: translateX(-42px);
}


/*--------------------------------------------------
Fade Reveal
--------------------------------------------------*/

.reveal--fade {
    transform: none;
}


/*--------------------------------------------------
Soft Scale Reveal
--------------------------------------------------*/

.reveal--scale {
    transform: scale(0.96);
}


/*--------------------------------------------------
Blur Reveal
--------------------------------------------------*/

.reveal--blur {
    transform: translateY(20px);
    filter: blur(8px);
}


/*--------------------------------------------------
Elegant Combined Reveals
--------------------------------------------------*/

.reveal--up-scale {
    transform: translateY(28px) scale(0.97);
}

.reveal--left-scale {
    transform: translateX(36px) scale(0.98);
}

.reveal--right-scale {
    transform: translateX(-36px) scale(0.98);
}


/*--------------------------------------------------
Rotate Reveal
--------------------------------------------------*/

.reveal--rotate {
    transform: translateY(28px) rotate(-4deg);
}


/*--------------------------------------------------
Image Reveal
--------------------------------------------------*/

.image-reveal {
    overflow: hidden;
}

.image-reveal img {
    --image-reveal-duration: 1000ms;
    --image-reveal-delay: 0ms;
    --image-reveal-ease: cubic-bezier(0.22, 1, 0.36, 1);

    opacity: 0;
    transform: scale(1.08);

    transition:
        opacity 900ms var(--image-reveal-ease)
        var(--image-reveal-delay),
        transform var(--image-reveal-duration)
        var(--image-reveal-ease)
        var(--image-reveal-delay);

    will-change: opacity, transform;
    backface-visibility: hidden;
}

.image-reveal.is-visible img {
    opacity: 1;
    transform: scale(1);
}


/*--------------------------------------------------
Reveal Speeds
--------------------------------------------------*/

.reveal--fast {
    --reveal-duration: 520ms;
}

.reveal--slow {
    --reveal-duration: 950ms;
}

.image-reveal--fast img {
    --image-reveal-duration: 720ms;
}

.image-reveal--slow img {
    --image-reveal-duration: 1250ms;
}


/*--------------------------------------------------
Reveal Delays
--------------------------------------------------*/

.reveal-delay-1 {
    --reveal-delay: 80ms;
}

.reveal-delay-2 {
    --reveal-delay: 160ms;
}

.reveal-delay-3 {
    --reveal-delay: 240ms;
}

.reveal-delay-4 {
    --reveal-delay: 320ms;
}

.reveal-delay-5 {
    --reveal-delay: 400ms;
}

.reveal-delay-6 {
    --reveal-delay: 480ms;
}

.reveal-delay-7 {
    --reveal-delay: 560ms;
}

.reveal-delay-8 {
    --reveal-delay: 640ms;
}


/* Image Delays */

.image-reveal.reveal-delay-1 img {
    --image-reveal-delay: 80ms;
}

.image-reveal.reveal-delay-2 img {
    --image-reveal-delay: 160ms;
}

.image-reveal.reveal-delay-3 img {
    --image-reveal-delay: 240ms;
}

.image-reveal.reveal-delay-4 img {
    --image-reveal-delay: 320ms;
}

.image-reveal.reveal-delay-5 img {
    --image-reveal-delay: 400ms;
}

.image-reveal.reveal-delay-6 img {
    --image-reveal-delay: 480ms;
}

.image-reveal.reveal-delay-7 img {
    --image-reveal-delay: 560ms;
}

.image-reveal.reveal-delay-8 img {
    --image-reveal-delay: 640ms;
}


/*--------------------------------------------------
Reduced Motion
--------------------------------------------------*/

@media (prefers-reduced-motion: reduce) {

    html {
        scroll-behavior: auto;
    }

    .reveal,
    .image-reveal img {
        opacity: 1;
        transform: none;
        filter: none;
        transition: none;
        animation: none;
        will-change: auto;
    }

}