/*==================================
MAESTER Motion Engine
==================================*/

:root{

--motion-perspective:2200px;

}

.hero{

perspective:var(--motion-perspective);

overflow:hidden;

}

.hero-container{

transform-style:preserve-3d;

}

.hero-left,
.hero-right{

transform-style:preserve-3d;

will-change:transform;

}

.hero-image-wrapper{

transform-style:preserve-3d;

transform-origin:center center;

}

.hero-image-wrapper img{

backface-visibility:hidden;

transform-style:preserve-3d;

}

.floating-card{

will-change:transform;

backface-visibility:hidden;

}

.hero-right::before{

transition:1.5s ease;

}

/*==========================================
 HERO GLOW
==========================================*/

.hero-glow{

    position:absolute;

    width:420px;

    height:420px;

    background:radial-gradient(circle,
        rgba(239,144,45,.45) 0%,
        rgba(239,144,45,.18) 45%,
        transparent 75%);

    border-radius:50%;

    filter:blur(70px);

    z-index:0;

    left:50%;
    top:50%;

    transform:translate(-50%,-50%);

    pointer-events:none;

}

.hero-image-wrapper{

    position:relative;
    z-index:5;

}

.floating-card{

    z-index:10;

}

/*==============================
Split Text
==============================*/

.word{

    display:inline-block;

    transform-style:preserve-3d;

    will-change:transform;

}

.hero-left h1 span{

    position:relative;

}


/*==================================
ABOUT MOTION
==================================*/

.about{

    overflow:hidden;

}

.about-image{

    perspective:1600px;

}

.about-image img{

    transform-origin:center;

    will-change:transform;

}

.about-badge{

    will-change:transform;

}

.feature{

    will-change:transform;

}

.about-image:hover img{

    transform:scale(1.03);

    transition:.5s ease;

}

.about-badge:hover{

    transform:translateY(-6px);

    transition:.35s ease;

}

/*==============================
INTERNSHIP MOTION
==============================*/

.internship{

    overflow:hidden;

}

.internship-image{

    perspective:1600px;

}

.internship-image-wrapper{

    transform-style:preserve-3d;

}

.internship-image img{

    transform-origin:center;

    backface-visibility:hidden;

}

.intern-card{

    will-change:transform;

}

.internship-item{

    will-change:transform;

}

/*==============================
COURSES MOTION
==============================*/

.courses{

    overflow:hidden;

}

.courses-grid{

    perspective:1800px;

}

.course-card{

    transform-style:preserve-3d;

    will-change:transform;

    transition:box-shadow .35s ease;

}

.course-card:hover{

    box-shadow:0 25px 50px rgba(239,144,45,.18);

}


/*==============================
DIRECTOR MOTION
==============================*/

.director{

    overflow:hidden;

}

.director-image{

    perspective:1800px;

    transform-style:preserve-3d;

    will-change:transform;

}

.director-image img{

    transform-style:preserve-3d;

    backface-visibility:hidden;

}

/*==============================
TESTIMONIAL MOTION
==============================*/

.testimonials{

    overflow:hidden;

}

.testimonial-slider{

    perspective:1800px;

}

.testimonial-card{

    transform-style:preserve-3d;

    will-change:transform;

    transition:box-shadow .35s ease;

}

.testimonial-card:hover{

    box-shadow:0 30px 60px rgba(239,144,45,.18);

}

/*==============================
GALLERY MOTION
==============================*/

.gallery{

    overflow:hidden;

}

.gallery-grid{

    perspective:1800px;

}

.gallery-card{

    transform-style:preserve-3d;

    will-change:transform;

    transition:
        box-shadow .35s,
        transform .35s;

}

.gallery-card:hover{

    box-shadow:0 25px 60px rgba(239,144,45,.18);

}


/*==============================
CTA MOTION
==============================*/

.cta{

    overflow:hidden;

}

.cta-box{

    will-change:transform;

    transform-style:preserve-3d;

}

/*==============================
FOOTER MOTION
==============================*/

.footer{

    overflow:hidden;

}

.footer-col{

    will-change:transform;

}

.footer-social a{

    transition:.35s;

}

/*==========================================
ABOUT PAGE ANIMATION
==========================================*/

.reveal{

    opacity:0;

    transform:translateY(60px);

}

.reveal-left{

    opacity:0;

    transform:translateX(-80px);

}

.reveal-right{

    opacity:0;

    transform:translateX(80px);

}

.reveal-scale{

    opacity:0;

    transform:scale(.9);

}