/* ============================================================
   VPK PREM CROCKARS — ANIMATIONS
   ============================================================ */

@keyframes spin { to { transform: rotate(360deg); } }

@keyframes bounce-chevron {
  0%, 100% { transform: translateX(-50%) translateY(0); }
  50% { transform: translateX(-50%) translateY(10px); }
}

@keyframes pulse-green {
  0% { box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.55); }
  70% { box-shadow: 0 0 0 14px rgba(37, 211, 102, 0); }
  100% { box-shadow: 0 0 0 0 rgba(37, 211, 102, 0); }
}

@keyframes pulse-gold-glow {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255,215,0,0.35); }
  50% { box-shadow: 0 0 30px 6px rgba(255,215,0,0.35); }
}

@keyframes rotate-border {
  to { --spin-angle: 360deg; }
}
@property --spin-angle {
  syntax: '<angle>';
  inherits: false;
  initial-value: 0deg;
}

@keyframes float-up {
  0% { transform: translateY(0) translateX(0); opacity: 0; }
  10% { opacity: 1; }
  90% { opacity: 1; }
  100% { transform: translateY(-100vh) translateX(var(--drift, 20px)); opacity: 0; }
}

@keyframes fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes scramble-blink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.6; }
}

.hero-content h1 { animation: fade-in 1s var(--ease); }
.hero-content .subtitle { animation: fade-in 1.2s var(--ease); }
.hero-ctas { animation: fade-in 1.4s var(--ease); }

/* 3D tilt cards handled via inline transform by JS; keep transition smooth */
.card, .product-card, .why-card, .pricing-card {
  transition: transform 0.25s var(--ease), box-shadow 0.35s var(--ease), border-color 0.35s var(--ease);
}