/* =============================================================
   CINEMA — capa em tela cheia + painel de galeria
   -------------------------------------------------------------
   Capa editorial em papel claro: o número dela é o protagonista,
   não o vazio. Tudo movido por requestAnimationFrame, com
   inércia, e sem biblioteca nenhuma.
   ============================================================= */

:root{
  --fonte-ui: 'Inter', -apple-system, sans-serif;
}

/* ---------- Espaçador que gera a rolagem da capa ---------- */
#cinema-spacer{
  position:relative;
  height:500vh;              /* recalculado pelo JS */
  pointer-events:none;
}

/* ---------- Bloco fixo ---------- */
#cinema{
  position:fixed; inset:0;
  z-index:40;
  overflow:hidden;
  user-select:none;
  -webkit-user-select:none;
}
#cinema[hidden]{ display:none !important; }
#cinema.encerrado{ visibility:hidden; pointer-events:none; }


/* ============================================================
   FUNDO
   ============================================================ */
#cinema-fundo{
  position:absolute; inset:0;
  z-index:0;
  overflow:hidden;
  background:var(--preto);
}
#cinema-fundo video{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover;
  opacity:0;
  transition:opacity .5s ease;
}
#cinema-fundo video.ativo{ opacity:1; }

/* ---------- Foto da capa ----------
   A figura fica recortada à direita e a tipografia ocupa a
   esquerda. object-fit:contain porque cortar cabeça ou pé numa
   foto de corpo inteiro estraga a composição. */
#cine-foto{
  position:absolute;
  right:2%; bottom:0;
  height:94%; width:auto;
  max-width:48vw;
  object-fit:contain;
  object-position:bottom center;
  z-index:1;
  opacity:0;
  transition:opacity .9s ease;
  will-change:transform;

  /* Três coisas fazem a figura parecer recortada no papel:
     1. brightness estoura o cinza do fundo da foto até o branco
        (o preto da roupa continua preto — multiplicar por zero
        dá zero, então as sombras não se mexem);
     2. multiply some com todo branco dentro do papel;
     3. a máscara radial derrete o que sobrar das quatro bordas.
     O brightness e o multiply são estruturais (sem eles não há
     recorte); a cor da foto é preservada. */
  mix-blend-mode:multiply;
  filter:brightness(1.22) contrast(1.06);

  -webkit-mask-image:radial-gradient(116% 94% at 62% 96%, #000 50%, transparent 100%);
          mask-image:radial-gradient(116% 94% at 62% 96%, #000 50%, transparent 100%);
}
#cine-foto.pronta{ opacity:1; }
/* entrou vídeo? a foto sai de cena */
#cinema-fundo.com-video #cine-foto{ opacity:0; }

/* Com foto, a tipografia recua para a metade esquerda
   e as provas viram uma régua horizontal. */
#cinema.com-foto #cine-centro{
  right:auto;
  width:min(50%, 640px);
  grid-template-columns:1fr;
  align-items:start;
  gap:32px;
}
#cinema.com-foto #cine-provas{
  flex-direction:row;
  gap:18px;
  min-width:0;
}
#cinema.com-foto #cine-provas .prova{ flex:1; }
#cinema.com-foto #cine-provas b{ font-size:1.45rem; }
#cinema.com-foto #cine-valor{ font-size:clamp(3.6rem, 9vw, 9.5rem); }

/* ---------- Modo CAPA CHEIA ----------
   A foto toma a tela inteira e a tipografia fica por cima. Aqui
   não existe recorte: nada de multiply, máscara ou brightness —
   esses truques só servem para foto de fundo claro. O texto
   continua legível porque o mix-blend-mode:exclusion se inverte
   sozinho conforme o que está atrás dele. */
#cinema.capa-cheia #cine-foto{
  inset:0;
  right:auto; bottom:auto;
  width:100%; height:100%;
  max-width:none;
  object-fit:cover;
  object-position:center 20%;
  mix-blend-mode:normal;
  /* NENHUM EFEITO: a foto entra exatamente como ela é.
     Sem preto e branco, sem brilho, sem contraste, sem máscara. */
  filter:none;
  -webkit-mask-image:none;
          mask-image:none;
}

/* Nada por cima da foto — ela fica limpa de ponta a ponta.
   A leitura do texto fica por conta do text-shadow mais abaixo. */
#cinema.capa-cheia #cinema-fundo::before{ display:none; }

/* o filete de moldura precisa clarear sobre foto escura */
#cinema-fundo::after{ z-index:3; }
#cinema.capa-cheia #cinema-fundo::after{ border-color:rgba(255,255,255,.22); }

