:root {
  color-scheme: dark;
  --ink: #050711;
  --navy: #071026;
  --cyan: #69f6ff;
  --pink: #ff4f9f;
}

* {
  box-sizing: border-box;
}

html,
body {
  width: 100%;
  min-height: 100%;
  margin: 0;
  overflow: hidden;
  background: var(--navy);
}

body {
  min-height: 100svh;
  font-family: "Avenir Next Condensed", "Helvetica Neue", sans-serif;
}

.scene {
  position: relative;
  isolation: isolate;
  width: 100vw;
  height: 100svh;
  min-height: 34rem;
  overflow: hidden;
  background: var(--navy);
}

#drive {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
}

.clock {
  position: absolute;
  z-index: 4;
  top: max(clamp(1.7rem, 5.5vh, 4.2rem), env(safe-area-inset-top));
  right: max(clamp(1.45rem, 3.8vw, 4.5rem), env(safe-area-inset-right));
  color: rgba(255, 245, 223, 0.72);
  font-size: clamp(0.6rem, 0.72vw, 0.76rem);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.3em;
  text-shadow: 0 0 1.4rem rgba(105, 246, 255, 0.28);
  pointer-events: none;
}

.car {
  --car-width: clamp(20rem, 39vw, 43rem);
  position: absolute;
  z-index: 5;
  left: 50%;
  bottom: clamp(-4.5rem, -6vh, -2.5rem);
  width: var(--car-width);
  height: calc(var(--car-width) * 0.39);
  transform: translateX(-50%);
  transform-origin: 50% 100%;
  animation: idle 4.4s ease-in-out infinite;
  filter: drop-shadow(0 -0.6rem 2.2rem rgba(18, 8, 33, 0.75));
}

.rear-window {
  position: absolute;
  z-index: 1;
  top: 2%;
  left: 20%;
  width: 60%;
  height: 50%;
  overflow: hidden;
  clip-path: polygon(16% 0, 84% 0, 100% 100%, 0 100%);
  background: linear-gradient(155deg, #18223c 0 34%, #39617d 35%, #111528 52%);
  border-bottom: 0.32rem solid #15182b;
}

.rear-window::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(112deg, transparent 28%, rgba(105, 246, 255, 0.17) 29% 31%, transparent 32% 54%, rgba(255, 129, 175, 0.14) 55% 57%, transparent 58%);
}

.rear-window span {
  position: absolute;
  right: 18%;
  bottom: 11%;
  width: 13%;
  aspect-ratio: 1;
  border: 1px solid rgba(255, 224, 160, 0.32);
  border-radius: 50%;
}

.car-body {
  position: absolute;
  z-index: 2;
  left: 3%;
  bottom: 0;
  width: 94%;
  height: 63%;
  clip-path: polygon(8% 12%, 20% 0, 80% 0, 92% 12%, 100% 48%, 96% 100%, 4% 100%, 0 48%);
  background:
    linear-gradient(90deg, transparent 8%, rgba(255,255,255,.2) 8.5%, transparent 12% 88%, rgba(255,255,255,.18) 91%, transparent 92%),
    linear-gradient(180deg, #3c4b68 0%, #131a2d 17%, #080a13 55%, #151625 72%, #05060a 100%);
  border-top: 1px solid rgba(185, 239, 255, 0.5);
}

.car-body::before {
  content: "";
  position: absolute;
  top: 16%;
  left: 9%;
  width: 82%;
  height: 3%;
  background: linear-gradient(90deg, var(--cyan), transparent 18% 82%, var(--pink));
  opacity: 0.48;
}

.car-body::after {
  content: "";
  position: absolute;
  left: 10%;
  right: 10%;
  bottom: 11%;
  height: 12%;
  border-radius: 50%;
  background: #020207;
  box-shadow: 0 0 1.8rem rgba(255, 79, 159, 0.26);
}

.tail {
  position: absolute;
  z-index: 2;
  top: 28%;
  width: 25%;
  height: 13%;
  border-radius: 2px;
  background: linear-gradient(90deg, #ff224f, #ff916e 45%, #ff1648);
  box-shadow: 0 0 0.4rem #ff2b53, 0 0 1.8rem rgba(255, 36, 89, 0.7), 0 0 5rem rgba(255, 35, 112, 0.33);
  animation: breathe 3.8s ease-in-out infinite;
}

.tail-left { left: 9%; transform: skewX(-10deg); }
.tail-right { right: 9%; transform: skewX(10deg); }

.wheel {
  position: absolute;
  z-index: 0;
  bottom: -4%;
  width: 13%;
  height: 29%;
  border-radius: 28%;
  background: #020205;
}

.wheel-left { left: 8%; }
.wheel-right { right: 8%; }

.grain,
.vignette {
  position: absolute;
  z-index: 8;
  inset: 0;
  pointer-events: none;
}

.grain {
  opacity: 0.055;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.8'/%3E%3C/svg%3E");
  animation: grain 0.24s steps(2) infinite;
}

.vignette {
  z-index: 7;
  box-shadow: inset 0 0 13vw rgba(0, 0, 10, 0.58);
}

@keyframes idle {
  0%, 100% { transform: translateX(-50%) translateY(0) rotate(-0.08deg); }
  50% { transform: translateX(-50%) translateY(0.35rem) rotate(0.08deg); }
}

@keyframes breathe {
  0%, 100% { filter: brightness(0.92); }
  50% { filter: brightness(1.16); }
}

@keyframes grain {
  0% { transform: translate(0, 0); }
  25% { transform: translate(-2%, 1%); }
  50% { transform: translate(1%, -2%); }
  75% { transform: translate(2%, 2%); }
  100% { transform: translate(-1%, -1%); }
}

@media (max-aspect-ratio: 4 / 5) {
  .clock {
    top: max(1.7rem, calc(env(safe-area-inset-top) + 1rem));
    right: max(1.35rem, env(safe-area-inset-right));
  }

  .car {
    --car-width: clamp(19rem, 91vw, 30rem);
    bottom: max(-1.8rem, calc(env(safe-area-inset-bottom) - 3.2rem));
  }
}

@media (max-height: 570px) and (orientation: landscape) {
  .scene { min-height: 28rem; }
  .car { --car-width: min(36vw, 28rem); }
}

@media (prefers-reduced-motion: reduce) {
  .car,
  .tail,
  .grain {
    animation: none;
  }
}