/* ================================================================
   ANIMATIONS.CSS — KISHAN KANANI PORTFOLIO
================================================================ */

/* ── KEYFRAMES ───────────────────────────────────────────────── */
@keyframes pulse-dot{
  0%,100%{transform:scale(1);opacity:1}
  50%{transform:scale(1.6);opacity:.5}
}
@keyframes scroll-line{
  0%{transform:scaleY(0);transform-origin:top;opacity:1}
  45%{transform:scaleY(1);transform-origin:top;opacity:1}
  55%{transform:scaleY(1);transform-origin:bottom;opacity:1}
  100%{transform:scaleY(0);transform-origin:bottom;opacity:0}
}
@keyframes marquee{
  0%{transform:translateX(0)}
  100%{transform:translateX(-50%)}
}
@keyframes map-pulse{
  0%{transform:scale(1);opacity:.8}
  100%{transform:scale(3);opacity:0}
}
@keyframes float-up{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(-14px)}
}
@keyframes float-down{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(14px)}
}
@keyframes grad-shift{
  0%,100%{background-position:0% 50%}
  50%{background-position:100% 50%}
}
@keyframes ripple{
  0%{transform:scale(0);opacity:.4}
  100%{transform:scale(4);opacity:0}
}
@keyframes glow-pulse{
  0%,100%{box-shadow:0 0 20px rgba(139,92,246,.3)}
  50%{box-shadow:0 0 40px rgba(139,92,246,.7),0 0 60px rgba(59,130,246,.3)}
}
@keyframes fade-up{
  from{opacity:0;transform:translateY(40px)}
  to{opacity:1;transform:translateY(0)}
}
@keyframes slide-right{
  from{opacity:0;transform:translateX(-40px)}
  to{opacity:1;transform:translateX(0)}
}
@keyframes preloader-wipe{
  0%{clip-path:inset(0 0 0 0)}
  100%{clip-path:inset(0 0 100% 0)}
}

/* ── SCROLL REVEAL STATES ────────────────────────────────────── */
.reveal{opacity:0;transform:translateY(40px);transition:opacity .8s var(--ease-expo),transform .8s var(--ease-expo)}
.reveal.visible, .reveal.on{opacity:1;transform:none}
.reveal-left{opacity:0;transform:translateX(-40px);transition:opacity .8s var(--ease-expo),transform .8s var(--ease-expo)}
.reveal-left.visible, .reveal-left.on{opacity:1;transform:none}
.reveal-right{opacity:0;transform:translateX(40px);transition:opacity .8s var(--ease-expo),transform .8s var(--ease-expo)}
.reveal-right.visible, .reveal-right.on{opacity:1;transform:none}
.reveal-scale{opacity:0;transform:scale(.92);transition:opacity .8s var(--ease-expo),transform .8s var(--ease-expo)}
.reveal-scale.visible, .reveal-scale.on{opacity:1;transform:none}

/* stagger delay helpers */
.delay-1{transition-delay:.1s}.delay-2{transition-delay:.2s}
.delay-3{transition-delay:.3s}.delay-4{transition-delay:.4s}
.delay-5{transition-delay:.5s}.delay-6{transition-delay:.6s}

/* ── FLOATING DEVICES ────────────────────────────────────────── */
.device-float-1{animation:float-up 5s ease-in-out infinite}
.device-float-2{animation:float-down 5.5s ease-in-out infinite;animation-delay:.8s}
.device-float-3{animation:float-up 6s ease-in-out infinite;animation-delay:1.5s}

/* ── MAGNETIC BUTTON ─────────────────────────────────────────── */
.btn-magnetic{transition:transform .3s var(--ease-expo)}

/* ── HERO GRADIENT TEXT ANIMATION ────────────────────────────── */
.hero-title .grad-text{
  background:linear-gradient(-45deg,#8B5CF6,#3B82F6,#06B6D4,#A78BFA);
  background-size:300% 300%;
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  background-clip:text;
  animation:grad-shift 5s ease infinite;
}

/* ── SECTION GLOW LINES ──────────────────────────────────────── */
.glow-line{
  width:80px;height:2px;border-radius:99px;
  background:var(--grad-main);
  margin-bottom:32px;
}

/* ── BUTTON RIPPLE ───────────────────────────────────────────── */
.btn .ripple{
  position:absolute;border-radius:50%;
  width:10px;height:10px;
  background:rgba(255,255,255,.35);
  transform:scale(0);
  animation:ripple .6s linear;
  pointer-events:none;
}

/* ── NAV MOBILE SLIDE ────────────────────────────────────────── */
.nav-item-stagger{
  opacity:0;transform:translateY(20px);
  transition:opacity .4s var(--ease-expo),transform .4s var(--ease-expo);
}
#mobile-nav.open .nav-item-stagger{opacity:1;transform:none}
#mobile-nav.open .nav-item-stagger:nth-child(1){transition-delay:.05s}
#mobile-nav.open .nav-item-stagger:nth-child(2){transition-delay:.10s}
#mobile-nav.open .nav-item-stagger:nth-child(3){transition-delay:.15s}
#mobile-nav.open .nav-item-stagger:nth-child(4){transition-delay:.20s}
#mobile-nav.open .nav-item-stagger:nth-child(5){transition-delay:.25s}
#mobile-nav.open .nav-item-stagger:nth-child(6){transition-delay:.30s}

/* ── TYPED CURSOR ────────────────────────────────────────────── */
.typed-cursor{
  color:var(--purple-400);
  animation:cursor-blink .7s step-end infinite;
}
@keyframes cursor-blink{0%,100%{opacity:1}50%{opacity:0}}

/* ── PRODUCT CARD GLOW ───────────────────────────────────────── */
.product-card:hover{animation:glow-pulse .5s ease forwards}

/* ── TILT CARD ───────────────────────────────────────────────── */
[data-tilt]{transform-style:preserve-3d}
[data-tilt] .tilt-inner{transform:translateZ(20px)}

/* ── SECTION DIVIDER ─────────────────────────────────────────── */
.section-divider{
  height:1px;
  background:linear-gradient(to right,transparent,var(--glass-border),transparent);
  margin:0 clamp(20px,5vw,80px);
}

/* ── COUNTER NUMBER ──────────────────────────────────────────── */
.counter-number{
  display:inline-block;
  transition:transform .1s;
}