/* ==========================================================================
   Jainsoft — professional animations & polish
   Scroll reveals, hover micro-interactions, hero polish, marquee, gradients
   ========================================================================== */

/* ---------- Keyframes library ---------- */
@keyframes js-fadeUp      { from { opacity: 0; transform: translateY(28px) } to { opacity: 1; transform: none } }
@keyframes js-fadeDown    { from { opacity: 0; transform: translateY(-22px) } to { opacity: 1; transform: none } }
@keyframes js-fadeLeft    { from { opacity: 0; transform: translateX(-28px) } to { opacity: 1; transform: none } }
@keyframes js-fadeRight   { from { opacity: 0; transform: translateX(28px) } to { opacity: 1; transform: none } }
@keyframes js-zoomIn      { from { opacity: 0; transform: scale(.88) } to { opacity: 1; transform: none } }
@keyframes js-marquee     { from { transform: translateX(0) } to { transform: translateX(-50%) } }
@keyframes js-shine       { from { transform: translateX(-100%) } to { transform: translateX(200%) } }
@keyframes js-gradientShift{ 0%{background-position:0% 50%} 50%{background-position:100% 50%} 100%{background-position:0% 50%} }
@keyframes js-float-y     { 0%,100%{ transform: translateY(0) } 50%{ transform: translateY(-14px) } }
@keyframes js-float-x     { 0%,100%{ transform: translateX(0) } 50%{ transform: translateX(10px) } }
@keyframes js-pulse-ring  { 0%{ box-shadow: 0 0 0 0 rgba(86,174,227,.45) } 70%{ box-shadow: 0 0 0 18px rgba(86,174,227,0) } 100%{ box-shadow: 0 0 0 0 rgba(86,174,227,0) } }
@keyframes js-spin-slow   { to { transform: rotate(360deg) } }
@keyframes js-bar-grow    { from { transform: scaleY(0) } to { transform: scaleY(1) } }
@keyframes js-orbit       { from{ transform: rotate(0) translateX(40px) rotate(0) } to{ transform: rotate(360deg) translateX(40px) rotate(-360deg) } }

/* ---------- Scroll-reveal primitives ---------- */
[data-reveal]           { opacity: 0; transform: translateY(28px); transition: opacity .7s cubic-bezier(.2,.8,.2,1), transform .7s cubic-bezier(.2,.8,.2,1); will-change: transform, opacity }
[data-reveal="up"]      { transform: translateY(28px) }
[data-reveal="down"]    { transform: translateY(-22px) }
[data-reveal="left"]    { transform: translateX(-28px) }
[data-reveal="right"]   { transform: translateX(28px) }
[data-reveal="zoom"]    { transform: scale(.92) }
[data-reveal].is-in     { opacity: 1; transform: none }
[data-reveal][data-delay="100"]{ transition-delay: .1s }
[data-reveal][data-delay="200"]{ transition-delay: .2s }
[data-reveal][data-delay="300"]{ transition-delay: .3s }
[data-reveal][data-delay="400"]{ transition-delay: .4s }
[data-reveal][data-delay="500"]{ transition-delay: .5s }

/* Auto-stagger grid children on reveal */
.js-stagger > *          { opacity: 0; transform: translateY(20px); transition: opacity .6s cubic-bezier(.2,.8,.2,1), transform .6s cubic-bezier(.2,.8,.2,1) }
.js-stagger.is-in > *    { opacity: 1; transform: none }
.js-stagger.is-in > *:nth-child(1){ transition-delay:.05s }
.js-stagger.is-in > *:nth-child(2){ transition-delay:.15s }
.js-stagger.is-in > *:nth-child(3){ transition-delay:.25s }
.js-stagger.is-in > *:nth-child(4){ transition-delay:.35s }
.js-stagger.is-in > *:nth-child(5){ transition-delay:.45s }
.js-stagger.is-in > *:nth-child(6){ transition-delay:.55s }
.js-stagger.is-in > *:nth-child(n+7){ transition-delay:.6s }

