.car {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
  transform-origin: 50% 100%;
}

.car__wheel {
  transform-origin: 0 0;
}

.car.is-settling {
  transition: translate 0.4s var(--ease-out), rotate 0.4s var(--ease-out);
}

.car.is-hopping {
  animation: car-hop 0.7s var(--ease-out);
}

@keyframes car-hop {
  0% {
    translate: 0 0;
    rotate: 0deg;
  }
  35% {
    translate: 0 -0.9rem;
    rotate: -4deg;
  }
  70% {
    translate: 0 0;
    rotate: 1.5deg;
  }
  100% {
    translate: 0 0;
    rotate: 0deg;
  }
}

.car--solid .car__body {
  fill: var(--accent);
  stroke: var(--car-outline);
  stroke-width: 2.5;
  stroke-linejoin: round;
}

.car--solid .car__glass {
  fill: var(--car-glass);
}

.car--solid .car__detail {
  fill: none;
  stroke: var(--car-outline);
  stroke-width: 2.5;
  stroke-linecap: round;
  opacity: 0.5;
}

.car--solid .car__light {
  fill: var(--car-light);
  stroke: var(--car-outline);
  stroke-width: 1.5;
}

.car--solid .car__tail {
  fill: var(--car-tail);
}

.car--solid .car__tire {
  fill: var(--car-tire);
  stroke: var(--car-outline);
  stroke-width: 2.5;
}

.car--solid .car__rim {
  fill: var(--car-rim);
  stroke: var(--car-outline);
  stroke-width: 1.5;
}

.car--solid .car__spokes {
  fill: none;
  stroke: var(--car-outline);
  stroke-width: 2;
}

.car--solid .car__hub {
  fill: var(--car-outline);
}

.car__beam {
  fill: url(#car-beam);
  opacity: 0.4;
  pointer-events: none;
}

:root[data-theme="dark"] .car__beam {
  opacity: 0.75;
}

.car--line .car__body,
.car--line .car__glass,
.car--line .car__detail,
.car--line .car__tail,
.car--line .car__tire,
.car--line .car__rim,
.car--line .car__spokes {
  fill: none;
  stroke: var(--line-strong);
  stroke-width: 2;
  stroke-linejoin: round;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
}

.car--line .car__light {
  fill: none;
  stroke: var(--accent);
  stroke-width: 2.5;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}

.car--line .car__hub {
  fill: var(--line-strong);
}

.road {
  --road-h: clamp(3.25rem, 2rem + 4vw, 5.5rem);
  --car-w: clamp(5rem, 3.25rem + 6vw, 8.5rem);
  --ground: 36%;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 0;
  height: var(--road-h);
  overflow: hidden;
  pointer-events: none;
}

.road::before,
.road::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 2px;
}

.road::before {
  bottom: var(--ground);
  background: var(--line);
}

.road::after {
  bottom: 12%;
  background: repeating-linear-gradient(90deg, var(--line-strong) 0 0.75rem, transparent 0.75rem 1.75rem);
  opacity: 0.55;
}

.road__trail {
  position: absolute;
  left: 0;
  right: 0;
  bottom: var(--ground);
  height: 3px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left center;
}

.road[data-direction="-1"] .road__trail {
  transform-origin: right center;
}

.road__car {
  position: absolute;
  left: 0;
  bottom: calc(var(--ground) - 1px);
  width: var(--car-w);
  pointer-events: auto;
  cursor: pointer;
  will-change: transform;
}

.road[data-direction="-1"] .road__car .car {
  transform: scaleX(-1);
}

.road.is-parked .road__car {
  left: 54%;
  margin-left: calc(var(--car-w) / -2);
}

.road.is-parked .road__trail {
  transform: scaleX(0.54);
}

.road[data-direction="-1"].is-parked .road__trail {
  transform: scaleX(0.46);
}

.hero__dots,
.hero__glow {
  position: absolute;
  inset: 0;
}

.hero__dots {
  background-image: radial-gradient(circle, var(--line-strong) 1.1px, transparent 1.7px);
  background-size: 1.75rem 1.75rem;
  -webkit-mask-image: radial-gradient(circle 15rem at var(--sx, 70%) var(--sy, 60%), #000 0%, transparent 100%);
  mask-image: radial-gradient(circle 15rem at var(--sx, 70%) var(--sy, 60%), #000 0%, transparent 100%);
}

.hero__glow {
  background: radial-gradient(circle 24rem at var(--sx, 70%) var(--sy, 60%), rgba(232, 110, 44, 0.2), transparent 70%);
}

.hero__scene {
  --car-w: min(58vw, 60rem);
  --car-left: 36vw;
  position: absolute;
  left: 0;
  right: 0;
  bottom: clamp(8rem, 29svh, 17rem);
  height: calc(var(--car-w) * 188 / 520);
}

.hero__road {
  position: absolute;
  left: calc(var(--car-left) - 6vw);
  right: 0;
  bottom: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--line-strong) 12vw);
}

