/* ═══════════════════════════════════════════════
   AI-Solution · animations.css
═══════════════════════════════════════════════ */

/* ── Keyframes ───────────────────────────────── */
@keyframes fadeUp      { from { opacity:0; transform:translateY(32px) } to { opacity:1; transform:none } }
@keyframes fadeLeft    { from { opacity:0; transform:translateX(32px) } to { opacity:1; transform:none } }
@keyframes fadeRight   { from { opacity:0; transform:translateX(-32px)} to { opacity:1; transform:none } }
@keyframes scaleIn     { from { opacity:0; transform:scale(.88) }       to { opacity:1; transform:none } }
@keyframes float       { 0%,100%{ transform:translateY(0)  } 50%{ transform:translateY(-14px) } }
@keyframes floatR      { 0%,100%{ transform:translateY(0)  } 50%{ transform:translateY(10px)  } }
@keyframes pulse-ring  { 0%{ transform:scale(1);   opacity:.7 } 100%{ transform:scale(1.6); opacity:0 } }
@keyframes rotate-slow { from{ transform:rotate(0deg) } to{ transform:rotate(360deg) } }
@keyframes dash-draw   { to{ stroke-dashoffset:0 } }
@keyframes shimmer     { 0%{ background-position:-400px 0 } 100%{ background-position:400px 0 } }
@keyframes bounce-dot  { 0%,80%,100%{ transform:translateY(0) } 40%{ transform:translateY(-8px) } }
@keyframes twinkle     { 0%,100%{ opacity:.2 } 50%{ opacity:1 } }
@keyframes wave-in     { 0%{ d:path("M0,60 L1440,60 L1440,60 L0,60 Z") } 100%{ d:path("M0,30 C480,60 960,0 1440,30 L1440,60 L0,60 Z") } }
@keyframes marquee     { from{ transform:translateX(0) } to{ transform:translateX(-50%) } }
@keyframes morph-blob  { 0%,100%{ border-radius:60% 40% 70% 30%/50% 60% 40% 50% } 33%{ border-radius:40% 60% 30% 70%/60% 40% 70% 30% } 66%{ border-radius:70% 30% 50% 60%/30% 70% 50% 60% } }
@keyframes ripple-anim { 0%{ transform:scale(0);opacity:.6 } 100%{ transform:scale(4);opacity:0 } }
@keyframes gradient-x  { 0%,100%{ background-position:0% 50% } 50%{ background-position:100% 50% } }
@keyframes ping-slow   { 0%{ transform:scale(1); opacity:.6 } 100%{ transform:scale(2.2); opacity:0 } }
@keyframes count-up    { from{ opacity:0; transform:translateY(10px) } to{ opacity:1; transform:none } }
@keyframes slide-in-right { from{ opacity:0; transform:translateX(60px) } to{ opacity:1; transform:none } }
@keyframes slide-in-left  { from{ opacity:0; transform:translateX(-60px)} to{ opacity:1; transform:none } }

/* ── Utility classes ────────────────────────── */
.animate-float        { animation: float      6s ease-in-out infinite }
.animate-float-r      { animation: floatR     5s ease-in-out infinite }
.animate-float-slow   { animation: float      9s ease-in-out infinite }
.animate-rotate-slow  { animation: rotate-slow 20s linear infinite }
.animate-morph-blob   { animation: morph-blob  9s ease-in-out infinite }
.animate-gradient-x   { animation: gradient-x  4s ease infinite; background-size:200% 200% }
.animate-marquee      { animation: marquee    28s linear infinite }
.animate-bounce-dot   { animation: bounce-dot  1.2s ease-in-out infinite }

/* ── Section reveal ─────────────────────────── */
.section-reveal { opacity:0; transform:translateY(28px); transition:opacity .65s cubic-bezier(.4,0,.2,1), transform .65s cubic-bezier(.4,0,.2,1) }
.section-reveal.revealed { opacity:1; transform:none }
.reveal-left    { opacity:0; transform:translateX(-36px); transition:opacity .7s ease, transform .7s ease }
.reveal-right   { opacity:0; transform:translateX(36px);  transition:opacity .7s ease, transform .7s ease }
.reveal-scale   { opacity:0; transform:scale(.92);        transition:opacity .6s ease, transform .6s ease }
.reveal-left.revealed, .reveal-right.revealed, .reveal-scale.revealed { opacity:1; transform:none }

/* ── Delay helpers ──────────────────────────── */
.delay-100 { transition-delay:.1s } .delay-200 { transition-delay:.2s }
.delay-300 { transition-delay:.3s } .delay-400 { transition-delay:.4s }
.delay-500 { transition-delay:.5s } .delay-600 { transition-delay:.6s }

