/* ══════════════════════════════════════════════════════════════════
 * AUTOSITE — motion.css
 * Motion-graphics layer : animated mesh gradient, blob decorations,
 * scroll reveals, counters, marquee, text split, magnetic buttons.
 * ══════════════════════════════════════════════════════════════════ */

/* ── Keyframes ── */
@keyframes fadeInUp{from{opacity:0;transform:translateY(28px)}to{opacity:1;transform:translateY(0)}}
@keyframes slideUp{from{opacity:0;transform:translateY(48px)}to{opacity:1;transform:translateY(0)}}
@keyframes scaleIn{from{opacity:0;transform:scale(0.92)}to{opacity:1;transform:scale(1)}}
@keyframes fadeInLeft{from{opacity:0;transform:translateX(-32px)}to{opacity:1;transform:translateX(0)}}
@keyframes fadeInRight{from{opacity:0;transform:translateX(32px)}to{opacity:1;transform:translateX(0)}}
@keyframes pulse-dot{0%,100%{box-shadow:0 0 0 0 color-mix(in srgb,var(--color-primary) 55%,transparent)}50%{box-shadow:0 0 0 8px transparent}}
@keyframes shimmer{0%{background-position:-200% 0}100%{background-position:200% 0}}
@keyframes blob-drift-a{0%,100%{transform:translate(0,0) scale(1)}33%{transform:translate(40px,-30px) scale(1.08)}66%{transform:translate(-30px,20px) scale(0.95)}}
@keyframes blob-drift-b{0%,100%{transform:translate(0,0) scale(1) rotate(0deg)}50%{transform:translate(-40px,30px) scale(1.1) rotate(12deg)}}
@keyframes blob-drift-c{0%,100%{transform:translate(0,0) rotate(0deg)}50%{transform:translate(25px,35px) rotate(-10deg)}}
@keyframes gradient-shift{0%,100%{background-position:0% 50%}50%{background-position:100% 50%}}
@keyframes marquee-slide{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@keyframes grid-fade{0%,100%{opacity:0.35}50%{opacity:0.55}}
@keyframes float-y{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
@keyframes chip-pop{from{opacity:0;transform:scale(0.85) translateY(10px)}to{opacity:1;transform:scale(1) translateY(0)}}

/* ── Scroll reveal primitives ── */
.animate-fade-in,.animate-slide-up,.animate-scale-in,.animate-fade-left,.animate-fade-right{opacity:0;will-change:opacity,transform}
.animate-fade-in.visible{animation:fadeInUp .75s cubic-bezier(.22,1,.36,1) forwards}
.animate-slide-up.visible{animation:slideUp .85s cubic-bezier(.22,1,.36,1) forwards}
.animate-scale-in.visible{animation:scaleIn .7s cubic-bezier(.22,1,.36,1) forwards}
.animate-fade-left.visible{animation:fadeInLeft .8s cubic-bezier(.22,1,.36,1) forwards}
.animate-fade-right.visible{animation:fadeInRight .8s cubic-bezier(.22,1,.36,1) forwards}
[data-delay="1"].visible{animation-delay:.08s}
[data-delay="2"].visible{animation-delay:.16s}
[data-delay="3"].visible{animation-delay:.24s}
[data-delay="4"].visible{animation-delay:.32s}
[data-delay="5"].visible{animation-delay:.4s}
[data-delay="6"].visible{animation-delay:.48s}

/* ── Animated mesh gradient backdrop (hero default) ── */
.mesh-bg{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0}
.mesh-bg .mesh-blob{position:absolute;border-radius:50%;filter:blur(70px);opacity:0.55;mix-blend-mode:multiply;will-change:transform}
.mesh-bg .blob-a{top:-12%;left:-8%;width:52vw;max-width:680px;height:52vw;max-height:680px;background:radial-gradient(circle at 30% 30%,var(--color-primary),transparent 65%);animation:blob-drift-a 18s ease-in-out infinite}
.mesh-bg .blob-b{top:30%;right:-10%;width:46vw;max-width:620px;height:46vw;max-height:620px;background:radial-gradient(circle at 60% 40%,var(--color-secondary),transparent 65%);animation:blob-drift-b 22s ease-in-out infinite}
.mesh-bg .blob-c{bottom:-20%;left:25%;width:40vw;max-width:540px;height:40vw;max-height:540px;background:radial-gradient(circle at 40% 60%,var(--color-accent),transparent 70%);animation:blob-drift-c 26s ease-in-out infinite;opacity:0.35}

/* Dark theme adjustment */
[data-theme="dark"] .mesh-bg .mesh-blob{mix-blend-mode:screen;opacity:0.45}

/* Dotted grid overlay (optional) */
.hero.with-grid::after{content:"";position:absolute;inset:0;background-image:radial-gradient(circle,color-mix(in srgb,var(--color-foreground) 14%,transparent) 1px,transparent 1px);background-size:28px 28px;-webkit-mask-image:radial-gradient(ellipse at 50% 50%,#000 30%,transparent 75%);mask-image:radial-gradient(ellipse at 50% 50%,#000 30%,transparent 75%);opacity:0.4;animation:grid-fade 8s ease-in-out infinite;z-index:0;pointer-events:none}

/* Hero aurora variant */
.hero.aurora{background:linear-gradient(135deg,color-mix(in srgb,var(--color-primary) 7%,var(--color-background)),color-mix(in srgb,var(--color-accent) 5%,var(--color-background)) 50%,color-mix(in srgb,var(--color-secondary) 8%,var(--color-background)));background-size:200% 200%;animation:gradient-shift 14s ease-in-out infinite}

/* ── Text reveal (split word) ── */
.text-reveal{display:inline-block}
.text-reveal .word{display:inline-block;overflow:hidden;vertical-align:bottom}
.text-reveal .word span{display:inline-block;transform:translateY(100%);opacity:0;transition:transform .75s cubic-bezier(.22,1,.36,1),opacity .6s ease}
.text-reveal.visible .word span{transform:translateY(0);opacity:1}
.text-reveal.visible .word:nth-child(1) span{transition-delay:.05s}
.text-reveal.visible .word:nth-child(2) span{transition-delay:.12s}
.text-reveal.visible .word:nth-child(3) span{transition-delay:.19s}
.text-reveal.visible .word:nth-child(4) span{transition-delay:.26s}
.text-reveal.visible .word:nth-child(5) span{transition-delay:.33s}
.text-reveal.visible .word:nth-child(6) span{transition-delay:.4s}
.text-reveal.visible .word:nth-child(7) span{transition-delay:.47s}
.text-reveal.visible .word:nth-child(8) span{transition-delay:.54s}
.text-reveal.visible .word:nth-child(9) span{transition-delay:.61s}
.text-reveal.visible .word:nth-child(10) span{transition-delay:.68s}
.text-reveal .accent{background:linear-gradient(135deg,var(--color-primary),var(--color-accent));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent}

/* ── Counters ── */
.counter{display:inline-block;font-variant-numeric:tabular-nums}

/* ── Marquee (trust logos / chips) ── */
.marquee{overflow:hidden;position:relative;-webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)}
.marquee-track{display:flex;width:max-content;gap:3rem;animation:marquee-slide 30s linear infinite}
.marquee:hover .marquee-track{animation-play-state:paused}
.marquee-item{flex:0 0 auto;display:inline-flex;align-items:center;gap:0.6rem;padding:0.6rem 1.1rem;border:1px solid var(--color-border);border-radius:var(--radius-full);background:var(--color-card);font-size:0.85rem;font-weight:600;color:var(--color-foreground)}
.marquee-item svg{width:16px;height:16px;color:var(--color-primary)}

/* ── Process steps (numbered) ── */
.process-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:1.5rem;position:relative}
.process-step{position:relative;padding:1.5rem;border-radius:var(--radius-lg);background:var(--color-card);border:1px solid var(--color-border);transition:transform .3s ease,box-shadow .3s ease}
.process-step:hover{transform:translateY(-4px);box-shadow:0 16px 40px -16px rgba(15,23,42,0.15)}
.process-num{width:44px;height:44px;border-radius:12px;background:linear-gradient(135deg,var(--color-primary),var(--color-secondary));color:var(--color-on-primary);display:inline-flex;align-items:center;justify-content:center;font-family:var(--font-heading);font-weight:800;font-size:1.05rem;margin-bottom:1rem;box-shadow:0 6px 16px -4px color-mix(in srgb,var(--color-primary) 55%,transparent)}
.process-step h3{font-family:var(--font-heading);font-size:1.05rem;font-weight:700;margin-bottom:0.4rem}
.process-step p{color:var(--color-muted-foreground);line-height:1.7;font-size:0.92rem;margin:0}

/* ── Keyword chips ── */
.chip-cloud{display:flex;flex-wrap:wrap;gap:0.6rem;justify-content:center}
.chip{display:inline-flex;align-items:center;padding:0.5rem 1.15rem;border-radius:var(--radius-full);font-size:0.88rem;font-weight:600;border:1px solid var(--color-border);background:var(--color-card);color:var(--color-foreground);transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease;animation:chip-pop .5s ease both}
.chip.primary{background:color-mix(in srgb,var(--color-primary) 8%,transparent);color:var(--color-primary);border-color:color-mix(in srgb,var(--color-primary) 22%,transparent)}
.chip:hover{transform:translateY(-2px);border-color:var(--color-primary);box-shadow:0 6px 16px -6px color-mix(in srgb,var(--color-primary) 40%,transparent)}

/* ── Magnetic button subtle ── */
.magnetic{transition:transform .2s cubic-bezier(.22,1,.36,1)}

/* ── Hover reveal link (arrow) ── */
.arrow-link{display:inline-flex;align-items:center;gap:0.3rem;font-weight:600;color:var(--color-primary);text-decoration:none}
.arrow-link .arrow{transition:transform .3s cubic-bezier(.22,1,.36,1);display:inline-block}
.arrow-link:hover .arrow{transform:translateX(4px)}

/* ── Parallax layer ── */
.parallax{will-change:transform}

/* ── Decorative floating icon ── */
.float-icon{animation:float-y 5s ease-in-out infinite}

/* ── Prefers-reduced-motion ── */
@media (prefers-reduced-motion:reduce){
    *,*::before,*::after{animation-duration:0.01ms!important;animation-iteration-count:1!important;transition-duration:0.01ms!important;scroll-behavior:auto!important}
    .mesh-bg .mesh-blob,.marquee-track,.hero.aurora{animation:none!important}
    .text-reveal .word span{transform:none;opacity:1}
}