/* Camada de movimento do piloto (site-movimento). Usa os tokens do landing.css do eventos. */

/* ---------- filme de abertura ---------- */
.filme{position:relative;height:520vh;background:#000}
.filme .palco{position:sticky;top:0;height:100vh;overflow:hidden}
.filme canvas{width:100%;height:100%;display:block;transition:opacity .4s}
/* pôster = 1º quadro, visível até o canvas desenhar (antes ficava preto enquanto os quadros baixavam) */
.filme .palco{background:#0b0b0d url(../frames/f_0001.jpg) center/cover no-repeat}
.filme canvas:not([data-pronto]){opacity:0}
@media (max-width:719px) and (orientation:portrait){.filme .palco{background-image:url(../frames-v/f_0001.jpg),url(../frames/f_0001.jpg)}}
.filme .veu{position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(0,0,0,.5) 0%,rgba(0,0,0,.08) 34%,rgba(0,0,0,.1) 52%,rgba(0,0,0,.72) 100%)}
.filme .fim{position:absolute;inset:0;background:var(--bg);opacity:0;pointer-events:none}
.batida{position:absolute;left:0;right:0;padding:0 max(20px,calc((100vw - 1180px)/2 + 20px));opacity:0;will-change:opacity,transform;pointer-events:none}
.batida.alto{top:16vh}.batida.baixo{bottom:14vh}
.batida .selo{font:700 13px/1 var(--mono);letter-spacing:.18em;text-transform:uppercase;color:var(--amber);margin-bottom:18px}
.batida h2{font:800 clamp(40px,6.2vw,92px)/.95 var(--display);color:#fff;max-width:14ch;text-shadow:0 2px 6px rgba(0,0,0,.55),0 0 42px rgba(0,0,0,.5)}
.batida p{color:#fff;font-weight:700;font-size:clamp(17px,1.6vw,21px);max-width:34ch;margin-top:16px;text-shadow:0 1px 4px rgba(0,0,0,.7),0 0 24px rgba(0,0,0,.6)}
.capitulo{position:absolute;left:max(20px,calc((100vw - 1180px)/2 + 20px));bottom:28px;display:flex;align-items:center;gap:12px;
  font:700 12px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:#fff}
.capitulo .trilho{width:120px;height:2px;background:rgba(255,255,255,.25);border-radius:2px;overflow:hidden}
.capitulo .trilho i{display:block;height:100%;width:100%;background:var(--amber);transform-origin:left;transform:scaleX(0)}
.carregando{position:absolute;right:20px;top:20px;font:700 11px/1 var(--mono);color:rgba(255,255,255,.6);letter-spacing:.12em}

/* passagem: o painel real sobe por cima do painel filmado */
.filme + .partidas{position:relative;z-index:2;margin-top:-75vh;padding-top:30vh;
  background:linear-gradient(180deg,rgba(10,11,13,0) 0,rgba(10,11,13,.82) 22vh,var(--bg) 44vh)}

/* ---------- news: painel em loop ---------- */
.news-painel{margin:26px 0 0;border-radius:14px;overflow:hidden;border:1px solid var(--borda);aspect-ratio:16/9;background:#0c0d10}
.news-painel video{width:100%;height:100%;object-fit:cover;display:block}

/* ---------- áreas: moldura que desliza ---------- */
.vitrine{position:relative}
.moldura{position:absolute;left:0;top:0;width:0;height:0;border:2px solid var(--amber);border-radius:16px;pointer-events:none;
  box-shadow:0 0 0 4px rgba(245,192,74,.12),0 0 40px rgba(245,192,74,.25);opacity:0;z-index:3;
  transition:transform .42s cubic-bezier(.2,.9,.25,1.15),width .42s cubic-bezier(.2,.9,.25,1.15),height .42s cubic-bezier(.2,.9,.25,1.15),opacity .25s}

/* ---------- agenda: rota com avião ---------- */
.rota{display:block;width:100%;height:70px;margin:-6px 0 18px;overflow:visible}
.rota .trajeto{fill:none;stroke:var(--borda);stroke-width:2;stroke-dasharray:6 8}
.rota .feito{fill:none;stroke:var(--amber);stroke-width:2.5;stroke-linecap:round}
.rota .parada{fill:var(--painel);stroke:var(--borda);stroke-width:2}
.rota .parada.on{fill:var(--amber);stroke:var(--amber)}
.rota .aviao{fill:var(--amber)}

/* ---------- gravados: barra de gravação ---------- */
.gravados .wrap{position:relative}
.rec{display:flex;align-items:center;gap:12px;margin:0 0 18px;font:700 12px/1 var(--mono);letter-spacing:.14em;color:var(--mut)}
.rec .ponto{width:10px;height:10px;border-radius:50%;background:var(--amber);box-shadow:0 0 12px var(--amber);animation:rec-pisca 1.2s steps(2,end) infinite}
.rec .fita{flex:1;height:4px;background:var(--linha);border-radius:3px;overflow:hidden}
.rec .fita i{display:block;height:100%;width:100%;background:var(--amber);transform-origin:left;transform:scaleX(0)}
.rec .tempo{min-width:5ch;text-align:right;color:var(--ink)}
@keyframes rec-pisca{to{opacity:.25}}

/* ---------- ecossistema: as quatro portas ligadas ---------- */
.portas{position:relative}
.ligacao{position:absolute;left:0;top:0;width:100%;height:100%;pointer-events:none;overflow:visible;z-index:0}
.ligacao path{fill:none;stroke:var(--amber);stroke-width:2;stroke-linecap:round;opacity:.7}
.portas .porta{position:relative;z-index:1}

/* ---------- pro: arquivos entrando na pasta ---------- */
.pasta{display:block;width:180px;height:130px;margin:0 0 20px}
.pasta .fundo{fill:#1a1c21;stroke:var(--borda);stroke-width:2}
.pasta .frente{fill:#20232a;stroke:var(--amber);stroke-width:2}
.pasta .folha{fill:var(--ink);stroke:var(--borda)}
.pasta .linha-f{stroke:#9aa2ac;stroke-width:2;stroke-linecap:round}

/* ---------- rodapé: decolagem ---------- */
.rodape{position:relative;overflow:hidden;padding-top:64px}
.decola{position:absolute;left:0;top:0;width:100%;height:60px;pointer-events:none}
.decola .rastro{fill:none;stroke:rgba(245,192,74,.5);stroke-width:2;stroke-dasharray:4 6}
.decola .aviao{fill:var(--amber)}

@media (max-width:720px){
  .filme{height:420vh}
  .batida.alto{top:12vh}
  .rota{height:54px}
}
@media (prefers-reduced-motion:reduce){.rec .ponto{animation:none}}