/* ============================================================
   NARAYAN GLOBAL SCHOOL
   WEBSITE ANIMATION SYSTEM
============================================================ */
html 
body {
    scroll-behavior: smooth;
    overflow-x: hidden;
}
/* ============================================================
   BASE
============================================================ */

.reveal,
.reveal-left,
.reveal-right,
.reveal-scale {
    overflow-x: clip;
    opacity: 0 !important;

    transition:
        opacity 0.8s ease,
        transform 0.8s cubic-bezier(0.22, 1, 0.36, 1) !important;

}


/* ============================================================
   STARTING POSITIONS
============================================================ */

.reveal {

    transform: translate3d(0, 45px, 0) !important;

}


.reveal-left {

    transform: translate3d(-60px, 0, 0) !important;

}


.reveal-right {

    transform: translate3d(60px, 0, 0) !important;

}


.reveal-scale {

    transform: scale(0.92) !important;

}


/* ============================================================
   FINAL POSITION
============================================================ */

.reveal.animation-visible,
.reveal-left.animation-visible,
.reveal-right.animation-visible,
.reveal-scale.animation-visible {

    opacity: 1 !important;

    transform: translate3d(0, 0, 0) !important;

}


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

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

    .reveal,
    .reveal-left,
    .reveal-right,
    .reveal-scale {

        opacity: 1 !important;

        transform: none !important;

        transition: none !important;

    }

}


/*
|--------------------------------------------------------------------------
| IMAGE REVEAL
|--------------------------------------------------------------------------
*/

.image-reveal {

    opacity: 0;

    transform:
        scale(1.08);

    transition:
        opacity 1s ease,
        transform 1.2s cubic-bezier(0.22, 1, 0.36, 1);

}


.image-reveal.animation-visible {

    opacity: 1;

    transform:
        scale(1);

}


/*
|--------------------------------------------------------------------------
| HOVER IMAGE ZOOM
|--------------------------------------------------------------------------
*/

.image-hover-zoom {

    overflow: hidden;

}


.image-hover-zoom img {

    transition:
        transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);

}


.image-hover-zoom:hover img {

    transform:
        scale(1.06);

}


/*
|--------------------------------------------------------------------------
| FLOATING ELEMENT
|--------------------------------------------------------------------------
*/

.float-slow {

    animation:
        floatSlow 6s ease-in-out infinite;

}


@keyframes floatSlow {

    0%,
    100% {

        transform:
            translateY(0);

    }

    50% {

        transform:
            translateY(-10px);

    }

}


/*
|--------------------------------------------------------------------------
| PULSE
|--------------------------------------------------------------------------
*/

.pulse-soft {

    animation:
        pulseSoft 3s ease-in-out infinite;

}


@keyframes pulseSoft {

    0%,
    100% {

        opacity:
            0.5;

        transform:
            scale(1);

    }

    50% {

        opacity:
            1;

        transform:
            scale(1.08);

    }

}


/*
|--------------------------------------------------------------------------
| BUTTON ARROW
|--------------------------------------------------------------------------
*/

.button-arrow {

    transition:
        transform 0.3s ease;

}


a:hover .button-arrow,
button:hover .button-arrow {

    transform:
        translateX(5px);

}


/*
|--------------------------------------------------------------------------
| MAGNETIC BUTTON
|--------------------------------------------------------------------------
*/

.magnetic-button {

    transition:
        transform 0.25s ease,
        box-shadow 0.3s ease;

}


/*
|--------------------------------------------------------------------------
| ACCESSIBILITY
|--------------------------------------------------------------------------
*/

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

    *,
    *::before,
    *::after {

        animation-duration:
            0.01ms !important;

        animation-iteration-count:
            1 !important;

        scroll-behavior:
            auto !important;

        transition-duration:
            0.01ms !important;

    }

}

/* ============================================================
   HERO CAROUSEL
============================================================ */

.hero-slide {

    position: absolute;

    inset: 0;

    opacity: 0;

    visibility: hidden;

    z-index: 0;

    transition:
        opacity 1.5s ease-in-out,
        visibility 0s linear 1.5s;

    will-change: opacity;

}


.hero-slide.hero-slide-active {

    opacity: 1;

    visibility: visible;

    z-index: 1;

    transition:
        opacity 1.5s ease-in-out;

}


/* ============================================================
   HERO IMAGE
============================================================ */

.hero-slide-image {

    display: block;

    width: 100%;

    height: 100%;

    object-fit: cover;

    transform:
        scale(1);

    transition:
        transform 6s cubic-bezier(0.22, 1, 0.36, 1);

    will-change: transform;

}


.hero-slide.hero-slide-active
.hero-slide-image {

    transform:
        scale(1.08);

}


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

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

    .hero-slide {

        transition:
            none !important;

    }

    .hero-slide-image {

        transition:
            none !important;

        transform:
            scale(1) !important;

    }

}


/* ============================================================
   WHY NARAYAN — DECORATIVE CIRCLE INTERACTION
============================================================ */

.why-decor-circle {

    transform:
        scale(1);

    transition:
        transform 1.2s cubic-bezier(0.22, 1, 0.36, 1),
        opacity 0.8s ease;

    will-change:
        transform;

    pointer-events:
        none;

}


/* ------------------------------------------------------------
   DESKTOP HOVER
------------------------------------------------------------ */

@media (hover: hover) and (pointer: fine) {

    #whyVisualPanel:hover
    .why-circle-one {

        transform:
            scale(1.35);

    }


    #whyVisualPanel:hover
    .why-circle-two {

        transform:
            scale(1.25);

    }

}


/* ------------------------------------------------------------
   MOBILE / CLICK STATE
------------------------------------------------------------ */

#whyVisualPanel.circles-active
.why-circle-one {

    transform:
        scale(1.35);

}


#whyVisualPanel.circles-active
.why-circle-two {

    transform:
        scale(1.25);

}


/* ------------------------------------------------------------
   REDUCED MOTION
------------------------------------------------------------ */

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

    .why-decor-circle {

        transition:
            none;

    }

}