/* ==========================================================================
   EliteVerze — Home page (index.html) motion layer
   Loaded ONLY by index.html, after index-glass.css. Driven by
   assets/js/index-motion.js, which adds:
     html.ev-motion  → motion allowed (JS on, no "reduce motion" preference)
     html.ev-fine    → mouse / trackpad (hover effects, spotlight)
     .is-in          → element has scrolled into view
     .ev-live        → section with ambient animation is on screen
   Everything is transform / opacity based so it stays smooth on phones.
   ========================================================================== */

:root {
    --ev-expo: cubic-bezier(.16, 1, .3, 1);
    --ev-spring: cubic-bezier(.34, 1.56, .64, 1);
}

/* keep slide-in-from-side reveals from causing a sideways scrollbar */
.page-wrapper {
    overflow-x: hidden;
}

@supports (overflow-x: clip) {
    .page-wrapper {
        overflow-x: clip;
    }
}

/* --------------------------------------------------------------------------
   1. Keyframes
   -------------------------------------------------------------------------- */
@keyframes ev-rise {
    from { opacity: 0; transform: translate3d(0, 36px, 0); }
}

@keyframes ev-from-left {
    from { opacity: 0; transform: translate3d(-44px, 0, 0); }
}

@keyframes ev-from-right {
    from { opacity: 0; transform: translate3d(44px, 0, 0); }
}

@keyframes ev-zoom {
    from { opacity: 0; transform: translate3d(0, 24px, 0) scale(.94); }
}

@keyframes ev-pop {
    from { opacity: 0; transform: translate3d(0, 14px, 0) scale(.7); }
}

@keyframes ev-blur-up {
    from { opacity: 0; transform: translate3d(0, 22px, 0); filter: blur(10px); }
}

@keyframes ev-line {
    from { transform: scaleX(0); }
}

@keyframes ev-fade {
    from { opacity: 0; }
}

@keyframes ev-drop {
    from { opacity: 0; transform: translate3d(0, -22px, 0); }
}

@keyframes ev-word {
    from { opacity: 0; transform: translate3d(0, 105%, 0) rotate(4deg); }
}

@keyframes ev-hero-img {
    from { opacity: 0; transform: translate3d(48px, 36px, 0) scale(.9) rotate(-3deg); }
}

@keyframes ev-float {
    0%, 100% { transform: translate3d(0, 0, 0); }
    50% { transform: translate3d(0, -14px, 0); }
}

@keyframes ev-aurora {
    0% { transform: translate3d(-4%, -3%, 0) rotate(0deg) scale(1); }
    50% { transform: translate3d(5%, 3%, 0) rotate(8deg) scale(1.08); }
    100% { transform: translate3d(-2%, 5%, 0) rotate(-5deg) scale(1.03); }
}

@keyframes ev-shimmer {
    to { background-position: 200% center; }
}

@keyframes ev-ping {
    75%, 100% { transform: scale(2.6); opacity: 0; }
}

@keyframes ev-sheen {
    0% { transform: translateX(-160%) rotate(18deg); }
    55%, 100% { transform: translateX(260%) rotate(18deg); }
}

@keyframes ev-wiggle {
    0%, 100% { transform: rotate(0) scale(1); }
    30% { transform: rotate(-10deg) scale(1.12); }
    60% { transform: rotate(6deg) scale(1.04); }
}

@keyframes ev-float-a {
    0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
    50% { transform: translate3d(-26px, 22px, 0) scale(1.06); }
}

@keyframes ev-float-b {
    0%, 100% { transform: translate3d(0, 0, 0); }
    50% { transform: translate3d(34px, -18px, 0); }
}

@keyframes ev-grad-shift {
    from { background-position: 0 0, 0% 50%; }
    to { background-position: 0 0, 100% 50%; }
}

@keyframes ev-curtain {
    to { transform: scaleY(0); }
}

@keyframes ev-unzoom {
    from { transform: scale(1.2); }
}

@keyframes ev-num-pop {
    40% { transform: scale(1.08); }
}

@keyframes ev-bob {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-4px); }
}

