/* ==========================================================================
   PREMIUM MOTION LAYER
   Everything here sits on top of style.css. The hidden "before" states only
   apply when JavaScript is running (html.fx) and the visitor has not asked
   for reduced motion, so the site always stays readable without it.
   Transforms use the individual translate / scale / rotate properties so
   they stack with the hover transforms already defined in style.css.
   ========================================================================== */

:root {
    --fx-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
    --fx-ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
    --fx-ease-back: cubic-bezier(0.34, 1.56, 0.64, 1);
    --fx-violet: #6d4bff;
    --fx-violet-light: #a78bfa;
    --fx-cyan: #38bdf8;
}

/* Safety net: no animation may widen the page sideways (clip keeps sticky working) */
main {
    overflow-x: clip;
}

/* ---------- Scroll progress bar ---------- */
.fx-progress {
    position: fixed;
    inset: 0 0 auto 0;
    height: 3px;
    z-index: 2000;
    pointer-events: none;
    transform-origin: 0 50%;
    transform: scaleX(0);
    background: linear-gradient(90deg, var(--fx-violet), var(--fx-violet-light), var(--fx-cyan));
    box-shadow: 0 0 12px rgba(109, 75, 255, 0.55);
}

/* ---------- Preloader (first page of a visit only) ---------- */
.fx-preloader {
    display: none;
}

html.fx-preload .fx-preloader {
    position: fixed;
    inset: 0;
    z-index: 3000;
    display: grid;
    place-items: center;
    background:
        radial-gradient(60% 50% at 70% 20%, rgba(109, 75, 255, 0.28), transparent 70%),
        radial-gradient(50% 40% at 20% 85%, rgba(56, 189, 248, 0.14), transparent 70%),
        #020617;
    color: #fff;
    clip-path: inset(0 0 0 0);
    transition: clip-path 0.9s var(--fx-ease-in-out), visibility 0s linear 0.9s;
    /* Never trap the visitor if the script does not run */
    animation: fx-preloader-failsafe 0.01s linear 4.5s forwards;
}

html.fx-preload.fx-start .fx-preloader {
    clip-path: inset(0 0 100% 0);
    visibility: hidden;
}

@keyframes fx-preloader-failsafe {
    to { clip-path: inset(0 0 100% 0); visibility: hidden; }
}

.fx-preloader-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 22px;
}

.fx-preloader-ring {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: conic-gradient(from 0deg, transparent 0 25%, var(--fx-violet), var(--fx-violet-light), var(--fx-cyan));
    -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 2px));
    mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 2px));
    animation: fx-spin 1s linear infinite;
}

.fx-preloader-name {
    display: flex;
    font-family: var(--font-family-heading, 'Rajdhani', sans-serif);
    font-weight: 700;
    font-size: clamp(1.5rem, 4vw, 2.1rem);
    letter-spacing: 0.32em;
    text-transform: uppercase;
    flex-wrap: wrap;
    justify-content: center;
    max-width: min(90vw, 760px);
    padding: 0 16px;
    overflow: hidden;
}

.fx-preloader-name span {
    display: inline-block;
    white-space: pre;
    translate: 0 110%;
    animation: fx-letter-in 0.8s var(--fx-ease-out) forwards;
    animation-delay: calc(var(--i) * 45ms + 0.1s);
}

.fx-preloader-bar {
    width: 180px;
    height: 2px;
    background: rgba(255, 255, 255, 0.1);
    overflow: hidden;
    border-radius: 2px;
}

.fx-preloader-bar::after {
    content: '';
    display: block;
    height: 100%;
    background: linear-gradient(90deg, var(--fx-violet), var(--fx-cyan));
    transform-origin: 0 50%;
    animation: fx-load-bar 1.6s var(--fx-ease-out) forwards;
}

