/* ============================================================
   Real State — Grupo HP · cinema.css
   CAMADA CINEMATOGRÁFICA — a superfície do motor js/core/cinema.js
   ------------------------------------------------------------
   Carregar SEMPRE depois de editorial.css e antes de motion.css.
   Esta camada não inventa aparência: ela só dá corpo aos objetos
   que o motor cria (cortina, contador, cursor, fio de progresso,
   canvas da sequência) usando exclusivamente os tokens da marca.

   TESE
   O cinema aqui não é ornamento — é tempo. Tudo que esta folha
   estiliza existe para controlar o RITMO da leitura:
     · a cortina compra 1,1s de silêncio antes do hero;
     · o canvas compra 3 telas de rolagem para um sobrevoo;
     · o cursor devolve ao ponteiro o peso de um objeto;
     · o fio de 2px é a única régua visível da página.

   REGRA DE COR (herdada, inegociável)
     Azul Profundo #081C2B e Areia #FFF4EB dominam.
     Amarelo Doca #F5BD42 só como fio, número, seta e hover.
     Nenhuma superfície ampla amarela nasce nesta folha.

   ZERO RECURSO EXTERNO. Nada aqui carrega rede.
   ============================================================ */


/* ============================================================
   0. ESCALA DE PROFUNDIDADE (z-index)
   Um único lugar decide quem fica na frente de quem. O header
   editorial vive em 120; tudo do cinema passa por cima dele,
   exceto o fio de progresso, que é régua e não camada.
   ============================================================ */

:root {
  --cin-z-progress:  200;   /* acima do header (120), abaixo de tudo mais */
  --cin-z-veil:     9990;   /* cortina de transição entre páginas        */
  --cin-z-cursor:   9995;   /* cursor sempre por cima da cortina         */
  --cin-z-preload:  9998;   /* o preloader cobre o mundo inteiro         */

  /* Tempos do motor — espelham os eases do GSAP (motion.js). */
  --cin-ease-precision: cubic-bezier(0.16, 1, 0.30, 1);
  --cin-ease-structural: cubic-bezier(0.83, 0, 0.17, 1);

  /* Áreas de vidro derivadas dos tokens (nunca cor nova). */
  --cin-areia-12: rgba(255, 244, 235, 0.12);
  --cin-areia-55: rgba(255, 244, 235, 0.55);
  --cin-branco-18: rgba(255, 255, 255, 0.18);
}


/* ============================================================
   1. ANTI-FLASH DO PRELOADER
   O cinema.js é deferido: entre a primeira pintura e a execução
   do script existe uma fresta em que o hero apareceria antes da
   cortina. Cobrimos essa fresta com um pseudo-elemento que só
   existe quando (a) a página pediu preloader e (b) o JS está
   ligado. Assim, sem JS a página nasce visível e legível.
   O motor marca <body data-cinema-boot> assim que a cortina real
   existe — e este cobertor provisório desaparece no mesmo quadro.
   ============================================================ */

@media (scripting: enabled) {
  body[data-preloader]:not([data-cinema-boot])::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: var(--cin-z-preload);
    background: var(--mult-azul-profundo);
    pointer-events: none;

    /* FAILSAFE 100% CSS.
       Este cobertor é a única camada que existe ANTES de qualquer JS
       rodar, e ele só saía quando o cinema.js chamasse markBooted().
       Qualquer erro de parse no cinema.js deixava toda página com
       data-preloader num retângulo Azul Profundo permanente — sem
       timeout, sem rota de fuga. A animação abaixo derruba o cobertor
       sozinha em 8 s, mesmo que nenhum JS rode. No caminho normal o
       motor marca data-cinema-boot em ~1,5 s e a regra deixa de casar
       muito antes disso, então o failsafe nunca aparece. */
    animation: cin-cobertor-failsafe 8s linear forwards;
  }
}

@keyframes cin-cobertor-failsafe {
  0%, 88% { opacity: 1; visibility: visible; }
  100%    { opacity: 0; visibility: hidden; }
}

/* Rolagem travada enquanto a cortina está no ar.
   Quem destrava é o cinema.js — e ele tem watchdog em setTimeout,
   fora do requestAnimationFrame, justamente porque este !important
   é irreversível sem JS. */
