/* ==========================================================
   VISIONARY SOLUTIONS
   ANIMATIONS.CSS
   ----------------------------------------------------------
   Reveal Effects
   Stagger Effects
   Hover Effects
   Pulse Effects
   Floating Effects
   Hero Effects
========================================================== */

/* ==========================================================
   GLOBAL PERFORMANCE
========================================================== */

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

    will-change:
        transform,
        opacity;

}

/* ==========================================================
   REVEAL UP
========================================================== */

.reveal {

    opacity:0;

    transform:
        translateY(40px);

    transition:
        opacity .8s ease,
        transform .8s ease;

}

.reveal.active {

    opacity:1;

    transform:
        translateY(0);

}

/* ==========================================================
   REVEAL LEFT
========================================================== */

.reveal-left {

    opacity:0;

    transform:
        translateX(-60px);

    transition:
        opacity .9s ease,
        transform .9s ease;

}

.reveal-left.active {

    opacity:1;

    transform:
        translateX(0);

}

/* ==========================================================
   REVEAL RIGHT
========================================================== */

.reveal-right {

    opacity:0;

    transform:
        translateX(60px);

    transition:
        opacity .9s ease,
        transform .9s ease;

}

.reveal-right.active {

    opacity:1;

    transform:
        translateX(0);

}

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

.reveal-scale {

    opacity:0;

    transform:
        scale(.92);

    transition:
        opacity .8s ease,
        transform .8s ease;

}

.reveal-scale.active {

    opacity:1;

    transform:
        scale(1);

}

/* ==========================================================
   STAGGER ITEMS
========================================================== */

.stagger-item {

    opacity:0;

    transform:
        translateY(25px);

    transition:
        opacity .6s ease,
        transform .6s ease;

}

.stagger-item.active {

    opacity:1;

    transform:
        translateY(0);

}

.stagger-item:nth-child(1) {

    transition-delay:.05s;

}

.stagger-item:nth-child(2) {

    transition-delay:.10s;

}

.stagger-item:nth-child(3) {

    transition-delay:.15s;

}

.stagger-item:nth-child(4) {

    transition-delay:.20s;

}

.stagger-item:nth-child(5) {

    transition-delay:.25s;

}

.stagger-item:nth-child(6) {

    transition-delay:.30s;

}

.stagger-item:nth-child(7) {

    transition-delay:.35s;

}

.stagger-item:nth-child(8) {

    transition-delay:.40s;

}

.stagger-item:nth-child(9) {

    transition-delay:.45s;

}

.stagger-item:nth-child(10) {

    transition-delay:.50s;

}

.stagger-item:nth-child(11) {

    transition-delay:.55s;

}

.stagger-item:nth-child(12) {

    transition-delay:.60s;

}

/* ==========================================================
   FLOATING EFFECT
========================================================== */

@keyframes floating {

    0% {

        transform:
            translateY(0);

    }

    50% {

        transform:
            translateY(-8px);

    }

    100% {

        transform:
            translateY(0);

    }

}

.float {

    animation:
        floating 5s ease-in-out infinite;

}

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

@keyframes iconFloat {

    0% {

        transform:
            translateY(0);

    }

    50% {

        transform:
            translateY(-5px);

    }

    100% {

        transform:
            translateY(0);

    }

}

.service-icon,
.portfolio-icon,
.card-icon {

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

}

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

@keyframes heroZoom {

    0% {

        transform:
            scale(1);

    }

    100% {

        transform:
            scale(1.08);

    }

}

.hero-slide {

    animation:
        heroZoom 18s linear infinite alternate;

}

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

@keyframes heroTextUp {

    from {

        opacity:0;

        transform:
            translateY(40px);

    }

    to {

        opacity:1;

        transform:
            translateY(0);

    }

}

.hero-title {

    animation:
        heroTextUp 1.2s ease;

}

.hero-description {

    animation:
        heroTextUp 1.6s ease;

}

.hero-buttons {

    animation:
        heroTextUp 2s ease;

}

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

@keyframes buttonGlow {

    0% {

        box-shadow:
            0 0 0 rgba(96,165,250,0);

    }

    50% {

        box-shadow:
            0 0 25px rgba(96,165,250,.35);

    }

    100% {

        box-shadow:
            0 0 0 rgba(96,165,250,0);

    }

}

.btn-primary:hover {

    animation:
        buttonGlow 1.2s ease;

}

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

.vs-card {

    position:relative;

}

.vs-card::after {

    content:"";

    position:absolute;

    top:0;
    left:-150%;

    width:60%;

    height:100%;

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

    transition:
        left .8s ease;

}

.vs-card:hover::after {

    left:180%;

}

/* ==========================================================
   NAVBAR UNDERLINE
========================================================== */

.nav-link {

    overflow:hidden;

}

/* ==========================================================
   WHATSAPP PULSE
========================================================== */

@keyframes whatsappPulse {

    0% {

        box-shadow:
            0 0 0 0 rgba(37,211,102,.6);

    }

    70% {

        box-shadow:
            0 0 0 20px rgba(37,211,102,0);

    }

    100% {

        box-shadow:
            0 0 0 0 rgba(37,211,102,0);

    }

}

#whatsappButton {

    animation:
        whatsappPulse 2.5s infinite;

}

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

@keyframes counterGlow {

    0% {

        text-shadow:
            0 0 0 rgba(96,165,250,0);

    }

    50% {

        text-shadow:
            0 0 25px rgba(96,165,250,.7);

    }

    100% {

        text-shadow:
            0 0 0 rgba(96,165,250,0);

    }

}

.counter {

    animation:
        counterGlow 4s infinite;

}

/* ==========================================================
   CTA BREATHING EFFECT
========================================================== */

@keyframes ctaBreathing {

    0% {

        transform:
            scale(1);

    }

    50% {

        transform:
            scale(1.015);

    }

    100% {

        transform:
            scale(1);

    }

}

.cta-container {

    animation:
        ctaBreathing 8s ease-in-out infinite;

}

/* ==========================================================
   PROFILE IMAGE GLOW
========================================================== */

@keyframes profileGlow {

    0% {

        box-shadow:
            0 0 0 rgba(96,165,250,0);

    }

    50% {

        box-shadow:
            0 0 40px rgba(96,165,250,.15);

    }

    100% {

        box-shadow:
            0 0 0 rgba(96,165,250,0);

    }

}

.profile-image {

    animation:
        profileGlow 8s ease-in-out infinite;

}

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

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

    * {

        animation:none !important;

        transition:none !important;

        scroll-behavior:auto !important;

    }

}