﻿/* =========================================================
   SCROLL REVEAL ANIMATIONS
   ========================================================= */

/* Base state */
.reveal {
    opacity: 0;
    visibility: hidden;
    transition: opacity 1.2s ease, transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
    transition-delay: var(--reveal-delay, 0s);
    will-change: opacity, transform;
}

    /* Visible state */
    .reveal.is-visible {
        opacity: 1;
        visibility: visible;
        transform: translate3d(0, 0, 0) scale(1);
    }


/* ---------------------------------------------------------
   DIRECTIONS
   --------------------------------------------------------- */

/* Slide from top/down */
.reveal-down {
    transform: translate3d(0, -100px, 0);
}

/* Slide from bottom/up */
.reveal-up {
    transform: translate3d(0, 100px, 0);
}

/* Slide from left */
.reveal-left {
    transform: translate3d(-130px, 0, 0);
}

/* Slide from right */
.reveal-right {
    transform: translate3d(130px, 0, 0);
}


/* ---------------------------------------------------------
   OTHER EFFECTS
   --------------------------------------------------------- */

.reveal-fade {
    transform: none;
}

.reveal-zoom {
    transform: scale(0.88);
}

    .reveal-zoom.is-visible {
        transform: scale(1);
    }

.reveal-rotate {
    transform: translate3d(0, 40px, 0) rotate(3deg);
}


/* ---------------------------------------------------------
   TEXT ANIMATIONS
   --------------------------------------------------------- */

.reveal-text {
    opacity: 0;
    visibility: hidden;
    transform: translate3d(0, 25px, 0);
    transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
    transition-delay: var(--reveal-delay, 0s);
}

    .reveal-text.is-visible {
        opacity: 1;
        visibility: visible;
        transform: translate3d(0, 0, 0);
    }


/* Text coming from left */

.reveal-text-left {
    opacity: 0;
    visibility: hidden;
    transform: translate3d(-40px, 0, 0);
    transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}

    .reveal-text-left.is-visible {
        opacity: 1;
        visibility: visible;
        transform: translate3d(0, 0, 0);
    }


/* ---------------------------------------------------------
   STAGGER ANIMATION
   Add .reveal-stagger to parent
   --------------------------------------------------------- */

.reveal-stagger > * {
    --reveal-delay: 0s;
}


/* ---------------------------------------------------------
   OPTIONAL HOVER FEEL FOR REVEALED CARDS
   --------------------------------------------------------- */

.reveal-card {
    transition: opacity 0.8s ease, transform 0.8s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.3s ease;
}

    .reveal-card.is-visible:hover {
        transform: translateY(-6px);
    }


/* ---------------------------------------------------------
   REDUCED MOTION
   --------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {

    .reveal,
    .reveal-text,
    .reveal-text-left,
    .reveal-card {
        opacity: 1;
        visibility: visible;
        transform: none !important;
        transition: none !important;
    }
}