/* ── Card hover lift ────────────────────────── */
.card { transition: transform .28s cubic-bezier(.4,0,.2,1), box-shadow .28s cubic-bezier(.4,0,.2,1), border-color .28s }
.card:hover { transform: translateY(-6px) }

/* ── Ripple ─────────────────────────────────── */
.btn-ripple    { position:relative; overflow:hidden }
.ripple-wave   { position:absolute; border-radius:50%; width:10px; height:10px; background:rgba(255,255,255,.35); margin:-5px; pointer-events:none; animation:ripple-anim .6s linear forwards }

/* ── Typewriter cursor ──────────────────────── */
.tw-cursor     { display:inline-block; color:var(--col-primary-l,#0EA5E9); animation:pulse-ring .8s ease-in-out infinite alternate; font-weight:300 }

/* ── Shimmer skeleton ───────────────────────── */
.shimmer       { background:linear-gradient(90deg,#f0f0f0 25%,#e0e0e0 37%,#f0f0f0 63%); background-size:400px 100%; animation:shimmer 1.4s ease infinite }

/* ── Pulse rings (status dot) ───────────────── */
.pulse-ring    { position:relative }
.pulse-ring::after { content:''; position:absolute; inset:0; border-radius:50%; background:currentColor; animation:pulse-ring 1.6s ease-out infinite }

/* ── Gradient animated text ─────────────────── */
.grad-animate  { background:linear-gradient(270deg,#0369A1,#0EA5E9,#06B6D4,#0369A1); background-size:300% 300%; -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; animation:gradient-x 4s ease infinite }

/* ── Marquee ────────────────────────────────── */
.marquee-outer { overflow:hidden }
.marquee-inner { display:flex; width:max-content; animation:marquee 28s linear infinite }
.marquee-inner:hover { animation-play-state:paused }

/* ── Particle canvas ────────────────────────── */
#heroCanvas    { position:absolute; inset:0; width:100%; height:100%; pointer-events:none }

/* ── SVG draw-on-scroll ─────────────────────── */
.svg-draw path, .svg-draw line, .svg-draw polyline {
  fill:none; stroke-dasharray:1000; stroke-dashoffset:1000;
  transition:stroke-dashoffset 1.8s ease;
}
.svg-draw.revealed path, .svg-draw.revealed line, .svg-draw.revealed polyline {
  stroke-dashoffset:0;
}

/* ── Counter number ─────────────────────────── */
.counter-num { animation:count-up .5s ease }

/* ── Image hover zoom ───────────────────────── */
.img-zoom { overflow:hidden; border-radius:inherit }
.img-zoom img { transition:transform .5s cubic-bezier(.4,0,.2,1) }
.img-zoom:hover img { transform:scale(1.06) }

/* ── Twinkling stars (hero) ─────────────────── */
.star { position:absolute; background:#fff; border-radius:50%; animation:twinkle var(--d,3s) ease-in-out infinite; animation-delay:var(--delay,0s) }

/* ── Glassmorphism card ─────────────────────── */
.glass-card    { background:rgba(255,255,255,0.07); backdrop-filter:blur(12px); border:1px solid rgba(255,255,255,0.12) }

/* ── Step connector line ────────────────────── */
.step-line::before { content:''; position:absolute; top:1.75rem; left:calc(100% / 2); width:100%; height:2px; background:linear-gradient(90deg,var(--col-primary),var(--col-accent-l,#06B6D4)); z-index:0 }

/* ── Skill/progress bar ─────────────────────── */
.prog-bar      { background:#E5E7EB; border-radius:999px; overflow:hidden; height:6px }
.prog-fill     { height:100%; border-radius:999px; background:linear-gradient(90deg,var(--col-primary),var(--col-primary-l,#0EA5E9)); transform:scaleX(0); transform-origin:left; transition:transform 1.2s cubic-bezier(.4,0,.2,1) }
.prog-fill.animated { transform:scaleX(1) }

/* ── FAQ accordion ──────────────────────────── */
.faq-body      { max-height:0; overflow:hidden; transition:max-height .4s cubic-bezier(.4,0,.2,1) }
.faq-body.open { max-height:500px }
.faq-icon      { transition:transform .3s ease }
.faq-open .faq-icon { transform:rotate(45deg) }

/* ── Notification toast ─────────────────────── */
.toast         { position:fixed; bottom:1.5rem; left:50%; transform:translateX(-50%) translateY(100px); background:#0A1628; color:#fff; padding:.75rem 1.5rem; border-radius:999px; font-size:.875rem; font-weight:600; z-index:9999; transition:transform .4s cubic-bezier(.34,1.56,.64,1), opacity .4s ease; opacity:0; pointer-events:none; white-space:nowrap }
.toast.show    { transform:translateX(-50%) translateY(0); opacity:1 }