@keyframes fx-spin { to { rotate: 360deg; } }
@keyframes fx-letter-in { to { translate: 0 0; } }
@keyframes fx-load-bar { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* ---------- Cursor follower (mouse and trackpad only) ---------- */
.fx-cursor,
.fx-cursor-dot {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 2500;
    pointer-events: none;
    border-radius: 50%;
    opacity: 0;
    transition: opacity 0.3s ease, width 0.35s var(--fx-ease-out), height 0.35s var(--fx-ease-out),
        margin 0.35s var(--fx-ease-out), background-color 0.35s ease, border-color 0.35s ease;
}

.fx-cursor {
    width: 36px;
    height: 36px;
    margin: -18px 0 0 -18px;
    border: 1.5px solid rgba(109, 75, 255, 0.55);
}

.fx-cursor-dot {
    width: 6px;
    height: 6px;
    margin: -3px 0 0 -3px;
    background: var(--fx-violet);
}

html.fx-cursor-on .fx-cursor,
html.fx-cursor-on .fx-cursor-dot {
    opacity: 1;
}

html.fx-cursor-hover .fx-cursor {
    width: 64px;
    height: 64px;
    margin: -32px 0 0 -32px;
    background-color: rgba(109, 75, 255, 0.08);
    border-color: rgba(109, 75, 255, 0.25);
}

html.fx-cursor-hover .fx-cursor-dot {
    opacity: 0;
}

html.fx-cursor-down .fx-cursor {
    width: 28px;
    height: 28px;
    margin: -14px 0 0 -14px;
}

/* ---------- Back to top with scroll ring ---------- */
.fx-top {
    position: fixed;
    right: 24px;
    bottom: 24px;
    z-index: 1050;
    width: 52px;
    height: 52px;
    display: grid;
    place-items: center;
    border: 0;
    border-radius: 50%;
    color: #fff;
    background: var(--gradient-primary, linear-gradient(135deg, #6d4bff, #8b5cf6));
    box-shadow: 0 12px 30px rgba(109, 75, 255, 0.35);
    opacity: 0;
    visibility: hidden;
    scale: 0.6;
    transition: opacity 0.4s ease, scale 0.5s var(--fx-ease-back), visibility 0s linear 0.4s, box-shadow 0.3s ease;
}

.fx-top.is-visible {
    opacity: 1;
    visibility: visible;
    scale: 1;
    transition-delay: 0s;
}

.fx-top:hover {
    box-shadow: 0 16px 40px rgba(109, 75, 255, 0.5);
}

.fx-top svg {
    position: absolute;
    inset: -5px;
    width: calc(100% + 10px);
    height: calc(100% + 10px);
    rotate: -90deg;
}

.fx-top circle {
    fill: none;
    stroke-width: 2.5;
}

.fx-top .fx-top-track { stroke: rgba(109, 75, 255, 0.15); }

.fx-top .fx-top-fill {
    stroke: var(--fx-violet);
    stroke-linecap: round;
    stroke-dasharray: 1;
    stroke-dashoffset: 1;
}

.fx-top i {
    transition: translate 0.3s var(--fx-ease-out);
}

.fx-top:hover i {
    translate: 0 -3px;
}

/* ---------- Navbar on scroll (desktop only: the mobile menu is a fixed sidebar inside it) ---------- */
@media (min-width: 992px) {
    .navbar.fx-scrolled {
        padding: 6px 0;
        background: rgba(255, 255, 255, 0.82);
        -webkit-backdrop-filter: blur(16px) saturate(170%);
        backdrop-filter: blur(16px) saturate(170%);
        box-shadow: 0 10px 40px rgba(15, 23, 42, 0.08);
    }

    .navbar-brand img {
        transition: height 0.4s var(--fx-ease-out);
    }

    .navbar.fx-scrolled .navbar-brand img {
        height: 42px;
    }
}

/* ---------- Button shine sweep ---------- */
.fx-shine-host {
    position: relative;
    overflow: hidden;
    isolation: isolate;
}

.fx-shine {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, 0.45) 50%, transparent 70%);
    translate: -120% 0;
}

.fx-shine-host:hover .fx-shine {
    translate: 120% 0;
    transition: translate 0.8s var(--fx-ease-out);
}

/* ---------- Card spotlight that follows the pointer ---------- */
.fx-glare {
    position: absolute;
    inset: 0;
    z-index: 2;
    border-radius: inherit;
    pointer-events: none;
    opacity: 0;
    background: radial-gradient(420px circle at var(--fx-mx, 50%) var(--fx-my, 50%), rgba(109, 75, 255, 0.13), transparent 45%);
    transition: opacity 0.4s ease;
}

.fx-tilt:hover .fx-glare {
    opacity: 1;
}

.fx-tilt {
    will-change: rotate;
}

/* Keep each card's own hover easing and add a quick, smooth tilt on top */
.adv-card.fx-tilt,
.blog-card.fx-tilt {
    transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275), box-shadow 0.4s ease,
        border-color 0.4s ease, background-color 0.4s ease, rotate 0.35s ease-out;
}