/* --------------------------------------------------------------------------
   2. Scroll reveal
   Hidden only when JS has switched motion on, so nothing ever gets stuck
   invisible. Animations use fill-mode "backwards": once they finish, the
   element's own hover transitions take over again.
   -------------------------------------------------------------------------- */
html.ev-motion .ev-fade-up:not(.is-in),
html.ev-motion .ev-fade-left:not(.is-in),
html.ev-motion .ev-fade-right:not(.is-in),
html.ev-motion .ev-zoom:not(.is-in),
html.ev-motion .ev-pop:not(.is-in),
html.ev-motion .ev-title:not(.is-in) > * {
    opacity: 0;
}

html.ev-motion .ev-fade-up.is-in,
html.ev-motion .ev-fade-left.is-in,
html.ev-motion .ev-fade-right.is-in,
html.ev-motion .ev-zoom.is-in,
html.ev-motion .ev-pop.is-in {
    animation: var(--ev-anim, ev-rise) var(--ev-dur, 1s) var(--ev-curve, var(--ev-expo)) var(--d, 0s) backwards;
}

.ev-fade-up,
.ev-fade-left,
.ev-fade-right {
    --ev-dur: 1s;
    --ev-curve: var(--ev-expo);
}

.ev-fade-up { --ev-anim: ev-rise; }
.ev-fade-left { --ev-anim: ev-from-left; }
.ev-fade-right { --ev-anim: ev-from-right; }
.ev-zoom { --ev-anim: ev-zoom; --ev-dur: 1.1s; --ev-curve: var(--ev-expo); }
.ev-pop { --ev-anim: ev-pop; --ev-dur: .7s; --ev-curve: var(--ev-spring); }

/* columns stack on tablets / phones → everything simply rises */
@media (max-width: 991px) {
    .ev-fade-left,
    .ev-fade-right {
        --ev-anim: ev-rise;
    }
}

/* section titles: accent line draws, heading un-blurs, intro follows */
html.ev-motion .ev-title.is-in .block-title__line {
    animation: ev-line .9s var(--ev-expo) var(--d, 0s) backwards;
}

html.ev-motion .ev-title.text-left .block-title__line {
    transform-origin: left center;
}

html.ev-motion .ev-title.is-in h3 {
    animation: ev-blur-up 1s var(--ev-expo) calc(var(--d, 0s) + .08s) backwards;
}

html.ev-motion .ev-title.is-in p {
    animation: ev-rise 1s var(--ev-expo) calc(var(--d, 0s) + .2s) backwards;
}

html.ev-motion .ev-title.is-in p + p {
    animation-delay: calc(var(--d, 0s) + .3s);
}

/* team photos: a gradient curtain lifts while the photo settles */
html.ev-motion .ev-curtain::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    background: linear-gradient(135deg, var(--ev-a) 0%, var(--ev-b) 100%);
    transform-origin: 50% 0;
}

html.ev-motion .ev-curtain.is-in::after {
    animation: ev-curtain 1.1s var(--ev-expo) calc(var(--d, 0s) + .15s) forwards;
}

html.ev-motion .ev-curtain.is-in .ev-team-img {
    animation: ev-unzoom 1.6s var(--ev-expo) calc(var(--d, 0s) + .15s) backwards;
}

html.ev-motion .ev-curtain.is-in .ev-team-badge {
    animation: ev-rise .9s var(--ev-expo) calc(var(--d, 0s) + .7s) backwards;
}

/* --------------------------------------------------------------------------
   3. Hero intro — plays as soon as the page is revealed
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: no-preference) {
    .main-header-wrapper .topbar-one {
        animation: ev-fade .9s ease .1s backwards;
    }

    .main-header-wrapper .site-header-two.original {
        animation: ev-drop 1s var(--ev-expo) .15s backwards;
    }

    .banner-three__content .ev-eyebrow {
        animation: ev-rise 1s var(--ev-expo) .25s backwards;
    }

    .banner-three__text {
        animation: ev-rise 1s var(--ev-expo) .8s backwards;
    }

    .banner-three__btns .thm-btn {
        animation: ev-rise 1s var(--ev-expo) .95s backwards;
    }

    .banner-three__btns .thm-btn + .thm-btn {
        animation-delay: 1.05s;
    }

    .banner-three .banner-three__moc-1 {
        animation:
            ev-hero-img 1.4s var(--ev-expo) .5s backwards,
            ev-float 7s ease-in-out 1.9s infinite;
    }
}

/* heading words slide up out of a mask (spans added by index-motion.js) */
.ev-word {
    display: inline-block;
    vertical-align: top;
    overflow: hidden;
    padding: 0 .06em .14em 0;
    margin: 0 -.06em -.14em 0;
}

