/* Lokal's Cast receiver. Sized in vh so it's the same on a 720p and a 4K TV.
   Only transform and opacity animate (the compositor's work): a TV's GPU is
   a phone's from years ago. Everything sits around the screen's middle, with
   the TV-safe margin (5%) kept clear. */

:root {
  --accent: #e8ff57;
  --text: #ffffff;
  --soft: rgba(255, 255, 255, 0.64);
  --dim: rgba(255, 255, 255, 0.4);
  --track: rgba(255, 255, 255, 0.2);
  --font: 'Inter', 'Google Sans', 'Roboto', system-ui, sans-serif;
  --ease: cubic-bezier(0.2, 0.8, 0.2, 1);
  --spring: cubic-bezier(0.34, 1.3, 0.5, 1);
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  width: 100%; height: 100%;
  overflow: hidden;
  background: #09090b;
  color: var(--text);
  font-family: var(--font);
  -webkit-font-smoothing: antialiased;
  cursor: none;
}

/* ------------------------------------------------------------ backdrop */

#backdrop, #backdrop .layer, #backdrop .shade, #video {
  position: fixed; inset: 0; width: 100%; height: 100%;
}
#backdrop { overflow: hidden; transition: opacity 0.8s ease; }
#backdrop .layer {
  opacity: 0;
  transform: scale(1.3);
  transition: opacity 1.4s ease;
  animation: drift 48s ease-in-out infinite alternate;
}
#backdrop .layer.on { opacity: 1; }
/* A slow drift, so the colours live a little (and nothing burns in). */
@keyframes drift {
  from { transform: scale(1.3) translate3d(-3%, -2%, 0) rotate(-2deg); }
  to { transform: scale(1.45) translate3d(3%, 2%, 0) rotate(2deg); }
}
#backdrop .shade {
  background:
    radial-gradient(120% 90% at 30% 45%, rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.5) 75%),
    linear-gradient(to bottom, rgba(0, 0, 0, 0.18), rgba(0, 0, 0, 0.42));
}
[data-view="idle"] #backdrop .layer { opacity: 0; }

#video {
  object-fit: contain;
  background: #000;
  opacity: 0;
  transition: opacity 0.8s ease;
}
[data-view="video"] #video { opacity: 1; }
[data-view="video"] #backdrop { opacity: 0; }

#app { position: fixed; inset: 0; }
#app > section {
  position: absolute;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.6s ease, transform 0.8s var(--ease), visibility 0s linear 0.6s;
}

/* ------------------------------------------------------------ idle */

#idle {
  inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 3vh;
}
.idle-logo { width: 13vh; height: 13vh; border-radius: 3vh; box-shadow: 0 2vh 6vh rgba(0, 0, 0, 0.5); }
.idle-hint { font-size: 2.4vh; font-weight: 500; color: var(--soft); letter-spacing: 0.01em; }
[data-view="idle"] #idle { opacity: 1; visibility: visible; transition-delay: 0s; }

/* ------------------------------------------------------------ the song (Now playing and Lyrics) */

#stage {
  left: 9vw; right: 9vw; top: 0; bottom: 0;
  display: flex; align-items: center;
  transform: scale(0.98);
}
[data-view="now"] #stage, [data-view="lyrics"] #stage {
  opacity: 1; visibility: visible; transform: none; transition-delay: 0s;
}
/* Switching between them: a quick fade over the change of layout. */
body.switching #app > #stage { opacity: 0; transition: opacity 0.22s ease; }

.art { display: flex; align-items: center; justify-content: center; gap: 7vh; min-width: 0; flex: 1; }

.cover-wrap {
  position: relative;
  flex: none;
  width: 54vh; height: 54vh;
  border-radius: 1.4vh;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.06);
  box-shadow: 0 4vh 10vh rgba(0, 0, 0, 0.45), 0 1vh 2.5vh rgba(0, 0, 0, 0.3);
  transition: transform 0.7s var(--spring);
}
/* Paused: the cover eases back, as Apple's players do. */
[data-state="paused"] .cover-wrap { transform: scale(0.86); }
#cover { width: 100%; height: 100%; object-fit: cover; display: block; opacity: 0; transition: opacity 0.6s ease; }
#cover.on { opacity: 1; }

.meta { flex: 0 1 78vh; min-width: 0; }
#title {
  font-size: 6vh; line-height: 1.1; font-weight: 700; letter-spacing: -0.025em;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
#artist {
  margin-top: 1.2vh;
  font-size: 3.4vh; font-weight: 500; color: var(--soft); letter-spacing: -0.01em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
#album {
  margin-top: 0.5vh;
  font-size: 2.4vh; font-weight: 400; color: var(--dim);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.progress { margin-top: 5vh; max-width: 70vh; }
