/* Cybercab Hunter — shared visual system: glass, neon, keyframes.
   Tailwind (CDN) handles layout/spacing/typography utilities; this file
   covers everything Tailwind's utility classes can't express directly. */

@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=Inter:wght@400;500;600;700&display=swap');

:root{
  --gold: #D4AF37;
  --goldsoft: #F3E5AB;
  --crimson: #E82127;
  --silver: #CBD5E1;
  --cyan: #00E5FF;
  --cyblue: #0284C7;
  --hairline: rgba(212,175,55,0.2);
}

html{scroll-behavior:smooth;}
body{
  background:#07090E;
  font-family:'Inter',sans-serif;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
h1,h2,h3,h4,.font-display{font-family:'Space Grotesk',sans-serif;}

::selection{background:var(--gold); color:#07090E;}

/* ---------- MapLibre control focus ring (override default blue) ---------- */
.maplibregl-ctrl-attrib-button:focus,
.maplibregl-ctrl-group button:focus{
  box-shadow: 0 0 2px 2px rgba(255,255,255,0.7);
}

/* ---------- Custom scrollbar ---------- */
::-webkit-scrollbar{width:10px; height:10px;}
::-webkit-scrollbar-track{background:#07090E;}
::-webkit-scrollbar-thumb{background:#1c2230; border-radius:6px; border:2px solid #07090E;}
::-webkit-scrollbar-thumb:hover{background:var(--gold);}

/* ---------- Background mesh ---------- */
.bg-mesh{
  position:fixed; inset:0; z-index:-1; pointer-events:none; overflow:hidden;
  background:
    radial-gradient(ellipse 60% 40% at 15% 10%, rgba(212,175,55,0.08), transparent 60%),
    radial-gradient(ellipse 50% 40% at 85% 30%, rgba(0,229,255,0.06), transparent 60%),
    radial-gradient(ellipse 60% 50% at 50% 100%, rgba(232,33,39,0.05), transparent 60%),
    #07090E;
}
.bg-mesh::after{
  content:''; position:absolute; inset:-20%;
  background:radial-gradient(circle at 30% 30%, rgba(212,175,55,0.06), transparent 55%);
  animation:mesh-drift 26s ease-in-out infinite alternate;
}
@keyframes mesh-drift{
  0%{transform:translate(0,0) scale(1);}
  100%{transform:translate(5%,7%) scale(1.1);}
}
.particle{
  position:absolute; border-radius:50%;
  background:radial-gradient(circle, rgba(212,175,55,0.55), transparent 70%);
  filter:blur(1px);
  animation:float-particle linear infinite;
}
@keyframes float-particle{
  0%{transform:translateY(0) translateX(0); opacity:0;}
  10%{opacity:0.7;}
  90%{opacity:0.5;}
  100%{transform:translateY(-120vh) translateX(20px); opacity:0;}
}

/* ---------- Glass panels ---------- */
.glass{
  background:rgba(15,20,28,0.6);
  backdrop-filter:blur(20px);
  -webkit-backdrop-filter:blur(20px);
  border:1px solid var(--hairline);
}
.glass-strong{
  background:rgba(15,20,28,0.85);
  backdrop-filter:blur(24px);
  -webkit-backdrop-filter:blur(24px);
  border:1px solid var(--hairline);
}

/* ---------- Reveal on scroll ---------- */
.reveal-on-scroll{
  opacity:0;
  transform:translateY(30px);
  transition:opacity 0.9s cubic-bezier(0.16,1,0.3,1), transform 0.9s cubic-bezier(0.16,1,0.3,1);
}
.reveal-on-scroll.is-visible{opacity:1; transform:translateY(0);}
@media (prefers-reduced-motion: reduce){
  *{animation-duration:0.001ms !important; transition-duration:0.001ms !important;}
}

/* ---------- Nav ---------- */
header nav a{text-transform:uppercase; letter-spacing:0.03em;}
#navIndicator{
  position:absolute; bottom:-1px; height:2px;
  background:var(--gold);
  border-radius:2px;
  transition:left 0.4s cubic-bezier(0.16,1,0.3,1), width 0.4s cubic-bezier(0.16,1,0.3,1);
  opacity:0;
}
#navIndicator.is-active{opacity:1;}

/* ---------- Magnetic buttons ---------- */
.btn-magnetic{
  position:relative; isolation:isolate; overflow:hidden;
  transition:transform 0.25s cubic-bezier(0.16,1,0.3,1), box-shadow 0.25s ease;
}
.btn-magnetic::before{
  content:''; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(120deg,var(--gold),var(--cyan));
  background-size:220% 220%; background-position:0% 50%;
  opacity:0; transition:opacity 0.3s ease, background-position 0.6s ease;
}
.btn-magnetic:hover{transform:translateY(-3px) scale(1.035); box-shadow:0 14px 34px -10px rgba(212,175,55,0.6);}
.btn-magnetic:hover::before{opacity:1; background-position:100% 50%;}
.btn-magnetic:active{transform:scale(0.97);}
.ripple-circle{
  position:absolute; border-radius:50%;
  background:rgba(255,255,255,0.5); transform:scale(0);
  animation:ripple-anim 0.6s ease-out; pointer-events:none;
}
@keyframes ripple-anim{ to{ transform:scale(3); opacity:0; } }

/* ---------- Pulse / radar rings ---------- */
.pulse-ring{position:relative;}
.pulse-ring::after{
  content:''; position:absolute; inset:-8px; border-radius:50%;
  border:1.5px solid currentColor; opacity:0.6;
  animation:pulse-ring 2.2s ease-out infinite;
}
@keyframes pulse-ring{
  0%{transform:scale(0.5); opacity:0.7;}
  100%{transform:scale(2.2); opacity:0;}
}
.dot-live{
  width:7px; height:7px; border-radius:50%; background:var(--cyan);
  box-shadow:0 0 0 0 rgba(0,229,255,0.6);
  animation:live-pulse 2s infinite;
}
@keyframes live-pulse{
  0%{box-shadow:0 0 0 0 rgba(0,229,255,0.55);}
  70%{box-shadow:0 0 0 8px rgba(0,229,255,0);}
  100%{box-shadow:0 0 0 0 rgba(0,229,255,0);}
}
.dot-gold-live{
  width:10px; height:10px; border-radius:50%; background:#FFC72C;
  box-shadow:0 0 0 0 rgba(255,199,44,0.6);
  animation:gold-live-pulse 2s infinite;
}
@keyframes gold-live-pulse{
  0%{box-shadow:0 0 0 0 rgba(255,199,44,0.55);}
  70%{box-shadow:0 0 0 8px rgba(255,199,44,0);}
  100%{box-shadow:0 0 0 0 rgba(255,199,44,0);}
}

/* ---------- Radar sweep ---------- */
.radar-sweep{
  position:relative;
  display:flex; align-items:center; justify-content:center;
}
.radar-vehicle-img{
  width:100%; height:100%; object-fit:contain;
  transition:transform 0.3s ease, filter 0.3s ease;
}
.glass:hover .radar-vehicle-img{
  transform:scale(1.15);
}
.glass:hover #cybercabRadar .radar-vehicle-img{
  filter:drop-shadow(0 0 10px rgba(212,175,55,0.4));
}
.glass:hover #modelyRadar .radar-vehicle-img{
  filter:drop-shadow(0 0 10px rgba(232,33,39,0.4));
}

/* ---------- Marquee ticker ---------- */
.marquee-track{
  display:flex; gap:48px; white-space:nowrap; width:max-content;
  animation:marquee 32s linear infinite;
}
.marquee-track:hover{animation-play-state:paused;}
@keyframes marquee{ from{transform:translateX(0);} to{transform:translateX(-50%);} }

/* ---------- Scan line (verify.html dropzone) ---------- */
.scan-line-wrap{position:relative; overflow:hidden;}
.scan-line{
  position:absolute; left:0; right:0; height:2px;
  background:linear-gradient(90deg,transparent,var(--cyan),transparent);
  box-shadow:0 0 12px 2px var(--cyan);
  animation:scan-sweep 1.6s ease-in-out infinite;
}
@keyframes scan-sweep{
  0%{top:0; opacity:0.2;}
  50%{opacity:1;}
  100%{top:100%; opacity:0.2;}
}

/* ---------- Slide-over drawer ---------- */
.drawer{
  transform:translateX(100%);
  transition:transform 0.45s cubic-bezier(0.16,1,0.3,1);
}
.drawer.is-open{transform:translateX(0);}
.drawer-backdrop{
  opacity:0; pointer-events:none;
  transition:opacity 0.35s ease;
}
.drawer-backdrop.is-open{opacity:1; pointer-events:auto;}

/* ---------- Modal ---------- */
.modal-backdrop{opacity:0; pointer-events:none; transition:opacity 0.3s ease;}
.modal-backdrop.is-open{opacity:1; pointer-events:auto;}
.modal-panel{
  transform:translateY(16px) scale(0.98); opacity:0;
  transition:transform 0.35s cubic-bezier(0.16,1,0.3,1), opacity 0.35s ease;
}
.modal-backdrop.is-open .modal-panel{transform:translateY(0) scale(1); opacity:1;}

/* ---------- Toast ---------- */
.toast{
  transform:translateY(12px); opacity:0;
  transition:transform 0.3s cubic-bezier(0.16,1,0.3,1), opacity 0.3s ease;
}
.toast.is-visible{transform:translateY(0); opacity:1;}

/* ---------- Confetti ---------- */
.confetti-piece{
  position:fixed; top:0; left:0; width:8px; height:8px; z-index:200;
  pointer-events:none; border-radius:1px;
  animation:confetti-fall 1.6s ease-out forwards;
}
@keyframes confetti-fall{
  0%{transform:translate(0,0) rotate(0deg); opacity:1;}
  100%{transform:translate(var(--dx),var(--dy)) rotate(var(--rot)); opacity:0;}
}

/* ---------- Bounty progress ring ---------- */
.progress-ring circle{
  transition:stroke-dashoffset 0.8s cubic-bezier(0.16,1,0.3,1);
}

/* ---------- Leaderboard rank glow ---------- */
.rank-1{box-shadow:0 0 0 1px var(--gold), 0 0 24px -6px rgba(212,175,55,0.8);}
.rank-2{box-shadow:0 0 0 1px var(--silver), 0 0 18px -6px rgba(203,213,225,0.6);}
.rank-3{box-shadow:0 0 0 1px #B08D57, 0 0 18px -6px rgba(176,141,87,0.6);}

/* ---------- MapLibre / OpenFreeMap dark overrides ---------- */
.maplibregl-map{background:#0c1119 !important; font-family:'Inter',sans-serif;}
.maplibregl-popup-content{
  background:rgba(15,20,28,0.92); color:#f4f2ec;
  border:1px solid var(--hairline); backdrop-filter:blur(12px);
  border-radius:12px; padding:10px 12px;
}
.maplibregl-popup-tip{border-top-color:rgba(15,20,28,0.92); border-bottom-color:rgba(15,20,28,0.92);}
.maplibregl-ctrl-group{
  background:rgba(15,20,28,0.85) !important;
  border:1px solid var(--hairline) !important;
}
.maplibregl-ctrl-group button{background:transparent !important;}
.maplibregl-ctrl-icon{filter:invert(1);}
.marker-pulse{position:relative;}
.marker-pulse::after{
  content:''; position:absolute; inset:-6px; border-radius:50%;
  border:1.5px solid currentColor; opacity:0.6;
  animation:pulse-ring 2.2s ease-out infinite;
}

/* ---------- Logo badge idle glow ---------- */
.logo-badge{animation:logo-glow 4s ease-in-out infinite;}
@keyframes logo-glow{
  0%,100%{box-shadow:0 0 0 1px rgba(212,175,55,0.35), 0 6px 18px -6px rgba(212,175,55,0.55);}
  50%{box-shadow:0 0 0 1px rgba(212,175,55,0.55), 0 6px 26px -4px rgba(212,175,55,0.85);}
}

/* ---------- Service zone cards ---------- */
.service-zone-card{
  position:relative;
  aspect-ratio:1/0.92;
  border-radius:28px;
  overflow:hidden;
  background:#0c1119;
  border:1px solid rgba(255,199,44,0.15);
}
.service-zone-map{ position:absolute; inset:0; }
.service-zone-infocard{
  position:absolute; top:16px; left:16px; max-width:260px;
  background:rgba(8,11,17,0.92);
  border:1px solid rgba(255,255,255,0.08);
  border-radius:18px;
  padding:18px 20px;
}

/* ---------- Hero typewriter ---------- */
.typewriter-cursor{
  display:inline-block; margin-left:2px; color:var(--gold);
  animation:cursor-blink 1s steps(1) infinite;
}
@keyframes cursor-blink{ 50%{opacity:0;} }