.ev-word__in {
    display: inline-block;
}

html.ev-motion .ev-word__in {
    animation: ev-word 1.1s var(--ev-expo) calc(.35s + var(--i, 0) * .07s) backwards;
}

/* word wrappers must not inherit the gradient-text rule meant for the brand word */
.banner-three__content h3 .ev-word,
.banner-three__content h3 .ev-word__in:not(.ev-brand) {
    background: none;
    -webkit-text-fill-color: currentColor;
}

/* gradient brand word: slide up, then a slow shimmer */
.banner-three__content h3 > span:not(.ev-word),
.banner-three__content h3 .ev-brand {
    background-image: linear-gradient(90deg, #8fb2ff 0%, #d6a8ff 50%, #8fb2ff 100%);
    background-size: 200% auto;
}

html.ev-motion .banner-three__content h3 .ev-word__in.ev-brand {
    animation:
        ev-word 1.1s var(--ev-expo) calc(.35s + var(--i, 0) * .07s) backwards,
        ev-shimmer 6s linear 1.6s infinite;
}

/* live status dot */
.ev-eyebrow__dot::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: #4ade80;
}

html.ev-motion .ev-eyebrow__dot::after {
    animation: ev-ping 2.2s cubic-bezier(0, 0, .2, 1) 1.4s infinite;
}

/* drifting aurora behind the hero copy */
.banner-three::before {
    content: '';
    position: absolute;
    inset: -20%;
    pointer-events: none;
    background:
        radial-gradient(28% 34% at 32% 38%, rgba(61, 123, 255, .30), transparent 70%),
        radial-gradient(26% 30% at 72% 62%, rgba(162, 75, 255, .28), transparent 70%),
        radial-gradient(18% 22% at 58% 20%, rgba(236, 72, 153, .14), transparent 70%);
}

html.ev-motion .banner-three::before {
    animation: ev-aurora 18s ease-in-out infinite alternate;
}

/* scroll + pointer parallax is set from JS via the `translate` property */
.banner-three__moc-1 {
    transition: translate 1s var(--ev-expo);
}

/* --------------------------------------------------------------------------
   4. Ambient loops (paused while their section is off-screen)
   -------------------------------------------------------------------------- */
/* sheen sweeping across the "EliteVerze Digital Agency" tile */
html.ev-motion .about-four__title::after {
    left: 0;
    width: 45%;
    animation: ev-sheen 5s ease-in-out 1.5s infinite;
}

/* stats band: slow-moving glow */
.ev-stats .row::before {
    content: '';
    position: absolute;
    inset: -40%;
    pointer-events: none;
    background:
        radial-gradient(22% 30% at 30% 40%, rgba(61, 123, 255, .28), transparent 70%),
        radial-gradient(22% 30% at 70% 60%, rgba(162, 75, 255, .30), transparent 70%);
}

html.ev-motion .ev-stats .row::before {
    animation: ev-aurora 14s ease-in-out infinite alternate;
}

.ev-stats .row > [class*="col-"] {
    z-index: 1;
}

.ev-counter {
    display: inline-block;
    font-variant-numeric: tabular-nums;
}

html.ev-motion .ev-count-done {
    animation: ev-num-pop .5s var(--ev-spring);
}