/* ---------- HERO — animated headline + orbits + parallax ---------- */
.js-hero h1 {
    background: linear-gradient(90deg, var(--js-primary-dark) 0%, var(--js-primary) 45%, var(--js-primary-dark) 100%);
    background-size: 220% auto;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    animation: js-gradientShift 9s ease-in-out infinite;
}
.js-hero-copy { animation: js-fadeRight .9s cubic-bezier(.2,.8,.2,1) both }
.js-hero-visual { animation: js-fadeLeft .9s cubic-bezier(.2,.8,.2,1) both; animation-delay: .1s }

/* Decorative orbit shapes behind hero dashboard */
.js-hero-visual::before {
    content: "";
    position: absolute; top: 10%; left: 8%;
    width: 14px; height: 14px; border-radius: 50%;
    background: var(--js-accent);
    animation: js-orbit 11s linear infinite;
    opacity: .7;
}
.js-hero-visual::after {
    content: "";
    position: absolute; bottom: 12%; right: 6%;
    width: 10px; height: 10px; border-radius: 50%;
    background: var(--js-primary);
    animation: js-orbit 14s linear infinite reverse;
    opacity: .5;
}

/* Dashboard gentle float + shine sweep */
.js-dashboard { animation: js-float-y 6s ease-in-out infinite; position: relative; overflow: hidden }
.js-dashboard::after {
    content: "";
    position: absolute; inset: 0;
    background: linear-gradient(120deg, transparent 0%, transparent 35%, rgba(255,255,255,.35) 50%, transparent 65%, transparent 100%);
    pointer-events: none;
    animation: js-shine 5.5s ease-in-out infinite;
    animation-delay: 2s;
}

/* Hero-badge pulse ring */
.js-dash-badge { animation: js-pulse-ring 2.6s ease-out infinite, js-float-y 5s ease-in-out infinite }

/* ---------- LOGO MARQUEE ---------- */
.js-logos .js-logo-row {
    position: relative;
    overflow: hidden;
    mask-image: linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%);
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%);
    display: flex;
    gap: 3rem;
    flex-wrap: nowrap;
    width: 100%;
    margin-top: 1.25rem;
}
.js-logos .js-logo-track {
    display: inline-flex;
    gap: 3rem;
    animation: js-marquee 32s linear infinite;
    flex: none;
    padding-right: 3rem;
}
.js-logos:hover .js-logo-track { animation-play-state: paused }
.js-logo {
    color: #9aa8bc;
    font-weight: 800;
    font-family: var(--js-display);
    letter-spacing: .04em;
    font-size: 1.1rem;
    white-space: nowrap;
    transition: color .25s, transform .25s;
    flex: none;
}
.js-logo:hover { color: var(--js-primary); transform: translateY(-2px) }

