/* ==========================================================================
   SLIDESHOW CINEMATOGRÁFICO — prefixo cine-
   Hero de tela cheia com três fotos que trocam sozinhas, headline por
   palavra e barra de abas com progresso.

   Tokens usados:
     --dark-rgb           as duas camadas de scrim sobre a foto
     --light              texto e abas — a dobra é uma ILHA ESCURA (ver abaixo)
     --accent             linha de progresso da aba e o número dela
     --display            tipografia da headline e das abas
     --ease               curva do projeto
     --nav-h              folga para o menu fixo passar por cima da foto
     --radius-pill        o disco do botão de pausa
   A coluna vem do .wrap do core, então --max e --pad não são lidos aqui.

   ILHA ESCURA. Tudo que está sobre a foto lê --light, e não --fg (§8 do
   brief, §6 do contrato): assim a mesma dobra roda numa página de escopo
   claro sem virar texto escuro sobre foto escura. Quem depende do escopo de
   tom aqui é só o fundo da seção, que aparece atrás das fotos enquanto elas
   carregam.

   UMA DURAÇÃO SÓ. --cine-dur é o relógio da dobra: o zoom da foto, a linha
   de progresso da aba e o setTimeout do script leem os MESMOS 7s. O script
   lê o valor por getComputedStyle na raiz — nunca há dois números para
   manter em sincronia (ver o gotcha na ficha).
   ========================================================================== */

.cine{
  /* Relógio da dobra. Tempo que cada slide fica em cena — e, junto, a
     duração do zoom e da linha de progresso. Abaixo de 5s não dá para ler a
     headline inteira; acima de 10s a barra parece travada. */
  --cine-dur:7s;

  /* Fusão entre uma foto e a próxima. */
  --cine-swap:1.2s;
  /* Fusão do bloco de texto. Mais curta que a da foto de propósito: o texto
     precisa sair antes de o novo entrar, senão as duas headlines se
     sobrepõem legíveis por meio segundo. */
  --cine-fade:.45s;

  /* Desfoque da foto que entra e da que sai. É o que dá a leitura de
     "cinema" em vez de "slideshow": a foto se resolve, não aparece. Custa
     caro em tela cheia — o bloco de mobile lá embaixo baixa o valor. */
  --cine-blur:16px;

  /* Ken Burns: escala no fim do slide. 1.08 em 7s é ~1,1% por segundo, no
     limite do que o olho lê como "vivo" sem enjoar. */
  --cine-zoom:1.08;

  /* Onda da headline: atraso da primeira palavra e passo entre palavras. */
  --cine-word-base:.1s;
  --cine-word-lag:54ms;

  --cine-title:clamp(34px,5vw,72px);

  position:relative;
  overflow:hidden;
  /* Duas declarações, não uma: svh é a altura da janela SEM contar a barra
     do navegador que se recolhe, e é o que evita a dobra "vazar" um pedaço
     no celular. Onde svh não existe, a primeira linha continua valendo.
     Não usa .sec-pad: a dobra é uma tela inteira, e o respiro é o
     padding do .cine-body. */
  min-height:100vh;
  min-height:100svh;
}

/* ---------------------------------------------------------------- mídia */
.cine-media{position:absolute;inset:0;overflow:hidden}
.cine-slides{position:absolute;inset:0}

/* O slide inativo é invisível E fora do fluxo de pintura: sem o
   visibility:hidden ele continuaria sendo um retângulo de tela cheia com
   filter:blur() aplicado, e o §11 do brief é explícito — estado de repouso
   não paga quadro. O visibility só troca DEPOIS da fusão (delay igual a
   --cine-swap), senão a foto que sai desaparece de uma vez. */
.cine-slide{
  position:absolute;inset:0;
  opacity:0;visibility:hidden;
  filter:blur(var(--cine-blur));
  transition:opacity var(--cine-swap) var(--ease),
             filter var(--cine-swap) var(--ease),
             visibility 0s linear var(--cine-swap);
}
.cine-slide.is-on{
  opacity:1;visibility:visible;
  filter:blur(0);
  transition:opacity var(--cine-swap) var(--ease),
             filter var(--cine-swap) var(--ease),
             visibility 0s;
}
/* .is-out é a foto que está saindo. Ela precisa continuar visível durante a
   fusão — e continuar ZOOMANDO: ver o bloco do Ken Burns. */