/* Em capa cheia o fundo é sempre foto escura, então não há o que
   o exclusion resolva: branco sólido com sombra lê melhor, e o
   texto miúdo para de sumir sobre a pele. */
#cinema.capa-cheia .cine-ui,
#cinema.capa-cheia #cine-centro,
#cinema.capa-cheia #cine-faixa{
  mix-blend-mode:normal;
  color:#fff;
}
#cinema.capa-cheia #cine-logo,
#cinema.capa-cheia #cine-legenda,
#cinema.capa-cheia #cine-nav,
#cinema.capa-cheia #cine-rolar,
#cinema.capa-cheia #cine-periodo,
#cinema.capa-cheia #cine-provas,
#cinema.capa-cheia #cine-faixa{
  text-shadow:0 1px 14px rgba(0,0,0,.8), 0 0 3px rgba(0,0,0,.5);
}
#cinema.capa-cheia #cine-faixa{ border-top-color:rgba(255,255,255,.18); }
#cinema.capa-cheia #cine-provas .prova{ border-top-color:rgba(255,255,255,.45); }

/* sem figura ao lado, a tipografia volta a ocupar a largura */
#cinema.capa-cheia #cine-centro{
  right:52px;
  width:auto;
  grid-template-columns:minmax(0,1fr) auto;
  align-items:end;
  gap:56px;
}

/* Lavagem cinza quase imperceptível: tira o achatamento do
   papel sem sujar a tela. Some assim que entra vídeo. */
#cinema-brilho{
  position:absolute; inset:-10%;
  background:
    radial-gradient(58% 52% at 18% 12%, rgba(17,17,17,.055), transparent 70%),
    radial-gradient(48% 46% at 88% 82%, rgba(17,17,17,.04),  transparent 72%);
  animation:respirar 26s ease-in-out infinite alternate;
}
#cinema-fundo.com-video #cinema-brilho{ opacity:0; transition:opacity .6s ease; }

@keyframes respirar{
  0%  { transform:translate3d(-2%,-1%,0) scale(1);    }
  100%{ transform:translate3d(2%,2%,0)   scale(1.08); }
}

/* textura de papel, bem discreta */
#cinema-grao{
  position:absolute; inset:0;
  opacity:.05; pointer-events:none;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/></filter><rect width='200' height='200' filter='url(%23n)' opacity='.5'/></svg>");
}

/* filete de moldura, como capa de revista */
#cinema-fundo::after{
  content:''; position:absolute; inset:22px; pointer-events:none;
  border:1px solid var(--borda-suave);
}

/* ============================================================
   INTERFACE SOBREPOSTA
   mix-blend-mode: exclusion se vira sozinho sobre papel claro
   ou sobre vídeo escuro.
   ============================================================ */
.cine-ui{
  position:absolute;
  z-index:20;
  pointer-events:none;
  mix-blend-mode:exclusion;
  color:#fff;
  opacity:0;
  transform:translateY(14px);
}
.cine-ui.entrou{
  opacity:1; transform:none;
  transition:opacity .7s cubic-bezier(.22,1,.36,1),
             transform .7s cubic-bezier(.22,1,.36,1);
}

/* ---------- Assinatura, topo à esquerda ---------- */
#cine-logo{
  top:46px; left:52px;
  font-family:var(--fonte-titulo);
  font-size:1.35rem;
  font-weight:500;
  line-height:1;
  letter-spacing:.16em;
  text-transform:uppercase;
}
#cine-logo small{
  display:block;
  font-family:var(--fonte-ui);
  font-size:.62rem; font-weight:500;
  letter-spacing:.34em; text-transform:uppercase;
  margin-top:9px; opacity:.6;
}

/* ---------- Navegação, topo à direita ---------- */
#cine-nav{
  top:46px; right:52px;
  display:flex; align-items:center; gap:34px;
  font-family:var(--fonte-ui);
  font-size:.68rem; font-weight:500;
  letter-spacing:.22em; text-transform:uppercase;
}
#cine-nav svg{ width:22px; height:22px; }
#cine-nav .carrinho{ transition:opacity .3s ease; }
#cine-nav .carrinho:hover{ opacity:.55; }

/* ============================================================
   O MIOLO — o número dela é o protagonista
   ============================================================ */
/* Ancorada no rodapé, como capa de revista: o topo respira,
   a base carrega o peso. Não sobra vazio no meio. */
#cine-centro{
  position:absolute;
  left:52px; right:52px;
  bottom:104px;
  z-index:20;
  pointer-events:none;
  mix-blend-mode:exclusion;
  color:#fff;
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  align-items:end;
  gap:56px;
}

