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

.scene-bg {
  position: absolute;
  inset: 0;
  z-index: 1;

  background-size: cover;
  background-position: center;

  opacity: 0.22;
  transform: scale(1.04);

  transition:
    background-image 0.6s ease,
    opacity 0.5s ease,
    transform 0.6s ease,
    filter 0.6s ease;
}

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

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

  transition: background 0.5s ease;
}

/* ===== MORNING ===== */
body[data-time="morning"] .scene-overlay {
  background:
    linear-gradient(
      180deg,
      rgba(120, 160, 255, 0.08) 0%,
      rgba(255, 210, 140, 0.12) 40%,
      rgba(10, 12, 18, 0.65) 100%
    );
}

/* ===== DAY ===== */
body[data-time="day"] .scene-overlay {
  background:
    linear-gradient(
      180deg,
      rgba(255, 255, 255, 0.04) 0%,
      rgba(2, 7, 18, 0.2) 40%,
      rgba(2, 7, 18, 0.65) 100%
    );
}

/* ===== SUNSET ===== */
body[data-time="sunset"] .scene-overlay {
  background:
    linear-gradient(
      180deg,
      rgba(255, 140, 80, 0.18) 0%,
      rgba(120, 60, 180, 0.12) 40%,
      rgba(2, 7, 18, 0.7) 100%
    );
}

/* ===== NIGHT ===== */
body[data-time="night"] .scene-overlay {
  background:
    linear-gradient(
      180deg,
      rgba(40, 60, 120, 0.18) 0%,
      rgba(10, 12, 30, 0.4) 40%,
      rgba(2, 7, 18, 0.85) 100%
    );
}

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

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

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

  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-play-state: paused;
}

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

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

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

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