/* =========================================================
   GENERAL REVEAL ANIMATIONS

   Controls:
   - Standard reveal elements
   - Reveal groups
   - Media reveals
   - Staggered child reveals
   ========================================================= */

.reveal,
.reveal-group > *,
.reveal-media,
.stagger-children > * {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 580ms var(--ease-standard), transform 580ms var(--ease-standard);
}


    /* =========================================================
   GENERAL VISIBLE STATES

   Supports both:
   1. .is-visible on a parent section
   2. .is-visible directly on the animated element
   ========================================================= */

    .is-visible.reveal,
    .reveal.is-visible,
    .is-visible .reveal,
    .is-visible.reveal-media,
    .reveal-media.is-visible,
    .is-visible .reveal-media,
    .is-visible .reveal-group > *,
    .reveal-group.is-visible > *,
    .is-visible .stagger-children > *,
    .stagger-children.is-visible > * {
        opacity: 1;
        transform: none;
    }


   /* =========================================================
   STANDARD STAGGER DELAYS
   ========================================================= */

        .is-visible .reveal-group > *:nth-child(2),
        .reveal-group.is-visible > *:nth-child(2),
        .is-visible .stagger-children > *:nth-child(2),
        .stagger-children.is-visible > *:nth-child(2) {
            transition-delay: 80ms;
        }


        .is-visible .reveal-group > *:nth-child(3),
        .reveal-group.is-visible > *:nth-child(3),
        .is-visible .stagger-children > *:nth-child(3),
        .stagger-children.is-visible > *:nth-child(3) {
            transition-delay: 160ms;
        }


        .is-visible .reveal-group > *:nth-child(4),
        .reveal-group.is-visible > *:nth-child(4),
        .is-visible .stagger-children > *:nth-child(4),
        .stagger-children.is-visible > *:nth-child(4) {
            transition-delay: 240ms;
        }


        .is-visible .reveal-group > *:nth-child(5),
        .reveal-group.is-visible > *:nth-child(5),
        .is-visible .stagger-children > *:nth-child(5),
        .stagger-children.is-visible > *:nth-child(5) {
            transition-delay: 320ms;
        }


        .is-visible .stagger-children > *:nth-child(6),
        .stagger-children.is-visible > *:nth-child(6) {
            transition-delay: 400ms;
        }


/* =========================================================
   FEATURE CARD ENTRANCE

   Feature cards use a stronger grow-in animation while
   retaining the normal stagger system.
   ========================================================= */

.stagger-children > .card {
    position: relative;
    overflow: hidden;
    opacity: 0;
    transform: translateY(42px) scale(0.88);
    transform-origin: center;
    transition: opacity 700ms var(--ease-standard), transform 850ms cubic-bezier(.16, 1, .3, 1), border-color 500ms ease, box-shadow 700ms ease;
    will-change: opacity, transform, box-shadow;
}


/* =========================================================
   FEATURE CARD VISIBLE STATE

   Supports .is-visible on either:
   - a parent section
   - the .stagger-children container itself
   ========================================================= */

.is-visible .stagger-children > .card,
.stagger-children.is-visible > .card {
    opacity: 1;
    transform: translateY(0) scale(1);
    border-color: rgba(80, 210, 255, 0.22);
    box-shadow: 0 18px 50px rgba(0, 0, 0, 0.22), 0 0 0 1px rgba(80, 210, 255, 0.03);
}


/* =========================================================
   FEATURE CARD FLASH LAYER
   ========================================================= */

.stagger-children > .card::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: radial-gradient( circle at center, rgba(80, 210, 255, 0.5) 0%, rgba(80, 210, 255, 0.2) 34%, transparent 72% );
    opacity: 0;
    transform: scale(0.45);
    pointer-events: none;
    z-index: 0;
}


/* Keep all card content above the flash layer. */

.stagger-children > .card > * {
    position: relative;
    z-index: 1;
}


/* =========================================================
   FEATURE CARD FLASH TRIGGER
   ========================================================= */

.is-visible .stagger-children > .card::after,
.stagger-children.is-visible > .card::after {
    animation: featureCardFlash 900ms ease-out both;
}


/* =========================================================
   FEATURE CARD STAGGER DELAYS

   These override the shorter standard delays only for the
   four feature cards.
   ========================================================= */

.is-visible .stagger-children > .card:nth-child(1),
.stagger-children.is-visible > .card:nth-child(1) {
    transition-delay: 0ms;
}

    .is-visible .stagger-children > .card:nth-child(1)::after,
    .stagger-children.is-visible > .card:nth-child(1)::after {
        animation-delay: 0ms;
    }

.is-visible .stagger-children > .card:nth-child(2),
.stagger-children.is-visible > .card:nth-child(2) {
    transition-delay: 1000ms;
}

    .is-visible .stagger-children > .card:nth-child(2)::after,
    .stagger-children.is-visible > .card:nth-child(2)::after {
        animation-delay: 1000ms;
    }

.is-visible .stagger-children > .card:nth-child(3),
.stagger-children.is-visible > .card:nth-child(3) {
    transition-delay: 2000ms;
}

    .is-visible .stagger-children > .card:nth-child(3)::after,
    .stagger-children.is-visible > .card:nth-child(3)::after {
        animation-delay: 2000ms;
    }

