/* ============================================================
   HERBERT MOTOS — Keyframes & motion
   ============================================================ */

@keyframes shine {
  to { transform: translateX(120%); }
}

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

@keyframes marquee {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

@keyframes navItemIn {
  to { opacity: 1; transform: translateX(0); }
}

@keyframes itemIn {
  from { opacity: 0; transform: translateX(40px) scale(0.96); }
  to { opacity: 1; transform: translateX(0) scale(1); }
}

@keyframes itemOut {
  to { opacity: 0; transform: translateX(60px) scale(0.9); height: 0; padding: 0; margin: 0; }
}

@keyframes toastIn {
  from { opacity: 0; transform: translateY(20px) scale(0.95); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes toastOut {
  to { opacity: 0; transform: translateY(14px) scale(0.97); }
}

@keyframes floatPulse {
  0%, 100% { box-shadow: 0 12px 30px -8px rgba(37, 211, 102, 0.6); }
  50% { box-shadow: 0 12px 30px -2px rgba(37, 211, 102, 0.85); transform: translateY(-2px); }
}

/* badge pop when count changes */
@keyframes badgePop {
  0% { transform: scale(1); }
  40% { transform: scale(1.5); }
  100% { transform: scale(1); }
}

.cart-count.pop { animation: badgePop 0.45s var(--ease-out); }

/* cart icon shake on add */
@keyframes shake {
  0%, 100% { transform: rotate(0); }
  25% { transform: rotate(-12deg); }
  50% { transform: rotate(10deg); }
  75% { transform: rotate(-6deg); }
}

.icon-btn.shake svg { animation: shake 0.5s var(--ease-out); }

/* hero chevrons drift */
@keyframes chevDrift {
  from { transform: skewX(-18deg) translateX(0); }
  to { transform: skewX(-18deg) translateX(-30px); }
}

.hero__chevrons span {
  animation: chevDrift 3.5s ease-in-out infinite alternate;
}

.hero__chevrons span:nth-child(2) { animation-duration: 4.2s; }
.hero__chevrons span:nth-child(3) { animation-duration: 5s; }
.hero__chevrons span:nth-child(4) { animation-duration: 5.8s; }

/* speed lines drifting across hero stage */
@keyframes speed {
  from { transform: translateX(120%); }
  to { transform: translateX(-220%); }
}

.speedlines {
  position: absolute;
  inset: 0;
  z-index: 1;
  overflow: hidden;
  pointer-events: none;
}

.speedlines i {
  position: absolute;
  height: 2px;
  width: 120px;
  background: linear-gradient(90deg, transparent, var(--ktm-orange));
  opacity: 0.5;
  animation: speed linear infinite;
}

.speedlines i:nth-child(1) { top: 18%; width: 160px; animation-duration: 2.4s; }
.speedlines i:nth-child(2) { top: 34%; width: 90px;  animation-duration: 1.8s; animation-delay: 0.4s; opacity: 0.3; }
.speedlines i:nth-child(3) { top: 52%; width: 200px; animation-duration: 3.0s; animation-delay: 0.2s; }
.speedlines i:nth-child(4) { top: 68%; width: 70px;  animation-duration: 1.6s; animation-delay: 0.8s; opacity: 0.25; }
.speedlines i:nth-child(5) { top: 82%; width: 140px; animation-duration: 2.6s; animation-delay: 0.5s; }

/* hero entrance — transition-based so the end state (opacity:1) is a
   static declared value that renders even if the animation clock stalls. */
.hero__inner .anim {
  opacity: 0;
  transform: translateY(34px);
  transition: opacity 0.7s var(--ease-out), transform 0.7s var(--ease-out);
}
.hero__inner .anim.go {
  opacity: 1;
  transform: none;
}
.hero__inner .anim.d1 { transition-delay: 0.05s; }
.hero__inner .anim.d2 { transition-delay: 0.15s; }
.hero__inner .anim.d3 { transition-delay: 0.26s; }
.hero__inner .anim.d4 { transition-delay: 0.38s; }
.hero__inner .anim.d5 { transition-delay: 0.50s; }

/* pulse glow ring behind hero bike */
@keyframes ringPulse {
  0%, 100% { opacity: 0.3; transform: translate(-50%, -50%) scale(0.9); }
  50% { opacity: 0.6; transform: translate(-50%, -50%) scale(1.05); }
}

.hero__glow {
  position: absolute;
  top: 55%;
  left: 50%;
  width: 80%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, var(--ktm-glow), transparent 65%);
  transform: translate(-50%, -50%);
  animation: ringPulse 3.4s ease-in-out infinite;
  z-index: 0;
}

/* tachometer sweep in stat */
@keyframes rev {
  0% { width: 8%; }
  60% { width: 92%; }
  80% { width: 70%; }
  100% { width: 86%; }
}

.tach {
  height: 4px;
  border-radius: 2px;
  background: var(--surface-3);
  overflow: hidden;
  margin-top: 8px;
}

.tach i {
  display: block;
  height: 100%;
  width: 8%;
  background: linear-gradient(90deg, var(--ktm-orange-lt), #ff2b2b);
  border-radius: 2px;
  animation: rev 2.8s var(--ease-in-out) infinite alternate;
}

/* count up handled in JS; subtle pop when in view */
@keyframes statPop {
  from { transform: translateY(10px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}