/* ---------- Section-head gradient title ---------- */
.js-section-head h2 {
    background: linear-gradient(90deg, var(--js-primary-dark), var(--js-primary) 80%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
.js-section.js-dark .js-section-head h2,
.js-section.js-cta h2 {
    background: linear-gradient(90deg, #fff, #d8e4f2);
    -webkit-background-clip: text;
    background-clip: text;
}

/* ---------- CARDS — 3D tilt on hover + shine + glowing border ---------- */
.js-card {
    transform-style: preserve-3d;
    transition: transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s, border-color .25s;
    position: relative;
}
.js-card::before {
    content: "";
    position: absolute; inset: 0;
    border-radius: inherit;
    padding: 1px;
    background: linear-gradient(135deg, transparent 40%, rgba(86,174,227,.35) 60%, rgba(164,212,0,.35) 100%);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
            mask-composite: exclude;
    opacity: 0;
    transition: opacity .25s;
    pointer-events: none;
}
.js-card:hover { transform: translateY(-8px) scale(1.015); box-shadow: 0 24px 50px rgba(35,36,38,.14) }
.js-card:hover::before { opacity: 1 }

/* Service card: icon nudge + arrow slide */
.js-service-card .js-link-arrow { transition: letter-spacing .25s, color .25s, transform .25s }
.js-service-card:hover .js-link-arrow { letter-spacing: .06em; transform: translateX(4px); color: var(--js-primary-dark) }
.js-service-card:hover .js-card-icon { transform: rotate(-8deg) scale(1.08) }

/* Industry card: ring pulse on hover */
.js-card.js-ind:hover span { animation: js-pulse-ring 1.4s ease-out 1 }

/* ---------- PILLAR cards — glowing top bar on hover ---------- */
.js-pillar { overflow: hidden; position: relative }
.js-pillar::after {
    content: "";
    position: absolute; top: 0; left: 0; right: 0; height: 3px;
    background: linear-gradient(90deg, var(--js-primary), var(--js-accent));
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .4s cubic-bezier(.2,.8,.2,1);
}
.js-pillar:hover::after { transform: scaleX(1) }

/* ---------- Counter bar mini-chart behind numbers ---------- */
.js-counters { isolation: isolate }
.js-counter { position: relative; padding: 1rem 0.5rem }
.js-counter::before {
    content: "";
    position: absolute; inset: auto 18% 8% 18%; height: 36px;
    background:
        linear-gradient(180deg, transparent 0%, rgba(164,212,0,.08) 100%);
    border-radius: 4px;
    z-index: -1;
    transform: scaleY(0);
    transform-origin: bottom;
    transition: transform .8s cubic-bezier(.2,.8,.2,1);
}
.js-counter.is-in::before { transform: scaleY(1) }
.js-counter strong {
    display: inline-block;
    background: linear-gradient(180deg, #fff 0%, var(--js-accent) 140%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

/* ---------- PRICING — featured plan: ribbon + scale on hover ---------- */
.js-price-card { transition: transform .3s cubic-bezier(.2,.8,.2,1), box-shadow .3s, border-color .3s }
.js-price-card:hover { transform: translateY(-10px) }
.js-price-card.is-featured { position: relative }
.js-price-card.is-featured::before {
    content: "★ POPULAR";
    position: absolute;
    top: 16px; right: -42px;
    background: var(--js-accent);
    color: #2a3c00;
    padding: .35rem 3rem;
    font-size: .68rem;
    font-weight: 800;
    letter-spacing: .1em;
    transform: rotate(45deg);
    box-shadow: 0 4px 10px rgba(0,0,0,.15);
}
.js-price-card.is-featured:hover { transform: scale(1.04) translateY(-10px) }

/* ---------- TEAM — tilt + photo zoom ---------- */
.js-team-card { transition: transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s }
.js-team-card .js-team-photo { overflow: hidden }
.js-team-card .js-team-photo img { transition: transform .6s cubic-bezier(.2,.8,.2,1) }
.js-team-card:hover .js-team-photo img { transform: scale(1.08) }
.js-team-socials a { transition: transform .2s, background .2s, color .2s }
.js-team-socials a:hover { transform: translateY(-3px) scale(1.1) }

/* ---------- PROCESS — step number orbit + connector line ---------- */
.js-process { counter-reset: step }
.js-process li { position: relative; transition: transform .3s }
.js-process li:hover { transform: translateY(-6px) }
.js-process li span { transition: transform .25s }
.js-process li:hover span { transform: scale(1.1) rotate(-5deg) }

/* ---------- STACK flow — glowing step markers ---------- */
.js-stack-flow li { transition: transform .3s, background .3s }
.js-stack-flow li:hover {
    transform: translateY(-4px);
    background: rgba(164,212,0,.12);
    border-color: rgba(164,212,0,.4);
}
.js-stack-flow li span {
    display: inline-block;
    transition: transform .3s;
}
.js-stack-flow li:hover span { transform: scale(1.15) rotate(-6deg) }

/* ---------- CTA buttons — shine sweep ---------- */
.js-btn { position: relative; overflow: hidden; isolation: isolate }
.js-btn::after {
    content: "";
    position: absolute; inset: 0;
    background: linear-gradient(120deg, transparent 0%, transparent 35%, rgba(255,255,255,.45) 50%, transparent 65%, transparent 100%);
    transform: translateX(-100%);
    transition: transform .6s ease;
    pointer-events: none;
    z-index: -1;
}
.js-btn:hover::after { transform: translateX(100%) }

.js-btn-primary:hover { transform: translateY(-2px) scale(1.02) }

/* Pulsing CTA (add class .js-pulse) */
.js-btn.js-pulse { animation: js-pulse-ring 2s ease-out infinite }

/* ---------- Section-head eyebrow: underline animation ---------- */
.js-section-head .js-eyebrow {
    position: relative;
    overflow: hidden;
}
.js-section-head .js-eyebrow::after {
    content: "";
    position: absolute; left: -100%; top: 0; bottom: 0; width: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.5), transparent);
    animation: js-shine 3s ease-in-out infinite;
    animation-delay: 1s;
}

/* ---------- Mega menu items: slide-in when panel opens ---------- */
.js-has-megapanel:hover > .js-megapanel .js-mega-col,
.js-has-megapanel:focus-within > .js-megapanel .js-mega-col {
    animation: js-fadeUp .4s cubic-bezier(.2,.8,.2,1) both;
}
.js-has-megapanel > .js-megapanel .js-mega-col:nth-child(2) { animation-delay: .06s }
.js-has-megapanel > .js-megapanel .js-mega-col:nth-child(3) { animation-delay: .12s }
.js-has-megapanel > .js-megapanel .js-mega-col:nth-child(4) { animation-delay: .18s }
.js-has-megapanel > .js-megapanel .js-mega-feature { animation: js-fadeRight .5s cubic-bezier(.2,.8,.2,1) both; animation-delay: .2s }

/* ---------- Progress bars: add sheen ---------- */
.js-bar { position: relative; overflow: hidden }
.js-bar > span::after {
    content: "";
    position: absolute; top: 0; right: 0; bottom: 0; width: 40px;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.5));
    animation: js-shine 2s ease-in-out infinite;
}

/* ---------- Exit popup: scale-in entry ---------- */
.js-exit-dialog { animation: js-zoomIn .35s cubic-bezier(.2,.8,.2,1) both }

/* ---------- Testimonial card rating: animated stars ---------- */
.js-rating { transition: transform .3s }
.js-testi-card:hover .js-rating { transform: scale(1.08) }
.js-testi-card blockquote::before { transition: transform .3s, color .3s }
.js-testi-card:hover blockquote::before { transform: scale(1.3) rotate(-6deg); color: var(--js-accent) }

/* ---------- Sticky WhatsApp: subtle pulse ---------- */
.js-sticky-wa { animation: js-pulse-ring 2.5s ease-out infinite }

/* ---------- Scroll-top button: bounce on visible ---------- */
.js-scrolltop.is-visible { animation: js-fadeUp .4s cubic-bezier(.2,.8,.2,1) both }

/* ---------- Fine polish: link underline grow ---------- */
.js-link-arrow { position: relative }
.js-link-arrow::before {
    content: "";
    position: absolute; bottom: -2px; left: 0; height: 2px; width: 0;
    background: var(--js-accent);
    transition: width .3s cubic-bezier(.2,.8,.2,1);
}
.js-link-arrow:hover::before { width: 100% }

/* ---------- Section fade-in on scroll (auto applied via JS) ---------- */
.js-section[data-revealed]{ opacity: 0; transform: translateY(30px); transition: opacity .8s cubic-bezier(.2,.8,.2,1), transform .8s cubic-bezier(.2,.8,.2,1) }
.js-section[data-revealed].is-in{ opacity: 1; transform: none }

/* ==========================================================================
   HEADER & NAV polish
   ========================================================================== */

/* Header: gradient bottom accent + shrink on scroll */
.js-header {
    transition: box-shadow .25s ease, padding .25s ease, background .25s ease;
    backdrop-filter: saturate(180%) blur(10px);
    background: rgba(255,255,255,.96);
}
.js-header::after {
    content:"";
    position:absolute; left:0; right:0; bottom:-1px; height:2px;
    background: linear-gradient(90deg, transparent, var(--js-primary) 20%, var(--js-accent) 50%, var(--js-primary) 80%, transparent);
    opacity: 0; transition: opacity .3s;
}
.js-header.is-scrolled::after { opacity: 1 }
.js-header.is-scrolled { box-shadow: 0 6px 24px rgba(35,36,38,.08) }
.js-header.is-scrolled .js-header-inner { padding-top: .6rem; padding-bottom: .6rem }

/* Brand: subtle logo shine on load */
.js-brand-text { position: relative; overflow: hidden }
.js-logo-mark {
    transition: transform .3s cubic-bezier(.2,.8,.2,1), box-shadow .3s;
    box-shadow: 0 4px 12px rgba(44,79,124,.25);
}
.js-brand-text:hover .js-logo-mark {
    transform: rotate(-8deg) scale(1.08);
    box-shadow: 0 8px 20px rgba(44,79,124,.35);
}
.js-logo-mark::after {
    animation: js-pulse-ring 2.4s ease-out infinite;
}

/* Nav items: smooth color + animated underline */
.js-menu > li > a {
    transition: color .2s ease;
    position: relative;
    padding: .5rem 0;
}
.js-menu > li > a::before {
    content:"";
    position: absolute; left: 50%; right: 50%; bottom: -2px; height: 2px;
    background: linear-gradient(90deg, var(--js-primary), var(--js-accent));
    transition: left .25s cubic-bezier(.2,.8,.2,1), right .25s cubic-bezier(.2,.8,.2,1);
    border-radius: 2px;
}
.js-menu > li > a:hover,
.js-menu > li.current-menu-item > a,
.js-menu > li.current-menu-parent > a {
    color: var(--js-primary-dark);
}
.js-menu > li > a:hover::before,
.js-menu > li.current-menu-item > a::before,
.js-menu > li.current-menu-parent > a::before {
    left: 0; right: 0;
}

/* Header CTA button: attention glow */
.js-header-cta .js-btn-primary {
    position: relative;
    box-shadow: 0 6px 18px rgba(164,212,0,.4);
}
.js-header-cta .js-btn-primary::before {
    content:"";
    position: absolute; inset: -4px;
    border-radius: inherit;
    background: linear-gradient(90deg, var(--js-primary), var(--js-accent));
    opacity: 0;
    filter: blur(14px);
    transition: opacity .3s;
    z-index: -1;
}
.js-header-cta .js-btn-primary:hover::before { opacity: .55 }

/* Phone number hover: pulse */
.js-phone { transition: color .2s }
.js-phone:hover { color: var(--js-primary) }

/* ==========================================================================
   MEGA MENU upgrade
   ========================================================================== */

/* Panel entrance: scale+fade instead of flat slide */
.js-megapanel { transform-origin: top center }
.js-menu .js-has-megapanel:hover > .js-megapanel,
.js-menu .js-has-megapanel:focus-within > .js-megapanel {
    animation: js-megaIn .28s cubic-bezier(.2,.8,.2,1) both;
}
@keyframes js-megaIn {
    from { opacity: 0; transform: translateY(12px) scale(.98) }
    to   { opacity: 1; transform: none }
}

/* Top accent bar: animated gradient */
.js-megapanel {
    border-top-width: 3px;
    border-image: linear-gradient(90deg, var(--js-primary) 0%, var(--js-accent) 50%, var(--js-primary) 100%) 1;
    background: linear-gradient(180deg, #ffffff 0%, #fafcff 100%);
}

/* Column headers: icon rotates on hover */
.js-mega-col { position: relative }
.js-mega-col::after {
    content: "";
    position: absolute; right: -12px; top: 2.5rem; bottom: 2.5rem; width: 1px;
    background: linear-gradient(180deg, transparent, var(--js-border) 20%, var(--js-border) 80%, transparent);
}
.js-mega-col:last-of-type::after { display: none }
.js-mega-col .js-mega-colicon { transition: transform .35s cubic-bezier(.2,.8,.2,1), background .25s }
.js-mega-col:hover .js-mega-colicon { transform: rotate(-10deg) scale(1.1) }

/* Item icon: tint-swap + bounce */
.js-mega-col ul a { position: relative; transition: background .2s, transform .2s, padding .2s }
.js-mega-col ul a:hover { padding-left: 1rem }
.js-mega-col ul a::before {
    content: "";
    position: absolute; left: 0; top: 20%; bottom: 20%; width: 3px;
    background: var(--js-accent);
    border-radius: 0 2px 2px 0;
    transform: scaleY(0);
    transition: transform .25s cubic-bezier(.2,.8,.2,1);
}
.js-mega-col ul a:hover::before { transform: scaleY(1) }
.js-mega-col ul a .js-mega-icon { transition: transform .3s cubic-bezier(.2,.8,.2,1), background .25s, border-color .25s, color .25s }
.js-mega-col ul a:hover .js-mega-icon { transform: rotate(-8deg) scale(1.08) }

/* Title: color slide on hover */
.js-mega-title { transition: color .25s }
.js-mega-col ul a:hover .js-mega-title { color: var(--js-primary) }

/* Promo column: animated background shapes */
.js-mega-feature { position: relative; overflow: hidden }
.js-mega-feature::after {
    content: "";
    position: absolute;
    top: -30%; right: -30%;
    width: 160px; height: 160px;
    border-radius: 50%;
    background: radial-gradient(closest-side, rgba(164,212,0,.35), transparent);
    animation: js-float-y 5s ease-in-out infinite;
}
.js-mega-feature-cta { position: relative; overflow: hidden }
.js-mega-feature-cta::after {
    content: "";
    position: absolute; inset: 0;
    background: linear-gradient(120deg, transparent 35%, rgba(255,255,255,.5) 50%, transparent 65%);
    transform: translateX(-100%);
    transition: transform .6s ease;
}
.js-mega-feature-cta:hover::after { transform: translateX(100%) }

/* Footer strip inside panel: slide links on hover */
.js-megapanel-foot a { transition: color .2s, transform .25s; display: inline-flex; align-items: center; gap: .25rem }
.js-megapanel-foot a:hover { transform: translateX(3px) }

/* Caret pop */
.js-menu .js-has-megapanel > a .js-caret {
    transition: transform .25s cubic-bezier(.2,.8,.2,1), color .25s;
    display: inline-block;
}

/* Focus outlines — keyboard accessibility */
.js-menu a:focus-visible,
.js-mega-col ul a:focus-visible,
.js-btn:focus-visible {
    outline: 2px solid var(--js-accent);
    outline-offset: 2px;
    border-radius: 4px;
}

/* ==========================================================================
   TOPBAR polish
   ========================================================================== */
.js-topbar-left i { transition: transform .25s, color .2s }
.js-topbar-left span:hover i { transform: translateY(-2px); color: var(--js-accent) }
.js-topbar-right a { transition: all .25s cubic-bezier(.2,.8,.2,1) }
.js-topbar-right a:hover { transform: translateY(-3px) scale(1.08); background: var(--js-accent); color: #2a3c00 }

/* Announcement bar: gentle slide in */
.js-announce { animation: js-fadeDown .5s cubic-bezier(.2,.8,.2,1) both }

/* ---------- Reduced motion respect ---------- */
@media (prefers-reduced-motion: reduce) {
    *,*::before,*::after {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
    }
}