/* =========================================
   GLOBAL ANIMATION VARIABLES
========================================= */

:root {

    --ease-premium:
        cubic-bezier(
            0.22,
            1,
            0.36,
            1
        );

    --ease-smooth:
        cubic-bezier(
            0.25,
            0.46,
            0.45,
            0.94
        );

}

/* =========================================
   HERO VIDEO CINEMATIC ZOOM
========================================= */

#hero video {

    animation:
        heroZoom 15s ease-in-out infinite alternate;

    transform-origin: center center;

}

@keyframes heroZoom {

    from {

        transform:
            scale(1.08);

    }

    to {

        transform:
            scale(1);

    }

}

/* =========================================
   HERO CONTENT REVEAL
========================================= */

.hero-content .eyebrow {

    animation:
        fadeSlideUp 1s .2s both;

}

.hero-content h1 {

    animation:
        fadeSlideUp 1.2s .5s both;

}

.hero-content p {

    animation:
        fadeSlideUp 1.2s .8s both;

}

.hero-buttons {

    animation:
        fadeSlideUp 1.2s 1.1s both;

}

@keyframes fadeSlideUp {

    from {

        opacity: 0;

        transform:
            translateY(40px);

    }

    to {

        opacity: 1;

        transform:
            translateY(0);

    }

}

/* =========================================
   SCROLL INDICATOR
========================================= */

.scroll-indicator {

    overflow: hidden;

}

.scroll-indicator::before {

    content: "";

    position: absolute;

    top: -100%;

    left: 0;

    width: 100%;
    height: 100%;

    background: white;

    animation:
        scrollLine 2.5s infinite;

}

@keyframes scrollLine {

    0% {

        top: -100%;

    }

    100% {

        top: 100%;

    }

}

/* =========================================
   HEADER GLASS STATE
========================================= */

#header.scrolled {

    backdrop-filter:
        blur(20px);

    background:
        rgba(20,20,20,.45);

    border-bottom:
        1px solid rgba(255,255,255,.08);

    transition:
        all .4s var(--ease-premium);

}

/* =========================================
   BUTTON MICRO INTERACTIONS
========================================= */

.btn {

    position: relative;

    overflow: hidden;

}

.btn::before {

    content: "";

    position: absolute;

    top: 0;
    left: -120%;

    width: 120%;
    height: 100%;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(255,255,255,.18),
            transparent
        );

    transition:
        .8s;

}

.btn:hover::before {

    left: 120%;

}

.btn:hover {

    transform:
        translateY(-3px);

}

/* =========================================
   DONATION BUTTON PREMIUM HOVER
========================================= */

.donation-options button {

    transition:
        all .35s var(--ease-premium);

}

.donation-options button:hover {

    transform:
        translateY(-4px);

    box-shadow:
        0 20px 40px rgba(0,0,0,.08);

}

.donation-options button.active {

    background:
        var(--olive);

    color: white;

    border-color:
        var(--olive);

}

/* =========================================
   PILLAR CARD DEPTH
========================================= */

.pillar-card {

    transition:
        all .4s var(--ease-premium);

    transform-style:
        preserve-3d;

}

.pillar-card:hover {

    transform:
        translateY(-8px);

    box-shadow:
        0 25px 60px rgba(0,0,0,.08);

}

/* =========================================
   STORY CARDS
========================================= */

.story-card {

    transition:
        all .45s var(--ease-premium);

}

.story-card:hover {

    transform:
        translateY(-10px);

    box-shadow:
        0 35px 70px rgba(0,0,0,.12);

}

/* =========================================
   SECTION REVEALS
========================================= */

.reveal {

    opacity: 0;

    transform:
        translateY(60px);

    transition:
        opacity 1s var(--ease-premium),
        transform 1s var(--ease-premium);

}

.reveal.visible {

    opacity: 1;

    transform:
        translateY(0);

}

/* =========================================
   STAGGER SUPPORT
========================================= */

.reveal-delay-1 {

    transition-delay:
        .1s;

}

.reveal-delay-2 {

    transition-delay:
        .2s;

}

.reveal-delay-3 {

    transition-delay:
        .3s;

}

.reveal-delay-4 {

    transition-delay:
        .4s;

}

/* =========================================
   IMPACT COUNTER SCALE
========================================= */

.stat.animate span {

    animation:
        counterPop .8s var(--ease-premium);

}

@keyframes counterPop {

    0% {

        transform:
            scale(.85);

        opacity: .4;

    }

    100% {

        transform:
            scale(1);

        opacity: 1;

    }

}

/* =========================================
   IMAGE PARALLAX SUPPORT
========================================= */

.parallax {

    will-change:
        transform;

    transition:
        transform .15s linear;

}

/* =========================================
   DONATE IMAGE FLOAT
========================================= */

.donate-image img {

    animation:
        floating 8s ease-in-out infinite;

}

@keyframes floating {

    0% {

        transform:
            translateY(0);

    }

    50% {

        transform:
            translateY(-12px);

    }

    100% {

        transform:
            translateY(0);

    }

}

/* =========================================
   FORM FOCUS STATES
========================================= */

#contact-form input:focus,
#contact-form textarea:focus {

    outline: none;

    border-color:
        var(--olive);

    box-shadow:
        0 0 0 4px rgba(102,115,62,.12);

}

/* =========================================
   FOOTER LINKS
========================================= */

.footer-grid a {

    transition:
        .3s;

}

.footer-grid a:hover {

    opacity: 1;

    transform:
        translateX(4px);

}

/* =========================================
   MOBILE MENU ANIMATION
========================================= */

#mobile-menu {

    opacity: 0;
    visibility: hidden;

    transition:
        all .4s var(--ease-premium);

}

#mobile-menu.open {

    opacity: 1;
    visibility: visible;

}

/* =========================================
   LOGO ENTRANCE
========================================= */

.logo img {

    transition:
        transform .4s var(--ease-premium);

}

.logo:hover img {

    transform:
        scale(1.05);

}

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

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

    * {

        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;

    }

}
#scroll-progress{
position:fixed;
top:0;
left:0;
height:3px;
width:0;
background:var(--gold);
z-index:9999;
}

.donation-options button{
position:relative;
overflow:hidden;
}

.ripple{
position:absolute;
border-radius:50%;
background:rgba(255,255,255,.4);
transform:scale(0);
animation:ripple .7s linear;
pointer-events:none;
}

@keyframes ripple{
to{
transform:scale(4);
opacity:0;
}
}