:root {
  --background: 24 100% 98%;
  --foreground: 222 30% 16%;
  --primary: 10 90% 56%;
  --secondary: 28 100% 94%;
  --muted: 24 24% 92%;
  --destructive: 0 78% 58%;
  --border: 22 24% 84%;
  --card: 0 0% 100%;
  --shadow-sm: 0 8px 20px hsla(12, 90%, 56%, 0.08);
  --shadow-md: 0 18px 48px hsla(222, 30%, 16%, 0.12);
  --shadow-lg: 0 28px 80px hsla(222, 30%, 16%, 0.16);
  --transition-fast: all 150ms ease;
  --transition-smooth: all 280ms cubic-bezier(0.22, 1, 0.36, 1);
  --radius-sm: 12px;
  --radius-md: 18px;
  --radius-lg: 28px;
}

.dark {
  --background: 226 33% 8%;
  --foreground: 28 42% 96%;
  --primary: 12 92% 62%;
  --secondary: 226 24% 14%;
  --muted: 225 18% 16%;
  --destructive: 0 72% 58%;
  --border: 225 16% 24%;
  --card: 226 28% 11%;
  --shadow-sm: 0 10px 24px hsla(226, 50%, 2%, 0.32);
  --shadow-md: 0 20px 52px hsla(226, 50%, 2%, 0.42);
  --shadow-lg: 0 30px 90px hsla(226, 50%, 2%, 0.58);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; }
img { max-width: 100%; display: block; }

.glass {
  background: linear-gradient(135deg, hsla(var(--card), 0.95), hsla(var(--card), 0.78));
  backdrop-filter: blur(14px);
}

.hero-grid {
  background-image:
    radial-gradient(circle at 20% 20%, hsla(var(--primary), 0.18), transparent 26%),
    radial-gradient(circle at 80% 0%, hsla(var(--foreground), 0.08), transparent 24%),
    linear-gradient(135deg, hsla(var(--secondary), 0.8), transparent 60%);
}

.bus-lane {
  position: relative;
  overflow: hidden;
}
.bus-lane::after {
  content: '';
  position: absolute;
  left: -20%;
  top: 50%;
  width: 30%;
  height: 2px;
  background: linear-gradient(90deg, transparent, hsla(var(--primary), 0.9), transparent);
  animation: routeMove 2.8s linear infinite;
}

@keyframes routeMove {
  0% { left: -30%; }
  100% { left: 100%; }
}

@keyframes floatUp {
  from { transform: translateY(12px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}

.fade-in { animation: floatUp 0.5s ease both; }
.skeleton {
  background: linear-gradient(90deg, hsla(var(--muted), 0.8), hsla(var(--border), 0.7), hsla(var(--muted), 0.8));
  background-size: 200% 100%;
  animation: shimmer 1.2s infinite;
}

@keyframes shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

.map-track {
  background:
    linear-gradient(90deg, hsla(var(--border), 0.4) 0 100%),
    repeating-linear-gradient(90deg, hsla(var(--foreground), 0.18) 0 10px, transparent 10px 20px);
}

.ticket-cut::before,
.ticket-cut::after {
  content: '';
  position: absolute;
  width: 24px;
  height: 24px;
  border-radius: 999px;
  background: hsl(var(--background));
  top: calc(50% - 12px);
}
.ticket-cut::before { left: -12px; }
.ticket-cut::after { right: -12px; }

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: hsla(var(--foreground), 0.18); border-radius: 999px; }
::-webkit-scrollbar-track { background: transparent; }