/* "Scroll to drive" scene (EfastScrollDrive): a drawn eFast cab that drives as you scroll */

.drive {
  position: relative;
  height: 2400px; /* how much scrolling the scene lasts */
}

.drive__scene {
  font-family: var(--font-ui);
  position: sticky;
  top: 0;
  height: 100vh;
  width: 100%;
  overflow: hidden;
  background: linear-gradient(180deg, #f6faf7 0%, #e3f5ea 100%);
}

.drive__sun {
  display: none;
  position: absolute;
  top: -12%;
  right: 12%;
  width: 420px;
  height: 420px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(18, 199, 101, 0.13), rgba(18, 199, 101, 0) 68%);
  filter: blur(24px);
  pointer-events: none;
}

.drive__eyebrow {
  position: absolute;
  top: 10%;
  width: 100%;
  z-index: 5;
  text-align: center;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.2em;
  color: var(--accent);
}

.drive__beats {
  position: absolute;
  top: 16%;
  width: 100%;
  height: 140px;
  z-index: 5;
  text-align: center;
  pointer-events: none;
}

.drive__beat {
  position: absolute;
  inset: 0;
  opacity: 0;
  font-size: clamp(44px, 8vw, 100px);
  font-weight: 800;
  letter-spacing: -0.045em;
  line-height: 1.1;
}

/* Scenery strips: each is one tile wider than the screen and slides left by one tile, forever */
.drive__strip {
  position: absolute;
  left: 0;
  background-repeat: repeat-x;
  pointer-events: none;
  will-change: transform;
  animation: strip-scroll linear infinite;
}

.drive__hills {
  right: -640px;
  bottom: 24%;
  height: 160px;
  opacity: 0.55;
  background-size: 640px 160px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='640' height='160'%3E%3Cpath d='M0 160 L0 96 C 120 60 220 62 320 92 C 420 120 520 118 640 90 L640 160 Z' fill='%23bff3d5'/%3E%3Cpath d='M0 160 L0 120 C 140 96 260 100 380 122 C 470 138 560 136 640 120 L640 160 Z' fill='%239fe6bd'/%3E%3C/svg%3E");
  --tile: -640px;
  animation-duration: 16s;
}

.drive__trees {
  right: -220px;
  bottom: 22%;
  height: 150px;
  opacity: 0.9;
  background-size: 220px 150px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='150'%3E%3Cg fill='%230f9d55'%3E%3Cpolygon points='40,20 66,96 14,96'/%3E%3Cpolygon points='40,44 60,104 20,104'/%3E%3C/g%3E%3Crect x='36' y='100' width='8' height='20' fill='%23146b3a'/%3E%3Cg fill='%2313b365'%3E%3Cpolygon points='150,38 172,108 128,108'/%3E%3C/g%3E%3Crect x='146' y='104' width='8' height='18' fill='%23146b3a'/%3E%3Ccircle cx='105' cy='96' r='16' fill='%2312c765'/%3E%3Crect x='102' y='104' width='6' height='16' fill='%23146b3a'/%3E%3C/svg%3E");
  --tile: -220px;
  animation-duration: 3.2s;
}

.drive__road {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 24%;
  background: linear-gradient(180deg, #253029 0%, #1a231d 60%, #131a15 100%);
}

.drive__lane {
  position: absolute;
  top: 52%;
  left: 0;
  right: 0;
  height: 5px;
  overflow: hidden;
  opacity: 0.8;
  -webkit-mask-image: linear-gradient(90deg, transparent, black 12%, black 88%, transparent);
  mask-image: linear-gradient(90deg, transparent, black 12%, black 88%, transparent);
}

.drive__dashes {
  top: 0;
  bottom: 0;
  right: -100px;
  background-image: repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.85) 0 40px, rgba(255, 255, 255, 0) 40px 100px);
  background-size: 100px 100%;
  --tile: -100px;
  animation-duration: 0.3125s; /* 320px per second */
}

@keyframes strip-scroll {
  from { transform: translate3d(0, 0, 0); }
  to { transform: translate3d(var(--tile), 0, 0); }
}

.drive__car {
  position: absolute;
  bottom: 17%;
  left: 50%;
  z-index: 4;
  width: min(40%, 480px);
  margin-left: min(-20%, -240px);
  will-change: transform;
}

.drive__bob {
  transform-origin: 50% 92%;
  animation: car-bob 0.9s ease-in-out infinite;
}

.drive__pitch {
  transform-origin: 50% 92%;
}

.drive__car svg {
  display: block;
  width: 100%;
  overflow: visible;
}

@keyframes car-bob {
  0%, 100% { transform: translateY(0); }
  25% { transform: translateY(-3px); }
  50% { transform: translateY(0); }
  75% { transform: translateY(-2px); }
}

.wheel-spin {
  transform-box: view-box;
  animation: wheel 0.6s linear infinite;
}

@keyframes wheel {
  to { transform: rotate(360deg); }
}

.drive__progress {
  position: absolute;
  bottom: 22px;
  left: 8%;
  right: 8%;
  z-index: 5;
  height: 3px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.18);
  overflow: hidden;
}

.drive__progress span {
  display: block;
  height: 100%;
  width: 100%;
  border-radius: 999px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left center;
}

@media (max-width: 1199px) {
  .drive__scene { height: 100svh; }
  .drive__sun { filter: none; }
  .drive__eyebrow { top: 120px; font-size: 12px; }
  .drive__beats { top: 148px; }
  .drive__car { width: 76%; margin-left: -38%; bottom: 17%; }
}

@media (prefers-reduced-motion: reduce) {
  .drive { height: auto; }
  .drive__scene { position: relative; height: 560px; }
  .drive__beat:last-child { opacity: 1; }
}