.cine-slide.is-out{visibility:visible}

/* O corte é por slide, no markup (style="--cine-pos:60% 46%"), e não uma
   regra por posição: retrato em pé, veleiro no terço direito e sala com
   janela à esquerda não sobrevivem ao mesmo valor. Mesmo recurso do
   conteudo/pilares-texto-na-foto e do midia/carrossel-perfis. */
.cine-img{
  position:absolute;inset:0;
  width:100%;height:100%;
  object-fit:cover;
  object-position:var(--cine-pos,50% 46%);
  /* A escala parte daqui e a animação a substitui. Escrita também no estado
     de repouso para a foto sem animação (sem JS, ou movimento reduzido) não
     nascer num tamanho diferente do primeiro quadro do zoom. */
  transform:scale(1);
}

/* Dois gradientes por slide, e não um só para a mídia inteira: o desfoque da
   fusão é aplicado no SLIDE, então o scrim tem de estar dentro dele. Um
   scrim por fora ficaria nítido sobre uma foto desfocada, e o retângulo
   apareceria. O de baixo ancora o texto; o da esquerda dá contraste à
   coluna; a última parada do vertical escurece o topo, onde passa o menu. */
.cine-scrim{
  position:absolute;inset:0;
  background:
    linear-gradient(to top,
      rgba(var(--dark-rgb),.94) 0%,
      rgba(var(--dark-rgb),.66) 32%,
      rgba(var(--dark-rgb),.20) 62%,
      rgba(var(--dark-rgb),.46) 100%),
    linear-gradient(to right,
      rgba(var(--dark-rgb),.74) 0%,
      rgba(var(--dark-rgb),.30) 44%,
      rgba(var(--dark-rgb),0) 80%);
}

/* ---------------------------------------------------------------- corpo */
/* Texto e abas ancorados embaixo, como no hero/full-bleed-media: o alto da
   tela é da foto. A linha 1fr empurra a barra de abas para o pé. */
.cine-body{
  position:relative;z-index:2;
  min-height:100vh;
  min-height:100svh;
  display:grid;
  grid-template-rows:1fr auto;
  padding-top:calc(var(--nav-h) + clamp(40px,8vh,88px));
  padding-bottom:clamp(28px,4.5vh,44px);
}

.cine-copies{display:grid;align-items:end;padding-bottom:clamp(34px,6vh,64px)}

/* Todas as cópias na MESMA célula, alinhadas pela base. A célula fica com a
   altura da cópia mais alta, e é isso que impede a barra de abas de pular
   de lugar quando um slide tem headline de duas linhas e outro de três. */
.cine-copy{
  grid-area:1 / 1;
  align-self:end;
  max-width:min(720px,100%);
  opacity:0;visibility:hidden;
  transition:opacity var(--cine-fade) var(--ease),
             visibility 0s linear var(--cine-fade);
}
.cine-copy.is-on{
  opacity:1;visibility:visible;
  transition:opacity var(--cine-fade) var(--ease),visibility 0s;
}

/* O olho é a primitiva .eyebrow do core; esta classe só troca a tinta,
   porque aqui ele está sobre foto. Seletor duplo (.cine .cine-eyebrow) de
   propósito: .eyebrow e .cine-eyebrow têm a mesma especificidade, e o §6.4
   do contrato proíbe depender de qual folha carregou primeiro. Mesma
   solução do .hgal-cap .hgal-type. */
.cine .cine-eyebrow{color:color-mix(in srgb,var(--light) 66%,transparent)}

/* Não usa .display-xl do core: aquela primitiva é a peça gráfica de uma
   dobra de conteúdo, com corpo que enche a coluna e entrelinha .95. Esta
   headline divide a tela com uma foto e um botão, e passa a maior parte do
   tempo em duas linhas — são dois desenhos diferentes. */
.cine-title{
  font-family:var(--display);font-weight:700;
  font-size:var(--cine-title);
  line-height:1.06;letter-spacing:-.03em;
  color:var(--light);
  max-width:17ch;
  margin-top:20px;
}
/* inline-block é o que permite transformar palavra a palavra. O espaço entre
   os spans continua sendo espaço de texto — não vire flex aqui, ou a quebra
   de linha deixa de acompanhar o corpo da fonte. */
.cine-w{display:inline-block}

