/* cinema.css — camada de movimento da home italocosta.ai (proposta 07/10/2026)
   As 5 escolhas: tipografia Bricolage + Plex Mono · grade 1200px/24px · ritmo 70ms de stagger ·
   easing --ease-saida · paleta navy #113353/#081A2C + laranja #ef6d2f (uma cor de destaque). */
:root{
  --cx-navy:#113353; --cx-fundo:#081a2c; --cx-laranja:#ef6d2f; --cx-txt:#eef4fa; --cx-sec:#8ca3bc;
  --dur-micro:150ms; --dur-curta:350ms; --dur-media:500ms; --dur-longa:1100ms; --stagger:70ms;
  --ease-saida:cubic-bezier(.16,1,.3,1); --ease-meio:cubic-bezier(.65,0,.35,1); --ease-mola:cubic-bezier(.34,1.56,.64,1);
}

/* textura de película + vinheta: o que tira a cara de "template" */
body::after{content:"";position:fixed;inset:0;z-index:90;pointer-events:none;opacity:.05;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}

/* ---------- barra de capítulos 01-08 (HUD do topo) ---------- */
.cx-cap{position:fixed;left:0;right:0;top:var(--cx-head,67px);z-index:59;height:3px;display:flex;gap:3px;padding:0 3px;
  opacity:0;transition:opacity var(--dur-media) var(--ease-saida)}
.cx-cap.on{opacity:1}
.cx-cap a{flex:1;position:relative;background:rgba(255,255,255,.08);border-radius:2px;overflow:hidden}
.cx-cap a::after{content:"";position:absolute;inset:0;background:var(--cx-laranja);transform-origin:left;transform:scaleX(var(--p,0));transition:transform var(--dur-micro) linear}
.cx-cap a span{position:absolute;top:8px;left:0;font:600 10px/1 'IBM Plex Mono','Plex Mono Reserva',monospace;letter-spacing:.14em;color:var(--cx-sec);
  white-space:nowrap;opacity:0;transform:translateY(-4px);transition:all var(--dur-curta) var(--ease-saida);pointer-events:none}
.cx-cap a.atual span{opacity:1;transform:none;color:var(--cx-laranja)}

/* ---------- hero: recorte com o título atrás da cabeça ---------- */
.cx-stage{position:relative;aspect-ratio:900/1100;isolation:isolate}
.cx-stage::before{content:"";position:absolute;inset:8% -6% -4%;z-index:-2;border-radius:50%;
  background:radial-gradient(closest-side,rgba(239,109,47,.34),rgba(239,109,47,.08) 60%,transparent);filter:blur(10px);
  animation:cxRespira 7s var(--ease-meio) infinite}
