/*
 * This is a manifest file that'll be compiled into application.css.
 *
 * With Propshaft, assets are served efficiently without preprocessing steps. You can still include
 * application-wide styles in this file, but keep in mind that CSS precedence will follow the standard
 * cascading order, meaning styles declared later in the document or manifest will override earlier ones,
 * depending on specificity.
 *
 * Consider organizing styles into separate files for maintainability.
 */

.karaoke-stage {
  position: relative;
  min-height: calc(100vh - 80px);
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 30%, rgb(30 41 59 / 0.9), transparent 48%),
    linear-gradient(145deg, #020617 0%, #0f172a 52%, #020617 100%);
}

.karaoke-stage:fullscreen {
  min-height: 100vh;
}

.karaoke-stage__content {
  position: relative;
  z-index: 2;
  display: flex;
  min-height: calc(100vh - 80px);
  max-width: 80rem;
  margin: 0 auto;
  padding: 2rem clamp(1.25rem, 4vw, 4rem);
  flex-direction: column;
}

.karaoke-stage:fullscreen .karaoke-stage__content {
  min-height: 100vh;
}

.karaoke-stage__glow {
  position: absolute;
  width: 32rem;
  height: 32rem;
  border-radius: 9999px;
  filter: blur(100px);
  opacity: 0.2;
}

.karaoke-stage__glow--left {
  top: 15%;
  left: -16rem;
  background: #d946ef;
}

.karaoke-stage__glow--right {
  right: -16rem;
  bottom: 5%;
  background: #22d3ee;
}

.karaoke-lyrics {
  display: flex;
  flex: 1;
  min-height: 24rem;
  padding: 3rem 0;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  text-wrap: balance;
}

.karaoke-lyrics__previous,
.karaoke-lyrics__next {
  min-height: 2rem;
  max-width: 60rem;
  font-size: clamp(1rem, 2vw, 1.5rem);
  font-weight: 650;
  line-height: 1.4;
  color: rgb(255 255 255 / 0.28);
}

.karaoke-lyrics__current {
  min-height: 5rem;
  max-width: 70rem;
  margin: clamp(1.25rem, 3vh, 2.5rem) 0;
  font-size: clamp(2rem, 6vw, 5rem);
  font-weight: 900;
  line-height: 1.12;
  letter-spacing: -0.035em;
}

.karaoke-word {
  --word-progress: 0%;
  color: transparent;
  background: linear-gradient(
    90deg,
    #67e8f9 0%,
    #f0abfc var(--word-progress),
    rgb(255 255 255 / 0.3) var(--word-progress),
    rgb(255 255 255 / 0.3) 100%
  );
  background-clip: text;
  -webkit-background-clip: text;
  filter: drop-shadow(0 0 1rem rgb(103 232 249 / 0.08));
}

.karaoke-controls {
  display: flex;
  width: min(100%, 62rem);
  margin: 0 auto;
  padding: 1rem;
  align-items: center;
  gap: 1.25rem;
  border: 1px solid rgb(255 255 255 / 0.1);
  border-radius: 1.25rem;
  background: rgb(2 6 23 / 0.68);
  box-shadow: 0 1.5rem 5rem rgb(0 0 0 / 0.25);
  backdrop-filter: blur(18px);
}

.karaoke-controls__play {
  min-width: 8rem;
  padding: 0.85rem 1.15rem;
  border-radius: 0.9rem;
  background: white;
  color: #020617;
  font-weight: 800;
  transition: background-color 160ms ease, opacity 160ms ease;
}

.karaoke-controls__play:hover:not(:disabled) {
  background: #a5f3fc;
}

.karaoke-controls__play:disabled {
  cursor: wait;
  opacity: 0.4;
}

.karaoke-controls__range {
  width: 100%;
  accent-color: #67e8f9;
  cursor: pointer;
}

.karaoke-controls__range:disabled {
  cursor: wait;
  opacity: 0.4;
}

@media (max-width: 640px) {
  .karaoke-stage__content {
    padding-top: 1.25rem;
    padding-bottom: 1.25rem;
  }

  .karaoke-controls {
    align-items: stretch;
    flex-direction: column;
  }

  .karaoke-controls__play {
    width: 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .karaoke-controls__play {
    transition: none;
  }
}