/* ======================================================================
   DRIVE — Street / Fast & Furious theme
   ====================================================================== */
:root{
  --bg:#060608;
  --smoke:#0c0d12;
  --cyan:#00e5ff;
  --magenta:#ff2d7e;
  --nitro:#c6ff00;
  --ember:#ff5a1f;
  --frost:#eef0f6;
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  background:var(--bg);
  color:var(--frost);
  font-family:"General Sans",sans-serif;
  overflow-x:hidden;
}

/* carbon-fiber backdrop */
body::before{
  content:"";
  position:fixed; inset:0; z-index:-2;
  background:
    radial-gradient(circle at 20% 10%, rgba(255,45,126,.12), transparent 40%),
    radial-gradient(circle at 85% 80%, rgba(0,229,255,.12), transparent 45%),
    var(--bg);
}
body::after{
  content:"";
  position:fixed; inset:0; z-index:-1; opacity:.5;
  background-image:
    linear-gradient(27deg,#0a0a0d 5px,transparent 5px),
    linear-gradient(207deg,#0a0a0d 5px,transparent 5px);
  background-size:12px 12px;
  mask-image:radial-gradient(ellipse at center, black, transparent 90%);
}

/* hide native cursor on desktop */
@media (hover:hover) and (pointer:fine){ *{ cursor:none !important; } }

/* ---------- custom cursor ---------- */
.cursor-ring,.cursor-dot{
  position:fixed; top:0; left:0; border-radius:9999px;
  pointer-events:none; z-index:9999; transform:translate(-50%,-50%);
}
.cursor-ring{
  width:36px;height:36px;border:1.5px solid var(--cyan);
  box-shadow:0 0 18px rgba(0,229,255,.6);
  transition:width .35s cubic-bezier(.32,.72,0,1),height .35s cubic-bezier(.32,.72,0,1),background .35s,border-color .35s,box-shadow .35s;
}
.cursor-dot{ width:5px;height:5px;background:var(--magenta);box-shadow:0 0 10px var(--magenta); }
.cursor-ring.is-hover{ width:70px;height:70px;background:rgba(0,229,255,.1);border-color:var(--cyan); }
.cursor-ring.is-drag{ width:88px;height:88px;background:rgba(255,45,126,.85);border-color:transparent;box-shadow:0 0 30px var(--magenta); }
.cursor-label{ font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:#fff;font-weight:700;opacity:0;transition:opacity .3s; }
.cursor-ring.is-drag .cursor-label{ opacity:1; }

/* ---------- film grain ---------- */
.grain{
  position:fixed; inset:0; z-index:60; pointer-events:none; opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- speed lines (hero) ---------- */
.speedlines{ position:absolute; inset:0; overflow:hidden; pointer-events:none; opacity:.5; }
.speedlines span{
  position:absolute; height:2px; left:-40%; border-radius:9999px;
  background:linear-gradient(90deg,transparent,var(--cyan),transparent);
  animation:dash linear infinite;
}
@keyframes dash{ from{ transform:translateX(0); } to{ transform:translateX(220vw); } }

/* ---------- fonts / utility ---------- */
.font-display{ font-family:"Clash Display",sans-serif; }
.italic-skew{ font-style:italic; transform:skewX(-6deg); display:inline-block; }
.neon-cyan{ color:var(--cyan); text-shadow:0 0 18px rgba(0,229,255,.55); }
.neon-mag{ color:var(--magenta); text-shadow:0 0 18px rgba(255,45,126,.55); }
.neon-nitro{ color:var(--nitro); text-shadow:0 0 18px rgba(198,255,0,.5); }
.tabnum{ font-variant-numeric:tabular-nums; }

/* checkered strip */
.checker{
  height:14px;
  background-image:
    linear-gradient(45deg,#fff 25%,transparent 25%,transparent 75%,#fff 75%),
    linear-gradient(45deg,#fff 25%,transparent 25%,transparent 75%,#fff 75%);
  background-size:14px 14px; background-position:0 0,7px 7px;
  opacity:.85;
}

/* ---------- reveal on scroll ---------- */
.reveal{ opacity:0; transform:translateY(42px); filter:blur(8px);
  transition:opacity 1s cubic-bezier(.16,1,.3,1),transform 1s cubic-bezier(.16,1,.3,1),filter 1s cubic-bezier(.16,1,.3,1); }
.reveal.in{ opacity:1; transform:translateY(0); filter:blur(0); }

/* line mask hero */
.line-mask{ overflow:hidden; display:block; }
.line-mask>span{ display:inline-block; transform:translateY(115%); transition:transform 1.1s cubic-bezier(.16,1,.3,1); }
.loaded .line-mask>span{ transform:translateY(0); }

/* ---------- marquee ---------- */
.marquee{ display:flex; width:max-content; animation:scrollx 28s linear infinite; }
.marquee.rev{ animation-direction:reverse; }
@keyframes scrollx{ to{ transform:translateX(-50%); } }

/* ---------- tilt + glare ---------- */
.tilt{ transform-style:preserve-3d; transition:transform .15s ease-out; will-change:transform; }
.glare{ position:absolute; inset:0; border-radius:inherit;
  background:radial-gradient(circle at var(--gx,50%) var(--gy,50%), rgba(255,255,255,.22), transparent 45%);
  opacity:0; transition:opacity .4s; pointer-events:none; }
.tilt-wrap:hover .glare{ opacity:1; }

/* ---------- nav ---------- */
.nav-link-stagger{ transform:translateY(40px); opacity:0;
  transition:transform .8s cubic-bezier(.16,1,.3,1),opacity .8s; }
.menu-open .nav-link-stagger{ transform:translateY(0); opacity:1; }
.hambar{ transition:transform .5s cubic-bezier(.32,.72,0,1),opacity .3s; }
.menu-open .bar-1{ transform:translateY(6px) rotate(45deg); }
.menu-open .bar-2{ opacity:0; }
.menu-open .bar-3{ transform:translateY(-6px) rotate(-45deg); }

/* ---------- speedo needle ---------- */
.needle{ transform-origin:bottom center; transition:transform .25s cubic-bezier(.32,.72,0,1); }

/* ---------- scroll track ---------- */
.scroll-track{ position:fixed; right:24px; top:50%; transform:translateY(-50%); z-index:40; }
@media (max-width:768px){ .scroll-track{ display:none; } }

/* ---------- misc ---------- */
.draggable{ cursor:grab; } .draggable:active{ cursor:grabbing; }
.magnet{ transition:transform .4s cubic-bezier(.32,.72,0,1); }
::selection{ background:var(--magenta); color:#fff; }
.no-scrollbar::-webkit-scrollbar{ display:none; }
.no-scrollbar{ -ms-overflow-style:none; scrollbar-width:none; }

/* car image inside cards */
.car-photo{ transition:transform 1.2s cubic-bezier(.16,1,.3,1),filter .6s; filter:saturate(1.15) contrast(1.05); }
.tilt-wrap:hover .car-photo{ transform:scale(1.08); }

/* nitro pulse button */
.nitro-btn{ position:relative; overflow:hidden; }
.nitro-btn::after{ content:""; position:absolute; inset:0;
  background:linear-gradient(120deg,transparent,rgba(255,255,255,.35),transparent);
  transform:translateX(-120%); transition:transform .7s cubic-bezier(.32,.72,0,1); }
.nitro-btn:hover::after{ transform:translateX(120%); }

/* page transition fade */
.page-fade{ animation:pagein .7s cubic-bezier(.16,1,.3,1) both; }
@keyframes pagein{ from{ opacity:0; transform:translateY(20px); } to{ opacity:1; transform:none; } }

/* filter pill active */
.filter-pill.active{ background:var(--cyan); color:#060608; border-color:var(--cyan); }

/* input */
.fld{ background:#08080b; border:1px solid rgba(255,255,255,.1); border-radius:1rem;
  padding:.85rem 1rem; color:var(--frost); outline:none; width:100%;
  transition:border-color .4s, box-shadow .4s; }
.fld:focus{ border-color:var(--cyan); box-shadow:0 0 0 3px rgba(0,229,255,.12); }