.cinema-locked,
.cinema-locked body { overflow: hidden !important; }

/* Vídeo gateado por js/core/media.js (data-video-gate).
   Enquanto o arquivo não pode tocar — tela < 1024px, save-data, 2g/3g,
   prefers-reduced-motion ou ?nomotion — o elemento é só o seu poster
   (.is-still) e nenhum byte de vídeo desce. Quando toca, .is-playing.
   O quadro parado aceita um ponto a mais de contraste que a imagem em
   movimento; é a única diferença de tratamento entre os dois estados. */
video[data-video-gate].is-still { filter: saturate(0.90) contrast(1.08); }


/* ============================================================
   2. PRELOADER — a cortina de abertura
   Azul Profundo cheio, três objetos ao centro: o símbolo dos
   três volumes desenhando, o contador em peso 200 e o fio
   Amarelo Doca que mede o carregamento real.
   ============================================================ */

.cinema-preloader {
  position: fixed;
  inset: 0;
  z-index: var(--cin-z-preload);
  display: grid;
  place-items: center;
  background: var(--mult-azul-profundo);
  color: var(--mult-branco);
  /* A saída é feita por clip-path: a cortina sobe, não some. */
  clip-path: inset(0% 0% 0% 0%);
  will-change: clip-path;
}

.cinema-preloader__inner {
  display: grid;
  justify-items: center;
  gap: clamp(26px, 3.4vw, 40px);
  width: min(420px, 72vw);
  padding-inline: var(--ed-gutter, 24px);
}

/* --- símbolo oficial: três volumes fechados, stroke→fill ---
   Estado de descanso: símbolo CHEIO e sem contorno (é o que aparece
   se o DrawSVG não carregar). O motor inverte para fill-opacity 0 /
   stroke-opacity 1 no primeiro quadro e anima o desenho por cima.
   O amarelo da cortina segue sendo só o fio de progresso. */
.cinema-preloader__mark {
  display: block;
  width: clamp(120px, 15vw, 190px);   /* viewBox ~387×205: mais largo que alto */
  height: auto;
  overflow: visible;
}
.cinema-preloader__mark .cin-volume {
  fill: var(--mult-branco);
  fill-opacity: 1;
  stroke: var(--mult-branco);
  stroke-opacity: 0;
  stroke-width: 1.6;
  stroke-linecap: square;
  stroke-linejoin: miter;
  vector-effect: non-scaling-stroke;
}

/* --- contador: peso 200, tabular, tracking editorial --- */
.cinema-preloader__count {
  margin: 0;
  font-family: var(--font-brand);
  font-size: clamp(46px, 6.4vw, 72px);
  font-weight: 200;
  line-height: 1;
  letter-spacing: 0.2em;
  /* o tracking empurra o texto para a esquerda; devolvemos o passo */
  padding-left: 0.2em;
  font-variant-numeric: tabular-nums;
  color: var(--mult-branco);
}

/* --- trilho + fio: a medida real do carregamento --- */
.cinema-preloader__track {
  position: relative;
  width: 100%;
  height: 1px;
  background: var(--cin-branco-18);
  overflow: hidden;
}
.cinema-preloader__bar {
  position: absolute;
  inset: 0;
  background: var(--mult-amarelo-doca);
  transform: scaleX(0);
  transform-origin: left center;
}

.cinema-preloader__label {
  /* eyebrow do sistema editorial, em contexto escuro */
  font-family: var(--font-brand);
  font-size: 11px;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  text-align: center;
  color: rgba(255, 255, 255, 0.45);
  margin: 0;
}


/* ============================================================
   3. CORTINA DE TRANSIÇÃO ENTRE PÁGINAS
   Sobe de baixo com o nome do destino, navega, e recolhe para
   cima na chegada. Mesmo azul, mesma matéria da cortina de
   abertura — é a mesma cortina, em outro momento da peça.
   ============================================================ */

.cinema-veil {
  position: fixed;
  inset: 0;
  z-index: var(--cin-z-veil);
  display: grid;
  place-items: center;
  background: var(--mult-azul-profundo);
  clip-path: inset(100% 0% 0% 0%);   /* fechada: fora da tela, embaixo */
  pointer-events: none;
  will-change: clip-path;
}
.cinema-veil.is-active { pointer-events: auto; }

