/* FastRide — small hand-set touches that Tailwind utilities alone don't cover */

[x-cloak] { display: none !important; }

html {
  scroll-behavior: smooth;
}

body {
  -webkit-font-smoothing: antialiased;
}

::selection {
  background: #ffc409;
  color: #0a0a0a;
}

/* Diagonal stripe texture — echoes the FastRide marketing banner */
.pattern-diagonal {
  background-image: repeating-linear-gradient(
    45deg,
    currentColor 0,
    currentColor 2px,
    transparent 2px,
    transparent 14px
  );
  color: #fff;
}

/* Dotted grid texture */
.pattern-dots {
  background-image: radial-gradient(currentColor 1.5px, transparent 1.5px);
  background-size: 16px 16px;
}

/* Subtle paper/noise grain over dark sections, for a less "flat AI gradient" feel */
.grain::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.5;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)' opacity='0.35'/></svg>");
}

.store-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.6rem 1.1rem;
  border-radius: 0.75rem;
  background: #0a0a0a;
  color: #fff;
  border: 1px solid rgba(255,255,255,0.12);
  transition: transform 0.15s ease, background 0.15s ease;
}
.store-badge:hover {
  background: #151513;
  transform: translateY(-1px);
}

.social-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 2.25rem;
  width: 2.25rem;
  border-radius: 9999px;
  background: rgba(255,255,255,0.08);
  color: #fff;
  transition: background 0.15s ease, color 0.15s ease;
}
.social-icon:hover {
  background: #ffc409;
  color: #0a0a0a;
}

/* Marker pin bounce for city cards */
@keyframes pin-drop {
  0% { transform: translateY(-6px); opacity: 0; }
  100% { transform: translateY(0); opacity: 1; }
}
.pin-drop {
  animation: pin-drop 0.4s ease-out both;
}

/* Route line dash animation used on the "how it works" map illustration */
@keyframes dash-move {
  to { stroke-dashoffset: -24; }
}
.route-line {
  stroke-dasharray: 6 6;
  animation: dash-move 1.2s linear infinite;
}

/* Ambient hero route animation — pure decoration, so respect reduced-motion */
.hero-motion {
  opacity: 0.55;
}
@media (prefers-reduced-motion: reduce) {
  .hero-motion { display: none; }
}

/* Confetti dots for the app-download modal */
.confetti-dot {
  position: absolute;
  border-radius: 9999px;
  opacity: 0;
  animation: confetti-pop 0.7s ease-out forwards;
}
@keyframes confetti-pop {
  0%   { transform: scale(0) translateY(0); opacity: 0; }
  35%  { opacity: 1; }
  100% { transform: scale(1) translateY(-16px); opacity: 0; }
}

/* Custom scrollbar for a slightly more crafted feel */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: #faf8f3; }
::-webkit-scrollbar-thumb { background: #238949; border-radius: 999px; border: 2px solid #faf8f3; }