.hero__car {
  position: absolute;
  left: var(--car-left);
  bottom: 0;
  width: var(--car-w);
  transform: translate3d(calc(var(--px, 0) * -1.4vw), calc(var(--py, 0) * -0.8vw), 0);
}

.hero__drive {
  will-change: transform;
}

.hero__arrive {
  position: relative;
}

.hero__streak {
  position: absolute;
  right: 91%;
  bottom: 0;
  width: 10vw;
  height: 3px;
  background: linear-gradient(90deg, transparent, var(--accent));
}

html.js:not(.no-anim) .hero__arrive {
  animation: car-arrive 2.4s var(--ease-out) both paused;
}

html.js:not(.no-anim).is-loaded .hero__arrive {
  animation-play-state: running;
}

html.js:not(.no-anim) .hero__car .car__roll {
  animation: wheel-arrive 2.4s var(--ease-out) both paused;
}

html.js:not(.no-anim).is-loaded .hero__car .car__roll {
  animation-play-state: running;
}

@keyframes car-arrive {
  from {
    transform: translate3d(calc((var(--car-left) + var(--car-w) + 12vw) * -1), 0, 0);
  }
  to {
    transform: none;
  }
}

@keyframes wheel-arrive {
  from {
    transform: rotate(-1700deg);
  }
  to {
    transform: none;
  }
}

@media (max-width: 860px) {
  .hero__scene {
    --car-w: min(88vw, 42svh);
    --car-left: 6vw;
    top: calc(var(--header-h) + clamp(0.5rem, 2svh, 1.5rem));
    bottom: auto;
  }

  .hero__road {
    left: 0;
  }

  .hero__streak {
    width: 60vw;
  }
}

.cursor-dot,
.cursor-ring {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 300;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.cursor-dot.is-active {
  opacity: 1;
}

.cursor-ring.is-active {
  opacity: 0.55;
}

.cursor-dot::before,
.cursor-ring::before {
  content: "";
  position: absolute;
  border-radius: 50%;
}

.cursor-dot::before {
  width: 6px;
  height: 6px;
  margin: -3px 0 0 -3px;
  background: var(--accent);
}

.cursor-ring::before {
  width: 2.25rem;
  height: 2.25rem;
  margin: -1.125rem 0 0 -1.125rem;
  border: 1.5px solid var(--ink);
  transition: scale 0.35s var(--ease-out), background-color 0.35s ease, border-color 0.35s ease;
}

.cursor-ring.is-active.is-link {
  opacity: 1;
}

.cursor-ring.is-link::before {
  scale: 1.55;
  border-color: var(--accent);
  background: rgba(232, 110, 44, 0.14);
}

.cursor-ring.is-down::before {
  scale: 0.75;
}

.fx-layer {
  position: fixed;
  inset: 0;
  z-index: 290;
  overflow: hidden;
  pointer-events: none;
}

.ripple {
  position: absolute;
  width: 5.5rem;
  height: 5.5rem;
  margin: -2.75rem 0 0 -2.75rem;
  border: 2px solid var(--accent);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(232, 110, 44, 0.3), rgba(232, 110, 44, 0) 68%);
  animation: ripple 0.7s var(--ease-out) forwards;
}

@keyframes ripple {
  from {
    transform: scale(0.15);
    opacity: 0.9;
  }
  to {
    transform: scale(1);
    opacity: 0;
  }
}

.dock {
  position: fixed;
  left: 50%;
  bottom: calc(1rem + env(safe-area-inset-bottom, 0px));
  z-index: 60;
  display: none;
  align-items: center;
  gap: 0.65rem;
  min-height: 3.25rem;
  padding: 0 1.5rem;
  border-radius: 999px;
  background: var(--accent);
  color: var(--on-accent);
  font-family: var(--font-display);
  font-size: 0.8125rem;
  font-weight: 800;
  line-height: 1;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
  box-shadow: 0 0.75rem 2rem -0.75rem rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(13, 13, 14, 0.18);
  opacity: 0;
  transform: translate3d(-50%, 220%, 0);
  transition: transform 0.6s var(--ease-out), opacity 0.4s ease, scale 0.2s var(--ease-out);
}

.dock:focus-visible {
  outline-color: var(--ink);
}

.dock:active {
  scale: 0.95;
}

.dock.is-visible {
  opacity: 1;
  transform: translate3d(-50%, 0, 0);
}

.site-header.is-menu-open ~ .dock {
  opacity: 0;
  pointer-events: none;
}

html:not(.js) .dock {
  display: none;
}

@media (max-width: 860px) {
  html.js .dock {
    display: inline-flex;
  }
}

@media (hover: none) {
  .btn:active,
  .icon-button:active,
  .link-arrow:active {
    scale: 0.96;
  }

  .unit:active,
  .fuel:active {
    scale: 0.985;
  }
}

@media (prefers-reduced-motion: reduce) {
  .car.is-hopping {
    animation: none;
  }
}