.cinema-veil__box {
  display: grid;
  justify-items: center;
  text-align: center;
}

.cinema-veil__label {
  font-family: var(--font-brand);
  font-size: 11px;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  text-align: center;
  color: var(--mult-areia);
  opacity: 0;
  margin: 0;
  padding-inline: var(--ed-gutter, 24px);
}
/* fio curto sob o nome do destino — a assinatura de 1px */
.cinema-veil__rule {
  display: block;
  width: 40px;
  height: 1px;
  margin: 18px auto 0;
  background: var(--mult-amarelo-doca);
  transform: scaleX(0);
  transform-origin: center;
}


/* ============================================================
   4. CURSOR — ponto + anel com defasagem
   mix-blend-mode: difference resolve o problema de contraste sem
   inventar cor: o cursor lê sobre foto escura, sobre Areia e
   sobre Azul Profundo com a mesma tinta.
   Escape: <html data-cursor-blend="off"> volta ao branco puro.
   ============================================================ */

.cinema-cursor {
  position: fixed;
  top: 0;
  left: 0;
  z-index: var(--cin-z-cursor);
  pointer-events: none;
  opacity: 0;
  color: var(--mult-branco);
  mix-blend-mode: difference;
}
html[data-cursor-blend="off"] .cinema-cursor { mix-blend-mode: normal; }

.cinema-cursor__dot,
.cinema-cursor__ring {
  position: absolute;
  top: 0;
  left: 0;
  border-radius: 50%;
}
.cinema-cursor__dot {
  width: 6px;
  height: 6px;
  margin: -3px 0 0 -3px;
  background: currentColor;
}
.cinema-cursor__ring {
  width: 34px;
  height: 34px;
  margin: -17px 0 0 -17px;
  border: 1px solid var(--cin-areia-55);
  background: transparent;
  display: grid;
  place-items: center;
}
/* estado expandido: o motor anima width/height via GSAP e liga esta
   classe só para o fundo de vidro (transição curta, sem layout) */
.cinema-cursor__ring.is-filled { background: var(--cin-areia-12); }

.cinema-cursor__label {
  font-family: var(--font-brand);
  font-size: 11px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  white-space: nowrap;
  color: currentColor;
  opacity: 0;
}

/* Cursor nativo escondido apenas enquanto o customizado está vivo.
   Campos de texto mantêm o cursor do sistema — esconder o I-beam
   de um formulário é hostilidade, não sofisticação. */
html.cinema-cursor-on,
html.cinema-cursor-on * { cursor: none !important; }
html.cinema-cursor-on input,
html.cinema-cursor-on textarea,
html.cinema-cursor-on select,
html.cinema-cursor-on [contenteditable="true"] { cursor: auto !important; }


/* ============================================================
   5. BARRA DE PROGRESSO — a única régua visível
   Fio de 2px Amarelo Doca no topo. Nunca ganha fundo, nunca
   ganha sombra, nunca ganha rótulo.
   ============================================================ */

.cinema-progress {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  z-index: var(--cin-z-progress);
  background: var(--mult-amarelo-doca);
  transform: scaleX(0);
  transform-origin: left center;
  pointer-events: none;
}


/* ============================================================
   6. SEQUÊNCIA EM CANVAS — o efeito-assinatura
   O contêiner é uma tela inteira; o canvas cobre por baixo, o
   véu em gradiente vem por cima da imagem e o conteúdo
   editorial flutua acima dos dois.
   ============================================================ */

