/* ============================================================
   ANIMATION.CSS — keyframes & motion utilities
   ============================================================ */

/* Gradient background slow move */
.gradient-move{
  background:linear-gradient(120deg, #0a0a0a, #2a2318, #0a0a0a, #1c1712, #0a0a0a);
  background-size:400% 400%;
  animation:gradientMove 18s ease infinite;
}
@keyframes gradientMove{ 0%{background-position:0% 50%;} 50%{background-position:100% 50%;} 100%{background-position:0% 50%;} }

/* Floating blur blobs */
.blob{ position:absolute; border-radius:50%; filter:blur(90px); pointer-events:none; }
@keyframes blobFloat{ 0%,100%{ transform:translate(0,0) scale(1); } 50%{ transform:translate(30px,-30px) scale(1.08); } }

/* Button glow pulse */
.glow-pulse{ animation:glowPulse 2.6s ease-in-out infinite; }
@keyframes glowPulse{ 0%,100%{ box-shadow:0 0 0px rgba(201,169,98,0); } 50%{ box-shadow:0 0 30px rgba(201,169,98,0.45); } }

/* Scroll indicator */
.scroll-indicator{ width:24px; height:40px; border:1px solid rgba(255,255,255,0.4); border-radius:20px; position:relative; }
.scroll-indicator span{ position:absolute; top:6px; left:50%; width:4px; height:8px; border-radius:4px; background:var(--gold); transform:translateX(-50%); animation:scrollDot 1.8s ease-in-out infinite; }
@keyframes scrollDot{ 0%{top:6px;opacity:1;} 80%{top:22px;opacity:0;} 100%{top:6px;opacity:0;} }

/* Fly to cart */
.fly-item{ position:fixed; z-index:500; border-radius:50%; pointer-events:none; background-size:cover; background-position:center; transition:all 0.75s cubic-bezier(.2,.8,.2,1); }

/* Cart badge bump */
@keyframes badgeBump{ 0%{transform:scale(1);} 40%{transform:scale(1.5);} 100%{transform:scale(1);} }
.badge-bump{ animation:badgeBump 0.4s ease; }

/* Wave footer */
.wave-shape{ display:block; width:100%; height:80px; }

/* Floating icon */
.float-icon{ animation:floatIcon 4s ease-in-out infinite; }
@keyframes floatIcon{ 0%,100%{ transform:translateY(0);} 50%{ transform:translateY(-10px);} }

/* Counter number style */
.counter-num{ font-variant-numeric:tabular-nums; }

/* Step indicator (checkout) */
.step-dot{ width:34px; height:34px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:0.75rem; font-family:'JetBrains Mono',monospace; border:1.5px solid var(--line); color:var(--gray); transition:all 0.4s ease; }
.step-dot.active{ background:var(--black); color:var(--white); border-color:var(--black); }
.step-dot.done{ background:var(--gold); color:var(--black); border-color:var(--gold); }
.step-line{ flex:1; height:1.5px; background:var(--line); position:relative; overflow:hidden; }
.step-line::after{ content:''; position:absolute; inset:0; background:var(--gold); transform:scaleX(0); transform-origin:left; transition:transform 0.5s ease; }
.step-line.done::after{ transform:scaleX(1); }

/* Panel fade for checkout steps */
.checkout-panel{ display:none; opacity:0; transform:translateY(16px); }
.checkout-panel.active{ display:block; animation:panelIn 0.5s ease forwards; }
@keyframes panelIn{ to{ opacity:1; transform:translateY(0); } }

/* Success checkmark */
.check-circle{ stroke-dasharray:80; stroke-dashoffset:80; animation:drawCheck 0.8s ease forwards 0.2s; }
@keyframes drawCheck{ to{ stroke-dashoffset:0; } }

@media (prefers-reduced-motion: reduce){
  *{ animation:none !important; transition:none !important; }
}