.cine-desc{
  font-size:clamp(15px,1.35vw,18px);line-height:1.6;
  color:color-mix(in srgb,var(--light) 78%,transparent);
  max-width:52ch;
  margin-top:22px;
}

.cine-act{margin-top:30px}

/* ---------------------------------------------------------------- entrada */
/* A COREOGRAFIA REENTRA A CADA SLIDE. Por isso não é data-rv nem data-split:
   os dois ganchos do core disparam UMA vez, quando o bloco entra na tela, e
   se desobservam. Aqui o mesmo texto tem de entrar de novo toda vez que a
   cópia recebe .is-on — o que só uma transição por classe faz.

   Três estados, e a ordem é o que garante a página sem JS:
     1. em repouso, tudo VISÍVEL — sem script, a dobra abre pronta;
     2. .is-live (posta pelo script antes da primeira pintura) esconde;
     3. .in + .is-on revela, com o atraso por palavra.

   Os atrasos moram no estado 3, e não no 1: assim a onda escalona na
   ENTRADA e a saída é imediata, escondida atrás da fusão da cópia. */
.cine.is-live .cine-eyebrow,
.cine.is-live .cine-w,
.cine.is-live .cine-desc,
.cine.is-live .cine-act{
  opacity:0;
  filter:blur(12px);
  transform:translateY(20px);
  transition:opacity .9s var(--ease),
             filter .9s var(--ease),
             transform .9s var(--ease);
}

.cine.is-live.in .cine-copy.is-on .cine-eyebrow,
.cine.is-live.in .cine-copy.is-on .cine-w,
.cine.is-live.in .cine-copy.is-on .cine-desc,
.cine.is-live.in .cine-copy.is-on .cine-act{
  opacity:1;filter:blur(0);transform:none;
}
.cine.is-live.in .cine-copy.is-on .cine-eyebrow{transition-delay:0s}
.cine.is-live.in .cine-copy.is-on .cine-w{
  transition-delay:calc(var(--cine-word-base) + var(--cine-i,0) * var(--cine-word-lag));
}
.cine.is-live.in .cine-copy.is-on .cine-desc{transition-delay:.42s}
.cine.is-live.in .cine-copy.is-on .cine-act{transition-delay:.56s}

/* Quem pediu menos movimento recebe o texto inteiro, parado, sem onda e sem
   desfoque. A troca de slide continua existindo — ela é comando da pessoa,
   não movimento imposto (o script desliga o relógio; ver script.js).
   Colado na regra que desliga, como manda o §6.5. */
@media(prefers-reduced-motion:reduce){
  .cine.is-live .cine-eyebrow,
  .cine.is-live .cine-w,
  .cine.is-live .cine-desc,
  .cine.is-live .cine-act{
    opacity:1;filter:none;transform:none;transition:none;
  }
}

/* ---------------------------------------------------------------- ken burns */
/* A MESMA regra vale para o slide que entra e para o que sai. Não é
   duplicação: é o que impede a foto que sai de dar um pulo.

   `animation … forwards` só segura o estado final enquanto a regra continuar
   valendo. Tirar .is-on da foto que sai apagaria o animation-name, o
   navegador voltaria ao transform de repouso (scale 1) e a foto encolheria
   0,08 em um quadro, bem no meio da fusão. Com .is-out a regra continua
   casando, o zoom segue correndo enquanto ela esmaece, e o script só tira a
   classe depois de --cine-swap, quando a foto já está invisível.

   O outro lado da moeda está no script: uma foto que volta a ser .is-on sem
   ter perdido o animation-name NÃO reinicia o zoom sozinha. Ver
   reiniciarAnim() no script.js. */
.cine.in .cine-slide.is-on .cine-img,
.cine.in .cine-slide.is-out .cine-img{
  animation:cineKen var(--cine-dur) linear forwards;
}

@keyframes cineKen{
  from{transform:scale(1)}
  to{transform:scale(var(--cine-zoom,1.08))}
}

/* Pausa. A especificidade aqui é maior de propósito: a regra acima usa a
   SHORTHAND `animation`, e toda shorthand zera as suas longhands — inclusive
   animation-play-state. Uma regra de pausa mais fraca seria escrita e depois
   apagada pela shorthand, e o botão de pausa "não funcionaria" sem erro
   nenhum no console. Medido. */