#cine-manchete{
  opacity:0; transform:translateY(22px);
}
#cine-manchete.entrou{
  opacity:1; transform:none;
  transition:opacity .9s cubic-bezier(.22,1,.36,1),
             transform .9s cubic-bezier(.22,1,.36,1);
}
#cine-valor{
  font-family:var(--fonte-titulo);
  font-size:clamp(4.5rem, 16vw, 19rem);
  font-weight:400;
  line-height:.82;
  letter-spacing:-.05em;
  display:block;
}
#cine-rotulo{
  font-family:var(--fonte-ui);
  font-size:clamp(.8rem, 1.35vw, 1.2rem);
  font-weight:500;
  line-height:1.3;
  letter-spacing:.13em;
  text-transform:uppercase;
  margin-top:22px;
  white-space:pre-line;
}
#cine-periodo{
  font-family:var(--fonte-ui);
  font-size:.7rem; font-weight:400;
  letter-spacing:.18em; text-transform:uppercase;
  margin-top:12px; opacity:.6;
}

/* ---------- Três provas, coluna da direita ---------- */
#cine-provas{
  display:flex; flex-direction:column;
  gap:22px;
  min-width:210px;
  font-family:var(--fonte-ui);
}
#cine-provas .prova{
  opacity:0; transform:translateY(16px);
  padding-top:14px;
  border-top:1px solid currentColor;
}
#cine-provas .prova.entrou{
  opacity:1; transform:none;
  transition:opacity .7s cubic-bezier(.22,1,.36,1),
             transform .7s cubic-bezier(.22,1,.36,1);
}
#cine-provas b{
  display:block;
  font-family:var(--fonte-titulo);
  font-size:2rem; font-weight:400;
  line-height:1; letter-spacing:-.03em;
}
#cine-provas span{
  display:block;
  font-size:.64rem; font-weight:500;
  letter-spacing:.18em; text-transform:uppercase;
  margin-top:7px; opacity:.62;
}

/* ---------- Legenda, logo abaixo da assinatura ---------- */
#cine-legenda{
  left:52px; top:142px;
  width:min(380px, 34vw);
  font-family:var(--fonte-ui);
  font-size:.78rem; font-weight:400;
  line-height:1.7; letter-spacing:.005em;
}

/* ---------- Indicador de rolagem ---------- */
#cine-rolar{
  right:52px; top:142px; left:auto;
  display:flex; flex-direction:column; align-items:flex-end; gap:12px;
  font-family:var(--fonte-ui);
  font-size:.58rem; font-weight:500;
  letter-spacing:.32em; text-transform:uppercase;
}
#cine-rolar.entrou{ transform:none; }
#cine-rolar i{
  display:block; width:1px; height:52px;
  background:currentColor;
  animation:descer 2.4s ease-in-out infinite;
  transform-origin:top;
}
@keyframes descer{
  0%,100%{ transform:scaleY(.25); opacity:.3; }
  50%    { transform:scaleY(1);   opacity:1; }
}

/* ============================================================
   FAIXA CONTÍNUA NO RODAPÉ
   Movimento constante: enche o espaço e dá vida sem pesar.
   ============================================================ */
#cine-faixa{
  position:absolute;
  left:0; right:0; bottom:0;
  z-index:21;
  height:58px;
  overflow:hidden;
  display:flex; align-items:center;
  border-top:1px solid var(--borda-suave);
  mix-blend-mode:exclusion;
  color:#fff;
  opacity:0;
  transition:opacity .8s ease .9s;
}
#cine-faixa.entrou{ opacity:1; }
#cine-faixa .fita{
  display:flex;
  flex:none;
  will-change:transform;
  animation:correr 42s linear infinite;
}
#cine-faixa .fita span{
  flex:none;
  padding-inline:26px;
  font-family:var(--fonte-ui);
  font-size:.66rem; font-weight:500;
  letter-spacing:.26em; text-transform:uppercase;
  white-space:nowrap;
}
@keyframes correr{
  from{ transform:translate3d(0,0,0); }
  to  { transform:translate3d(-50%,0,0); }
}

/* ============================================================
   PAINEL COM A GALERIA
   ============================================================ */
#painel{
  position:absolute; inset:0;
  z-index:10;
  background:var(--texto);
  transform:translateY(100vh);
  will-change:transform;
  overflow:hidden;
}
#painel-interno{
  width:100%;
  padding-top:min(400px, 40vh);
  will-change:transform;
}
#painel-grade{ display:grid; gap:0; }
.pn-celula{ aspect-ratio:2/3; }

