/* =========================================================
    ANIMATION CSS
    Premium Glassmorphism
========================================================= */


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

@keyframes fadeIn {

    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }

}


@keyframes fadeUp {

    from {
        opacity: 0;

        transform:
            translateY(25px);
    }

    to {
        opacity: 1;

        transform:
            translateY(0);
    }

}


@keyframes fadeDown {

    from {
        opacity: 0;

        transform:
            translateY(-20px);
    }

    to {
        opacity: 1;

        transform:
            translateY(0);
    }

}


@keyframes fadeLeft {

    from {
        opacity: 0;

        transform:
            translateX(30px);
    }

    to {
        opacity: 1;

        transform:
            translateX(0);
    }

}


@keyframes fadeRight {

    from {
        opacity: 0;

        transform:
            translateX(-30px);
    }

    to {
        opacity: 1;

        transform:
            translateX(0);
    }

}


/* =========================================================
   SCALE
========================================================= */

@keyframes scaleIn {

    from {
        opacity: 0;

        transform:
            scale(0.92);
    }

    to {
        opacity: 1;

        transform:
            scale(1);
    }

}


/* =========================================================
   FLOAT
========================================================= */

@keyframes floating {

    0%,
    100% {
        transform:
            translateY(0);
    }

    50% {
        transform:
            translateY(-10px);
    }

}


@keyframes floatingSlow {

    0%,
    100% {
        transform:
            translateY(0)
            rotate(0deg);
    }

    50% {
        transform:
            translateY(-14px)
            rotate(1deg);
    }

}


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

@keyframes glowPulse {

    0%,
    100% {
        box-shadow:
            0 0 0
            rgba(139,92,246,0);
    }

    50% {
        box-shadow:
            0 0 35px
            rgba(139,92,246,0.22);
    }

}


/* =========================================================
   ORB MOVEMENT
========================================================= */

@keyframes orbMoveOne {

    0%,
    100% {
        transform:
            translate3d(0, 0, 0)
            scale(1);
    }

    50% {
        transform:
            translate3d(60px, 35px, 0)
            scale(1.08);
    }

}


@keyframes orbMoveTwo {

    0%,
    100% {
        transform:
            translate3d(0, 0, 0)
            scale(1);
    }

    50% {
        transform:
            translate3d(-50px, 45px, 0)
            scale(1.12);
    }

}


@keyframes orbMoveThree {

    0%,
    100% {
        transform:
            translate3d(0, 0, 0);
    }

    50% {
        transform:
            translate3d(35px, -35px, 0);
    }

}


/* =========================================================
   SHIMMER
========================================================= */

@keyframes shimmer {

    0% {
        background-position:
            -500px 0;
    }

    100% {
        background-position:
            500px 0;
    }

}


/* =========================================================
   HEADER
========================================================= */

.site-header {

    animation:
        fadeDown
        0.7s
        ease
        both;

}


/* =========================================================
   LOGO
========================================================= */

.logo-icon {

    animation:
        glowPulse
        4s
        ease-in-out
        infinite;

}


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

.hero-badge {

    animation:
        fadeUp
        0.7s
        0.1s
        ease
        both;

}


.hero-content h1 {

    animation:
        fadeUp
        0.8s
        0.2s
        ease
        both;

}


.hero-description {

    animation:
        fadeUp
        0.8s
        0.35s
        ease
        both;

}


.hero-buttons {

    animation:
        fadeUp
        0.8s
        0.5s
        ease
        both;

}


.hero-stats {

    animation:
        fadeUp
        0.8s
        0.65s
        ease
        both;

}


/* =========================================================
   HERO VISUAL
========================================================= */

.hero-image-card {

    animation:
        fadeLeft
        1s
        0.25s
        ease
        both;

}


.floating-card-one {

    animation:
        fadeRight
        0.8s
        0.7s
        ease
        both,
        floating
        5s
        1.5s
        ease-in-out
        infinite;

}


.floating-card-two {

    animation:
        fadeLeft
        0.8s
        0.85s
        ease
        both,
        floatingSlow
        6s
        1.8s
        ease-in-out
        infinite;

}


/* =========================================================
   BACKGROUND ORBS
========================================================= */

.orb-one {

    animation:
        orbMoveOne
        14s
        ease-in-out
        infinite;

}


.orb-two {

    animation:
        orbMoveTwo
        17s
        ease-in-out
        infinite;

}


.orb-three {

    animation:
        orbMoveThree
        20s
        ease-in-out
        infinite;

}


