/* ==========================================================================
   BASE — o que as três telas dividem: fontes, tokens, o palco 1920×1080,
   topografia, varredura, cantoneiras, marca, selo, relógio, rodapé,
   chanfros e os keyframes comuns.

   Carregue este arquivo primeiro. Depois vem o CSS da tela:
     stream-on.html / stream-off.html → on-off.css
     index.html (placar)              → placar.css

   Mexer aqui afeta as três. O que vale para uma tela só mora no arquivo
   dela, não neste.
   ========================================================================== */

@font-face {
  font-family: "Barlow Condensed";
  src: url("../fonts/barlow-condensed/BarlowCondensed-ExtraBold.ttf") format("truetype");
  font-weight: 800;
  font-display: block;
}
@font-face {
  font-family: "IBM Plex Mono";
  src: url("../fonts/ibm-plex-mono/IBMPlexMono-Light.ttf") format("truetype");
  font-weight: 300;
  font-display: block;
}
@font-face {
  font-family: "IBM Plex Mono";
  src: url("../fonts/ibm-plex-mono/IBMPlexMono-Regular.ttf") format("truetype");
  font-weight: 400;
  font-display: block;
}
@font-face {
  font-family: "IBM Plex Mono";
  src: url("../fonts/ibm-plex-mono/IBMPlexMono-Thin.ttf") format("truetype");
  font-weight: 100;
  font-display: block;
}
@font-face {
  font-family: "IBM Plex Mono";
  src: url("../fonts/ibm-plex-mono/IBMPlexMono-Medium.ttf") format("truetype");
  font-weight: 500;
  font-display: block;
}
@font-face {
  font-family: "IBM Plex Mono";
  src: url("../fonts/ibm-plex-mono/IBMPlexMono-SemiBold.ttf") format("truetype");
  font-weight: 600;
  font-display: block;
}
@font-face {
  font-family: "Barlow Condensed";
  src: url("../fonts/barlow-condensed/BarlowCondensed-Bold.ttf") format("truetype");
  font-weight: 700;
  font-display: block;
}

:root {
  color-scheme: dark;
  --steel-50: #f5f6f7;
  --steel-400: #9ba3ae;
  --gold: #f59310;
  --red: #e31b14;
}
* { box-sizing: border-box; }
html, body { width: 100%; height: 100%; margin: 0; overflow: hidden; background: transparent; }
body { display: grid; place-items: center; }
/* The design uses a 1920 × 1080 coordinate system. Container units also
   provide a proportional preview without changing the composition. */
