/* ============================================================
   TRYDR — Animations CSS
   Keyframes, motion, decorative SVG animations
   ============================================================ */

/* ── Route line march (hero/divider dashes) ───────────────── */
@keyframes march-dash {
  from { stroke-dashoffset: 100; }
  to   { stroke-dashoffset: 0; }
}

@keyframes route-glow {
  0%, 100% { opacity: 0.8; }
  50%       { opacity: 0.4; }
}

/* ── Floating car dot ─────────────────────────────────────── */
@keyframes travel {
  0%   { offset-distance: 0%; }
  100% { offset-distance: 100%; }
}

/* ── Fade up (base reveal, supplemented by JS) ────────────── */
@keyframes fadeUp {
  from {
    opacity: 0;
    transform: translateY(24px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ── Slide in left ────────────────────────────────────────── */
@keyframes slideLeft {
  from {
    opacity: 0;
    transform: translateX(-24px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* ── Scale in ─────────────────────────────────────────────── */
@keyframes scaleIn {
  from {
    opacity: 0;
    transform: scale(0.92);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

/* ── Hero content entrance ────────────────────────────────── */
.hero-label    { animation: fadeUp 0.7s var(--ease) 0.2s both; }
.hero-headline { animation: fadeUp 0.8s var(--ease) 0.35s both; }
.hero-sub      { animation: fadeUp 0.7s var(--ease) 0.5s both; }
.hero-ctas     { animation: fadeUp 0.7s var(--ease) 0.65s both; }
.hero-footer-note { animation: fadeUp 0.6s var(--ease) 0.8s both; }
.hero-routes   { animation: fadeUp 0.6s var(--ease) 0.9s both; }

/* ── Animated SVG road divider ────────────────────────────── */
.road-divider {
  width: 100%;
  height: 24px;
  position: relative;
  overflow: hidden;
  margin-top: -8px;
  z-index: 5;
}

.road-divider svg {
  width: 100%;
  height: 24px;
}

.road-dash {
  stroke-dasharray: 20 16;
  stroke-dashoffset: 0;
  animation: march-road 1.2s linear infinite;
}

@keyframes march-road {
  from { stroke-dashoffset: 36; }
  to   { stroke-dashoffset: 0; }
}

/* ── Lime accent underline draw ───────────────────────────── */
.draw-underline {
  position: relative;
  display: inline-block;
}

.draw-underline::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -4px;
  height: 4px;
  width: 0;
  background: var(--c-lime);
  border-radius: 2px;
  transition: width 0.8s var(--ease);
}

.draw-underline.visible::after {
  width: 100%;
}

/* ── Number counter animation ─────────────────────────────── */
.count-up {
  display: inline-block;
}

/* ── Card hover lift ──────────────────────────────────────── */
.hover-lift {
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.hover-lift:hover {
  transform: translateY(-6px);
  box-shadow: 0 20px 48px rgba(0,0,0,0.12);
}

/* ── Shimmer on lime accent elements ──────────────────────── */
@keyframes shimmer {
  0%   { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

.shimmer-lime {
  background: linear-gradient(
    90deg,
    var(--c-lime) 0%,
    #e4ff4d 40%,
    var(--c-lime) 80%
  );
  background-size: 200% 100%;
  animation: shimmer 3s ease-in-out infinite;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ── Mobile sticky bar slide up ───────────────────────────── */
@keyframes slideBarUp {
  from { transform: translateY(100%); }
  to   { transform: translateY(0); }
}

#mobile-cta-bar {
  animation: slideBarUp 0.5s var(--ease) 1.2s both;
}

/* ── Subtle background particle float ────────────────────────
   (Used in charcoal sections as decorative accents) ────────── */
.particle-field {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 0;
}

.particle {
  position: absolute;
  border-radius: 50%;
  background: var(--c-lime);
  opacity: 0.04;
  animation: float-particle linear infinite;
}

@keyframes float-particle {
  0%   { transform: translateY(0) rotate(0deg); opacity: 0; }
  10%  { opacity: 0.04; }
  90%  { opacity: 0.04; }
  100% { transform: translateY(-120px) rotate(180deg); opacity: 0; }
}

/* ── Logo accent road line ─────────────────────────────────── */
.logo-road-accent {
  display: block;
  width: 100%;
  height: 2px;
  background: var(--c-lime);
  border-radius: 2px;
  margin-top: 2px;
  transform-origin: left;
  animation: growLine 1s var(--ease) 0.3s both;
}

@keyframes growLine {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}

/* ── Respect prefers-reduced-motion ───────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}