/* ========================= */
/* DYNAMIC ROAD CANVAS       */
/* ========================= */

#dynamicRoadCanvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 8;
  pointer-events: none;
  display: none;
}

body.road-dynamic #dynamicRoadCanvas {
  display: block;
}

body.road-dynamic .road-scene {
  visibility: hidden;
}

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

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

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

.scene-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  max-width: 400px;
  margin: 0 auto;
  z-index: 2;
  pointer-events: none;
  transition: background 0.5s ease;
}

.horizon-glow {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 52%;
  z-index: 3;
  pointer-events: none;
  transition: opacity 0.8s ease, background 0.8s ease;
}

/* ========================= */
/* HORIZON BACKDROP          */
/* ========================= */

.horizon-backdrop {
  position: absolute;
  left: 0;
  right: 0;
  bottom: calc(42% - 86px);
  height: 22vh;
  z-index: 4;
  pointer-events: none;
  background: transparent;
  -webkit-mask-image: linear-gradient(
    to bottom,
    transparent 0%,
    rgba(0,0,0,0.7) 14%,
    black 32%,
    black 66%,
    rgba(0,0,0,0.5) 84%,
    transparent 100%
  );
  mask-image: linear-gradient(
    to bottom,
    transparent 0%,
    rgba(0,0,0,0.7) 14%,
    black 32%,
    black 66%,
    rgba(0,0,0,0.5) 84%,
    transparent 100%
  );
}