.cine.is-paused.in .cine-slide.is-on .cine-img,
.cine.is-paused.in .cine-slide.is-out .cine-img{animation-play-state:paused}

/* Sem zoom para quem pediu menos movimento — e a foto fica no tamanho de
   repouso, que é o mesmo primeiro quadro do zoom. */
@media(prefers-reduced-motion:reduce){
  .cine.in .cine-slide.is-on .cine-img,
  .cine.in .cine-slide.is-out .cine-img{animation:none}
  /* Fusão só de opacidade, mais curta, e sem o desfoque. */
  .cine-slide{
    filter:none;
    transition:opacity .4s linear,visibility 0s linear .4s;
  }
  .cine-slide.is-on{
    filter:none;
    transition:opacity .4s linear,visibility 0s;
  }
}

/* ---------------------------------------------------------------- abas */
/* A barra só existe com JavaScript: sem ele as abas seriam três botões que
   não fazem nada. Quem acende é o script, na inicialização (.is-live). */
.cine-bar{display:none}
.cine.is-live .cine-bar{
  display:flex;align-items:flex-start;
  gap:clamp(14px,2.4vw,30px);
}

.cine-tabs{
  display:flex;flex:1 1 auto;min-width:0;
  gap:clamp(12px,2.4vw,32px);
}

/* Botão de verdade, sem cara de botão: o reset é local porque o .btn do core
   é outra coisa (pílula de rótulo, com fundo e padding fixos). Cada aba
   ocupa a mesma fração da barra — é o que faz as três linhas de progresso
   lerem como uma régua repartida. */
.cine-tab{
  flex:1 1 0;min-width:0;
  display:grid;
  grid-template-columns:auto minmax(0,1fr);
  align-items:baseline;
  column-gap:10px;row-gap:14px;
  padding:0;border:0;background:none;
  text-align:start;
  color:color-mix(in srgb,var(--light) 54%,transparent);
  transition:color .35s var(--ease);
}
.cine-tab:hover{color:var(--light)}
.cine-tab.is-on{color:var(--light)}

/* O trilho de 2px de cada aba, lado a lado, é o filete do pé da dobra —
   por isso não há border-top na barra: seria uma linha em cima da outra. */
.cine-tab-bar{
  grid-column:1 / -1;
  height:2px;
  background:color-mix(in srgb,var(--light) 20%,transparent);
  overflow:hidden;
}
.cine-tab-fill{
  display:block;height:100%;
  background:var(--accent);
  transform:scaleX(0);transform-origin:left center;
}
/* Enche no tempo do slide. Mesma duração, mesma fonte: --cine-dur. */
.cine.in .cine-tab.is-on .cine-tab-fill{
  animation:cineFill var(--cine-dur) linear forwards;
}
@keyframes cineFill{
  from{transform:scaleX(0)}
  to{transform:scaleX(1)}
}
/* Mesma história da pausa do Ken Burns: precisa vencer a shorthand. */
.cine.is-paused.in .cine-tab.is-on .cine-tab-fill{animation-play-state:paused}

/* Sem relógio não há o que encher: a linha da aba ativa fica cheia e vira um
   marcador estático de onde a pessoa está. */
@media(prefers-reduced-motion:reduce){
  .cine.in .cine-tab.is-on .cine-tab-fill{animation:none;transform:scaleX(1)}
}

.cine-tab-n{
  font-family:var(--display);font-weight:700;
  font-size:11px;letter-spacing:.1em;
  color:color-mix(in srgb,var(--accent) 90%,transparent);
}
.cine-tab-t{
  font-family:var(--display);font-weight:700;
  font-size:clamp(11px,1vw,12.5px);
  letter-spacing:.11em;text-transform:uppercase;
  color:currentColor;
}

/* ---------------------------------------------------------------- pausa */
/* A dobra troca sozinha por mais de cinco segundos: a WCAG 2.2.2 pede um
   jeito explícito de parar, e o hover não conta (não existe no toque, e
   quem usa leitor de tela não "passa o ponteiro").

   O BOTÃO VESTE .btn-play DO CORE, e de lá vêm três coisas que este arquivo
   deixou de escrever (2026-09-21): o [hidden] desligado à mão (§6.5), a troca
   de ícone e o tamanho do desenho. Restou o disco — que aqui NÃO é o
   .btn-disc: a borda e a tinta são medidas contra a FOTO, em --light, e o
   --rule-2 do escopo sumiria sobre a imagem. O --play-ico é o parafuso da
   primitiva, e 12px é o que cabe num disco de 36. */
