/* Hallmark · shape: index-first (a link page, one screen) · genre: atmospheric (inferred) · theme: brand (the video's own room and type) · job: listen, the two playlists right under the frame
 * paper: oklch(17% 0.02 30) · accent: rgb(255 150 40) · display: Caveat Brush · body: system-ui · outlier: Gochi Hand (the parenthetical line and the handle)
 * nav: none, one screen · footer: the address in plain text · signature: the page opens as a still of a video, the title set where the lyric sits, with the orange line and its three strokes · states: default, hover, focus, active
 * axes: dark/handwritten/warm · posture: still · contrast: see sweep · v2.0.0 */
/* Hallmark · pre-emit critique: P4 H5 E4 S5 R5 V3 · weakest: V, same room and type as the central; kept because the room is the brand, and the page shares none of the central's lists, cards or bars */
/* Hallmark · dismissed 77 · a link page is one screen by design (index-first): the frame, the two playlists, the networks and the address, all above the fold at 1280x800 and 375 */
/* Hallmark · dropped the @taganhandofilho watermark over the frame · gate 58, the hero keeps the title and its one line before the actions; the handle stays in the Instagram and TikTok labels */
/* Hallmark · sweep: Floor 0 FAIL · Reflex 0 · WARN 1 dismissed (77) · render over http (fonts loaded) · finish-review: not run, self-check of the 375 and 1280 shots */
@import url("./tokens.css");
@import url("./base.css");

/* ---------------------------------------------------------------- coluna */
html { color-scheme: dark; }
body { min-height: 100svh; display: flex; flex-direction: column; }
.pagina {
  --coluna: var(--container);
  flex: 1;
  width: min(100% - 2 * var(--space-md), var(--coluna));
  margin-inline: auto;
  padding-block: var(--space-md) var(--space-lg);
  display: flex; flex-direction: column; justify-content: center;
}
@media (min-width: 40rem) {
  /* no computador a página inteira cabe na tela: a coluna estreita junto com a altura */
  .pagina { --coluna: min(var(--container), 60svh * var(--quadro-w) / var(--quadro-h)); }
}

/* ---------------------------------------------------------------- o quadro do vídeo */
.quadro {
  position: relative;
  container-type: inline-size;
  aspect-ratio: var(--quadro-w) / var(--quadro-h);
  border-radius: var(--radius-card);
  overflow: hidden;
  background: var(--color-paper-2);
}
.quadro__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* a letra fica onde fica no vídeo: no chão, entre a porta e o filho (y_centro do render) */
.quadro__letra {
  position: absolute; inset-inline: 3%; top: 76.5%; translate: 0 -50%;
  display: grid; justify-items: center; text-align: center;
}
.quadro h1 {
  max-width: none;
  font-size: 11.2cqi; line-height: 1.05;
  color: var(--color-lyric);
  text-shadow: 0 0.05em 0.1em var(--color-letra-sombra), 0 0 0.32em var(--color-letra-brilho);
}
.traducao {
  display: inline-flex; align-items: center;
  margin-top: -0.2em;
  font-family: var(--font-outlier); font-size: 5.6cqi; line-height: 1.2; white-space: nowrap;
  color: var(--color-translation);
  text-shadow: 0 0.05em 0.1em var(--color-letra-sombra), 0 0 0.32em var(--color-letra-brilho);
}
/* os três risquinhos de cada lado, com as medidas do camada_faiscas do render */
.risco {
  flex: none; width: 0.79em; height: 1.54em; fill: currentColor;
  filter: drop-shadow(0 0.05em 0.05em var(--color-letra-sombra)) drop-shadow(0 0 0.16em var(--color-letra-brilho));
}
.risco--esq { margin-inline-end: 0.42em; scale: -1 1; }
.risco--dir { margin-inline-start: 0.42em; }

/* ---------------------------------------------------------------- playlists */
.links { display: grid; gap: var(--space-sm); margin-top: var(--space-lg); }
.botao {
  display: grid; grid-template-columns: 1.5rem minmax(0, 1fr) 1.5rem; align-items: center; gap: var(--space-sm);
  min-height: 3.5rem; padding-inline: var(--space-md);
  border: var(--rule-hair) solid var(--color-rule); border-radius: var(--radius-control);
  background: var(--color-paper-2); color: var(--color-ink);
  font-size: 1.0625rem; font-weight: 600; line-height: 1.25; text-align: center; text-decoration: none;
  transition: transform var(--dur-micro) var(--ease-out);
}
.botao svg { width: 1.5rem; height: 1.5rem; fill: currentColor; }
.botao svg.traco { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.botao:hover { border-color: var(--color-accent); background: var(--color-paper-3); color: var(--color-lyric); }
.botao:active { transform: translateY(1px); }
.botao:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 3px; }

/* destaque (ligado no Admin): borda laranja e um brilho que atravessa o botão de tempos em tempos */
.botao--destaque { position: relative; overflow: hidden; border-color: var(--color-accent); }
.botao--destaque::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(100deg, transparent 30%, var(--color-brilho-destaque) 50%, transparent 70%);
  transform: translateX(-120%);
  animation: brilho 3.6s var(--ease-in-out) 1s infinite;
}
@keyframes brilho { 0% { transform: translateX(-120%); } 40%, 100% { transform: translateX(120%); } }
@media (prefers-reduced-motion: reduce) { .botao--destaque::after { animation: none; opacity: 0; } }

/* título de seção entre os botões (tipo "título" no Admin) */
.secao {
  max-width: none; margin-top: var(--space-sm);
  font-family: var(--font-outlier); font-size: 1.3rem; line-height: 1.2; text-align: center;
  color: var(--color-translation);
}

/* ---------------------------------------------------------------- redes e e-mail */
.redes ul { display: flex; justify-content: center; gap: var(--space-md); margin: var(--space-lg) 0 0; padding: 0; list-style: none; }
.redes a {
  display: grid; place-items: center; width: 3rem; height: 3rem;
  border: var(--rule-hair) solid var(--color-rule); border-radius: var(--radius-pill);
  background: var(--color-paper-2); color: var(--color-ink);
  transition: transform var(--dur-micro) var(--ease-out);
}
.redes svg { width: 1.375rem; height: 1.375rem; }
.redes .cheio { fill: currentColor; }
.redes .traco { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.redes a:hover { border-color: var(--color-accent); background: var(--color-paper-3); color: var(--color-lyric); }
.redes a:active { transform: translateY(1px); }
.redes a:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 3px; }

.rodape { margin-top: var(--space-md); text-align: center; }
.rodape p { margin-inline: auto; font-size: var(--text-sm); color: var(--color-muted); user-select: all; }