.is-visible .stagger-children > .card:nth-child(4),
.stagger-children.is-visible > .card:nth-child(4) {
    transition-delay: 3000ms;
}

    .is-visible .stagger-children > .card:nth-child(4)::after,
    .stagger-children.is-visible > .card:nth-child(4)::after {
        animation-delay: 3000ms;
    }

.is-visible .stagger-children > .card:nth-child(5),
.stagger-children.is-visible > .card:nth-child(5) {
    transition-delay: 4000ms;
}

    .is-visible .stagger-children > .card:nth-child(5)::after,
    .stagger-children.is-visible > .card:nth-child(5)::after {
        animation-delay: 4000ms;
    }

.is-visible .stagger-children > .card:nth-child(6),
.stagger-children.is-visible > .card:nth-child(6) {
    transition-delay: 5000ms;
}

    .is-visible .stagger-children > .card:nth-child(6)::after,
    .stagger-children.is-visible > .card:nth-child(6)::after {
        animation-delay: 5000ms;
    }

/* =========================================================
   FEATURE CARD FLASH ANIMATION
   ========================================================= */

@keyframes featureCardFlash {

    0% {
        opacity: 0;
        transform: scale(0.45);
    }

    35% {
        opacity: 0.9;
        transform: scale(1);
    }

    68% {
        opacity: 0.25;
        transform: scale(1.35);
    }

    100% {
        opacity: 0;
        transform: scale(1.75);
    }
}


/* =========================================================
   FEATURE NUMBER POP

   Supports either:
   - .icon-dot
   - .feature-number
   ========================================================= */

.is-visible .stagger-children > .card .icon-dot,
.is-visible .stagger-children > .card .feature-number,
.stagger-children.is-visible > .card .icon-dot,
.stagger-children.is-visible > .card .feature-number {
    animation: featureNumberPop 700ms cubic-bezier(.2, 1.45, .4, 1) both;
}


/* Card 1 number */

.is-visible .stagger-children > .card:nth-child(1) .icon-dot,
.is-visible .stagger-children > .card:nth-child(1) .feature-number,
.stagger-children.is-visible > .card:nth-child(1) .icon-dot,
.stagger-children.is-visible > .card:nth-child(1) .feature-number {
    animation-delay: 120ms;
}


/* Card 2 number */

.is-visible .stagger-children > .card:nth-child(2) .icon-dot,
.is-visible .stagger-children > .card:nth-child(2) .feature-number,
.stagger-children.is-visible > .card:nth-child(2) .icon-dot,
.stagger-children.is-visible > .card:nth-child(2) .feature-number {
    animation-delay: 320ms;
}


/* Card 3 number */

.is-visible .stagger-children > .card:nth-child(3) .icon-dot,
.is-visible .stagger-children > .card:nth-child(3) .feature-number,
.stagger-children.is-visible > .card:nth-child(3) .icon-dot,
.stagger-children.is-visible > .card:nth-child(3) .feature-number {
    animation-delay: 520ms;
}


/* Card 4 number */

.is-visible .stagger-children > .card:nth-child(4) .icon-dot,
.is-visible .stagger-children > .card:nth-child(4) .feature-number,
.stagger-children.is-visible > .card:nth-child(4) .icon-dot,
.stagger-children.is-visible > .card:nth-child(4) .feature-number {
    animation-delay: 720ms;
}


@keyframes featureNumberPop {

    0% {
        opacity: 0;
        transform: scale(0.45) rotate(-9deg);
    }

    65% {
        opacity: 1;
        transform: scale(1.15) rotate(2deg);
    }

    100% {
        opacity: 1;
        transform: scale(1) rotate(0);
    }
}


/* =========================================================
   FEATURE CARD HOVER
   ========================================================= */

.is-visible .stagger-children > .card:hover,
.stagger-children.is-visible > .card:hover {
    transform: translateY(-8px) scale(1.015);
    border-color: rgba(80, 210, 255, 0.38);
    box-shadow: 0 22px 58px rgba(0, 0, 0, 0.32), 0 0 30px rgba(80, 210, 255, 0.18);
    transition-delay: 0ms;
}


/* =========================================================
   SCROLL CUE
   ========================================================= */

.scroll-cue span {
    animation: scrollCue 2.6s ease-in-out infinite;
}


@keyframes scrollCue {

    0%, 100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(5px);
    }
}


/* =========================================================
   REDUCED MOTION
   ========================================================= */

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

    html {
        scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }

    .reveal,
    .reveal-group > *,
    .reveal-media,
    .stagger-children > *,
    .stagger-children > .card {
        opacity: 1;
        transform: none;
    }

        .stagger-children > .card::after {
            display: none;
        }
}


/* =========================================================
   NO-JAVASCRIPT FALLBACK
   ========================================================= */

.no-js .reveal,
.no-js .reveal-group > *,
.no-js .reveal-media,
.no-js .stagger-children > *,
.no-js .stagger-children > .card {
    opacity: 1;
    transform: none;
}