.cx-stage::after{content:"";position:absolute;inset:0;z-index:-3;opacity:.5;
  background-image:linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px);
  background-size:44px 44px;mask-image:radial-gradient(closest-side,#000 40%,transparent)}
.cx-behind{position:absolute;inset:7% -6% auto;z-index:0;display:flex;flex-direction:column;align-items:center;
  font-family:'Bricolage Grotesque','Bricolage Reserva','Bricolage Reserva Android',sans-serif;font-weight:800;line-height:.86;letter-spacing:-.04em;text-align:center;
  transform:translateY(calc(var(--cx-sy,0) * -40px))}
.cx-behind span{display:block;opacity:0;animation:cxRasga var(--dur-longa) var(--ease-saida) both}
.cx-b1{font-size:clamp(60px,9.4vw,136px);color:transparent;-webkit-text-stroke:1.5px rgba(238,244,250,.34);animation-delay:.55s!important}
.cx-b2{color:var(--cx-sec);letter-spacing:.32em!important;font-family:'IBM Plex Mono','Plex Mono Reserva',monospace!important;font-weight:600!important;margin:0 0 .3em;font-size:clamp(11px,1vw,13px)!important;animation-delay:.25s!important}
.cx-b3{font-size:clamp(60px,9.4vw,136px);color:var(--cx-laranja);text-shadow:0 0 60px rgba(239,109,47,.45);animation-delay:.4s!important}
.cx-cut{position:absolute;z-index:1;left:50%;bottom:0;width:72%;height:auto;transform-origin:50% 100%;
  transform:translateX(-50%) translate(calc(var(--cx-mx,0) * 10px),calc(var(--cx-sy,0) * 24px));
  -webkit-mask-image:linear-gradient(#000 82%,transparent);mask-image:linear-gradient(#000 82%,transparent);
  animation:cxEntraFoto 1.2s var(--ease-saida) .1s both;filter:drop-shadow(0 30px 40px rgba(0,0,0,.45))}
.cx-hud{position:absolute;inset:0 0 auto;z-index:2;display:flex;justify-content:space-between;
  font:600 10px/1 'IBM Plex Mono','Plex Mono Reserva',monospace;letter-spacing:.18em;color:rgba(140,163,188,.7);animation:cxSobe var(--dur-media) var(--ease-saida) .9s both}
.cx-hud span:first-child::before{content:"";display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--cx-laranja);margin-right:8px;animation:pulseDot 2.2s infinite}
.cx-card{position:absolute;z-index:3;background:rgba(17,51,83,.88);border:1px solid rgba(255,255,255,.13);border-radius:14px;padding:12px 15px;
  backdrop-filter:blur(10px);box-shadow:0 18px 40px -18px rgba(0,0,0,.7);
  opacity:0;animation:cxCard .7s var(--ease-mola) both, floaty 6s ease-in-out infinite;
  transform:translate(calc(var(--cx-mx,0) * var(--d,14px)),calc(var(--cx-my,0) * var(--d,14px)))}
.cx-card-n{font-family:'Bricolage Grotesque','Bricolage Reserva','Bricolage Reserva Android',sans-serif;font-size:26px;font-weight:800;color:var(--cx-laranja);line-height:1}
.cx-card-l{font:600 11px/1.2 'IBM Plex Mono','Plex Mono Reserva',monospace;letter-spacing:.1em;text-transform:uppercase;color:var(--cx-sec);margin-top:4px}
.cx-card-a{left:2%;bottom:6%;animation-delay:1s,1.7s;--d:18px}
.cx-card-b{right:-4%;top:50%;animation-delay:1.15s,2.4s;--d:-14px}
.cx-card-c{left:-6%;top:62%;font-size:13px;font-weight:600;color:var(--cx-txt);animation-delay:1.3s,3s;--d:10px;rotate:-3deg}
.cx-ok{display:inline-grid;place-items:center;width:18px;height:18px;border-radius:50%;background:#2fbf71;color:#fff;font-size:11px;margin-right:6px}

/* h1 que se monta palavra a palavra */
.cx-w{display:inline-block;filter:blur(8px);transform:translateY(.35em);
  animation:cxPalavra .6s var(--ease-saida) both;animation-delay:calc(var(--i) * var(--stagger))}
h1 .cx-w-grad{background:linear-gradient(120deg,#f8c3a4,var(--cx-laranja) 55%,#d4561f);-webkit-background-clip:text;background-clip:text;color:transparent}

/* h2 em karaokê: a palavra acende quando passa pela leitura */
.cx-k{opacity:.32;transition:opacity var(--dur-curta) var(--ease-saida),color var(--dur-curta)}
.cx-k.on{opacity:1}
.cx-k.on.cx-k-hot{color:var(--cx-laranja)}

/* revelar ao rolar */
.cx-rv{opacity:0;transform:translateY(22px);filter:blur(6px);transition:opacity var(--dur-media) var(--ease-saida),transform .7s var(--ease-saida),filter var(--dur-media) var(--ease-saida);transition-delay:calc(var(--i,0) * var(--stagger))}
.cx-rv.in{opacity:1;transform:none;filter:none}

/* cards de área: inclinação 3D + holofote que segue o cursor */
.cx-tilt{transform:perspective(900px) rotateX(var(--rx,0)) rotateY(var(--ry,0));transition:transform var(--dur-curta) var(--ease-saida),box-shadow var(--dur-curta);will-change:transform;position:relative}
.cx-tilt::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0;transition:opacity var(--dur-micro);
  background:radial-gradient(260px circle at var(--hx,50%) var(--hy,50%),rgba(239,109,47,.16),transparent 60%)}
.cx-tilt:hover::before{opacity:1}
.cx-tilt:hover{box-shadow:0 30px 60px -30px rgba(239,109,47,.45)}

/* terminal de prova de trabalho */
.cx-term{margin-top:30px;max-width:680px;border-radius:14px;overflow:hidden;border:1px solid rgba(255,255,255,.1);background:#06182a;
  box-shadow:0 30px 70px -35px rgba(0,0,0,.9),0 0 0 1px rgba(239,109,47,.05)}
.cx-term-bar{display:flex;align-items:center;gap:7px;padding:10px 14px;background:rgba(255,255,255,.03);border-bottom:1px solid rgba(255,255,255,.07)}
.cx-term-bar i{width:9px;height:9px;border-radius:50%;background:rgba(255,255,255,.14)}
.cx-term-bar span{margin-left:8px;font:500 12px/1.4 'IBM Plex Mono','Plex Mono Reserva',monospace;color:var(--cx-sec);letter-spacing:.04em}
.cx-term-body{padding:16px 18px 18px;font:500 13.5px/1.9 'IBM Plex Mono','Plex Mono Reserva',monospace;color:#cddced}
.cx-line{opacity:0;transform:translateX(-8px);transition:all var(--dur-curta) var(--ease-saida)}
.cx-term.play .cx-line{opacity:1;transform:none}
.cx-prompt{color:var(--cx-txt);white-space:nowrap;overflow:hidden;width:0;border-right:2px solid var(--cx-laranja);max-width:100%}
.cx-term.play .cx-prompt{width:100%;transition:width 1.6s steps(60) .1s,opacity .1s;animation:cxCursor .8s step-end 2.2s 3 forwards}
.cx-dim{color:var(--cx-sec)}
.cx-prog{display:inline-block;vertical-align:middle;width:150px;height:6px;border-radius:3px;background:rgba(255,255,255,.08);margin-left:10px;overflow:hidden}
.cx-prog i{display:block;height:100%;width:0;background:var(--cx-laranja);transition:width 1.2s var(--ease-meio) 2s}
.cx-term.play .cx-prog i{width:100%}
.cx-check em,.cx-falta em{font-style:normal;margin-left:10px;padding:1px 8px;border-radius:5px;font-size:11px;letter-spacing:.08em;text-transform:uppercase}
.cx-check::before{content:"✓ ";color:#2fbf71}
.cx-check em{color:#2fbf71;background:rgba(47,191,113,.1)}
.cx-falta::before{content:"! ";color:var(--cx-laranja)}
.cx-falta em{color:#081a2c;background:var(--cx-laranja);animation:cxPulsa 1.4s ease-in-out 4.6s infinite}
.cx-term.play .cx-line:nth-child(2){transition-delay:1.8s}
.cx-term.play .cx-line:nth-child(3){transition-delay:3.3s}
.cx-term.play .cx-line:nth-child(4){transition-delay:3.6s}
.cx-term.play .cx-line:nth-child(5){transition-delay:3.9s}
.cx-term.play .cx-line:nth-child(6){transition-delay:4.3s}

/* carimbo VENCIDO no que não funciona */
.cx-venc{background:linear-gradient(var(--cx-laranja),var(--cx-laranja)) no-repeat 0 55%/0 1.5px;transition:background-size .6s var(--ease-meio),color .6s}
.cx-venc::after{content:"VENCIDO";display:inline-block;vertical-align:.15em;margin-left:6px;rotate:-6deg;scale:1.8;opacity:0;
  font:700 9px/1 'IBM Plex Mono','Plex Mono Reserva',monospace;letter-spacing:.14em;color:var(--cx-laranja);border:1.5px solid var(--cx-laranja);border-radius:4px;padding:2px 5px;
  transition:scale .35s var(--ease-mola) .5s,opacity .2s .5s}
.cx-venc.in{background-size:100% 1.5px;color:#8ba1b7}
.cx-venc.in::after{opacity:.95;scale:1}

/* contador */
.cx-num{font-variant-numeric:tabular-nums}

/* fechamento: escurece até a marca */
.cx-final{position:relative;isolation:isolate}
.cx-final::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:var(--cx-esc,0);
  background:radial-gradient(800px 400px at 50% 40%,rgba(239,109,47,.18),transparent 70%)}

canvas.cx-brasas{position:absolute;inset:0;z-index:0;pointer-events:none;width:100%;height:100%}

@keyframes cxEntraFoto{from{transform:translateX(-50%) scale(1.08);filter:blur(14px) drop-shadow(0 30px 40px rgba(0,0,0,.45))}to{opacity:1}}
@keyframes cxRasga{from{opacity:0;transform:translateY(30px) scaleY(1.2);filter:blur(10px)}to{opacity:1;transform:none;filter:none}}
@keyframes cxSobe{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@keyframes cxCard{from{opacity:0;scale:.85}to{opacity:1;scale:1}}
@keyframes cxPalavra{to{filter:none;transform:none}}
@keyframes cxRespira{0%,100%{opacity:.85;transform:scale(1)}50%{opacity:1;transform:scale(1.05)}}
@keyframes cxPulsa{0%,100%{box-shadow:0 0 0 0 rgba(239,109,47,.6)}50%{box-shadow:0 0 0 7px rgba(239,109,47,0)}}
@keyframes cxCursor{50%{border-color:transparent}to{border-color:transparent}}

@media (max-width:900px){
  .cx-stage{max-width:440px;margin:8px auto 0;width:100%}
  .cx-card-a{left:0;bottom:8%}.cx-card-b{right:0;top:58%}.cx-card-c,.cx-hud{display:none}
  .cx-cap a span{display:none}
  .cx-prog{width:90px}
  .cx-term-body{font-size:12px}
  .cx-prompt,.cx-term.play .cx-prompt{white-space:normal;width:auto;border-right:0;transition:opacity var(--dur-curta)}
  .cx-venc{white-space:normal}
}
@media (prefers-reduced-motion:reduce){
  .cx-w,.cx-behind span,.cx-cut,.cx-card,.cx-hud,.cx-line,.cx-rv{opacity:1!important;filter:none!important;transform:none!important;animation:none!important}
  .cx-cut{transform:translateX(-50%)!important}
  .cx-prompt{width:100%!important}.cx-prog i{width:100%!important}
  .cx-k{opacity:1!important}
  canvas.cx-brasas{display:none}
}