/* ========================= */
/* MODE TINTS */
/* ========================= */

.mode-comfort .mode-title {
  color: #f3b66a;
}

.mode-comfort .car-glow {
  background:
    radial-gradient(
      circle,
      rgba(255, 176, 92, 0.42) 0%,
      rgba(255, 176, 92, 0.12) 38%,
      transparent 72%
    );
}

.mode-dynamic .mode-title {
  color: #ff8b68;
}

.mode-dynamic .car-glow {
  background:
    radial-gradient(
      circle,
      rgba(255, 100, 72, 0.46) 0%,
      rgba(255, 100, 72, 0.14) 38%,
      transparent 72%
    );
}

.mode-dynamic .scene-bg {
  opacity: 0.2;
  filter: saturate(1.08);
}

.mode-roadtrip .mode-title {
  color: #f6c46c;
}

.mode-roadtrip .car-glow {
  background:
    radial-gradient(
      circle,
      rgba(255, 188, 88, 0.42) 0%,
      rgba(255, 188, 88, 0.12) 38%,
      transparent 72%
    );
}

/* ========================= */
/* PLAY / DRIVE STATES */
/* ========================= */

.app.driving .carousel-main-btn {
  animation: playPulse 1.65s ease-in-out infinite;
}

.app.driving.mode-comfort .road-center-line {
  animation: roadMoveComfort 1.8s linear infinite;
  animation-play-state: running;
}

.app.driving.mode-dynamic .road-center-line {
  animation: roadMoveDynamic 0.8s linear infinite;
  animation-play-state: running;
}

.app.driving.mode-roadtrip .road-center-line {
  animation: roadMoveRoadtrip 1.3s linear infinite;
  animation-play-state: running;
}

.app.driving.mode-comfort .car-float {
  animation: carComfortFloat 4s ease-in-out infinite;
  animation-play-state: running;
}

.app.driving.mode-dynamic .car-float {
  animation: carDynamicFloat 1.2s ease-in-out infinite;
  animation-play-state: running;
}

.app.driving.mode-roadtrip .car-float {
  animation: carRoadtripFloat 5s ease-in-out infinite;
  animation-play-state: running;
}

/* ========================= */
/* ANIMATIONS */
/* ========================= */

@keyframes roadMoveComfort {
  from {
    background-position: 0 0;
  }
  to {
    background-position: 0 120px;
  }
}

@keyframes roadMoveDynamic {
  from {
    background-position: 0 0;
  }
  to {
    background-position: 0 240px;
  }
}

@keyframes roadMoveRoadtrip {
  from {
    background-position: 0 0;
  }
  to {
    background-position: 0 160px;
  }
}

@keyframes carComfortFloat {
  0%,
  100% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(-6px);
  }
}

@keyframes carDynamicFloat {
  0%,
  100% {
    transform: translateY(0px) scale(1);
  }
  50% {
    transform: translateY(-3px) scale(1.02);
  }
}

@keyframes carRoadtripFloat {
  0%,
  100% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(-4px);
  }
}

@keyframes playPulse {
  0% {
    transform: translateX(-50%) scale(1);
    box-shadow:
      0 10px 28px rgba(255, 96, 72, 0.24),
      0 0 34px rgba(255, 120, 80, 0.2),
      inset 0 2px 8px rgba(255, 255, 255, 0.24),
      inset 0 -6px 12px rgba(120, 24, 16, 0.16);
  }

  50% {
    transform: translateX(-50%) scale(1.06);
    box-shadow:
      0 14px 34px rgba(255, 96, 72, 0.32),
      0 0 46px rgba(255, 138, 92, 0.34),
      0 0 70px rgba(255, 110, 80, 0.12),
      inset 0 2px 8px rgba(255, 255, 255, 0.24),
      inset 0 -6px 12px rgba(120, 24, 16, 0.16);
  }

  100% {
    transform: translateX(-50%) scale(1);
    box-shadow:
      0 10px 28px rgba(255, 96, 72, 0.24),
      0 0 34px rgba(255, 120, 80, 0.2),
      inset 0 2px 8px rgba(255, 255, 255, 0.24),
      inset 0 -6px 12px rgba(120, 24, 16, 0.16);
  }
}

/* ========================= */
/* SMALL MOBILE */
/* ========================= */

@media (max-width: 390px) {
  .top-content {
    top: 14%;
    padding: 0 16px;
  }

  .mode-label {
    font-size: 12px;
    margin-bottom: 8px;
  }

  .mode-title {
    font-size: clamp(30px, 10.5vw, 42px);
  }

  .car-wrap {
    width: min(52vw, 185px);
    bottom: 25%;
  }

  .controls-stage {
    width: 92vw;
    height: 162px;
    bottom: 6.4%;
  }

  .carousel-main-btn {
    width: 88px;
    height: 88px;
    top: 8px;
  }

  .carousel-left-btn,
  .carousel-right-btn {
    width: 48px;
    height: 48px;
    top: 78px;
  }

  .carousel-left-btn {
    left: calc(50% - 100px);
  }

  .carousel-right-btn {
    right: calc(50% - 100px);
  }

  .mode-icon {
    width: 22px;
    height: 22px;
  }

  .main-mode-icon {
    width: 34px;
    height: 34px;
  }

  .play-icon {
    width: 28px;
    height: 28px;
  }

  .embla {
    width: 214px;
    height: 118px;
  }

  .volume-btn {
    width: 48px;
    height: 48px;
  }

  .volume-icon {
    width: 28px;
    height: 28px;
  }
}