/* ---- Filtro de TV antiga (CRT) ----
   Ativado por <html data-crt="sutil|forte">; o assets/js/crt.js injeta os filtros SVG e as camadas.
   O conteúdo da página recebe tom + separação de cores + bloom; por cima ficam linhas de varredura,
   uma faixa de interferência rolando, granulação, vinheta e a moldura com cantos arredondados. */
html[data-crt]{
  --crt-gap:clamp(6px,1.1vw,18px);   /* espessura da moldura */
  --crt-radius:clamp(18px,2.6vw,44px);
  --crt-tone:sepia(.32) saturate(.62) contrast(1.08) brightness(1.04);
  --crt-rgb:url(#crt-rgb-1);
  --crt-scan:.16; --crt-grain:.07; --crt-vignette:.62;
  --crt-roll:.035;
  background:#070605;
}
html[data-crt="forte"]{
  --crt-tone:sepia(.45) saturate(.4) contrast(1.14) brightness(1.06);
  --crt-rgb:url(#crt-rgb-2);
  --crt-scan:.22; --crt-grain:.1; --crt-vignette:.78;
  --crt-roll:.06;
}
html[data-crt] body{background:#070605;padding:var(--crt-gap)}
html[data-crt] body > :not(.crt-layer):not(.crt-ui){filter:var(--crt-rgb) var(--crt-tone)}
html[data-crt] body :is(h1,.brand,.tc span,.ph,.umd .name,.src .thumb){text-shadow:0 0 6px rgba(255,236,214,.35),0 0 18px rgba(255,236,214,.12)}

.crt-layer{position:fixed;inset:0;pointer-events:none;z-index:1000}
html:not([data-crt]) .crt-layer{display:none}

/* Linhas de varredura */
.crt-scan{background:repeating-linear-gradient(to bottom,rgba(0,0,0,var(--crt-scan)) 0 1px,transparent 1px 3px);mix-blend-mode:multiply}

/* Faixa de interferência rolando devagar de cima para baixo */
.crt-roll{overflow:hidden}
.crt-roll::before{
  content:"";position:absolute;left:0;right:0;top:0;height:18vh;
  background:linear-gradient(to bottom,transparent,rgba(255,240,220,var(--crt-roll)) 45%,rgba(255,240,220,calc(var(--crt-roll) * 1.6)) 50%,rgba(255,240,220,var(--crt-roll)) 55%,transparent);
  mix-blend-mode:screen;animation:crt-roll 9s linear infinite;
}
@keyframes crt-roll{from{transform:translateY(-20vh)} to{transform:translateY(110vh)}}

/* Granulação animada (o fundo de ruído é gerado pelo crt.js) */
.crt-grain{inset:-50%;opacity:var(--crt-grain);background-size:256px 256px;animation:crt-grain .6s steps(6) infinite;mix-blend-mode:overlay}
@keyframes crt-grain{
  0%{transform:translate(0,0)} 20%{transform:translate(-8%,4%)} 40%{transform:translate(6%,-6%)}
  60%{transform:translate(-4%,8%)} 80%{transform:translate(8%,2%)} 100%{transform:translate(0,0)}
}

/* Vinheta + moldura: um retângulo arredondado cuja sombra externa vira o gabinete da TV */
.crt-frame{
  inset:var(--crt-gap);border-radius:var(--crt-radius);
  box-shadow:
    0 0 0 100vmax #070605,
    inset 0 0 0 1px rgba(255,240,220,.06),
    inset 0 0 clamp(60px,9vw,160px) rgba(0,0,0,var(--crt-vignette)),
    inset 0 0 clamp(14px,2vw,36px) rgba(0,0,0,.7);
  background:radial-gradient(ellipse at 50% 45%,rgba(255,240,220,.05),transparent 60%);
  animation:crt-flicker 4s infinite;
}
@keyframes crt-flicker{0%,100%{opacity:1} 47%{opacity:1} 48%{opacity:.94} 49%{opacity:1} 82%{opacity:.97}}

/* Botão liga/desliga: chave de alavanca desenhada em traço (aparece mesmo com o filtro desligado) */
.crt-toggle{
  all:unset;box-sizing:border-box;cursor:pointer;
  position:fixed;right:calc(var(--crt-gap,0px) + 16px);bottom:calc(var(--crt-gap,0px) + 16px);z-index:1100;
  display:flex;align-items:center;gap:10px;min-height:44px;padding:0 14px;
  background:rgba(11,11,11,.88);color:#A39A90;border:1px solid #2A2A2A;border-radius:4px;
  font:500 12px/1 'JetBrains Mono',monospace;letter-spacing:.14em;
  -webkit-tap-highlight-color:transparent;
}
/* Com o filtro ligado, o botão também passa pelo efeito: mesmo tom/separação de cores e fica abaixo
   das camadas de varredura, granulação e vinheta (elas não capturam clique, então ele continua clicável) */
html[data-crt] .crt-toggle{z-index:999;filter:var(--crt-rgb) var(--crt-tone);text-shadow:0 0 6px rgba(255,236,214,.35),0 0 18px rgba(255,236,214,.12)}
.crt-toggle:hover{border-color:#F2ECE4}
.crt-toggle:focus-visible{outline:2px solid #F2ECE4;outline-offset:2px}
.sw-state{min-width:3ch;font-weight:500;color:#F2ECE4}

/* Moldura da chave com o pino no centro */
.sw{position:relative;display:block;width:14px;height:24px;border:1px solid #4A4A4A;border-radius:3px}
.sw::after{content:"";position:absolute;left:50%;top:50%;width:6px;height:6px;margin:-3px 0 0 -3px;border-radius:50%;border:1px solid #A39A90;box-sizing:border-box}
/* Alavanca: traço com ponta redonda, para cima (ON, vermelho do PGM) ou para baixo (OFF) */
.sw-lever{
  position:absolute;left:50%;top:50%;width:2px;height:7px;margin-left:-1px;
  transform-origin:50% 0;transform:rotate(180deg);
  background:#F2ECE4;border-radius:1px;transition:transform .16s ease;
}
.sw-lever::after{content:"";position:absolute;left:50%;bottom:-3px;width:6px;height:6px;margin-left:-3px;border-radius:50%;background:#F2ECE4;transition:background .16s ease}
.crt-toggle[aria-pressed="false"] .sw-lever{transform:rotate(0deg)}
.crt-toggle[aria-pressed="true"] .sw-lever::after{background:#FF3B30;box-shadow:0 0 6px rgba(255,59,48,.6)}
@media (prefers-reduced-motion:reduce){.sw-lever,.sw-lever::after{transition:none}}

@media (prefers-reduced-motion:reduce){
  .crt-grain,.crt-frame,.crt-roll::before{animation:none}
  .crt-roll{display:none}
}