/* ===== o filme: hero em tela cheia preso à rolagem ===== */
.filme{position:relative;height:540vh;background:#000}
.filme-pin{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden}
.filme-canvas{position:absolute;inset:0;width:100%;height:100%;display:block;background:#000}
.filme-vinheta{position:absolute;inset:0;pointer-events:none;background:linear-gradient(#000a,transparent 20%,transparent 62%,#000c)}

/* sem cabeçalho durante o filme */
.tem-filme .topo{transition:transform .6s cubic-bezier(.22,1,.36,1),background .3s}
.tem-filme.topo-oculto .topo{transform:translateY(-120%)}

.peca{
  position:absolute;z-index:2;bottom:clamp(56px,13vh,130px);width:min(560px,calc(100% - 44px));
  opacity:0;pointer-events:none;
  transition:opacity .55s ease,translate .9s cubic-bezier(.22,1,.36,1);
  text-shadow:0 2px 36px #000,0 0 6px #0008;
}
.peca[data-lado="esq"]{left:clamp(22px,5vw,84px);translate:-70px 0}
.peca[data-lado="dir"]{right:clamp(22px,5vw,84px);translate:70px 0;text-align:right;justify-items:end}
.peca[data-lado="meio"]{left:50%;margin-left:calc(min(560px,100% - 44px) / -2);translate:0 40px;text-align:center;justify-items:center}
.peca{display:grid;gap:14px}
.peca.on{opacity:1;translate:0 0;pointer-events:auto}
.peca-rotulo{font-family:var(--nav);font-size:.88rem;letter-spacing:.22em;text-transform:uppercase;color:#ffb829}
.peca h2,.peca h1{font-size:clamp(2.6rem,6.4vw,6.2rem);line-height:1;letter-spacing:-.04em;color:#fff;max-width:11ch;text-wrap:balance}
.peca h1 em,.peca h2 em{font-style:normal;color:var(--laranja)}
.peca p{font-family:Inter,system-ui,sans-serif;font-weight:200;font-size:clamp(1.05rem,1.4vw,1.2rem);line-height:1.5;color:#e4e0d8;max-width:40ch}
.peca .acoes{margin-top:8px}
.peca[data-lado="meio"] .acoes{justify-content:center}
.peca .btn{border-radius:24px}
.peca .btn-ghost{border-color:transparent;color:#fff}

/* abertura maior, perto do centro de baixo */
.peca-abertura{bottom:clamp(72px,16vh,160px)}
.peca-abertura h1{font-size:clamp(2.8rem,7.4vw,7.4rem);max-width:12ch}

.filme-prog{position:absolute;left:0;bottom:0;height:3px;width:100%;background:var(--laranja);transform-origin:left;transform:scaleX(0);z-index:3}
.filme-carga{position:absolute;left:0;top:0;height:2px;width:100%;background:#ffffff55;transform-origin:left;transform:scaleX(0);z-index:3;transition:opacity .6s}
.filme-dica{
  position:absolute;left:50%;bottom:78px;translate:-50% 0;z-index:3;transition:opacity .4s;
  font-family:var(--nav);text-transform:uppercase;letter-spacing:.26em;font-size:.76rem;color:#fff;
  display:grid;justify-items:center;gap:6px;pointer-events:none;
}
.filme-dica::after{content:"";width:1px;height:28px;background:linear-gradient(var(--laranja),transparent);animation:dicaF 1.8s ease-in-out infinite}
@keyframes dicaF{0%{transform:scaleY(0);transform-origin:top}50%{transform:scaleY(1);transform-origin:top}51%{transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}

@media (max-width:900px){
  .filme{height:480vh}
  .filme-vinheta{background:linear-gradient(#000a,transparent 18%,transparent 40%,#000e 82%)}
  .peca,.peca[data-lado]{left:22px;right:22px;margin-left:0;width:auto;text-align:left;justify-items:start;bottom:clamp(40px,9vh,90px);translate:0 40px}
  .peca.on,.peca[data-lado].on{translate:0 0}
  .peca[data-lado="meio"] .acoes{justify-content:flex-start}
  .peca h2,.peca h1{font-size:clamp(2.3rem,11vw,3.6rem)}
}
@media (prefers-reduced-motion:reduce){
  .filme{height:auto}
  .filme-pin{position:relative}
  .peca{transition:none}
}