.pn-card{
  position:relative;
  width:100%; height:100%;
  overflow:hidden;
  transform:scale(0);
  will-change:transform;
  background:#1C1C1C;
}
.pn-card img{ width:100%; height:100%; object-fit:cover; }
.pn-card .vazio{
  position:absolute; inset:0;
  display:grid; place-items:center;
  font-family:var(--fonte-titulo);
  font-size:.8rem; font-weight:500;
  letter-spacing:.24em; text-transform:uppercase;
  color:rgba(255,255,255,.32);
  border:1px solid rgba(255,255,255,.09);
  text-align:center; padding:12px;
}

/* ---------- Cobertura final ---------- */
#cine-cobertura{
  position:absolute; inset:0;
  z-index:12;
  background:var(--preto);
  opacity:0;
  pointer-events:none;
}

/* ============================================================
   RESPONSIVO
   ============================================================ */
@media (max-width:1200px){
  #cine-logo, #cine-legenda{ left:34px; }
  #cine-nav{ right:34px; }
  #cine-centro{ left:34px; right:34px; gap:32px; }
}

@media (max-width:1023px){

  /* No tablet não cabe figura RECORTADA ao lado do texto: ela vira
     fundo apagado e a tipografia volta a ocupar a largura inteira.
     O modo capa cheia não entra aqui — lá a foto é o fundo. */
  #cinema:not(.capa-cheia) #cine-foto{ right:-8%; height:82%; max-width:68vw; }
  #cinema:not(.capa-cheia) #cine-foto.pronta{ opacity:.26; }
  #cinema.com-foto #cine-centro{ width:auto; right:34px; }
  #cinema.com-foto #cine-valor{ font-size:clamp(3.6rem, 13vw, 8rem); }
  #cinema.capa-cheia #cine-centro{ right:34px; grid-template-columns:1fr; align-items:start; gap:32px; }
  #cinema.capa-cheia #cine-provas{ flex-direction:row; gap:18px; min-width:0; }
  #cinema.capa-cheia #cine-provas .prova{ flex:1; }

  #cine-centro{ grid-template-columns:1fr; align-items:start; gap:36px; }
  #cine-provas{ flex-direction:row; gap:20px; min-width:0; }
  #cine-provas .prova{ flex:1; }
  #cine-provas b{ font-size:1.5rem; }
  #cine-legenda{ width:min(460px, 58vw); }
  #cine-rolar{ display:none; }
}

@media (max-width:639px){
  #cinema-fundo::after{ inset:12px; }

  /* no celular a figura recortada sobe e centraliza;
     o texto continua embaixo */
  #cinema:not(.capa-cheia) #cine-foto{
    right:auto; left:50%;
    transform:translateX(-50%);
    bottom:auto; top:9%;
    height:54%; max-width:none;
  }
  #cinema:not(.capa-cheia) #cine-foto.pronta{ opacity:.9; }
  #cinema.com-foto #cine-centro{ width:auto; right:20px; }
  #cinema.com-foto #cine-valor{ font-size:20vw; }
  #cinema.com-foto #cine-provas b{ font-size:1.1rem; }

  #cinema.capa-cheia #cine-centro{ right:20px; }
  #cinema.capa-cheia #cine-valor{ font-size:20vw; }
  #cinema.capa-cheia #cine-provas b{ font-size:1.1rem; }
  #cinema.capa-cheia #cine-foto{ object-position:center 16%; }

  #cine-logo{ top:26px; left:20px; font-size:1rem; letter-spacing:.14em; }
  #cine-logo small{ font-size:.54rem; letter-spacing:.26em; margin-top:6px; }

  #cine-nav{ top:26px; right:20px; gap:16px; font-size:.58rem; letter-spacing:.16em; }
  #cine-nav svg{ width:19px; height:19px; }
  #cine-nav .rotulo-about{ display:none; }

  #cine-centro{ left:20px; right:20px; top:46%; gap:28px; }
  #cine-valor{ font-size:23vw; }
  #cine-rotulo{ font-size:.68rem; letter-spacing:.1em; margin-top:16px; }
  #cine-periodo{ font-size:.58rem; margin-top:10px; }
  #cine-provas{ gap:12px; }
  #cine-provas b{ font-size:1.15rem; }
  #cine-provas span{ font-size:.5rem; letter-spacing:.12em; }

  #cine-legenda{ display:none; }

  #cine-faixa{ height:44px; }
  #cine-faixa .fita span{ font-size:.56rem; letter-spacing:.18em; padding-inline:16px; }
}

/* ============================================================
   ACESSIBILIDADE E IMPRESSÃO
   ============================================================ */
@media (prefers-reduced-motion: reduce){
  #cinema-brilho{ animation:none; }
  #cine-rolar i{ animation:none; }
  #cine-faixa .fita{ animation:none; }
  .cine-ui, #cine-manchete, #cine-provas .prova{ opacity:1; transform:none; }
}

@media print{
  #cinema, #cinema-spacer{ display:none !important; }
}