.broadcast {
  width: min(100vw, 177.7777778vh);
  aspect-ratio: 16 / 9;
  position: relative;
  container-type: inline-size;
  overflow: hidden;
  isolation: isolate;
  background: #080b0e;
  color: var(--steel-50);
  font-family: "IBM Plex Mono", monospace;
  pointer-events: none;
  user-select: none;
}
.topography { position: absolute; inset: 0; z-index: -1; background: url("../img/topo/topo-esparso-2048-branco.png") center 20% / cover no-repeat; opacity: .075; }
.corners { position: absolute; inset: 1.25cqw 1.6cqw .85cqw; }
.corners i { position: absolute; width: 6.9cqw; height: 6.9cqw; border: 0 solid #b7bdc580; }
.corners i:nth-child(1) { top: 0; left: 0; border-top-width: .086cqw; border-left-width: .086cqw; }
.corners i:nth-child(2) { top: 0; right: 0; border-top-width: .086cqw; border-right-width: .086cqw; }
.corners i:nth-child(3) { bottom: 0; left: 0; border-bottom-width: .086cqw; border-left-width: .086cqw; }
.corners i:nth-child(4) { bottom: 0; right: 0; border-bottom-width: .086cqw; border-right-width: .086cqw; }
.brand { position: absolute; top: 2.6cqw; left: 3.1cqw; width: 15.5cqw; height: 6.2cqw; object-fit: contain; }
.live { position: absolute; top: 3.1cqw; left: 75cqw; height: 2.8cqw; display: flex; align-items: center; gap: .65cqw; padding: 0 .7cqw; border: .13cqw solid #3c4450; background: #0b0f1680; font-size: 1.29cqw; font-weight: 400; white-space: nowrap; }
.live span { width: .69cqw; height: .69cqw; background: #bf0706; border-radius: 50%; }
.broadcast-clock { position: absolute; top: 3.1cqw; left: 83.1cqw; height: 2.8cqw; display: flex; align-items: center; color: var(--steel-400); font-size: .78cqw; font-weight: 400; letter-spacing: .12cqw; white-space: nowrap; }
p, h1 { margin: 0; }
/* <i> aqui é div decorativa, nunca ênfase: qualquer texto dentro sairia itálico. */
i { font-style: normal; }
.socials { position: absolute; left: 3cqw; bottom: 4.05cqw; display: flex; gap: 1.03cqw; }
.social { height: 3.1cqw; padding: 0 .65cqw; display: flex; align-items: center; gap: .65cqw; border: .086cqw solid #20273180; background: #0b0f1650; font-size: 1.29cqw; font-weight: 400; white-space: nowrap; }
.social img, .social svg { width: 1.9cqw; height: 1.9cqw; object-fit: contain; }
.website { color: #d2d5da; }
.social, .live { font-weight: 300; }
.supporters { position: absolute; right: 2.8cqw; bottom: 3.85cqw; height: 3.5cqw; display: flex; align-items: center; gap: 1.05cqw; }
.support-label { position: absolute; right: calc(100% + 1.1cqw); top: 50%; transform: translateY(-50%) rotate(180deg); writing-mode: vertical-rl; font-size: 1.03cqw; letter-spacing: .28cqw; }
.supporters img { display: block; object-fit: contain; height: 3.5cqw; }
.cria { width: 5.5cqw; }
.woohoo { width: 7.25cqw; }
.engage { width: 8.8cqw; }
.olhar { width: 6.7cqw; }

/* ==========================================================================
   MOTION — camada de animação (nada aqui altera a composição estática)
   Tudo anima transform/opacity, em elementos pequenos ou já promovidos,
   para manter custo baixo na fonte de navegador do OBS.
   ========================================================================== */

:root {
  --blue: #60a3ff;
  --steel-line: #202731;
}

/* --- Varredura de radar ---------------------------------------------------
   Faixa com rastro descendo do topo ao rodapé a cada 11s.                 */
.sweep {
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 9cqw;
  pointer-events: none;
  background: linear-gradient(180deg, #60a3ff00 0%, #60a3ff0d 72%, #60a3ff1f 100%);
  will-change: transform, opacity;
  animation: sweepDown 11s linear infinite;
}
.sweep::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: .1cqw;
  background: linear-gradient(90deg, transparent, #f5931080 22%, #60a3ff73 62%, transparent);
}
@keyframes sweepDown {
  0%        { transform: translate3d(0, -100%, 0); opacity: 0; }
  6%        { opacity: .9; }
  62%       { opacity: .5; }
  74%, 100% { transform: translate3d(0, 633%, 0); opacity: 0; }
}

/* --- Topografia em deriva infinita ----------------------------------------
   Esteira contínua da direita para a esquerda. O PNG é ladrilhável nos dois
   eixos (a coluna 0 continua a 2047, idem as linhas), então o fundo vira
   `repeat` e o elemento anda exatamente 1 ladrilho: o loop fecha sem emenda
   para qualquer valor de --tile.

   --tile  escala do desenho. Menor = curvas mais finas e densas, porque o
           PNG de 2048px é reduzido mais (antes ficava quase 1:1 com a tela,
           daí a linha grossa). 100cqw = o enquadramento antigo.
   --pace  tempo para andar 1 ladrilho. Se mexer em --tile, ajuste junto
           para manter o ritmo: 50cqw/90s ≈ 10px/s em 1920.                */
.topography {
  --tile: 50cqw;
  --pace: 90s;
  right: auto;
  width: calc(100% + var(--tile));
  background-position: 0 20%;
  background-size: var(--tile) var(--tile);
  background-repeat: repeat;
  will-change: transform;
  animation: topoDrift var(--pace) linear infinite;
}
@keyframes topoDrift {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(calc(var(--tile) * -1), 0, 0); }
}

/* --- Cantoneiras respirando ---------------------------------------------- */
.corners i { animation: cornerBreathe 6s ease-in-out infinite; }
.corners i:nth-child(2) { animation-delay: .5s; }
.corners i:nth-child(4) { animation-delay: 1s; }
.corners i:nth-child(3) { animation-delay: 1.5s; }
@keyframes cornerBreathe { 0%, 100% { opacity: .68; } 50% { opacity: 1; } }

@keyframes orbitSpin { to { transform: rotate(360deg); } }

/* --- Ponto "NO AR" --------------------------------------------------------
   Pulso do ponto + anel que se expande, e a moldura acende junto.         */
/* As cores saem em variáveis para cada cena trocar o sinal sem duplicar
   keyframes: vermelho no ar, steel no encerramento, e já serve para o
   ouro do intervalo e o azul do técnico quando essas telas existirem. */
.live {
  --sig: #ff2a22;            /* ponto aceso */
  --sig-dim: #7e1210;        /* ponto no vale do pulso */
  --sig-halo: #e31b14b3;     /* brilho externo */
  --sig-core: #ff6d5ccc;     /* núcleo quente */
  --sig-ring: #ff4a42;       /* anel que expande */
  --sig-edge: #e31b1480;     /* moldura acesa */
  --sig-edge-off: #3c4450;   /* moldura no vale */
  animation: liveBadge 1.9s ease-in-out infinite;
}
.live span { position: relative; animation: liveDot 1.9s ease-in-out infinite; }
.live span::after {
  content: "";
  position: absolute;
  inset: 0;
  border: .13cqw solid var(--sig-ring);
  border-radius: 50%;
  will-change: transform, opacity;
  animation: liveRing 1.9s cubic-bezier(.2, .7, .3, 1) infinite;
}
@keyframes liveDot {
  0%, 100% { background: var(--sig); box-shadow: 0 0 1.2cqw var(--sig-halo), 0 0 .3cqw var(--sig-core); }
  58%      { background: var(--sig-dim); box-shadow: 0 0 0 transparent, 0 0 0 transparent; }
}
@keyframes liveRing {
  0%        { transform: scale(1); opacity: .95; }
  72%, 100% { transform: scale(3); opacity: 0; }
}
@keyframes liveBadge {
  0%, 100% { border-color: var(--sig-edge);     --ch-edge: var(--sig-edge); }
  58%      { border-color: var(--sig-edge-off); --ch-edge: var(--sig-edge-off); }
}

/* --- Caixas de redes sociais ----------------------------------------------
   Reflexo em cascata da esquerda para a direita a cada 6,5s: a borda
   acende, o brilho atravessa a caixa e o ícone ganha um ganho curto.      */
.social { position: relative; overflow: hidden; animation: socialEdge 6.5s ease-in-out infinite; }
.social::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(100deg, #f5931000 36%, #f593103d 50%, #f5931000 64%);
  will-change: transform;
  transform: translate3d(-115%, 0, 0);
  animation: socialSheen 6.5s ease-in-out infinite;
}
.social img, .social svg { animation: socialIcon 6.5s ease-in-out infinite; }
.social:nth-child(1), .social:nth-child(1)::after, .social:nth-child(1) :is(img, svg) { animation-delay: 0s; }
.social:nth-child(2), .social:nth-child(2)::after, .social:nth-child(2) :is(img, svg) { animation-delay: .38s; }
.social:nth-child(3), .social:nth-child(3)::after, .social:nth-child(3) :is(img, svg) { animation-delay: .76s; }
@keyframes socialSheen {
  0%        { transform: translate3d(-115%, 0, 0); }
  22%, 100% { transform: translate3d(115%, 0, 0); }
}
@keyframes socialEdge {
  0%, 20%, 100% { border-color: #20273180; }
  9%            { border-color: #f5931099; }
}
@keyframes socialIcon {
  0%, 20%, 100% { filter: none; }
  9%            { filter: brightness(1.45) drop-shadow(0 0 .25cqw #f5931080); }
}

/* --- Acessibilidade -------------------------------------------------------
   Sem movimento: tudo estático, texto completo, filete desenhado.         */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .eyebrow, #headline { visibility: visible; }
  .title-rule { transform: none; }
  .caret { display: none; }
}

/* Registrar como cor deixa --ch-edge interpolável, para o traço do chanfro
   do selo pulsar junto com a borda em vez de ficar parado em steel. */
@property --ch-edge {
  syntax: "<color>";
  inherits: false;
  initial-value: transparent;
}

/* ==========================================================================
   CHANFROS — cantos cortados do selo e do painel, como na referência:
   superior direito e inferior esquerdo, 12px no selo e 26px no painel.
   ==========================================================================

   `clip-path` recorta a forma mas leva a borda junto, e a diagonal sairia
   sem traço. Os dois gradientes devolvem esse traço sem markup extra: cada
   um pinta, na cor da borda, a metade do quadradinho do canto que o clip
   vai descartar — o que sobra do lado de dentro é uma linha da espessura
   exata da borda. Para o chanfro cru da referência, apague os quatro
   background-*.

   --ch  tamanho do chanfro    --bw  espessura da borda    --ch-edge  cor  */
.live, .standby, .ch-tr-bl {
  clip-path: polygon(
    0 0,
    calc(100% - var(--ch)) 0,
    100% var(--ch),
    100% 100%,
    var(--ch) 100%,
    0 calc(100% - var(--ch))
  );
  background-image:
    linear-gradient(45deg, transparent calc(50% - var(--bw)), var(--ch-edge) 0),
    linear-gradient(45deg, var(--ch-edge) calc(50% + var(--bw)), transparent 0);
  background-size: var(--ch) var(--ch);
  background-position: top right, bottom left;
  background-repeat: no-repeat;
  /* sem isto o gradiente se apoia no padding-box e desalinha do recorte */
  background-origin: border-box;
}
.live    { --ch: .7cqw;   --bw: .13cqw;  } /* --ch-edge vem do keyframe liveBadge */
.standby { --ch: 1.35cqw; --bw: .086cqw; --ch-edge: #69717d; }

/* Mesma técnica espelhada: chanfro superior-esquerdo + inferior-direito. */
.ch-tl-br {
  clip-path: polygon(
    0 var(--ch),
    var(--ch) 0,
    100% 0,
    100% calc(100% - var(--ch)),
    calc(100% - var(--ch)) 100%,
    0 100%
  );
  background-image:
    linear-gradient(-45deg, transparent calc(50% - var(--bw)), var(--ch-edge) 0),
    linear-gradient(-45deg, var(--ch-edge) calc(50% + var(--bw)), transparent 0);
  background-size: var(--ch) var(--ch);
  background-position: top left, bottom right;
  background-repeat: no-repeat;
  background-origin: border-box;
}