/* =========================================================
   FEATURE CARDS
========================================================= */

.feature-card {

    animation:
        fadeUp
        0.7s
        ease
        both;

}


.feature-card:nth-child(1) {
    animation-delay: 0.10s;
}


.feature-card:nth-child(2) {
    animation-delay: 0.20s;
}


.feature-card:nth-child(3) {
    animation-delay: 0.30s;
}


.feature-card:nth-child(4) {
    animation-delay: 0.40s;
}


/* =========================================================
   FEATURE ICON
========================================================= */

.feature-card:hover .feature-icon {

    transform:
        translateY(-3px)
        scale(1.05);

    transition:
        transform
        0.3s
        ease;

}


/* =========================================================
   ABOUT IMAGE
========================================================= */

.about-preview-image .image-card {

    animation:
        fadeRight
        0.9s
        0.2s
        ease
        both;

}


.about-preview-content {

    animation:
        fadeLeft
        0.9s
        0.35s
        ease
        both;

}


/* =========================================================
   SUPPORT
========================================================= */

.support-card {

    animation:
        scaleIn
        0.8s
        ease
        both;

}


.support-visual {

    animation:
        fadeLeft
        0.9s
        0.3s
        ease
        both;

}


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

.cta-card {

    animation:
        fadeUp
        0.8s
        ease
        both;

}


.cta-action .btn {

    animation:
        glowPulse
        4s
        1s
        ease-in-out
        infinite;

}


/* =========================================================
   BUTTON HOVER
========================================================= */

.btn {

    position: relative;

    overflow: hidden;

}


.btn::before {

    content: "";

    position: absolute;

    top: 0;

    left: -120%;

    width: 80%;

    height: 100%;

    transform:
        skewX(-20deg);

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(255,255,255,0.18),
            transparent
        );

    transition:
        left
        0.6s
        ease;

}


.btn:hover::before {

    left: 140%;

}


/* =========================================================
   GLASS CARD LIGHT EFFECT
========================================================= */

.glass-card {

    position: relative;

    overflow: hidden;

}


.glass-card::before {

    content: "";

    position: absolute;

    top: 0;

    left: 0;

    width: 100%;

    height: 1px;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(255,255,255,0.28),
            transparent
        );

    opacity: 0.7;

}


/* =========================================================
   IMAGE HOVER
========================================================= */

.image-card {

    transition:
        transform
        0.5s
        ease,
        border-color
        0.5s
        ease,
        box-shadow
        0.5s
        ease;

}


.image-card:hover {

    border-color:
        rgba(167,139,250,0.28);

    box-shadow:
        0 30px 90px
        rgba(0,0,0,0.42);

}


.image-card img {

    transition:
        transform
        0.7s
        cubic-bezier(
            0.2,
            0.8,
            0.2,
            1
        );

}


.image-card:hover img {

    transform:
        scale(1.035);

}


/* =========================================================
   NAVIGATION HOVER
========================================================= */

.main-navigation a {

    overflow: hidden;

}


.main-navigation a::before {

    content: "";

    position: absolute;

    left: 50%;

    bottom: 0;

    width: 0;

    height: 1px;

    transform:
        translateX(-50%);

    background:
        linear-gradient(
            90deg,
            var(--accent),
            var(--cyan)
        );

    transition:
        width
        0.3s
        ease;

}


.main-navigation a:hover::before {

    width: 60%;

}


/* =========================================================
   FOOTER LINKS
========================================================= */

.footer-column a {

    transition:
        color
        0.25s
        ease,
        transform
        0.25s
        ease;

}


/* =========================================================
   LOADING SHIMMER UTILITY
========================================================= */

.loading-shimmer {

    background:
        linear-gradient(
            90deg,
            rgba(255,255,255,0.03) 25%,
            rgba(255,255,255,0.08) 50%,
            rgba(255,255,255,0.03) 75%
        );

    background-size:
        500px 100%;

    animation:
        shimmer
        1.8s
        linear
        infinite;

}


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

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

    .site-header,
    .logo-icon,
    .hero-badge,
    .hero-content h1,
    .hero-description,
    .hero-buttons,
    .hero-stats,
    .hero-image-card,
    .floating-card-one,
    .floating-card-two,
    .orb-one,
    .orb-two,
    .orb-three,
    .feature-card,
    .about-preview-image .image-card,
    .about-preview-content,
    .support-card,
    .support-visual,
    .cta-card,
    .cta-action .btn {

        animation: none !important;

    }

}