/*=========================================================
    PROJECT : Hope & Harmony Spectrum Inc.
    FILE    : animation.css
    PURPOSE : Animation Section
=========================================================*/
/*=========================================================
                FLOATING ANIMATION
=========================================================*/

@keyframes floating{

    0%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(-12px);

    }

    100%{

        transform:translateY(0);

    }

}

/*=========================================================
                FADE UP
=========================================================*/

@keyframes fadeUp{

    from{

        opacity:0;
        transform:translateY(50px);

    }

    to{

        opacity:1;
        transform:translateY(0);

    }

}
/*=========================================================
                SLIDE UP
=========================================================*/

@keyframes slideUp{

    from{

        opacity:0;

        transform:translateY(40px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}
.service-card:nth-child(1){

    animation-delay:.1s;

}

.service-card:nth-child(2){

    animation-delay:.2s;

}

.service-card:nth-child(3){

    animation-delay:.3s;

}

.service-card:nth-child(4){

    animation-delay:.4s;

}

.service-card:nth-child(5){

    animation-delay:.5s;

}

.service-card:nth-child(6){

    animation-delay:.6s;

}
@keyframes floatShape{

    0%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(-20px);

    }

    100%{

        transform:translateY(0);

    }

}
/*=========================================================
                HERO ENTRANCE ANIMATIONS
=========================================================*/

/* Hide hero content before animation */

.hero-content,
.page-hero-content{

    opacity:0;

    transform:translateY(40px);

    animation:heroContentReveal .9s ease forwards;

    animation-delay:.3s;

}

/* Hero Background */

.hero-image img,
.page-hero img,
.hero-bg,
.page-hero-bg{

    transform:scale(1.08);

    animation:heroImageReveal 2.2s ease forwards;

}

/* Buttons */

.hero-buttons,
.hero-actions{

    opacity:0;

    transform:translateY(25px);

    animation:heroButtonsReveal .8s ease forwards;

    animation-delay:.7s;

}

/*=========================================================
                    KEYFRAMES
=========================================================*/

@keyframes heroContentReveal{

    from{

        opacity:0;

        transform:translateY(40px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}

@keyframes heroButtonsReveal{

    from{

        opacity:0;

        transform:translateY(25px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}

@keyframes heroImageReveal{

    from{

        transform:scale(1.08);

    }

    to{

        transform:scale(1);

    }

}


.page-overlay{

    opacity:0;

    animation:overlayFade .8s ease forwards;

}

/* Breadcrumb */

.hero-animate .breadcrumb{

    opacity:0;

    transform:translateY(25px);

    animation:heroReveal .8s ease forwards;

    animation-delay:.2s;

}

/* Heading */

.hero-animate h1{

    opacity:0;

    transform:translateY(30px);

    animation:heroReveal .8s ease forwards;

    animation-delay:.45s;

}

/* Paragraph */

.hero-animate p{

    opacity:0;

    transform:translateY(30px);

    animation:heroReveal .8s ease forwards;

    animation-delay:.7s;

}

/*=========================
        KEYFRAMES
=========================*/

@keyframes heroZoom{

    from{

        transform:scale(1.1);

    }

    to{

        transform:scale(1);

    }

}

@keyframes overlayFade{

    from{

        opacity:0;

    }

    to{

        opacity:1;

    }

}

@keyframes heroReveal{

    from{

        opacity:0;

        transform:translateY(30px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}
@keyframes heroFloat{

    0%{

        transform:scale(1) translateY(0);

    }

    50%{

        transform:scale(1.03) translateY(-8px);

    }

    100%{

        transform:scale(1) translateY(0);

    }

}
/*=========================================================
                SCROLL REVEAL ANIMATIONS
=========================================================*/

.reveal{

    opacity:0;

    transition:
        opacity .8s ease,
        transform .8s ease;

    will-change:transform, opacity;

}

.fade-up{

    transform:translateY(50px);

}

.fade-down{

    transform:translateY(-50px);

}

.fade-left{

    transform:translateX(-50px);

}

.fade-right{

    transform:translateX(50px);

}

.zoom-in{

    transform:scale(.9);

}

.reveal.active{

    opacity:1;

    transform:none;

}

/* Optional stagger */

.stagger > *{

    transition:
        opacity .8s ease,
        transform .8s ease;

    opacity:0;

    transform:translateY(35px);

}

.stagger.active > *{

    opacity:1;

    transform:none;

}

.stagger.active > *:nth-child(1){transition-delay:.1s;}
.stagger.active > *:nth-child(2){transition-delay:.2s;}
.stagger.active > *:nth-child(3){transition-delay:.3s;}
.stagger.active > *:nth-child(4){transition-delay:.4s;}
.stagger.active > *:nth-child(5){transition-delay:.5s;}
.stagger.active > *:nth-child(6){transition-delay:.6s;}

/*=========================================================
        GLOBAL SCROLL REVEAL
=========================================================*/

/* Initial hidden state (only when JS adds this class) */
.animate-section{

    opacity:0;

    transform:translateY(50px);

    transition:
        opacity .8s ease,
        transform .8s ease;

}

/* Visible state */
.animate-section.section-visible{

    opacity:1;

    transform:translateY(0);

}
.about-image,
.services-image,
.admissions-image,
.gallery-image,
.contact-banner,
.legal-banner,
.faq-banner{

    opacity:0;
    transform:translateX(60px) scale(.96);

    animation:heroBannerReveal .9s ease forwards;
    animation-delay:.3s;

}

@keyframes heroBannerReveal{

    from{
        opacity:0;
        transform:translateX(60px) scale(.96);
    }

    to{
        opacity:1;
        transform:translateX(0) scale(1);
    }

}