/* ===================================================================
   A página do filme: um canto de oficina, uma mesa e uma televisão.

   Tudo aqui é CSS e SVG, sem 3D e sem foto. Dois motivos:

   1. O vídeo não pode perder resolução. Numa textura de WebGL ele passaria
      por reamostragem e pelo limite de tamanho de textura; num <video> do
      DOM ele desenha no tamanho nativo, com a decodificação do sistema.
   2. Foto de oficina nós não temos, e inventar cenário fotográfico é
      inventar. Gradiente e ruído são material desenhado, não alegação.

   A moldura é fina de propósito: a tela come quase toda a largura útil.
   =================================================================== */

.pagfilme{
  --parede:#13151A;
  --madeira:#2A2017;
  --madeira-cl:#3E3122;
  --madeira-esc:#171109;
  --plastico:#6B675E;
  --plastico-cl:#8C877A;
  --plastico-esc:#403D37;
  --vidro:#080A0C;
  /* Moldura presente, de aparelho pesado, e não a fita fina de antes. A tela
     cresce junto porque o que encolheu foi a faixa do título e a parte da mesa
     que entra na conta, não o vidro. */
  --moldura:clamp(16px,1.7vw,30px);
  --bisel:clamp(5px,.5vw,9px);        /* o degrau entre o gabinete e o vidro */
  --queixo:clamp(48px,5.4vh,78px);    /* o queixo leva a grade e os botões */
  --mesa:clamp(88px,11.5vh,150px);
  /* Faixa do título curta de propósito: cada pixel aqui é pixel de vidro. Título
     numa linha, rótulo ao lado, frase à direita. */
  --cabeca:clamp(50px,6.2vh,74px);
  /* A TV fica SOBRE a mesa, então a parte de trás do tampo passa atrás dela e não
     custa altura. Só 45% da mesa entra na conta, e é isso que deixa a tela ocupar
     quase toda a largura útil numa janela baixa. */
  /* --pisada é a distância do fundo da sala até a base da TV, e --dispo é o que
     sobra para o VIDRO. As duas têm de ser complementares, senão a TV cresce para
     cima e passa por cima do título: foi o que aconteceu quando uma dizia 80% da
     mesa e a outra descontava 20%. A TV pisa fundo no tampo, com uma faixa estreita
     de mesa à frente e o resto passando por trás dela. */
  --pisada:calc(var(--mesa) * .22);
  --dispo:calc(100svh - var(--nav) - var(--cabeca) - var(--pisada)
               - var(--queixo) - 2*var(--moldura) - 2*var(--bisel) - 6px);
}

/* ===== a sala ===== */
#sala{position:relative;overflow:hidden;pointer-events:auto;
  height:calc(100svh - var(--nav));min-height:500px;
  background:var(--parede)}

/* A parede: uma poça de luz alta à esquerda, como lâmpada pendurada, queda para
   os cantos e grão por cima. Sem degradê de SaaS: a luz tem origem e direção. */
#sala .parede{position:absolute;inset:0;pointer-events:none;
  background:
    /* a quina: a parede da direita entra em ângulo e recebe menos luz */
    linear-gradient(90deg,transparent 0 77%,rgba(0,0,0,.42) 77.6%,rgba(0,0,0,.30) 100%),
    radial-gradient(74% 58% at 22% -6%, rgba(231,229,224,.085), transparent 62%),
    radial-gradient(52% 44% at 84% 8%, rgba(231,229,224,.026), transparent 66%),
    linear-gradient(180deg,#191C21 0%,#14161B 46%,#0D0F13 100%)}
/* as juntas da alvenaria, fracas, para a parede ter escala */
#sala .parede::before{content:"";position:absolute;inset:0;opacity:.5;
  background:repeating-linear-gradient(90deg,
    transparent 0 clamp(90px,11vw,170px),
    rgba(0,0,0,.34) clamp(90px,11vw,170px) calc(clamp(90px,11vw,170px) + 1px))}
#sala .parede::after{content:"";position:absolute;inset:0;opacity:.42;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.78' numOctaves='4'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.3'/%3E%3C/svg%3E")}

/* O texto na parede, alto e à esquerda, numa faixa de altura fixa: é ela que entra
   na conta da largura da TV, então não pode crescer com o conteúdo. Título numa
   linha só, e a frase ao lado, não embaixo. */
#sala .naparede{position:absolute;z-index:3;top:0;left:0;right:0;
  height:var(--cabeca);padding:0 var(--gutter);
  display:flex;align-items:center;justify-content:space-between;gap:clamp(20px,4vw,60px)}
