/* ================= */
/* BACKGROUND SCENE */
/* ================= */

.scene-bg {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}

/* ========================= */
/* TIME OF DAY OVERLAY       */
/* ========================= */

.scene-overlay {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;

  transition: background 0.5s ease;
}


/* ================= */
/* ROAD              */
/* ================= */

.road-scene {
  position: absolute;
  left: 0;
  right: 0;
  top: 58%;
  bottom: 18%;
  z-index: 8;
  pointer-events: none;
  transform: scale(1.1);
  transform-origin: center bottom;
}

@media (max-width: 480px) {
  .road-scene {
    transform: scale(1.2);
    transform-origin: center bottom;
  }
}

.road {
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  width: 140%;
  height: 100%;

  clip-path: polygon(44% 0%, 56% 0%, 100% 100%, 0% 100%);

  background:
    linear-gradient(
      180deg,
      rgba(10, 12, 18, 0.2) 0%,
      rgba(18, 18, 26, 0.95) 30%,
      rgba(6, 7, 13, 1) 100%
    );

  transition: filter 0.4s ease;
}

/* ========================= */
/* ROAD LINE (ANIMATION BASE) */
/* ========================= */

.road-center-line {
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  width: 10px;
  height: 56%;

  background-image:
    repeating-linear-gradient(
      to bottom,
      rgba(255, 207, 120, 0.95) 0 24px,
      transparent 24px 52px
    );

  clip-path: polygon(47% 0%, 53% 0%, 100% 100%, 0% 100%);
  opacity: 0.9;

  animation: road-line 1.8s linear infinite;
}

@keyframes road-line {
  from {
    background-position: 0 0;
  }
  to {
    background-position: 0 76px;
  }
}

.road-svg {
  width: 100%;
  height: 100%;
  display: block;
}

.app {
  --road-speed: 1;
  --car-speed: 1;
}

.app.is-paused {
  --road-speed: 0.28;
  --car-speed: 0.22;
}

.app.is-playing {
  --road-speed: 1;
  --car-speed: 1;
}

.line {
  fill: none;
  stroke: rgba(255, 255, 255, 0.82);
  stroke-width: 1.15;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: drop-shadow(0 0 2px rgba(255, 255, 255, 0.12));
}

.dash {
  fill: rgba(255, 255, 255, 0.82);
  filter: drop-shadow(0 0 2px rgba(255, 255, 255, 0.12));
  animation: dashDrive calc(1.35s / var(--road-speed, 1)) linear infinite;
  transform-box: fill-box;
  transform-origin: center;
}

.dash:nth-of-type(2) { animation-delay: -0.26s; }
.dash:nth-of-type(3) { animation-delay: -0.52s; }
.dash:nth-of-type(4) { animation-delay: -0.78s; }

.road-item {
  fill: none;
  stroke: rgba(255, 255, 255, 0.82);
  stroke-width: 1.2;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: drop-shadow(0 0 2px rgba(255, 255, 255, 0.12));
  opacity: 0;
  animation-duration: calc(6.4s / var(--road-speed, 1));
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}

.road-item.left {
  transform-origin: 168px 112px;
  animation-name: passByLeft;
}

.road-item.right {
  transform-origin: 262px 112px;
  animation-name: passByRight;
}

.phase-1 { animation-delay: 0s; }
.phase-2 { animation-delay: -1.6s; }
.phase-3 { animation-delay: -3.2s; }
.phase-4 { animation-delay: -4.8s; }

@keyframes passByLeft {
  0% {
    opacity: 0;
    transform: translate(0px, 0px) scale(0.24);
  }
  7% {
    opacity: 0.18;
  }
  15% {
    opacity: 0.46;
  }
  26% {
    opacity: 0.66;
  }
  34% {
    opacity: 0.52;
  }
  42% {
    opacity: 0;
    transform: translate(-215px, 132px) scale(2.15);
  }
  100% {
    opacity: 0;
    transform: translate(-215px, 132px) scale(2.15);
  }
}

@keyframes passByRight {
  0% {
    opacity: 0;
    transform: translate(0px, 0px) scale(0.24);
  }
  7% {
    opacity: 0.18;
  }
  15% {
    opacity: 0.46;
  }
  26% {
    opacity: 0.66;
  }
  34% {
    opacity: 0.52;
  }
  42% {
    opacity: 0;
    transform: translate(215px, 132px) scale(2.15);
  }
  100% {
    opacity: 0;
    transform: translate(215px, 132px) scale(2.15);
  }
}

@keyframes dashDrive {
  0% {
    opacity: 0;
    transform: translateY(-24px) scaleY(0.65);
  }
  22% {
    opacity: 0.62;
  }
  70% {
    opacity: 0.46;
  }
  100% {
    opacity: 0;
    transform: translateY(114px) scaleY(1.85);
  }
}

/* ========================= */
/* MODE → ROAD REACTION      */
/* ========================= */

body[data-mode="sport"] .road {
  filter: brightness(1.15) contrast(1.1);
}

body[data-mode="travel"] .road {
  filter: brightness(1.05) saturate(1.05);
}

body[data-mode="comfort"] .road {
  filter: brightness(0.98) saturate(0.95);
}

body[data-mode="rap"] .road {
  filter: brightness(1.10) contrast(1.12) saturate(1.15);
}

body[data-mode="rock"] .road {
  filter: brightness(1.20) contrast(1.18) saturate(1.12);
}

body[data-mode="deep"] .road {
  filter: brightness(1.05) contrast(1.06) saturate(1.12);
}

body[data-mode="lofi"] .road {
  filter: brightness(0.94) saturate(0.88);
}

body[data-mode="euro"] .road {
  filter: brightness(1.15) contrast(1.10) saturate(1.22);
}

body[data-mode="pulse"] .road {
  filter: brightness(1.25) contrast(1.20) saturate(1.10);
}

body[data-mode="manele"] .road {
  filter: brightness(1.12) contrast(1.08) saturate(1.18);
}