/* =====================================================
   SLAAEG PREMIUM SCROLL ANIMATIONS
   Apple Vision Pro + Futuristic Aviation Style
===================================================== */



/* =====================================================
   GLOBAL REVEAL SYSTEM
===================================================== */


.reveal {

    opacity:0;

    transition:
    1s cubic-bezier(.22,1,.36,1);

}



.active {

    opacity:1;

}



/* =====================================================
   HERO ANIMATION
===================================================== */


.hero-animation .hero-tag {

    opacity:0;

    transform:
    translateY(40px);

}



.hero-animation.active .hero-tag {

    opacity:1;

    transform:
    translateY(0);

    transition:
    1s cubic-bezier(.22,1,.36,1);

}





.hero-animation .hero-content h1 {


    opacity:0;

    transform:

    translateY(80px)

    scale(.95);


    filter:

    blur(15px);


}





.hero-animation.active h1 {


    opacity:1;

    transform:

    translateY(0)

    scale(1);


    filter:

    blur(0);


    transition:

    1.3s cubic-bezier(.22,1,.36,1);


}




.hero-animation .hero-content p {


    opacity:0;


    transform:

    translateY(50px);


}





.hero-animation.active p {


    opacity:1;


    transform:

    translateY(0);


    transition:

    1s .3s cubic-bezier(.22,1,.36,1);


}





.hero-animation .hero-buttons {


    opacity:0;


    transform:

    translateY(40px);


}




.hero-animation.active .hero-buttons {


    opacity:1;


    transform:

    translateY(0);


    transition:

    1s .5s cubic-bezier(.22,1,.36,1);


}





.hero-animation .hero-aircraft {


    opacity:0;


    transform:


    translateX(150px)

    rotateY(-30deg)

    scale(.8);


}



.hero-animation.active .hero-aircraft {


    opacity:1;


    transform:


    translateX(0)

    rotateY(0)

    scale(1);


    transition:

    1.8s cubic-bezier(.22,1,.36,1);


}





/* =====================================================
   ABOUT SECTION
===================================================== */


.about-animation .glass-card {


    opacity:0;


    transform:


    translateY(80px)

    rotateX(25deg);


}




.about-animation.active .glass-card {


    opacity:1;


    transform:


    translateY(0)

    rotateX(0);


    transition:


    1s cubic-bezier(.22,1,.36,1);


}




.about-animation .glass-card:nth-child(2){


    transition-delay:.15s;


}



.about-animation .glass-card:nth-child(3){


    transition-delay:.3s;


}





/* =====================================================
   EXPERIENCE
===================================================== */



.experience-animation .experience-card {


    opacity:0;


    transform:


    translateY(100px)

    scale(.9);


}





.experience-animation.active .experience-card {


    opacity:1;


    transform:


    translateY(0)

    scale(1);


    transition:


    1s cubic-bezier(.22,1,.36,1);


}





.experience-animation .experience-card:nth-child(2){

    transition-delay:.2s;

}


.experience-animation .experience-card:nth-child(3){

    transition-delay:.35s;

}






/* =====================================================
   ANNOUNCEMENT
===================================================== */


.announcement-animation .announcement-left {


    opacity:0;


    transform:

    translateX(-100px);


}





.announcement-animation.active .announcement-left {


    opacity:1;


    transform:

    translateX(0);


    transition:

    1s cubic-bezier(.22,1,.36,1);


}





.announcement-animation .announcement-panel {


    opacity:0;


    transform:


    translateX(100px)

    rotateY(-30deg);


}





.announcement-animation.active .announcement-panel {


    opacity:1;


    transform:


    translateX(0)

    rotateY(-12deg);


    transition:


    1.3s cubic-bezier(.22,1,.36,1);


}






/* =====================================================
   EVENTS TIMELINE
===================================================== */


.events-animation .timeline-line {


    height:0;


}





.events-animation.active .timeline-line {


    height:100%;


    transition:

    2s cubic-bezier(.22,1,.36,1);


}





.events-animation .timeline-card {


    opacity:0;


    transform:


    translateX(-100px);


}





.events-animation.active .timeline-card {


    opacity:1;


    transform:


    translateX(0);


    transition:


    1s cubic-bezier(.22,1,.36,1);


}





.events-animation .timeline-card:nth-child(2){

    transition-delay:.2s;

}



.events-animation .timeline-card:nth-child(3){

    transition-delay:.4s;

}







/* =====================================================
   MEMBERSHIP SHOWCASE
===================================================== */


.membership-animation .membership-image {


    opacity:0;


    transform:


    scale(.7)

    rotateY(-25deg);


}




.membership-animation.active .membership-image {


    opacity:1;


    transform:


    scale(1)

    rotateY(-15deg);


    transition:


    1.5s cubic-bezier(.22,1,.36,1);


}





.membership-animation .floating-card {


    opacity:0;


    transform:


    scale(0);


}





.membership-animation.active .floating-card {


    opacity:1;


    transform:


    scale(1);


    transition:


    .8s cubic-bezier(.34,1.56,.64,1);


}





.membership-animation .card-two {


    transition-delay:.2s;


}


.membership-animation .card-three {


    transition-delay:.4s;


}






/* =====================================================
   NEWS
===================================================== */


.news-animation .news-card {


    opacity:0;


    transform:


    translateY(100px)

    scale(.92);


}





.news-animation.active .news-card {


    opacity:1;


    transform:


    translateY(0)

    scale(1);


    transition:


    1s cubic-bezier(.22,1,.36,1);


}





.news-animation .news-card:nth-child(2){

    transition-delay:.2s;

}



.news-animation .news-card:nth-child(3){

    transition-delay:.4s;

}







/* =====================================================
   CTA FINAL EFFECT
===================================================== */


.cta-animation {


    overflow:hidden;


}





.cta-animation h2 {


    opacity:0;


    transform:


    translateY(80px)

    scale(.9);


    filter:

    blur(15px);


}





.cta-animation.active h2 {


    opacity:1;


    transform:


    translateY(0)

    scale(1);


    filter:

    blur(0);


    transition:


    1.5s cubic-bezier(.22,1,.36,1);


}





.cta-animation .cta-buttons {


    opacity:0;


    transform:

    translateY(40px);


}





.cta-animation.active .cta-buttons {


    opacity:1;


    transform:

    translateY(0);


    transition:

    1s .4s cubic-bezier(.22,1,.36,1);


}






/* =====================================================
   FLOATING LIGHT EFFECTS
===================================================== */


@keyframes breathingGlow {


    0%,100%{


        opacity:.3;


        transform:

        scale(1);


    }



    50%{


        opacity:.7;


        transform:

        scale(1.2);


    }


}





.hero-light,
.cta-glow {


    animation:

    breathingGlow 8s infinite ease-in-out;


}






/* =====================================================
   IMAGE SHINE
===================================================== */


.image-shine {


    position:relative;


    overflow:hidden;


}



.image-shine::after {


    content:"";


    position:absolute;


    inset:0;


    background:


    linear-gradient(

    120deg,

    transparent,

    rgba(255,255,255,.35),

    transparent

    );


    transform:

    translateX(-100%);


}





.image-shine:hover::after {


    transform:

    translateX(100%);


    transition:

    .8s;


}