#sala .naparede > div{display:flex;align-items:baseline;gap:clamp(12px,1.6vw,24px)}
#sala .naparede .rotulo{margin:0}
#sala .naparede h1{font-family:var(--cond);font-size:clamp(1.6rem,2.9vw,2.5rem);
  line-height:1.02;font-weight:400;letter-spacing:.008em;margin:0;white-space:nowrap}
#sala .naparede .sub{font-family:var(--miudo);font-size:clamp(.92rem,1.15vw,1.05rem);
  line-height:1.5;color:var(--secundario);max-width:36ch;text-align:right;flex:none}
@media (max-width:760px){ #sala .naparede .sub{display:none} }

/* ===== a mesa ===== */
#mesa{position:absolute;left:0;right:0;bottom:0;height:var(--mesa)}
/* o tampo, deitado: plano em perspectiva ancorado na base */
#mesa .tampo{position:absolute;left:-30%;right:-30%;top:0;bottom:16px;
  transform:perspective(900px) rotateX(54deg);transform-origin:50% 100%;
  background:
    linear-gradient(180deg,rgba(0,0,0,.46) 0%,transparent 26%),
    repeating-linear-gradient(179deg,
      transparent 0 26px, rgba(0,0,0,.42) 26px 29px,
      transparent 29px 58px, rgba(231,229,224,.045) 58px 59px),
    linear-gradient(90deg,#150F09 0%,#2A2118 40%,#1E1710 100%)}
/* o veio: manchas longas, não listra regular */
#mesa .tampo::after{content:"";position:absolute;inset:0;opacity:.62;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='420' height='140'%3E%3Cfilter id='v'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.006 0.22' numOctaves='5'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='420' height='140' filter='url(%23v)' opacity='.5'/%3E%3C/svg%3E")}
/* a borda da frente, de pé, com o canto gasto */
#mesa .borda{position:absolute;left:0;right:0;bottom:0;height:18px;
  background:linear-gradient(180deg,#2F2519 0%,#1D160E 40%,#0C0805 100%);
  box-shadow:inset 0 1px 0 rgba(231,229,224,.07)}
/* o fundo da mesa encosta na parede: escurece na emenda */
#mesa::before{content:"";position:absolute;left:0;right:0;top:-1px;height:34%;
  background:linear-gradient(180deg,rgba(0,0,0,.72),transparent);pointer-events:none;z-index:2}

/* ===== a televisão ===== */
#tv{position:absolute;z-index:4;left:50%;transform:translateX(-50%);
  bottom:var(--pisada);
  width:min(calc(100% - 1.2*var(--gutter)),
            calc(var(--dispo) * 16 / 9 + 2*var(--moldura) + 2*var(--bisel)))}

/* O gabinete tem volume: a aresta de cima pega a luz da sala, os flancos caem em
   sombra e a base é mais escura e mais pesada que o topo. As sombras internas dão
   a espessura do plástico; a externa é o peso sobre a mesa. */