/* --- CITY --- */
.horizon-city {
  background-image:
    radial-gradient(ellipse 90% 65% at 50% 100%, rgba(15,50,130,0.28) 0%, transparent 100%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 800 160'%3E%3Cpath fill='rgb(12,25,65)' fill-opacity='0.2' d='M0 160L0 118L30 118L30 105L60 105L60 115L100 115L100 100L130 100L130 110L160 110L160 98L200 98L200 108L250 108L250 95L290 95L290 105L330 105L330 92L370 92L370 102L410 102L410 88L450 88L450 100L500 100L500 88L540 88L540 98L580 98L580 85L620 85L620 98L660 98L660 88L700 88L700 102L740 102L740 112L770 112L770 102L800 102L800 160Z'/%3E%3Cpath fill='rgb(10,20,52)' fill-opacity='0.62' d='M0 160L0 130L50 130L50 95L90 95L90 72L95 72L95 95L100 95L100 108L140 108L140 85L160 85L160 72L170 72L170 88L180 88L180 120L200 120L200 102L240 102L240 78L260 78L260 62L270 62L270 78L280 78L280 95L320 95L320 112L350 112L350 88L380 88L380 125L400 125L400 100L430 100L430 80L460 80L460 60L470 60L470 78L480 78L480 90L520 90L520 110L540 110L540 75L570 75L570 58L580 58L580 78L600 78L600 98L640 98L640 82L670 82L670 68L680 68L680 82L700 82L700 95L730 95L730 115L760 115L760 88L780 88L780 125L800 125L800 160Z'/%3E%3Cg stroke='rgb(8,18,50)' stroke-opacity='0.4' stroke-width='1.5' stroke-linecap='round' fill='none'%3E%3Cline x1='92' y1='72' x2='92' y2='55'/%3E%3Cline x1='265' y1='62' x2='265' y2='45'/%3E%3Cline x1='465' y1='60' x2='465' y2='43'/%3E%3Cline x1='575' y1='58' x2='575' y2='40'/%3E%3Cline x1='675' y1='68' x2='675' y2='51'/%3E%3C/g%3E%3Cg fill='rgb(10,20,52)' fill-opacity='0.35'%3E%3Ccircle cx='92' cy='54' r='1.5'/%3E%3Ccircle cx='265' cy='44' r='1.5'/%3E%3Ccircle cx='465' cy='42' r='1.5'/%3E%3Ccircle cx='575' cy='39' r='1.5'/%3E%3Ccircle cx='675' cy='50' r='1.5'/%3E%3C/g%3E%3Cg fill='rgb(200,220,255)' fill-opacity='0.12'%3E%3Crect x='55' y='98' width='3' height='2'/%3E%3Crect x='64' y='106' width='3' height='2'/%3E%3Crect x='72' y='98' width='2' height='2'/%3E%3Crect x='80' y='110' width='3' height='2'/%3E%3Crect x='143' y='88' width='2' height='2'/%3E%3Crect x='153' y='98' width='2' height='2'/%3E%3Crect x='244' y='82' width='3' height='2'/%3E%3Crect x='253' y='92' width='2' height='2'/%3E%3Crect x='433' y='83' width='3' height='2'/%3E%3Crect x='443' y='93' width='3' height='2'/%3E%3Crect x='453' y='83' width='2' height='2'/%3E%3Crect x='545' y='78' width='3' height='2'/%3E%3Crect x='555' y='88' width='2' height='2'/%3E%3Crect x='644' y='85' width='3' height='2'/%3E%3Crect x='655' y='95' width='2' height='2'/%3E%3C/g%3E%3C/svg%3E");
  background-size: 100% 100%, 100% 100%;
  background-repeat: no-repeat, no-repeat;
  background-position: bottom center, bottom center;
}

/* --- MOUNTAINS --- */
.horizon-mountains {
  background-image:
    radial-gradient(ellipse 80% 60% at 50% 100%, rgba(0,150,120,0.18) 0%, transparent 100%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 800 160'%3E%3Cpath fill='rgb(10,22,28)' fill-opacity='0.22' d='M-10 160L0 132L25 112L50 128L80 105L110 122L145 102L180 118L215 95L250 110L285 98L320 112L355 92L390 108L430 88L470 105L510 92L550 108L590 95L630 110L670 98L710 115L750 100L790 120L810 135L810 160Z'/%3E%3Cpath fill='rgb(8,18,24)' fill-opacity='0.42' d='M-10 160L0 142L30 118L55 136L85 112L115 130L150 108L185 126L220 100L258 118L292 105L328 120L364 95L400 115L438 88L476 108L514 95L552 112L590 98L628 115L668 102L708 118L748 105L790 122L810 140L810 160Z'/%3E%3Cpath fill='rgb(5,12,16)' fill-opacity='0.6' d='M-10 160L0 150L35 130L60 148L92 125L122 142L155 120L188 138L222 116L260 132L296 118L330 136L368 110L404 128L440 105L476 122L514 112L552 128L590 108L628 125L666 115L706 130L748 118L790 135L810 150L810 160Z'/%3E%3Cpath fill='none' stroke='rgb(0,190,160)' stroke-width='0.8' stroke-opacity='0.22' d='M0 142L30 118L55 136L85 112L115 130L150 108L185 126L220 100L258 118L292 105L328 120L364 95L400 115L438 88L476 108L514 95L552 112L590 98L628 115L668 102L708 118L748 105L790 122'/%3E%3C/svg%3E");
  background-size: 100% 100%, 100% 100%;
  background-repeat: no-repeat, no-repeat;
  background-position: bottom center, bottom center;
}

/* --- FOREST --- */
.horizon-forest {
  background-image:
    radial-gradient(ellipse 80% 55% at 50% 100%, rgba(0,70,35,0.18) 0%, transparent 100%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 800 160'%3E%3Cpath fill='rgb(6,14,8)' fill-opacity='0.3' d='M-10 160L-10 145Q80 120 160 138Q240 150 320 128Q400 110 480 130Q560 148 640 125Q720 108 810 130L810 160Z'/%3E%3Cpath fill='rgb(4,10,6)' fill-opacity='0.72' d='M0 160L0 132L8 132L20 100L32 132L35 132L45 85L55 132L59 132L70 95L81 132L86 132L95 78L104 132L108 132L120 88L132 132L136 132L148 70L158 132L162 132L175 82L186 132L190 132L202 72L211 132L215 132L228 90L240 132L243 132L255 78L265 132L269 132L282 85L293 132L298 132L308 68L317 132L321 132L335 80L347 132L350 132L362 72L372 132L376 132L388 92L399 132L404 132L415 80L424 132L429 132L442 70L454 132L457 132L468 83L478 132L482 132L495 75L506 132L510 132L522 88L531 132L535 132L548 72L560 132L563 132L574 85L584 132L588 132L600 78L612 132L615 132L626 68L635 132L639 132L652 82L664 132L667 132L678 75L688 132L692 132L704 90L715 132L718 132L730 78L740 132L744 132L756 85L768 132L772 132L782 72L792 132L800 132L800 160Z'/%3E%3C/svg%3E");
  background-size: 100% 100%, 100% 100%;
  background-repeat: no-repeat, no-repeat;
  background-position: bottom center, bottom center;
}

/* ================= */
/* 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.38);
  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);
}

/* ========================= */
/* STARS LAYER               */
/* ========================= */

.stars-layer {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  max-width: 400px;
  margin: 0 auto;
  height: 35vh;
  overflow: hidden;
  pointer-events: none;
  z-index: 3;
  opacity: 0;
  transition: opacity 0.8s ease;
  transform: translateZ(0);
  contain: layout paint style;
}

.stars-layer.is-visible {
  opacity: 1;
}

.star {
  position: absolute;
  width: var(--size);
  height: var(--size);
  left: var(--x);
  top: var(--y);
  border-radius: 50%;
  background: rgba(255, 255, 255, var(--base-opacity));
  box-shadow: 0 0 var(--glow) rgba(255, 255, 255, var(--glow-opacity));
  opacity: var(--base-opacity);
  transform: scale(1) translateZ(0);
  animation: starTwinkle var(--duration) ease-in-out infinite;
  animation-delay: var(--delay);
  will-change: opacity, transform;
}

.star.is-soft {
  filter: blur(0.15px);
}

.star.is-bright {
  background: rgba(235, 244, 255, var(--base-opacity));
  box-shadow:
    0 0 var(--glow) rgba(210, 226, 255, var(--glow-opacity)),
    0 0 calc(var(--glow) * 1.8) rgba(120, 156, 255, 0.12);
}

@keyframes starTwinkle {
  0%, 100% {
    opacity: calc(var(--base-opacity) * 0.48);
    transform: scale(0.82) translateZ(0);
  }
  38% {
    opacity: var(--peak-opacity);
    transform: scale(1.22) translateZ(0);
  }
  64% {
    opacity: calc(var(--base-opacity) * 0.68);
    transform: scale(0.94) translateZ(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .star {
    animation: none;
    opacity: calc(var(--base-opacity) * 0.72);
  }
}