.cinema-seq {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: 100vh;
  min-height: 100svh;
  padding-block: clamp(72px, 9vw, 140px);
  padding-inline: var(--ed-gutter, 24px);
  background: var(--mult-azul-profundo);
  overflow: hidden;
  isolation: isolate;
  /* contexto escuro: o texto por cima herda o jogo invertido.
     Aqui o fundo não é uma foto escolhida — são 96 quadros que passam,
     e vários deles são telhado branco de galpão visto de cima. Os
     papéis "soft" e "mute" do sistema (0.72 / 0.45) foram medidos
     nesses quadros e reprovaram: 2,3:1 no eyebrow. Sobre a sequência
     eles sobem um degrau. A hierarquia continua existindo — ela só
     deixa de ser feita no limite da legibilidade. */
  --ed-fg: var(--mult-branco);
  --ed-fg-soft: rgba(255, 255, 255, 0.92);
  --ed-fg-mute: rgba(255, 255, 255, 0.76);
  --ed-hairline: rgba(255, 255, 255, 0.20);
  /* Véu próprio da sequência: mais corpo que o véu de hero na faixa
     de cima e no meio, onde as frases vivem — e ainda um gradiente de
     verdade (0.46 → 0.90), nunca o bloco chapado que reprovou a v1. */
  --cin-seq-veil: linear-gradient(180deg,
              rgba(8, 28, 43, 0.70) 0%,
              rgba(8, 28, 43, 0.46) 34%,
              rgba(8, 28, 43, 0.54) 64%,
              rgba(8, 28, 43, 0.90) 100%);
  color: var(--ed-fg);
}

.cinema-seq__canvas {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: block;
  width: 100%;
  height: 100%;
  /* mesmo tratamento fotográfico das .figure do sistema editorial */
  filter: saturate(0.88) contrast(1.04);
}

/* Véu SEMPRE em gradiente — nunca bloco chapado.
   A página inteira ganha o véu da sequência (--cin-seq-veil); quem
   declarar --fig-veil na própria seção continua mandando. */
.cinema-seq::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: var(--fig-veil, var(--cin-seq-veil,
              linear-gradient(180deg,
                rgba(8, 28, 43, 0.70) 0%,
                rgba(8, 28, 43, 0.46) 34%,
                rgba(8, 28, 43, 0.54) 64%,
                rgba(8, 28, 43, 0.90) 100%)));
}
.cinema-seq--veil-none::after { display: none; }

/* ------------------------------------------------------------
   SCRIM LOCAL — o que garante o contraste de fato
   ------------------------------------------------------------
   Um véu de página inteira calibrado para o pior quadro escurece
   os 96 quadros inteiros: a fotografia morre para salvar três
   frases. Aqui o corpo pesado fica ONDE O TEXTO ESTÁ — uma
   elipse muito aberta, centrada no bloco de texto, somada a uma
   faixa suave que cobre a altura dele. As bordas do quadro
   continuam abertas, o sobrevoo continua sendo o assunto.

   Medido sobre telhado branco de galpão (o pior fundo da série),
   com saturate(.88) contrast(1.04) aplicado, em 390x844:
     · frase display (branco puro) ..... ~8,0:1   (exige 3:1)
     · eyebrow 11px (--ed-fg-mute) ..... ~4,9:1   (exige 4,5:1)
   Antes: 1,51:1 na frase e 2,31:1 no eyebrow.
   ------------------------------------------------------------ */
.cinema-seq__inner {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: var(--ed-max, 1440px);
  margin-inline: auto;
  /* halo curto colado no desenho da letra + o brilho longo de antes */
  text-shadow: 0 1px 3px rgba(8, 28, 43, 0.55),
               0 1px 40px rgba(8, 28, 43, 0.5);
}
.cinema-seq__inner::before {
  content: "";
  position: absolute;
  inset: -8% -5%;
  z-index: -1;                  /* acima do véu, abaixo do texto */
  pointer-events: none;
  background:
    radial-gradient(ellipse 74% 62% at 50% 50%,
      rgba(8, 28, 43, 0.40) 0%,
      rgba(8, 28, 43, 0.30) 55%,
      rgba(8, 28, 43, 0.08) 82%,
      rgba(8, 28, 43, 0) 100%),
    linear-gradient(180deg,
      rgba(8, 28, 43, 0) 0%,
      rgba(8, 28, 43, 0.20) 9%,
      rgba(8, 28, 43, 0.20) 91%,
      rgba(8, 28, 43, 0) 100%);
}
/* Quem dispensa o véu de página dispensa também o scrim. */
.cinema-seq--veil-none .cinema-seq__inner::before { display: none; }

