/* ============================================================================
   CAMADA CINEMATOGRÁFICA — aditiva. NÃO altera nenhum token do Design System.
   Tudo aqui é acabamento: profundidade de imagem, ritmo de entrada e leitura.
   Desligada por completo em (prefers-reduced-motion: reduce) — ver base.css.
   ============================================================================ */

:root{
  --ease-cine: cubic-bezier(0.16, 1, 0.3, 1);   /* expo-out: sai rápido, pousa devagar */
  --cine-dur: 1.05s;
}

/* ── 1. Heroes: vinheta + grão de filme ─────────────────────────────────────
   A vinheta fecha o quadro (olho vai ao centro); o grão tira o aspecto de
   render digital e dá textura de película. Ambos são pointer-events:none.   */

.tm-cine{ position: relative; isolation: isolate; }

.tm-cine::after{
  content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background: radial-gradient(125% 95% at 50% 42%, rgba(0,0,0,0) 45%, rgba(0,0,0,.30) 78%, rgba(0,0,0,.52) 100%);
}

.tm-grain::before{
  content:""; position:absolute; inset:-60%; z-index:1; pointer-events:none;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='160' height='160' filter='url(%23n)' opacity='0.55'/></svg>");
  opacity:.055; mix-blend-mode: overlay;
  animation: tm-grain 1.1s steps(4) infinite;
}
@keyframes tm-grain{
  0%   { transform: translate3d(0,0,0); }
  25%  { transform: translate3d(-3%,2%,0); }
  50%  { transform: translate3d(2%,-3%,0); }
  75%  { transform: translate3d(-2%,-2%,0); }
  100% { transform: translate3d(0,0,0); }
}

/* o conteúdo do hero sobe acima da vinheta e do grão */
.tm-cine > .tm-wrap, .tm-cine > div:last-of-type{ position: relative; z-index: 2; }

/* a imagem de fundo recebe o parallax/zoom via JS — nunca transiciona no scroll */
.tm-cine > img[data-cine-bg]{ will-change: transform; transform-origin: center 38%; }

/* ── 2. Ritmo de entrada ────────────────────────────────────────────────────
   Sobrescreve a curva do reveal existente (o !important vence o style inline
   que cada página aplica) e distribui os filhos no tempo via --d.            */

[data-reveal]{
  --d: 0ms;
  transition: opacity var(--cine-dur) var(--ease-cine) var(--d),
              transform var(--cine-dur) var(--ease-cine) var(--d) !important;
}

/* imagens dentro de um bloco revelado entram com um leve avanço de câmera */
[data-reveal] img, [data-reveal] .ds-quote{
  transform: scale(1.028);
  transition: transform 1.5s var(--ease-cine) var(--d);
}
[data-reveal].tm-in img, [data-reveal].tm-in .ds-quote{ transform: scale(1); }
.tm-cine img[data-cine-bg]{ transform: none; }   /* o hero é controlado pelo JS */

/* ── 3. Vida no hover (contida: 1.5%, sem estourar container) ─────────────── */

.tm-photo{
  transition: transform .9s var(--ease-cine), filter .9s var(--ease-cine), box-shadow .9s var(--ease-cine);
}
.tm-photo:hover{
  transform: scale(1.015) !important;
  filter: saturate(1.04) contrast(1.05) brightness(1.04);
}

/* ── 4. Experiência de leitura ──────────────────────────────────────────────
   `balance` evita título com uma palavra órfã na última linha;
   `pretty` evita a viúva no fim do parágrafo. Degradam em silêncio.          */

h1, h2, h3, blockquote{ text-wrap: balance; }
p, li, figcaption{ text-wrap: pretty; }

/* ── 5. Abertura: fade-from-black, uma vez, na primeira dobra ─────────────── */

#tm-fade{
  position: fixed; inset: 0; z-index: 999; pointer-events: none;
  background: #0F0B08; opacity: 1;
  transition: opacity .85s var(--ease-cine);
}
#tm-fade.tm-off{ opacity: 0; }

@media (prefers-reduced-motion: reduce){
  #tm-fade{ display: none; }
  .tm-grain::before{ animation: none; }
  [data-reveal] img, [data-reveal] .ds-quote{ transform: none; }
}