.project-card.fx-tilt {
    transition: transform 0.35s ease, box-shadow 0.35s ease, border-color 0.35s ease, rotate 0.35s ease-out;
}

/* ==========================================================================
   Everything below only moves for visitors who have not asked for less motion
   ========================================================================== */
@media (prefers-reduced-motion: no-preference) {

    /* Smooth cross-page fade in browsers that support it */
    @view-transition {
        navigation: auto;
    }

    ::view-transition-old(root) {
        animation: fx-page-out 0.35s var(--fx-ease-in-out) both;
    }

    ::view-transition-new(root) {
        animation: fx-page-in 0.6s var(--fx-ease-out) both;
    }

    @keyframes fx-page-out {
        to { opacity: 0; translate: 0 -12px; filter: blur(4px); }
    }

    @keyframes fx-page-in {
        from { opacity: 0; translate: 0 18px; filter: blur(6px); }
    }

    /* ---------- Hero entrance ---------- */
    html.fx .hero h1,
    html.fx .hero-content p,
    html.fx .hero-btns,
    html.fx .hero-tech-logos > *,
    html.fx .hero-trusted-label,
    html.fx .hero-stage .hs-anim {
        opacity: 0;
    }

    /* No blur here: a filter blanks out background-clip:text gradients in Chrome */
    html.fx.fx-start .hero h1 {
        animation: fx-rise-clip 1.3s var(--fx-ease-out) 0.1s both;
    }

    @keyframes fx-rise-clip {
        from { opacity: 0; transform: translateY(40px); clip-path: inset(0 0 100% 0); }
        to { opacity: 1; transform: none; clip-path: inset(-10% -5% -15% -5%); }
    }

    html.fx.fx-start .hero-content p {
        animation: fx-rise-blur 1.1s var(--fx-ease-out) 0.3s both;
    }

    html.fx.fx-start .hero-btns {
        animation: fx-rise 1s var(--fx-ease-out) 0.45s both;
    }

    html.fx.fx-start .hero-trusted-label {
        animation: fx-rise 0.9s var(--fx-ease-out) 0.6s both;
    }

    html.fx.fx-start .hero-tech-logos > * {
        animation: fx-pop 0.8s var(--fx-ease-back) both;
        animation-delay: calc(0.65s + var(--fx-i, 0) * 0.08s);
    }

    /* Hero stage: circle first, then the tech arc, then the service cards.
       Entrance animates opacity/scale; the float keeps running on translate. */
    html.fx.fx-start .hs-core {
        animation: hs-in 1.2s var(--fx-ease-out) 0.25s both;
    }


    html.fx.fx-start .hs-tile {
        animation: hs-pop 0.8s var(--fx-ease-back) calc(0.6s + var(--i) * 0.08s) both,
            hs-bob 6s ease-in-out calc(var(--i) * -1.2s) infinite;
    }

    html.fx.fx-start .hs-card {
        animation: hs-card-in 1s var(--fx-ease-out) calc(0.8s + var(--i) * 0.12s) both,
            hs-bob 7s ease-in-out calc(var(--i) * -1.7s) infinite;
    }


    @keyframes hs-in {
        from { opacity: 0; scale: 0.7; }
        to { opacity: 1; scale: 1; }
    }

    @keyframes hs-pop {
        from { opacity: 0; scale: 0.3; }
        to { opacity: 1; scale: 1; }
    }

    @keyframes hs-card-in {
        from { opacity: 0; scale: 0.85; filter: blur(8px); }
        to { opacity: 1; scale: 1; filter: blur(0); }
    }

    @keyframes fx-rise {
        from { opacity: 0; transform: translateY(28px); }
        to { opacity: 1; transform: none; }
    }

    @keyframes fx-rise-blur {
        from { opacity: 0; transform: translateY(36px); filter: blur(12px); }
        to { opacity: 1; transform: none; filter: blur(0); }
    }

    @keyframes fx-pop {
        from { opacity: 0; transform: translateY(14px) scale(0.6); }
        to { opacity: 1; transform: none; }
    }


    /* Living hero background */
    .hero-glow {
        animation: fx-glow-drift 14s ease-in-out infinite alternate;
    }

    @keyframes fx-glow-drift {
        0% { translate: 0 0; scale: 1; opacity: 0.9; }
        50% { translate: -8% 6%; scale: 1.15; opacity: 1; }
        100% { translate: 4% -4%; scale: 0.95; opacity: 0.75; }
    }

    .hero .hero-pattern,
    .modern-counter-section .hero-pattern {
        animation: fx-grid-pan 30s linear infinite;
    }

    @keyframes fx-grid-pan {
        to { background-position: 40px 40px, 40px 40px; }
    }

    .hero-main-text {
        background: linear-gradient(90deg, #6d4bff, #a78bfa, #38bdf8, #a78bfa, #6d4bff);
        background-size: 300% 100%;
        -webkit-background-clip: text;
        background-clip: text;
        animation: fx-gradient-flow 8s linear infinite;
    }

    @keyframes fx-gradient-flow {
        to { background-position: 300% 0; }
    }

    .fx-hero-spot {
        position: absolute;
        inset: 0;
        z-index: 3;
        pointer-events: none;
        opacity: 0;
        background: radial-gradient(600px circle at var(--fx-mx, 50%) var(--fx-my, 50%), rgba(109, 75, 255, 0.16), transparent 60%);
        transition: opacity 0.6s ease;
    }

    .hero:hover .fx-hero-spot {
        opacity: 1;
    }

    /* ---------- Scroll reveals ---------- */
    html.fx .fx-reveal {
        opacity: 0;
        transition:
            opacity 0.9s var(--fx-ease-out),
            translate 1.1s var(--fx-ease-out),
            scale 1.1s var(--fx-ease-out),
            rotate 1.1s var(--fx-ease-out),
            filter 1s var(--fx-ease-out),
            clip-path 1.3s var(--fx-ease-in-out);
        transition-delay: var(--fx-delay, 0s);
    }

    html.fx .fx-reveal[data-fx="up"] { translate: 0 48px; }
    html.fx .fx-reveal[data-fx="up-blur"] { translate: 0 30px; filter: blur(10px); }
    html.fx .fx-reveal[data-fx="left"] { translate: -60px 0; }
    html.fx .fx-reveal[data-fx="right"] { translate: 60px 0; }
    html.fx .fx-reveal[data-fx="zoom"] { scale: 0.7; }
    html.fx .fx-reveal[data-fx="card"] { translate: 0 60px; scale: 0.94; }
    html.fx .fx-reveal[data-fx="fade"] { translate: 0 0; }
    html.fx .fx-reveal[data-fx="mask"] {
        opacity: 1;
        clip-path: inset(100% 0 0 0);
        scale: 1.15;
    }

    /* Phones: only vertical moves, so nothing pushes past the screen edge mid-animation */
    @media (max-width: 767.98px) {
        html.fx .fx-reveal[data-fx="left"],
        html.fx .fx-reveal[data-fx="right"] { translate: 0 36px; }
        html.fx .fx-reveal[data-fx="card"] { translate: 0 40px; scale: 1; }
        html.fx .fx-reveal[data-fx="mask"] { scale: 1; }
    }

    html.fx .fx-reveal.is-in {
        opacity: 1;
        translate: 0 0;
        scale: 1;
        filter: blur(0);
        clip-path: inset(0 0 0 0);
    }

    html.fx .fx-reveal[data-fx="zoom"].is-in {
        transition-timing-function: ease, var(--fx-ease-back), var(--fx-ease-back), ease, ease, ease;
    }

    /* Headings: each word rises out of its own mask */
    .fx-word {
        display: inline-block;
        overflow: hidden;
        vertical-align: top;
        padding-bottom: 0.08em;
        margin-bottom: -0.08em;
    }

    .fx-word-inner {
        display: inline-block;
    }

    html.fx .fx-split:not(.is-in) .fx-word-inner {
        translate: 0 110%;
        rotate: 6deg;
    }

    html.fx .fx-split .fx-word-inner {
        transform-origin: 0 100%;
        transition: translate 1.1s var(--fx-ease-out), rotate 1.1s var(--fx-ease-out);
        transition-delay: calc(var(--fx-delay, 0s) + var(--fx-w) * 55ms);
    }

    /* Process infographic: branches draw, hub and capsules pop in turn */
    html.fx .infographic-container-box .branches-svg path {
        stroke-dasharray: 1;
        stroke-dashoffset: 1;
        transition: stroke-dashoffset 1.4s var(--fx-ease-in-out);
    }

    html.fx .infographic-container-box .center-circle-hub,
    html.fx .infographic-container-box .flow-item {
        opacity: 0;
        scale: 0.5;
        transition: opacity 0.7s ease, scale 0.9s var(--fx-ease-back);
    }

    html.fx .infographic-container-box.fx-play .center-circle-hub {
        opacity: 1;
        scale: 1;
    }

    html.fx .infographic-container-box.fx-play .branches-svg path {
        stroke-dashoffset: 0;
    }

    html.fx .infographic-container-box.fx-play .flow-item {
        opacity: 1;
        scale: 1;
    }

    .infographic-container-box .branches-svg path:nth-child(1),
    .infographic-container-box .flow-item.item-1 { transition-delay: 0.35s; }
    .infographic-container-box .branches-svg path:nth-child(2),
    .infographic-container-box .flow-item.item-2 { transition-delay: 0.5s; }
    .infographic-container-box .branches-svg path:nth-child(3),
    .infographic-container-box .flow-item.item-3 { transition-delay: 0.65s; }
    .infographic-container-box .branches-svg path:nth-child(4),
    .infographic-container-box .flow-item.item-4 { transition-delay: 0.8s; }
    .infographic-container-box .branches-svg path:nth-child(5),
    .infographic-container-box .flow-item.item-5 { transition-delay: 0.95s; }
    .infographic-container-box .branches-svg path:nth-child(6),
    .infographic-container-box .flow-item.item-6 { transition-delay: 1.1s; }

    /* Skill bars fill in when they come into view */
    html.fx .skills-box .progress-bar {
        transition: width 1.8s var(--fx-ease-out);
    }

    /* Floating badges keep breathing once revealed */
    .floating-badge-wcu.fx-done,
    .trust-badge-float.fx-done,
    .service-badge-wcu.fx-done {
        animation: fx-bob 5s ease-in-out infinite;
    }

    @keyframes fx-bob {
        0%, 100% { translate: 0 0; }
        50% { translate: 0 -10px; }
    }

    /* Counter icons get a soft pulse ring */
    .counter-card-inline .icon-box {
        position: relative;
    }

    .counter-card-inline .icon-box::after {
        content: '';
        position: absolute;
        inset: 0;
        border-radius: inherit;
        box-shadow: 0 0 0 0 rgba(167, 139, 250, 0.45);
        animation: fx-ring 2.8s ease-out infinite;
        pointer-events: none;
    }

    @keyframes fx-ring {
        0% { box-shadow: 0 0 0 0 rgba(167, 139, 250, 0.45); }
        70%, 100% { box-shadow: 0 0 0 16px rgba(167, 139, 250, 0); }
    }
}

.counter-number,
.skill-header span,
.trust-badge-float span,
.floating-badge-wcu h3 {
    font-variant-numeric: tabular-nums;
}

@media (max-width: 575.98px) {
    .fx-top {
        right: 16px;
        bottom: 16px;
        width: 46px;
        height: 46px;
    }
}