/* CTA: gradient slowly flows, glass discs float */
.cta-one .inner-container {
    background:
        radial-gradient(60% 140% at 100% 0%, rgba(255, 255, 255, .22), transparent 60%),
        linear-gradient(120deg, #3d7bff 0%, #8b5cf6 35%, #a24bff 55%, #5b6cff 80%, #3d7bff 100%);
    background-size: 100% 100%, 220% 220%;
}

html.ev-motion .cta-one .inner-container {
    animation: ev-grad-shift 12s ease-in-out infinite alternate;
}

html.ev-motion .cta-one .inner-container::before {
    animation: ev-float-a 11s ease-in-out infinite;
}

html.ev-motion .cta-one .inner-container::after {
    animation: ev-float-b 9s ease-in-out infinite;
}

/* gentle idle float on the illustration */
html.ev-motion .about-three__image img {
    animation: ev-float 8s ease-in-out infinite;
}

html.ev-motion .banner-three:not(.ev-live)::before,
html.ev-motion .banner-three:not(.ev-live) .banner-three__moc-1,
html.ev-motion .banner-three:not(.ev-live) .ev-brand,
html.ev-motion .banner-three:not(.ev-live) .ev-eyebrow__dot::after,
html.ev-motion .about-four:not(.ev-live) .about-four__title::after,
html.ev-motion .about-three:not(.ev-live) .about-three__image img,
html.ev-motion .ev-stats:not(.ev-live) .row::before,
html.ev-motion .cta-one:not(.ev-live) .inner-container,
html.ev-motion .cta-one:not(.ev-live) .inner-container::before,
html.ev-motion .cta-one:not(.ev-live) .inner-container::after {
    animation-play-state: paused;
}

/* --------------------------------------------------------------------------
   5. Micro-interactions
   -------------------------------------------------------------------------- */
/* buttons: light sweep on hover, tactile press */
.thm-btn,
.header-cta-btn,
.ev-whatsapp-btn {
    position: relative;
    overflow: hidden;
    isolation: isolate;
}

.thm-btn::after,
.header-cta-btn::after,
.ev-whatsapp-btn::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: -60%;
    width: 45%;
    pointer-events: none;
    background: linear-gradient(100deg, transparent 0%, rgba(255, 255, 255, .42) 50%, transparent 100%);
    transform: skewX(-20deg) translateX(0);
}

.banner-three__content .thm-btn:not(.thm-btn--ghost)::after,
.cta-one__btn::after {
    background: linear-gradient(100deg, transparent 0%, rgba(91, 92, 246, .16) 50%, transparent 100%);
}

.thm-btn:hover::after,
.header-cta-btn:hover::after,
.ev-whatsapp-btn:hover::after {
    transform: skewX(-20deg) translateX(420%);
    transition: transform .9s var(--ev-expo);
}

.thm-btn:active,
.ev-whatsapp-btn:active,
.header-cta-btn:active {
    transform: translateY(0) scale(.97);
    transition-duration: .1s;
}

.thm-btn .fa-arrow-right {
    transition: transform .35s var(--ev-expo);
}

.thm-btn:hover .fa-arrow-right {
    transform: translateX(4px);
}

/* icons give a small wiggle when their card is hovered */
.service-one__icon i,
.about-four__icon i,
.ev-why-card .icon-wrap i,
.ev-contact-card .icon-wrap i {
    display: inline-block;
}

.about-four__box:hover .about-four__icon i,
.service-one__home-three .service-one__single:hover .service-one__icon i,
.ev-why-card:hover .icon-wrap i,
.ev-contact-card:hover .icon-wrap i {
    animation: ev-wiggle .7s var(--ev-ease);
}

.what-we-do .step-box:hover .step-num {
    transform: rotate(-6deg) scale(1.06);
}

.ev-industry-chip i {
    transition: color .3s ease, transform .4s var(--ev-spring);
}

.ev-industry-chip:hover i {
    transform: rotate(-12deg) scale(1.18);
}

.ev-skill-tag:hover {
    transform: translateY(-2px);
}

.ev-testi-card .quote-icon {
    transition: transform .5s var(--ev-spring), opacity .3s ease;
}

.ev-testi-card:hover .quote-icon {
    opacity: .85;
    transform: translateY(-4px) rotate(-8deg);
}

.ev-contact-card .ev-contact-phone:hover {
    transform: translateY(-2px);
}