.cine-play{
  flex:0 0 auto;
  --play-ico:12px;
  width:36px;height:36px;padding:0;
  display:grid;place-items:center;
  background:none;
  border:1px solid color-mix(in srgb,var(--light) 24%,transparent);
  border-radius:var(--radius-pill);
  color:color-mix(in srgb,var(--light) 66%,transparent);
  transition:color .3s var(--ease),border-color .3s var(--ease);
}
.cine-play:hover{color:var(--light);border-color:color-mix(in srgb,var(--light) 52%,transparent)}
/* O [hidden] não é repetido aqui de propósito: o display:grid acima venceria o
   display:none que a folha do navegador dá ao [hidden] (§6.5, mesma pegadinha
   do .hgal-nav da galeria em scroll horizontal), e quem o desarma agora é a
   primitiva, em .btn-play[hidden] — seletor de classe MAIS atributo, que vence
   este de classe só em qualquer ordem de carregamento (§6.4). */

/* ---------------------------------------------------------------- toque */
/* Sem ponteiro não há hover: a aba ativa tem de se distinguir por outra
   coisa que não a cor de destaque do hover. A linha de progresso e a cor
   cheia do rótulo já fazem isso — aqui só se apaga o estado de hover, que
   em toque fica "grudado" no último item tocado. */
@media(hover:none){
  .cine-tab:hover{color:color-mix(in srgb,var(--light) 54%,transparent)}
  .cine-tab.is-on:hover{color:var(--light)}
}

/* ---------------------------------------------------------------- mobile */
@media(max-width:760px){
  .cine{
    --cine-title:clamp(30px,8.6vw,40px);
    /* 16px de desfoque numa foto de tela cheia é caro, e no celular é caro
       no aparelho errado. 8px mantém a leitura de fusão e corta pela metade
       a área que o navegador precisa refazer. Números na ficha. */
    --cine-blur:8px;
    --cine-swap:1s;
  }
  .cine-body{
    padding-top:calc(var(--nav-h) + 24px);
    padding-bottom:22px;
  }
  .cine-copies{padding-bottom:30px}
  .cine-title{max-width:none;margin-top:14px}
  .cine-desc{margin-top:16px;max-width:44ch}
  .cine-act{margin-top:22px}

  /* Número EM CIMA do rótulo, não no lugar dele: "01" sozinho não diz nada,
     e é o rótulo que informa para onde a aba leva. Uma coluna só por aba,
     e o rótulo pode quebrar em duas linhas sem desalinhar as vizinhas —
     todas as abas começam na mesma altura. */
  .cine-tab{grid-template-columns:minmax(0,1fr);row-gap:9px}
  .cine-tab-n{font-size:9.5px}
  .cine-tab-t{font-size:10px;letter-spacing:.06em}
  .cine-tabs{gap:12px}
  .cine.is-live .cine-bar{gap:12px}
  .cine-play{width:32px;height:32px}
}

@media(max-width:420px){
  /* Botão de largura cheia: a essa altura ele é o único caminho adiante e
     divide a tela com a barra de abas. */
  .cine-act .btn{width:100%}
}

/* ==========================================================================
   SEM JAVASCRIPT, O CONTEUDO APARECE. §5 do contrato.

   Estas regras revelam por CLASSE PROPRIA (`.cine.in`), e nao pelo `[data-rv]` do
   core — por isso o `@media (scripting: none)` do core/motion.css nao as
   alcanca: ele cobre `[data-rv]`, `.w` e `.ttl`, e mais nada.

   Sem esta excecao, com o JavaScript desligado o olho, a headline e o apoio do primeiro slide nao apareciam. Medido com
   `node bin/medir.js <preview> --sem-js`: 19 nos com texto proprio invisiveis
   ========================================================================== */
@media (scripting: none){
  .cine-w,
  .cine-eyebrow,
  .cine-desc,
  .cine-cta{opacity:1;visibility:visible;transform:none;filter:none;transition:none}
  /* O primeiro slide e' o unico que faz sentido sem script: sem JS nao ha
     troca, e mostrar os tres empilhados seria pior que mostrar um. */
  .cine-slide:first-child{opacity:1;visibility:visible}
}