/* ==========================================================================
   Vistaar IT - motion design system
   --------------------------------------------------------------------------
   Everything here is scoped to .js (added by marketing-boot.js), so with
   JavaScript blocked the page renders fully visible. Only transform, opacity
   and filter are animated, and prefers-reduced-motion removes all movement.
   ========================================================================== */

:root {
    --motion-fast: 160ms;
    --motion-normal: 260ms;
    --motion-slow: 520ms;
    --motion-reveal: 780ms;
    --ease-standard: cubic-bezier(.4, 0, .2, 1);
    --ease-smooth: cubic-bezier(.22, .61, .36, 1);
    --ease-expo: cubic-bezier(.16, 1, .3, 1);
    --ease-spring: cubic-bezier(.34, 1.56, .64, 1);
    --motion-distance: 28px;
}

/* Safety net for decorative translate/scale. Layout fixes still matter. */
html, body { overflow-x: clip; }

/* --- scroll progress ------------------------------------------------------ */
.mk-progress {
    position: fixed;
    inset: 0 auto auto 0;
    z-index: 120;
    width: 100%;
    height: 2px;
    transform: scaleX(0);
    transform-origin: 0 50%;
    background: linear-gradient(90deg, #7c3aed, #7c3aed, #db2777);
    will-change: transform;
    pointer-events: none;
}

/* --- sticky navigation ---------------------------------------------------- */
.mk-nav { transition: background var(--motion-normal) var(--ease-standard), box-shadow var(--motion-normal) var(--ease-standard), padding var(--motion-normal) var(--ease-standard); }
.mk-nav.is-scrolled {
    background: rgba(255, 255, 255, .86);
    -webkit-backdrop-filter: saturate(140%) blur(14px);
    backdrop-filter: saturate(140%) blur(14px);
    box-shadow: 0 10px 30px -24px rgba(15, 23, 42, .55);
    border-bottom: 1px solid rgba(226, 232, 240, .9);
}
.mk-nav.is-scrolled .mk-nav-inner { padding-top: 8px; padding-bottom: 8px; }
.mk-nav-inner { transition: padding var(--motion-normal) var(--ease-standard); }

/* --- navigation entrance -------------------------------------------------- */
.js .mk-nav { opacity: 0; transform: translateY(-10px); animation: mk-nav-in .6s var(--ease-expo) .12s forwards; }
@keyframes mk-nav-in { to { opacity: 1; transform: none; } }
.js .mk-nav-links a, .js .mk-nav-links summary { opacity: 0; animation: mk-nav-item .45s var(--ease-smooth) forwards; }
.js .mk-nav-links > *:nth-child(1) { animation-delay: .20s; }
.js .mk-nav-links > *:nth-child(2) { animation-delay: .25s; }
.js .mk-nav-links > *:nth-child(3) { animation-delay: .30s; }
.js .mk-nav-links > *:nth-child(4) { animation-delay: .35s; }
.js .mk-nav-links > *:nth-child(5) { animation-delay: .40s; }
.js .mk-nav-links > *:nth-child(6) { animation-delay: .45s; }
.js .mk-nav-links > *:nth-child(7) { animation-delay: .50s; }
@keyframes mk-nav-item { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }

/* --- dropdown entrance ---------------------------------------------------- */
.mk-menu-panel { opacity: 0; transform: translateY(-6px); transform-origin: top left; pointer-events: none; transition: opacity var(--motion-fast) var(--ease-smooth), transform var(--motion-fast) var(--ease-expo); }
.mk-menu[open] > .mk-menu-panel { opacity: 1; transform: none; pointer-events: auto; }
@media (max-width: 960px) { .mk-menu-panel { opacity: 1; transform: none; pointer-events: auto; } }

/* --- reveal engine -------------------------------------------------------- */
.js [data-motion] {
    opacity: 0;
    transition: opacity var(--motion-reveal) var(--ease-smooth),
                transform var(--motion-reveal) var(--ease-expo),
                filter var(--motion-reveal) var(--ease-smooth);
    will-change: opacity, transform;
}
.js [data-motion="up"]    { transform: translateY(var(--motion-distance)); }
.js [data-motion="down"]  { transform: translateY(calc(var(--motion-distance) * -.8)); }
.js [data-motion="left"]  { transform: translateX(calc(var(--motion-distance) * -1)); }
.js [data-motion="right"] { transform: translateX(var(--motion-distance)); }
.js [data-motion="scale"] { transform: scale(.955); }
.js [data-motion="blur"]  { filter: blur(10px); transform: translateY(16px); }
.js [data-motion].is-visible { opacity: 1; transform: none; filter: none; }

/* --- stagger -------------------------------------------------------------- */
.js [data-stagger] [data-stagger-item] {
    opacity: 0;
    transform: translateY(22px);
    transition: opacity .65s var(--ease-smooth), transform .65s var(--ease-expo);
    transition-delay: calc(var(--stagger-index, 0) * 85ms);
    will-change: opacity, transform;
}
.js [data-stagger] [data-stagger-item].is-visible { opacity: 1; transform: none; }

/* --- split heading (words) ------------------------------------------------ */
.js [data-split] .mk-word {
    display: inline-block;
    opacity: 0;
    transform: translateY(105%);
    clip-path: inset(0 0 100% 0);
    transition: opacity .6s var(--ease-smooth), transform .8s var(--ease-expo), clip-path .8s var(--ease-expo);
    transition-delay: calc(var(--word-index, 0) * 55ms);
    will-change: opacity, transform, clip-path;
}
.js [data-split].is-visible .mk-word { opacity: 1; transform: none; clip-path: inset(-20% -10% -20% -10%); }

/* --- parallax / pointer --------------------------------------------------- */
[data-parallax], [data-pointer] { will-change: transform; }

/* --- tilt + magnetic ------------------------------------------------------ */
.js [data-tilt] { transform-style: preserve-3d; transition: transform .35s var(--ease-spring); }
.js [data-magnetic] { transition: transform .25s var(--ease-standard); }
@media (hover: hover) and (pointer: fine) {
    .js [data-tilt]:hover { transition-duration: .12s; }
}

/* --- buttons + arrows ----------------------------------------------------- */
.mk-btn, .vt-btn { position: relative; overflow: hidden; }
.mk-btn > *, .vt-btn > * { position: relative; z-index: 1; }
.vt-btn--primary::after {
    content: "";
    position: absolute;
    inset: -60% -20%;
    background: radial-gradient(220px 120px at var(--mx, 50%) var(--my, 50%), rgba(255, 255, 255, .35), transparent 65%);
    opacity: 0;
    transition: opacity var(--motion-normal) var(--ease-standard);
    pointer-events: none;
}
.vt-btn--primary:hover::after { opacity: 1; }
.vt-btn .vt-arrow, .mk-btn .mk-arrow { display: inline-block; transition: transform var(--motion-normal) var(--ease-expo); }
.vt-btn:hover .vt-arrow, .mk-btn:hover .mk-arrow { transform: translateX(4px); }

/* --- card hover ----------------------------------------------------------- */
.hover-lift { transition: transform var(--motion-normal) var(--ease-expo), box-shadow var(--motion-normal) var(--ease-standard), border-color var(--motion-normal) var(--ease-standard); }
.hover-lift:hover { transform: translateY(-5px); box-shadow: 0 22px 44px -30px rgba(15, 23, 42, .5); }

/* animated icon nudge on card hover */
.vt-card .vt-icon { transition: transform var(--motion-normal) var(--ease-spring); }
.vt-card:hover .vt-icon { transform: translateY(-2px) scale(1.06); }

/* --- floating decorative elements ---------------------------------------- */
@keyframes mk-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
.mk-float { animation: mk-float 6s var(--ease-smooth) infinite; }
.mk-float--delay { animation-delay: -2.4s; }

/* --- hero background fields ---------------------------------------------- */
@keyframes mk-drift { 0%, 100% { transform: translate3d(0, 0, 0) scale(1); } 50% { transform: translate3d(14px, -10px, 0) scale(1.04); } }
.vt-hero::before, .vt-hero::after { content: ""; position: absolute; pointer-events: none; border-radius: 50%; filter: blur(60px); opacity: .45; }
.vt-hero { position: relative; overflow: hidden; }
.vt-hero::before { width: 420px; height: 420px; top: -160px; right: -80px; background: radial-gradient(circle, #c7d2fe, transparent 68%); }
.vt-hero::after { width: 360px; height: 360px; bottom: -180px; left: -120px; background: radial-gradient(circle, #ddd6fe, transparent 68%); }
.js .vt-hero::before, .js .vt-hero::after { animation: mk-drift 14s var(--ease-smooth) infinite; }

/* --- footer entrance ------------------------------------------------------ */
.js .mk-foot-grid > div { opacity: 0; transform: translateY(14px); transition: opacity .6s var(--ease-smooth), transform .6s var(--ease-expo); }
.js .mk-foot-grid.is-visible > div { opacity: 1; transform: none; }
.js .mk-foot-grid.is-visible > div:nth-child(1) { transition-delay: 0ms; }
.js .mk-foot-grid.is-visible > div:nth-child(2) { transition-delay: 90ms; }
.js .mk-foot-grid.is-visible > div:nth-child(3) { transition-delay: 180ms; }
.js .mk-foot-grid.is-visible > div:nth-child(4) { transition-delay: 270ms; }

/* --- reduced motion ------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
        scroll-behavior: auto !important;
    }
    .js [data-motion], .js [data-stagger] [data-stagger-item],
    .js [data-split] .mk-word, .js .mk-nav, .js .mk-nav-links a, .js .mk-nav-links summary {
        opacity: 1 !important;
        transform: none !important;
        filter: none !important;
        clip-path: none !important;
    }
    .mk-progress { display: none; }
}