.gabinete{position:relative;
  padding:var(--moldura) var(--moldura) 0;
  border-radius:clamp(10px,1.3vw,20px);
  background:
    linear-gradient(180deg,var(--plastico-cl) 0%,var(--plastico) 6%,
                    #5B5851 46%,var(--plastico-esc) 82%,#2C2A26 100%),
    linear-gradient(90deg,#3B3934 0%,transparent 9%,transparent 91%,#33312C 100%);
  box-shadow:
    inset 0 2px 0 rgba(231,229,224,.30),
    inset 0 -3px 0 rgba(0,0,0,.55),
    inset 3px 0 6px rgba(0,0,0,.28),
    inset -3px 0 6px rgba(0,0,0,.28),
    0 34px 60px rgba(0,0,0,.66),
    0 6px 14px rgba(0,0,0,.5)}
/* o plástico envelhecido: amarelado irregular e sujeira nos vincos */
.gabinete::after{content:"";position:absolute;inset:0;pointer-events:none;
  border-radius:inherit;mix-blend-mode:multiply;opacity:.5;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='p'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.035' numOctaves='4'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0.82 0 0 0 0 0.76 0 0 0 0 0.60 0 0 0 1 0'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23p)'/%3E%3C/svg%3E")}

/* ===== a tela ===== */
/* SEM teto de brilho, por decisão da cliente em 17/09/2026: quem assina a correção
   de cor do filme é quem manda, e o filme passa como saiu da ilha. Houve um
   brightness(.93) aqui por um dia, que levava o branco puro de 255 para 237. Se um
   dia voltar, volta aqui, e testes/filme.py tem o teto no PICO_MAX. */
/* O bisel é o degrau que existe em aparelho de verdade entre o plástico e o
   vidro: some por dentro, escurecendo, e é o que faz a moldura ter espessura em
   vez de ser um contorno pintado. */
.bisel{position:relative;padding:var(--bisel);border-radius:clamp(6px,.8vw,12px);
  background:linear-gradient(180deg,#26241F 0%,#3A3833 40%,#1C1B17 100%);
  box-shadow:inset 0 2px 5px rgba(0,0,0,.75), inset 0 -1px 0 rgba(231,229,224,.10)}

.tela{position:relative;width:100%;aspect-ratio:16/9;overflow:hidden;
  pointer-events:auto;
  border-radius:2.4% / 4%;
  background:var(--vidro);
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.9),
             inset 0 3px 10px rgba(0,0,0,.85)}
.tela video{position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;display:block;opacity:0;transition:opacity .22s linear}
#tv[data-estado="ligada"] .tela video{opacity:1}

/* O vidro apagado devolve a luz do ambiente: faixa larga e macia vinda de cima à
   esquerda, mais o risco do tampo embaixo. Alfa baixo de propósito, é reflexo em
   vidro escuro, não iluminação. */
.reflexo{position:absolute;inset:0;pointer-events:none;
  background:
    linear-gradient(116deg,rgba(231,229,224,.125) 0%,rgba(231,229,224,.052) 20%,
                    transparent 44%),
    radial-gradient(120% 82% at 50% 120%, rgba(160,124,74,.085), transparent 58%),
    radial-gradient(130% 100% at 50% 50%, transparent 52%, rgba(0,0,0,.55) 100%);
  transition:opacity .3s linear}
#tv[data-estado="ligada"] .reflexo{opacity:.30}

/* a trama da varredura, e o escurecimento de canto do tubo */
.raster{position:absolute;inset:0;pointer-events:none;opacity:0;
  background:
    repeating-linear-gradient(180deg,rgba(0,0,0,.20) 0 1px,transparent 1px 3px),
    radial-gradient(128% 98% at 50% 50%, transparent 56%, rgba(0,0,0,.46) 100%);
  transition:opacity .3s linear}
#tv[data-estado="ligada"] .raster{opacity:1}

/* o acender do tubo: uma linha que abre, e o apagar que fecha nela */
.risco{position:absolute;left:0;right:0;top:50%;height:2px;opacity:0;
  transform:translateY(-50%) scaleX(.02);
  background:linear-gradient(90deg,transparent,rgba(231,229,224,.85),transparent);
  pointer-events:none}
#tv[data-anim="acende"] .risco{animation:acende .42s ease-out forwards}
#tv[data-anim="apaga"]  .risco{animation:apaga .34s ease-in forwards}
@keyframes acende{
  0%{opacity:1;transform:translateY(-50%) scaleX(.02)}
  40%{opacity:1;transform:translateY(-50%) scaleX(1)}
  100%{opacity:0;transform:translateY(-50%) scaleX(1)} }
@keyframes apaga{
  0%{opacity:0;transform:translateY(-50%) scaleX(1)}
  30%{opacity:1;transform:translateY(-50%) scaleX(1)}
  100%{opacity:0;transform:translateY(-50%) scaleX(.015)} }

/* ===== o espaço reservado, dentro da tela ===== */
.reservado{position:absolute;inset:0;display:none;place-content:center;
  text-align:center;padding:0 8%;gap:14px}
#tv[data-estado="ligada"][data-filme="nao"] .reservado{display:grid}
.reservado .rot{font-family:var(--mono);font-size:11px;letter-spacing:.24em;
  color:var(--rotulo)}
.reservado .frase{font-family:var(--mao);font-size:clamp(1.15rem,2.3vw,1.9rem);
  line-height:1.3;color:var(--secundario)}
.reservado .mini{font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;
  color:var(--terciario)}

/* ===== o queixo e os botões ===== */
.painel{height:var(--queixo);display:flex;align-items:center;
  justify-content:flex-start;gap:clamp(12px,1.6vw,22px);
  padding:0 clamp(14px,1.8vw,26px)}
.botoes{margin-left:auto}

/* Grade de som. Todo aparelho de tubo tem uma, e é ela que faz o queixo parecer
   queixo e não uma barra de controles. */
.grade{flex:1 1 auto;max-width:38%;height:calc(var(--queixo) * .46);
  border-radius:2px;
  background:repeating-linear-gradient(90deg,
    #35332E 0 2px, #4E4B44 2px 3px, #35332E 3px 6px);
  box-shadow:inset 0 1px 2px rgba(0,0,0,.6), 0 1px 0 rgba(231,229,224,.10)}
@media (max-width:640px){ .grade{display:none} }
.marcaTV{font-family:var(--cond);font-size:clamp(11px,1.15vw,16px);
  letter-spacing:.2em;color:#39362F;
  text-shadow:0 1px 0 rgba(231,229,224,.16)}
.leituraTV{font-family:var(--mono);font-size:10px;letter-spacing:.16em;
  color:#35332D;white-space:nowrap}
@media (max-width:700px){ .leituraTV{display:none} }

.botoes{display:flex;align-items:center;gap:clamp(7px,.9vw,13px);
  padding:clamp(5px,.6vw,9px) clamp(7px,.8vw,12px);border-radius:4px;
  background:linear-gradient(180deg,#312F2A 0%,#3C3A34 100%);
  box-shadow:inset 0 2px 4px rgba(0,0,0,.55), 0 1px 0 rgba(231,229,224,.09)}
.botoes button{
  width:clamp(36px,3.7vw,52px);height:clamp(25px,2.5vw,34px);
  display:grid;place-items:center;cursor:pointer;
  border:0;border-radius:3px;
  background:linear-gradient(180deg,#7E7A6F 0%,#635F57 52%,#4A473F 100%);
  box-shadow:inset 0 1px 0 rgba(231,229,224,.32),
             inset 0 -1px 0 rgba(0,0,0,.42),
             0 2px 0 #2E2C27, 0 3px 5px rgba(0,0,0,.5);
  transition:transform .07s ease-out,box-shadow .07s ease-out,background .18s}
.botoes button svg{width:56%;height:56%;display:block;fill:none;
  stroke:#1B1A17;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.botoes button svg .cheio{fill:#1B1A17;stroke:none}
.botoes button:hover{background:linear-gradient(180deg,#8B8779 0%,#6E6A61 52%,#524E46 100%)}
.botoes button:active,
.botoes button[aria-pressed="true"]{
  transform:translateY(2px);
  box-shadow:inset 0 2px 4px rgba(0,0,0,.55), inset 0 -1px 0 rgba(231,229,224,.10),
             0 0 0 #2E2C27}
.botoes button:focus-visible{outline:2px solid var(--acento);outline-offset:3px}
.botoes button[disabled]{cursor:not-allowed;opacity:.42}

/* ===== os pés e a sombra na madeira ===== */
.pes{position:absolute;left:9%;right:9%;bottom:calc(-1 * clamp(11px,1.2vw,18px));
  height:clamp(11px,1.2vw,18px);
  background:linear-gradient(180deg,#46433C 0%,#2A2824 42%,#17150F 100%);
  border-radius:0 0 6px 6px;
  box-shadow:inset 0 1px 0 rgba(231,229,224,.14), 0 6px 12px rgba(0,0,0,.55)}
.sombraTV{position:absolute;left:-6%;right:-6%;
  bottom:calc(-1 * clamp(10px,1.2vw,16px));height:clamp(26px,3.4vh,46px);
  pointer-events:none;
  background:radial-gradient(60% 100% at 50% 0%, rgba(0,0,0,.72), transparent 72%)}
/* a tela acesa devolve luz à madeira logo abaixo. É reflexo no tampo, não halo em
   volta da tela: fica FORA do gabinete e some quando a TV apaga. */
.luzmesa{position:absolute;left:4%;right:4%;
  bottom:calc(-1 * clamp(14px,1.8vw,24px));height:clamp(30px,4vh,56px);
  pointer-events:none;opacity:0;transition:opacity .45s linear;
  background:radial-gradient(56% 100% at 50% 0%, rgba(231,229,224,.055), transparent 70%)}
#tv[data-estado="ligada"] .luzmesa{opacity:1}

@media (prefers-reduced-motion:reduce){
  .risco{display:none}
  .tela video,.reflexo,.raster,.luzmesa{transition:none}
}

/* ===== a ficha, abaixo da sala ===== */
.fichafilme{display:grid;grid-template-columns:repeat(auto-fit,minmax(178px,1fr));
  gap:1px;background:var(--divisoria);border:1px solid var(--divisoria);
  margin-top:clamp(28px,4vh,48px)}
.fichafilme > div{background:var(--bloco);padding:18px 20px}
.fichafilme dt{font-family:var(--mono);font-size:10.5px;letter-spacing:.18em;
  color:var(--rotulo);margin-bottom:7px}
.fichafilme dd{margin:0;font-family:var(--miudo);font-size:1rem;color:var(--texto)}
.fichafilme dd.pendente{color:var(--secundario)}