.bar { height: 0.6vh; border-radius: 0.3vh; background: var(--track); overflow: hidden; }
.fill { width: 100%; height: 100%; border-radius: inherit; background: rgba(255, 255, 255, 0.92); transform-origin: left center; transform: scaleX(0); will-change: transform; }
.times {
  display: flex; justify-content: space-between;
  margin-top: 1.2vh;
  font-size: 1.8vh; font-weight: 600; color: var(--dim);
  font-variant-numeric: tabular-nums;
}

/* ------------------------------------------------------------ lyrics */

#lyrics { display: none; }
[data-view="lyrics"] #stage { gap: 8vh; }
[data-view="lyrics"] .art { flex: none; justify-content: center; width: 40vh; flex-direction: column; align-items: stretch; gap: 3.4vh; }
[data-view="lyrics"] .cover-wrap { width: 40vh; height: 40vh; }
[data-view="lyrics"] .meta { flex: none; }
[data-view="lyrics"] #album { display: none; }
[data-view="lyrics"] #title { font-size: 3.2vh; display: block; white-space: nowrap; text-overflow: ellipsis; }
[data-view="lyrics"] #artist { font-size: 2.4vh; margin-top: 0.5vh; }
[data-view="lyrics"] .progress { margin-top: 2.6vh; }
[data-view="lyrics"] #lyrics {
  display: block;
  position: relative; align-self: stretch; flex: 1; min-width: 0; overflow: hidden;
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 22%, #000 70%, transparent);
          mask-image: linear-gradient(to bottom, transparent, #000 22%, #000 70%, transparent);
}
#lines { will-change: transform; transition: transform 0.9s var(--ease); padding: 45vh 0; }
.line {
  font-size: 5vh; line-height: 1.2; font-weight: 800; letter-spacing: -0.02em;
  margin-bottom: 3.4vh;
  color: var(--text);
  opacity: 0.34;
  transform-origin: left center;
  transform: scale(0.96);
  transition: opacity 0.5s ease, transform 0.7s var(--ease);
}
.line.now { opacity: 1; transform: none; }
.line.past { opacity: 0.2; }
/* An instrumental break: three dots, lit while it lasts. */
.line.gap { font-size: 3vh; letter-spacing: 0.3em; }
.plain .line { opacity: 0.8; transform: none; font-size: 4.2vh; font-weight: 700; }
#no-lyrics { display: none; position: absolute; top: 50%; transform: translateY(-50%); font-size: 3.4vh; font-weight: 600; color: var(--dim); }
#lyrics.empty #no-lyrics { display: block; }

/* ------------------------------------------------------------ up next (an overlay) */

#upnext {
  left: 0; right: 0; bottom: 0;
  padding: 18vh 9vw 7vh;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.85) 0%, rgba(0, 0, 0, 0.62) 55%, transparent);
  transform: translateY(12vh);
}
body.upnext[data-view="now"] #upnext.has { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
/* The song moves up out of its way. */
body.upnext.has-upnext[data-view="now"] #stage { transform: translateY(-14vh) scale(0.84); }
.heading { font-size: 2.3vh; font-weight: 700; letter-spacing: -0.01em; margin-bottom: 2.2vh; }
#row { display: flex; gap: 2.6vh; }
.card { flex: none; width: 20vh; }
.card .thumb {
  width: 20vh; height: 20vh; border-radius: 1vh; overflow: hidden;
  background: rgba(255, 255, 255, 0.08) center / cover no-repeat;
  box-shadow: 0 1.4vh 3.4vh rgba(0, 0, 0, 0.45);
}
.card:first-child .thumb { outline: 0.4vh solid rgba(255, 255, 255, 0.9); outline-offset: 0.5vh; }
.card .t { margin-top: 1.6vh; font-size: 2vh; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.card .a { margin-top: 0.3vh; font-size: 1.8vh; font-weight: 500; color: var(--soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ------------------------------------------------------------ music video */

#vbar {
  left: 0; right: 0; bottom: 0;
  padding: 16vh 9vw 7vh;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.8), transparent);
  transform: translateY(5vh);
}
[data-view="video"] #vbar.show { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.vtitle { font-size: 4.2vh; font-weight: 700; letter-spacing: -0.02em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vartist { margin-top: 0.6vh; font-size: 2.6vh; font-weight: 500; color: var(--soft); }
#vbar .progress { margin-top: 3vh; max-width: none; }

/* ------------------------------------------------------------ buffering */

#buffering {
  position: fixed; top: 6vh; right: 6vw;
  width: 4vh; height: 4vh; border-radius: 50%;
  border: 0.45vh solid rgba(255, 255, 255, 0.18);
  border-top-color: rgba(255, 255, 255, 0.9);
  opacity: 0; transition: opacity 0.3s ease;
  animation: spin 0.9s linear infinite;
  animation-play-state: paused;
}
[data-state="buffering"] #buffering { opacity: 1; animation-play-state: running; }
@keyframes spin { to { transform: rotate(360deg); } }