.scroll-to-top:hover i {
    display: inline-block;
    animation: ev-bob .8s ease-in-out infinite;
}

/* sticky header glides in instead of snapping */
.stricked-menu {
    transition: transform .55s var(--ev-expo), opacity .35s ease;
}

/* cursor spotlight on glass cards (mouse / trackpad only) */
@property --ev-spot {
    syntax: '<number>';
    inherits: false;
    initial-value: 0;
}

html.ev-fine :is(.about-four__box, .what-we-do .step-box, .service-one__home-three .service-one__single, .ev-why-card, .ev-testi-card, .ev-contact-card, .about-three .about-funfact__box, .ev-team-info) {
    --ev-spot: 0;
    background-image: radial-gradient(380px circle at var(--mx, 50%) var(--my, 50%), rgba(124, 92, 255, calc(.14 * var(--ev-spot))), transparent 65%) !important;
    transition: transform .35s var(--ev-ease), box-shadow .35s var(--ev-ease), background-color .35s ease, border-color .35s ease, --ev-spot .45s ease;
}

html.ev-fine :is(.about-four__box, .what-we-do .step-box, .service-one__home-three .service-one__single, .ev-why-card, .ev-testi-card, .ev-contact-card, .about-three .about-funfact__box, .ev-team-info):hover {
    --ev-spot: 1;
}

/* --------------------------------------------------------------------------
   6. Scroll progress bar (element added by index-motion.js)
   -------------------------------------------------------------------------- */
.ev-progress {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1001;
    height: 3px;
    pointer-events: none;
    transform: scaleX(0);
    transform-origin: 0 50%;
    background: linear-gradient(90deg, var(--ev-a) 0%, var(--ev-b) 100%);
    box-shadow: 0 0 12px rgba(124, 92, 255, .55);
}

/* --------------------------------------------------------------------------
   7. Mobile drawer: links cascade in
   -------------------------------------------------------------------------- */
.side-menu__block .side-menu__top,
.side-menu__block .mobile-nav__container li,
.side-menu__block .side-menu__content {
    opacity: 0;
    transform: translate3d(-18px, 0, 0);
    transition: opacity .3s ease, transform .3s ease;
}

.side-menu__block.active .side-menu__top,
.side-menu__block.active .mobile-nav__container li,
.side-menu__block.active .side-menu__content {
    opacity: 1;
    transform: none;
    transition: opacity .5s ease, transform .6s var(--ev-expo);
}

.side-menu__block.active .side-menu__top { transition-delay: .1s; }
.side-menu__block.active .mobile-nav__container li:nth-child(1) { transition-delay: .14s; }
.side-menu__block.active .mobile-nav__container li:nth-child(2) { transition-delay: .18s; }
.side-menu__block.active .mobile-nav__container li:nth-child(3) { transition-delay: .22s; }
.side-menu__block.active .mobile-nav__container li:nth-child(4) { transition-delay: .26s; }
.side-menu__block.active .mobile-nav__container li:nth-child(5) { transition-delay: .30s; }
.side-menu__block.active .mobile-nav__container li:nth-child(6) { transition-delay: .34s; }
.side-menu__block.active .mobile-nav__container li:nth-child(7) { transition-delay: .38s; }
.side-menu__block.active .mobile-nav__container li:nth-child(8) { transition-delay: .42s; }
.side-menu__block.active .side-menu__content { transition-delay: .46s; }

/* --------------------------------------------------------------------------
   8. Reduced motion — show everything, keep only colour/shadow changes
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    .ev-word__in,
    .banner-three::before,
    .ev-stats .row::before,
    .cta-one .inner-container,
    .cta-one .inner-container::before,
    .cta-one .inner-container::after,
    .about-four__title::after,
    .about-three__image img,
    .ev-curtain::after {
        animation: none !important;
    }

    .ev-curtain::after {
        display: none;
    }

    .side-menu__block .side-menu__top,
    .side-menu__block .mobile-nav__container li,
    .side-menu__block .side-menu__content {
        opacity: 1;
        transform: none;
    }

    .thm-btn::after,
    .header-cta-btn::after,
    .ev-whatsapp-btn::after {
        display: none;
    }
}