/* ============================================================
   ANIMATIONS.CSS — Optimized motion layer
   ============================================================
   GPU-friendly: only transform + opacity, NO filter blur
   Works with GSAP ScrollSmoother for smooth scrolling.
   ============================================================ */

/* ============================================================
   PRELOADER & PAGE TRANSITIONS
   ============================================================ */

/* Block scroll until loaded */
html:not(.is-ready) {
    overflow: hidden !important;
}

/* Hide ALL content until ready — preloader covers everything */
#smooth-content {
    opacity: 0;
    transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

html.is-ready #smooth-content {
    opacity: 1;
}

/* Full-screen preloader overlay */
#global-preloader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 999999;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: all;
    transition: opacity 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Inherit page background */
body:not(.inv) #global-preloader {
    background: var(--color-bg, #f9f9f9);
}

body.inv #global-preloader {
    background: var(--color-bg-inv, #1e1e1e);
}

/* Spinning logo inside overlay */
#global-preloader-logo {
    width: 100px;
    height: 100px;
    animation: preloader-spin 2s linear infinite;
}

@media (max-width: 1024px) {
    #global-preloader-logo {
        width: 50px;
        height: 50px;
    }
}

body.inv #global-preloader-logo {
    filter: invert(1);
}

@keyframes preloader-spin {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

/* Page transition overlay (used for navigate-out) */
#page-transition {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 999998;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

body:not(.inv) #page-transition {
    background: var(--color-bg, #f9f9f9);
}

body.inv #page-transition {
    background: var(--color-bg-inv, #1e1e1e);
}

#page-transition.is-active {
    opacity: 1;
    pointer-events: all;
}

/* ─── ScrollSmoother base ─── */
html,
html body {
    height: auto;
}


/* ─── Fade-up: translate + opacity only ─── */
[data-animate="fade-up"],
[data-animate="fade-up-stagger"]>* {
    opacity: 0;
    transform: translateY(25px) translateZ(0);
}


/* ─── Split text ─── */
.word {
    display: inline-block;
    clip-path: inset(0 0 -0.15em 0);
}

.word-inner {
    display: inline-block;
    transform: translateY(130%);
}


/* ─── Scale reveal ─── */
[data-animate="scale-reveal"] {
    overflow: hidden;
}

[data-animate="scale-reveal"]>img,
[data-animate="scale-reveal"]>video,
[data-animate="scale-reveal"]>svg,
[data-animate="scale-reveal"]>div {
    opacity: 0;
    transform: scale(1.04) translateZ(0);
}


/* ─── Spin on scroll ─── */
[data-animate="spin-scroll"] {
    transform: translateZ(0);
}


/* ─── Parallax ─── */
[data-animate="parallax"] {
    transform: translateZ(0);
}


/* ─── Line draw ─── */
[data-animate="line-draw"] {
    transform-origin: left center;
    transform: scaleX(0);
}


/* ─── Clip reveal ─── */
[data-animate="clip-reveal"] {
    clip-path: inset(15% 0 15% 0);
}


/* ─── Counter ─── */
[data-animate="counter"] {
    font-variant-numeric: tabular-nums;
}


/* ─── Card hover ─── */
a.s-cg__item {
    transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1),
        opacity 0.4s ease;
}

/* Trace card — image zoom on hover */
a.s-cg__item .s-cg__img img {
    transition: transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}

a.s-cg__item:hover {
    transform: translateY(-6px) !important;
}

a.s-cg__item:hover .s-cg__img img {
    transform: scale(1.06) !important;
}

a.s-cg__item:hover .t-body {
    opacity: 0.7;
}


/* ─── Course card hover ─── */
a.s-cd__feature-link {
    text-decoration: none;
    color: inherit;
    cursor: pointer;
    transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

a.s-cd__feature-link .s-cd__img video,
a.s-cd__feature-link .s-cd__img img {
    transition: transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}

a.s-cd__feature-link .t-h4 {
    transition: opacity 0.4s ease;
}

a.s-cd__feature-link:hover {
    transform: translateY(-8px) !important;
}

a.s-cd__feature-link:hover .s-cd__img video,
a.s-cd__feature-link:hover .s-cd__img img {
    transform: scale(1.08) !important;
}

a.s-cd__feature-link:hover .t-h4 {
    opacity: 0.7;
}

/* ─── Gallery item hover (case page) ─── */
a.s-gallery__item {
    transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

a.s-gallery__item .s-gallery__media img,
a.s-gallery__item .s-gallery__media video {
    transition: transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}

a.s-gallery__item .t-desc {
    transition: opacity 0.4s ease;
}

a.s-gallery__item:hover {
    transform: translateY(-6px) !important;
}

a.s-gallery__item:hover .s-gallery__media img,
a.s-gallery__item:hover .s-gallery__media video {
    transform: scale(1.06) !important;
}

a.s-gallery__item:hover .t-desc {
    opacity: 0.5;
}

/* ═══ REDUCED MOTION ═══ */
@media (prefers-reduced-motion: reduce) {

    [data-animate="fade-up"],
    [data-animate="fade-up-stagger"]>*,
    [data-animate="scale-reveal"]>img,
    [data-animate="scale-reveal"]>video,
    [data-animate="scale-reveal"]>svg,
    [data-animate="scale-reveal"]>div,
    [data-animate="line-draw"],
    [data-animate="clip-reveal"] {
        opacity: 1 !important;
        transform: none !important;
        clip-path: none !important;
    }

    .word-inner {
        transform: none !important;
    }
}