/* ==========================================================================
   TITO X-UK Bikes — animations.css
   Keyframes, scroll reveals, micro-interactions
   ========================================================================== */

/* ---------- Keyframes ---------- */
@keyframes gearSpin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}
@keyframes ping {
  0%   { transform: scale(.55); opacity: .9; }
  80%  { transform: scale(1.9); opacity: 0; }
  100% { opacity: 0; }
}
@keyframes pingSoft {
  0%   { transform: scale(.5); opacity: .7; }
  100% { transform: scale(2.1); opacity: 0; }
}
@keyframes ringPulse {
  0%   { transform: scale(1); opacity: .7; }
  100% { transform: scale(1.75); opacity: 0; }
}
@keyframes marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
@keyframes wheelDrop {
  0%   { transform: translateY(0); opacity: 1; }
  70%  { transform: translateY(11px); opacity: 0; }
  100% { transform: translateY(0); opacity: 0; }
}
@keyframes heroZoom {
  from { transform: scale(1.05); }
  to   { transform: scale(1.14); }
}
@keyframes pinBob {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-9px); }
}
@keyframes popIn {
  0%   { transform: scale(.7); opacity: 0; }
  60%  { transform: scale(1.06); }
  100% { transform: scale(1); opacity: 1; }
}

/* Hero media slow drift */
.hero-media img { animation: heroZoom 22s ease-in-out infinite alternate; }

/* ---------- Scroll reveals ---------- */
[data-reveal] {
  opacity: 0;
  transform: translateY(30px);
  transition:
    opacity .7s ease var(--d, 0s),
    transform .7s cubic-bezier(.22, .61, .21, 1) var(--d, 0s);
  will-change: opacity, transform;
}
[data-reveal="left"]  { transform: translateX(-36px); }
[data-reveal="right"] { transform: translateX(36px); }
[data-reveal="zoom"]  { transform: scale(.9); }
[data-reveal].revealed { opacity: 1; transform: none; }

/* No-JS fallback — never hide content */
.no-js [data-reveal] { opacity: 1; transform: none; }

/* ---------- Micro-interactions ---------- */
.bike-card .btn,
.svc-card .svc-link,
.trust-item,
.plan .btn,
.rev-card,
.g-item { will-change: transform; }

/* Total price bump when calculator updates */
.sum-total.bump { animation: popIn .45s cubic-bezier(.22, .61, .21, 1); }

/* Copy button success flash */
.copy-btn.copied { background: var(--green); border-color: var(--green); color: #fff; }

/* Ticker pauses on hover — handled in main.css */

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  [data-reveal] { opacity: 1 !important; transform: none !important; }
  .hero-media img { animation: none; transform: none; }
  .ticker-track { animation: none; }
  .f-wa::before, .pulse-dot::after, .pin-ring { display: none; }
  html { scroll-behavior: auto; }
}