/* ══════════════════════════════════════════════════════════════
   overlay.css — visual do card.
   Os valores abaixo são só os de partida: quem manda de verdade
   é o editor, que sobrescreve estas variáveis pela URL.
   ══════════════════════════════════════════════════════════════ */
:root {
  --largura: 420px;
  --arte: 62px;
  --raio: 14px;
  --surface: rgba(10,10,12,.84);
  --texto: #fff;
  --muted: rgba(255,255,255,.55);
  --borda: rgba(255,255,255,.07);
  --trilho: rgba(255,255,255,.09);
  --accent: #1ed760;

  --ease-out: cubic-bezier(.23,1,.32,1);
  --fonte: "Inter","Segoe UI Variable Text","Segoe UI",system-ui,-apple-system,sans-serif;
}

* { box-sizing: border-box; margin: 0; }
html, body { background: transparent; }
body {
  font-family: var(--fonte);
  color: var(--texto);
  padding: 8px;
  -webkit-font-smoothing: antialiased;
  overflow: hidden;
}

/* ── Card ────────────────────────────────────────────────────── */
.card {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 14px;
  align-items: center;
  width: var(--largura);
  padding: 12px 18px 14px 12px;
  background: var(--surface);
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  overflow: hidden;
  box-shadow:
    0 1px 0 rgba(255,255,255,.05) inset,
    0 10px 30px rgba(0,0,0,.45),
    0 0 40px -18px var(--accent);
  opacity: 0;
  transform: translateY(8px) scale(.985);
  transition: opacity 160ms var(--ease-out), transform 160ms var(--ease-out),
              box-shadow 600ms ease, background 200ms ease;
}
.card.is-visible { opacity: 1; transform: none; transition-duration: 280ms; }
.card.is-paused { filter: saturate(.7); }
.card::before {
  content: "";
  position: absolute; inset: 0 auto 0 0;
  width: 3px; background: var(--accent);
  transition: background 600ms ease;
}

.card.sem-capa { grid-template-columns: 1fr; padding-left: 18px; }
.card.sem-capa .art { display: none; }
.card.sem-barra .progress { display: none; }

/* ── Capa ────────────────────────────────────────────────────── */
.art {
  position: relative;
  width: var(--arte); height: var(--arte);
  border-radius: 8px; overflow: hidden;
  background: rgba(128,128,128,.18); flex: none;
}
.art img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  opacity: 0; transform: scale(1.04);
  transition: opacity 300ms var(--ease-out), transform 300ms var(--ease-out);
}
.art img.is-loaded { opacity: 1; transform: none; }

/* ── Texto ───────────────────────────────────────────────────── */
.meta {
  min-width: 0; opacity: 1; transform: none;
  transition: opacity 220ms var(--ease-out), transform 220ms var(--ease-out);
}
.meta.is-swapping { opacity: 0; transform: translateY(4px); }

.eyebrow {
  display: flex; align-items: center; gap: 7px;
  font-size: 9.5px; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--muted); margin-bottom: 5px;
}

.eq { display: flex; align-items: flex-end; gap: 2px; height: 9px; }
.eq i {
  width: 2px; height: 100%; background: var(--accent);
  border-radius: 1px; transform-origin: bottom;
  animation: eq 900ms ease-in-out infinite alternate;
}
.eq i:nth-child(2) { animation-duration: 640ms; }
.eq i:nth-child(3) { animation-duration: 1080ms; }
.eq i:nth-child(4) { animation-duration: 780ms; }
.is-paused .eq i { animation-play-state: paused; transform: scaleY(.25); }
@keyframes eq { from { transform: scaleY(.25); } to { transform: scaleY(1); } }

.title-wrap { overflow: hidden; }
.title {
  font-size: 17px; font-weight: 650;
  letter-spacing: -.012em; line-height: 1.25;
  white-space: nowrap; width: max-content; max-width: 100%;
}
.title.is-scrolling { animation: slide 12s linear infinite alternate; }
@keyframes slide {
  0%, 12%   { transform: translateX(0); }
  88%, 100% { transform: translateX(calc(-1 * var(--shift, 0px))); }
}

.artist {
  margin-top: 2px; font-size: 12.5px; color: var(--muted);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* ── Progresso ───────────────────────────────────────────────── */
.progress {
  position: absolute; left: 0; right: 0; bottom: 0;
  height: 2px; background: var(--trilho);
}
.progress .bar {
  height: 100%; width: 0%; background: var(--accent);
  transition: background 600ms ease;
}

/* ── Aviso no lugar do card ──────────────────────────────────── */
.notice {
  width: var(--largura); padding: 14px 16px;
  border-radius: var(--raio); background: var(--surface);
  border: 1px solid var(--borda);
  font-size: 13px; line-height: 1.45;
}
.notice b { color: #ff6b6b; font-weight: 600; }
.notice code {
  font-family: ui-monospace, Menlo, Consolas, monospace;
  font-size: 11.5px; word-break: break-all;
}

[hidden] { display: none !important; }

@media (prefers-reduced-motion: reduce) {
  *, *::before { animation: none !important; transition-property: opacity, background !important; }
}