/* Cena da rolagem: vídeo preso na tela, véu, grão, escurecimento e painéis. */

.trilha{
  position:relative;
  height:450vh;
}
.cena{
  position:sticky;
  top:0;
  height:100vh;
  height:100svh;
  overflow:hidden;
  background:var(--bg) center/cover no-repeat;
}
.cena video{
  position:absolute;
  top:50%;
  left:50%;
  width:100%;
  height:100%;
  transform:translate(-50%,-50%) scale(1.02);
  object-fit:cover;
  filter:contrast(1.02);
  will-change:transform;
}

/* Véu escuro, mais forte em cima e embaixo, onde ficam cabeçalho e rodapé */
.veu{
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    linear-gradient(to bottom, rgba(10,10,10,.62) 0%, rgba(10,10,10,.12) 22%, rgba(10,10,10,.12) 78%, rgba(10,10,10,.66) 100%),
    radial-gradient(100% 80% at 50% 48%, rgba(10,10,10,0) 0%, rgba(10,10,10,.34) 100%),
    rgba(10,10,10,.20);
}
.escurecer{
  position:absolute;
  inset:0;
  background:var(--bg);
  opacity:0;
  pointer-events:none;
}

/* Barra de progresso da trilha + marcações de mira a 1/3 e 2/3 */
.medidor{
  position:fixed;
  top:0;
  left:0;
  z-index:50;
  height:2px;
  width:100%;
  transform:scaleX(0);
  transform-origin:0 50%;
  background:var(--fg);
  opacity:.55;
  transition:opacity .3s linear;
}
body::after{
  content:"";
  position:fixed;
  top:0;
  left:0;
  right:0;
  height:6px;
  z-index:50;
  pointer-events:none;
  background:
    linear-gradient(var(--rule), var(--rule)) calc(100% / 3) 0 / 1px 100% no-repeat,
    linear-gradient(var(--rule), var(--rule)) calc(200% / 3) 0 / 1px 100% no-repeat;
  transition:opacity .3s linear;
}
.alem-da-trilha .medidor,
.alem-da-trilha body::after{ opacity:0; }

/* Painéis: controlados pelo loop rAF do cena.js (sem transition aqui, de propósito) */
.paineis{
  position:absolute;
  inset:0;
  z-index:20;
  pointer-events:none;
}
.painel{
  position:absolute;
  inset:0;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding:max(104px, calc(env(safe-area-inset-top, 0px) + 88px)) clamp(20px, 5vw, 60px) max(96px, calc(env(safe-area-inset-bottom, 0px) + 80px));
  opacity:0;
  will-change:opacity,transform;
  text-shadow:0 2px 28px rgba(0,0,0,.65);
}
.painel .rotulo{
  margin-bottom:clamp(16px, 2vw, 22px);
  max-width:min(46ch, 100%);
  color:var(--fg);
  opacity:.8;
}
.painel h1{
  font-family:var(--fonte-titulo);
  font-weight:800;
  font-size:clamp(40px, 8.2vw, 124px);
  line-height:.92;
  letter-spacing:.005em;
  text-transform:uppercase;
  max-width:15ch;
  text-wrap:balance;
}
.painel .sub{
  margin-top:clamp(18px, 2.2vw, 28px);
  font-size:clamp(15px, 1.28vw, 19px);
  line-height:1.5;
  color:var(--fg);
  opacity:.82;
  max-width:min(46ch, 100%);
  text-wrap:pretty;
}
.painel .cta{
  margin-top:clamp(28px, 3.4vw, 44px);
  pointer-events:auto;
  width:100%;
  display:flex;
  justify-content:center;
}
.painel .cta .pilula{
  min-height:48px;
  padding:0 27px;
  font-size:13.5px;
  max-width:min(100%, 320px);
  text-shadow:none;
}

@media (max-width:900px){
  .veu{
    background:
      linear-gradient(to bottom, rgba(10,10,10,.72) 0%, rgba(10,10,10,.18) 24%, rgba(10,10,10,.18) 76%, rgba(10,10,10,.74) 100%),
      radial-gradient(100% 80% at 50% 48%, rgba(10,10,10,0) 0%, rgba(10,10,10,.40) 100%),
      rgba(10,10,10,.24);
  }
}

@media (max-width:720px){
  .painel h1{ max-width:12ch; font-size:clamp(36px, 11vw, 60px); }
  .painel .sub{ font-size:15px; max-width:34ch; }
  .painel{ padding:max(92px, calc(env(safe-area-inset-top, 0px) + 76px)) 18px max(88px, calc(env(safe-area-inset-bottom, 0px) + 72px)); }
}

@media (max-width:420px){
  .painel h1{ max-width:11ch; font-size:clamp(34px, 12vw, 46px); }
  .painel .rotulo{ font-size:11px; letter-spacing:.1em; max-width:28ch; }
  .painel .cta .pilula{ width:100%; max-width:280px; min-height:44px; padding:0 20px; }
}

@media (max-height:520px) and (orientation:landscape){
  .painel{ padding:max(72px, calc(env(safe-area-inset-top, 0px) + 56px)) 24px max(64px, calc(env(safe-area-inset-bottom, 0px) + 48px)); }
  .painel h1{ font-size:clamp(30px, 9vh, 48px); }
  .painel .sub{ margin-top:12px; font-size:14px; }
  .painel .cta{ margin-top:16px; }
}

/* Movimento reduzido: sem vídeo controlado pela rolagem; painéis empilhados sobre o pôster */
.reduzido .trilha{ height:auto; }
.reduzido .cena{ position:relative; height:auto; }
.reduzido .cena video{ display:none; }
.reduzido .paineis{ position:relative; }
.reduzido .painel{ position:relative; opacity:1; transform:none; min-height:100vh; }
.reduzido .medidor,
.reduzido body::after{ display:none; }