/* ══════════════════════════════════════════════════
   ANIMATIONS — DigiShop
   ══════════════════════════════════════════════════ */

/* ─── Floating Orbs ─────────────────────────────── */
@keyframes floatOrb1 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  25%      { transform: translate(60px, 40px) scale(1.1); }
  50%      { transform: translate(-30px, 80px) scale(.95); }
  75%      { transform: translate(40px, -20px) scale(1.05); }
}
@keyframes floatOrb2 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  33%      { transform: translate(-50px, -60px) scale(1.08); }
  66%      { transform: translate(40px, -30px) scale(.92); }
}
@keyframes floatOrb3 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50%      { transform: translate(-70px, 50px) scale(1.15); }
}

/* ─── Pulse Glow ────────────────────────────────── */
@keyframes pulseGlow {
  0%, 100% { box-shadow: 0 0 20px var(--accent-glow); }
  50%      { box-shadow: 0 0 45px var(--accent-glow), 0 0 80px var(--accent-glow); }
}

/* ─── Fade-in Up (used for hero content) ────────── */
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(30px); }
  to   { opacity: 1; transform: translateY(0); }
}

.hero-content h1 { animation: fadeInUp .8s var(--ease) both; }
.hero-content p  { animation: fadeInUp .8s .15s var(--ease) both; }
.hero-content .btn-primary { animation: fadeInUp .8s .3s var(--ease) both; }

/* ─── Shimmer across badges ─────────────────────── */
@keyframes shimmer {
  0%   { background-position: -200% center; }
  100% { background-position: 200% center; }
}
.card-badge {
  background: linear-gradient(
    90deg,
    var(--accent) 0%,
    hsl(calc(var(--accent-h) + 30), 90%, 70%) 50%,
    var(--accent) 100%
  );
  background-size: 200% auto;
  animation: shimmer 3s linear infinite;
}

/* ─── Smooth spin for icons on hover ────────────── */
@keyframes spinOnce {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* ─── Border glow on product cards ──────────────── */
@keyframes borderGlow {
  0%, 100% { border-color: var(--border-glass); }
  50%      { border-color: hsla(var(--accent-h), var(--accent-s), var(--accent-l), .35); }
}

/* ─── Particles drift ───────────────────────────── */
@keyframes drift {
  from { transform: translateY(0) translateX(0); }
  to   { transform: translateY(-100vh) translateX(20px); }
}