/* Camada cinematográfica do Manche.
   Só adiciona; não altera o markup nem o CSS da landing. Ligada pela classe .cin no <html>.
   Escala de z-index: header da página 30 · vinheta 44 · grão 45 · abertura 60 */

/* Lenis assume o scroll: o smooth nativo da página sai do caminho */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: hidden; }

/* ---------------------------------------------------------------- abertura + hero (só CSS) */
/* A abertura e a entrada do hero não dependem do JS: rodam assim que este CSS chega, então o
   título aparece no mesmo tempo com internet boa ou ruim (com JS, num notebook lento em 4G ruim,
   o LCP ia para 4,2 s). Classes postas pelo script do <head>: .cin-full (versão completa) e
   .cin-intro-on (abertura, uma vez por sessão). */
@keyframes cinLogo { 0% { opacity: 0; filter: blur(16px); transform: scale(1.1); } 45% { opacity: 1; filter: blur(0); transform: none; }
  78% { opacity: 1; } 100% { opacity: 0; visibility: hidden; } }
@keyframes cinLinha { to { background-size: min(220px, 50vw) auto, min(220px, 50vw) 1px; } }
@keyframes cinSobe { to { transform: translateY(-100%); visibility: hidden; } }
@keyframes cinDesce { to { transform: translateY(100%); visibility: hidden; } }
@keyframes cinFoco { from { opacity: 0; filter: blur(14px); transform: scale(1.04) translateY(10px); } to { opacity: 1; filter: blur(0); transform: none; } }
@keyframes cinCamera { from { opacity: 0; transform: perspective(1400px) translateY(90px) rotateX(16deg) scale(.94); } to { opacity: 1; transform: none; } }

/* logo + linha ciano, no centro */
.cin-intro-on body::before { content: ""; position: fixed; inset: 0; z-index: 61; pointer-events: none;
  background: url(../manche-wordmark-sm.png) center calc(50% - 12px) / min(220px, 50vw) auto no-repeat,
              linear-gradient(var(--accent, #22D4F5), var(--accent, #22D4F5)) center calc(50% + 30px) / 0 1px no-repeat;
  animation: cinLogo 1.35s cubic-bezier(.16,1,.3,1) .05s both, cinLinha .6s cubic-bezier(.7,0,.3,1) .35s both; }
/* cortina: duas metades que se abrem */
.cin-intro-on::before, .cin-intro-on::after { content: ""; position: fixed; left: 0; right: 0; height: 50.5%; z-index: 60; background: var(--bg-page, #0C0F12); pointer-events: none; }
.cin-intro-on::before { top: 0; animation: cinSobe .95s cubic-bezier(.87,0,.13,1) 1.15s both; }
.cin-intro-on::after { bottom: 0; animation: cinDesce .95s cubic-bezier(.87,0,.13,1) 1.15s both; }

/* hero: título sai do desfoque; cartão do sistema vem de baixo, como câmera subindo */
.cin-full #topo h1 { animation: cinFoco 1.4s cubic-bezier(.16,1,.3,1) .1s both !important; }
.cin-full #topo div:has(> .m-tour) { transform-origin: 50% 100%; animation: cinCamera 1.8s cubic-bezier(.16,1,.3,1) .35s both; }
.cin-full.cin-intro-on #topo h1 { animation-delay: 1.3s !important; }
.cin-full.cin-intro-on #topo div:has(> .m-tour) { animation-delay: 1.55s; }

/* ---------------------------------------------------------------- títulos de seção */
.cin h2:not(.cin-split) { opacity: 0; }
.cin .cw { display: inline-block; white-space: nowrap; }
.cin .cwi, .cin .cch { display: inline-block; }

/* ---------------------------------------------------------------- textura de filme */
/* sem mix-blend-mode: mistura em tela cheia obriga a GPU a recompor tudo a cada quadro de scroll */
.cin:not(.cin-lite) body::after { content: ""; position: fixed; inset: 0; z-index: 45; pointer-events: none; opacity: .035;
  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='.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 .9 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>"); }
.cin-vignette { position: fixed; inset: 0; z-index: 44; pointer-events: none; background: radial-gradient(ellipse 120% 95% at 50% 50%, transparent 62%, rgba(3,5,7,.42) 100%); }

/* luz que segue o cursor no topo (só mouse) */
.cin-spot { position: absolute; left: 0; top: 0; width: 760px; height: 760px; margin: -380px 0 0 -380px; border-radius: 50%; pointer-events: none; z-index: 0; opacity: 0;
  background: radial-gradient(circle, rgba(34,212,245,.13) 0%, rgba(34,212,245,.05) 40%, transparent 68%); transition: opacity .8s ease; will-change: transform; }
.cin-spot.on { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  .cin h2:not(.cin-split) { opacity: 1; }
  .cin-full #topo h1, .cin-full #topo div:has(> .m-tour) { animation: none !important; }
  .cin-intro-on body::before, .cin-intro-on::before, .cin-intro-on::after, .cin-spot, .cin-vignette { display: none; }
}