/* Enquanto o pin está ativo o contêiner não pode encolher. */
.cinema-seq.is-pinned { will-change: transform; }


/* ============================================================
   7. GALERIA ARRASTÁVEL
   Trilho horizontal com inércia. Sem setas, sem pontinhos: o
   gesto é o controle, e o teclado é o atalho de acessibilidade.
   ============================================================ */

.cinema-drag {
  position: relative;
  overflow: hidden;
  padding-inline: var(--ed-gutter, 24px);
}
.cinema-drag:focus-visible {
  outline: 1px solid var(--mult-amarelo-doca);
  outline-offset: 6px;
}
.cinema-drag__track,
[data-drag-track] {
  display: flex;
  align-items: stretch;
  gap: clamp(16px, 2.4vw, 40px);
  width: max-content;
}
.cinema-drag.is-dragging { user-select: none; }
/* Item padrão do trilho: retrato editorial, sem card e sem raio. */
.cinema-drag__item {
  flex: 0 0 auto;
  width: clamp(240px, 30vw, 460px);
  margin: 0;
}
.cinema-drag__item .figure { height: clamp(320px, 46vh, 620px); }


/* ============================================================
   8. UTILITÁRIOS DECLARATIVOS
   ============================================================ */

/* A diagonal roofline varre a seção ao entrar. O estado inicial
   fica no CSS para não haver quadro de conteúdo "solto" antes do
   GSAP assumir — e só quando o motion está ligado. */
.motion-ok [data-wipe] { will-change: clip-path; }

/* Texto que vai ser embaralhado não pode dar salto de largura. */
[data-scramble] { font-variant-numeric: tabular-nums; }

/* Alvo com rótulo de cursor: mantém a área clicável honesta. */
[data-cursor] { cursor: pointer; }


/* ============================================================
   9. DEGRADAÇÕES
   ?nomotion e prefers-reduced-motion desligam o teatro inteiro.
   A página continua íntegra: o canvas mostra o primeiro quadro,
   nada é escondido, nada depende de animação para existir.
   ============================================================ */

html[data-cinema="off"] .cinema-cursor,
html[data-cinema="off"] .cinema-progress,
html[data-cinema="off"] .cinema-veil { display: none !important; }

html[data-cinema="off"] .cinema-seq { min-height: 78vh; }

@media (prefers-reduced-motion: reduce) {
  .cinema-cursor,
  .cinema-progress,
  .cinema-veil { display: none !important; }
  .cinema-preloader { transition: none !important; }
  .cinema-seq { min-height: 78vh; }
}

/* Toque: sem cursor, sem magnetismo, sequência mais curta. */
@media (hover: none), (pointer: coarse) {
  .cinema-cursor { display: none !important; }
  html.cinema-cursor-on,
  html.cinema-cursor-on * { cursor: auto !important; }
}

@media (max-width: 1023px) {
  .cinema-seq { min-height: 92vh; }
  .cinema-drag__item { width: clamp(220px, 74vw, 380px); }
}

/* Impressão: nenhuma peça do motor existe no papel. */
@media print {
  .cinema-preloader,
  .cinema-veil,
  .cinema-cursor,
  .cinema-progress { display: none !important; }
}

/* Promoção de camada só com motion ligado (gate .motion-ok) —
   sem motion, nenhum elemento fica promovido à toa. */
.motion-ok .cinema-preloader__bar { will-change: transform; }
.motion-ok .cinema-cursor { will-change: transform; }
.motion-ok .cinema-cursor__ring { will-change: transform; }
.motion-ok .cinema-progress { will-change: transform; }
.motion-ok [data-drag-track] { will-change: transform; }
.motion-ok [data-magnetic] { will-change: transform; }
.motion-ok [data-parallax-layer] { will-change: transform; }

/* Refino do celular (HP-177): o véu do texto vai até a borda da seção
   (que já corta o excesso); com -5% ele terminava a 7px da borda e
   desenhava duas emendas verticais sobre a foto. */
@media (max-width: 1023px) {
  .cinema-seq__inner::before {
    left: calc(-1 * var(--ed-gutter, 24px));
    right: calc(-1 * var(--ed-gutter, 24px));
  }
}