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

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


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


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

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


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

.app.driving .carousel-main-btn {
  animation: none;
  transform: translate(-50%, -50%) scale(0.82);
}

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

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

.app.driving.mode-travel .road-center-line {
  animation: roadMoveTravel 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-sport .car-float {
  animation: carSportFloat 1.2s ease-in-out infinite;
  animation-play-state: running;
}

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

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

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

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

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

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

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

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

@keyframes playPulse {
  0% {
    transform: translate(-50%, -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: translate(-50%, -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: translate(-50%, -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) {
  .app {
    --play-center-y: 46svh;
    --play-radius: 44px;
  }

  .track-info {
    top: min(
      17svh,
      calc(
        var(--play-center-y) - var(--play-radius) - var(--track-control-gap) -
          var(--track-stack-height)
      )
    );
  }

  .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;
    top: var(--play-center-y);
    bottom: auto;
    height: 108px;
  }

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

  .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;
  }
}

/* ========================= */
/* PAUSE OUTLINE ANIMATIONS  */
/* ========================= */

@keyframes outlineRingComfort {
  0%, 100% {
    box-shadow: 0 0 0 0 rgba(76, 208, 122, 0);
  }
  50% {
    box-shadow:
      0 0 0 6px rgba(76, 208, 122, 0.50),
      0 0 0 12px rgba(76, 208, 122, 0.16),
      0 0 26px rgba(76, 208, 122, 0.24);
  }
}

@keyframes outlineRingSport {
  0%, 100% {
    box-shadow: 0 0 0 0 rgba(255, 50, 50, 0);
  }
  50% {
    box-shadow:
      0 0 0 6px rgba(255, 50, 50, 0.50),
      0 0 0 12px rgba(255, 50, 50, 0.16),
      0 0 26px rgba(255, 50, 50, 0.24);
  }
}

@keyframes outlineRingTravel {
  0%, 100% {
    box-shadow: 0 0 0 0 rgba(255, 165, 80, 0);
  }
  50% {
    box-shadow:
      0 0 0 6px rgba(255, 165, 80, 0.50),
      0 0 0 12px rgba(255, 165, 80, 0.16),
      0 0 26px rgba(255, 165, 80, 0.24);
  }
}

@keyframes outlineRingRadio7 {
  0%, 100% {
    box-shadow: 0 0 0 0 rgba(8, 152, 83, 0);
  }
  50% {
    box-shadow:
      0 0 0 6px rgba(8, 152, 83, 0.50),
      0 0 0 12px rgba(8, 152, 83, 0.16),
      0 0 26px rgba(8, 152, 83, 0.24);
  }
}

@keyframes outlineRingNonStop {
  0%, 100% {
    box-shadow: 0 0 0 0 rgba(0, 180, 220, 0);
  }
  50% {
    box-shadow:
      0 0 0 6px rgba(0, 180, 220, 0.50),
      0 0 0 12px rgba(0, 180, 220, 0.16),
      0 0 26px rgba(0, 180, 220, 0.24);
  }
}

@keyframes outlineRingRap {
  0%, 100% {
    box-shadow: 0 0 0 0 rgba(180, 40, 255, 0);
  }
  50% {
    box-shadow:
      0 0 0 6px rgba(180, 40, 255, 0.50),
      0 0 0 12px rgba(180, 40, 255, 0.16),
      0 0 26px rgba(180, 40, 255, 0.24);
  }
}

@keyframes outlineRingRock {
  0%, 100% {
    box-shadow: 0 0 0 0 rgba(255, 75, 15, 0);
  }
  50% {
    box-shadow:
      0 0 0 6px rgba(255, 75, 15, 0.50),
      0 0 0 12px rgba(255, 75, 15, 0.16),
      0 0 26px rgba(255, 75, 15, 0.24);
  }
}

@keyframes outlineRingDeep {
  0%, 100% {
    box-shadow: 0 0 0 0 rgba(80, 60, 255, 0);
  }
  50% {
    box-shadow:
      0 0 0 6px rgba(80, 60, 255, 0.50),
      0 0 0 12px rgba(80, 60, 255, 0.16),
      0 0 26px rgba(80, 60, 255, 0.24);
  }
}

@keyframes outlineRingLofi {
  0%, 100% {
    box-shadow: 0 0 0 0 rgba(130, 170, 225, 0);
  }
  50% {
    box-shadow:
      0 0 0 6px rgba(130, 170, 225, 0.45),
      0 0 0 12px rgba(130, 170, 225, 0.14),
      0 0 26px rgba(130, 170, 225, 0.20);
  }
}

@keyframes outlineRingEuro {
  0%, 100% {
    box-shadow: 0 0 0 0 rgba(0, 212, 255, 0);
  }
  50% {
    box-shadow:
      0 0 0 6px rgba(0, 212, 255, 0.50),
      0 0 0 12px rgba(0, 212, 255, 0.16),
      0 0 26px rgba(0, 212, 255, 0.24);
  }
}

@keyframes outlineRingPulse {
  0%, 100% {
    box-shadow: 0 0 0 0 rgba(160, 255, 20, 0);
  }
  50% {
    box-shadow:
      0 0 0 6px rgba(160, 255, 20, 0.52),
      0 0 0 12px rgba(160, 255, 20, 0.18),
      0 0 26px rgba(160, 255, 20, 0.28);
  }
}

@keyframes outlineRingManele {
  0%, 100% {
    box-shadow: 0 0 0 0 rgba(255, 155, 0, 0);
  }
  50% {
    box-shadow:
      0 0 0 6px rgba(255, 155, 0, 0.50),
      0 0 0 12px rgba(255, 155, 0, 0.16),
      0 0 26px rgba(255, 155, 0, 0.24);
  }
}