/* Ask Mendoza — o voo de drone do herói. Canvas dirigido pela rolagem. */
.voo{position:relative;z-index:3;height:calc(100vh + var(--shots,11) * 75vh);height:calc(100svh + var(--shots,11) * 75svh);background:#160b11}
.voo-stage{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;isolation:isolate;background:#160b11}

/* Herói estático (missão 5e): sem maquete nem player; a foto do Aconcágua
   segura o quadro, com o título e o telefone por cima. */
.voo.voo-estatico{height:100vh;height:100svh;background:#0b1520}
.voo-heroi{position:absolute;inset:0;display:block;width:100%;height:100%}
.voo-heroi img{width:100%;height:100%;object-fit:cover;object-position:50% 55%;display:block}
/* o céu claro atrás do título pede um véu um pouco mais firme que no voo */
.voo-estatico .voo-intro::before{background:radial-gradient(ellipse 76% 66% at 50% 48%,rgba(8,5,10,.66) 0%,rgba(8,5,10,.44) 56%,rgba(8,5,10,0) 100%)}
@media (max-width:760px){.voo-heroi img{object-position:50% 52%}}
#voo-canvas,.voo-poster{position:absolute;inset:0;width:100%;height:100%;display:block}
#voo-canvas{opacity:0;transition:opacity .7s ease}
.voo.ready #voo-canvas{opacity:1}
.voo-poster{object-fit:cover;object-position:50% 50%;opacity:1;transition:opacity .7s ease}
.voo.ready .voo-poster{opacity:0}
.voo-shade{position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    linear-gradient(180deg,rgba(12,7,10,.56) 0%,rgba(12,7,10,.22) 13%,rgba(12,7,10,.06) 27%,rgba(12,7,10,0) 40%),
    linear-gradient(0deg,rgba(12,7,10,.9) 0%,rgba(12,7,10,.5) 16%,rgba(12,7,10,.16) 34%,rgba(12,7,10,0) 52%),
    radial-gradient(130% 90% at 50% 44%,transparent 52%,rgba(10,6,10,.44) 100%)}
.voo-end{position:absolute;inset:0;z-index:2;background:#160b11;opacity:0;pointer-events:none}

/* Intro: título, frase e o botão do guia sobre o primeiro quadro */
.voo-intro{position:absolute;inset:0;z-index:4;display:flex;flex-direction:column;align-items:center;
  justify-content:center;text-align:center;gap:clamp(10px,2vh,20px);
  padding:76px max(20px,env(safe-area-inset-right)) 30px max(20px,env(safe-area-inset-left))}
.voo-intro::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(ellipse 72% 64% at 50% 50%,rgba(10,6,10,.6) 0%,rgba(10,6,10,.34) 54%,rgba(10,6,10,0) 100%)}
.voo-kicker{margin:0;font-size:11.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--accent);
  font-weight:500;text-shadow:0 1px 8px rgba(0,0,0,.7)}
.voo-intro h1{font-family:var(--display);font-weight:500;letter-spacing:-.03em;line-height:.86;margin:0;
  font-size:clamp(52px,min(16.5vw,15vh),146px);text-wrap:balance;
  text-shadow:0 2px 40px rgba(0,0,0,.45),0 1px 3px rgba(0,0,0,.35)}
.voo-intro .tag{max-width:28ch;text-shadow:0 1px 14px rgba(0,0,0,.7)}
.cue{margin:2px 0 0;display:inline-flex;align-items:center;gap:9px;font-size:11px;letter-spacing:.16em;
  text-transform:uppercase;color:rgba(255,255,255,.76);text-shadow:0 1px 8px rgba(0,0,0,.7)}
.cue svg{width:15px;height:15px}
@media (prefers-reduced-motion:no-preference){
  .cue svg{animation:cue-bob 2.4s ease-in-out infinite}
  @keyframes cue-bob{0%,100%{transform:translateY(-2px);opacity:.7}50%{transform:translateY(3px);opacity:1}}
}
.skip{position:absolute;right:max(18px,env(safe-area-inset-right));bottom:max(16px,env(safe-area-inset-bottom));
  z-index:5;font-size:11.5px;letter-spacing:.03em;color:rgba(255,255,255,.6);
  text-decoration:underline;text-underline-offset:3px;padding:6px 4px;border-radius:6px}
.skip:hover{color:#fff}
.voo-load{position:absolute;left:50%;transform:translateX(-50%);top:max(62px,calc(env(safe-area-inset-top) + 62px));
  z-index:5;margin:0;font-size:11px;letter-spacing:.08em;text-transform:uppercase;
  color:rgba(255,255,255,.62);text-shadow:0 1px 6px rgba(0,0,0,.8);transition:opacity .4s ease}
.voo-load.off{opacity:0}

/* Legendas de cada tomada */
.voo-caps{position:absolute;left:0;right:0;bottom:0;z-index:3;margin:0;padding:0;
  list-style:none;pointer-events:none}
.voo-caps li{position:absolute;left:max(20px,env(safe-area-inset-left));right:max(64px,env(safe-area-inset-right));
  bottom:max(34px,calc(env(safe-area-inset-bottom) + 26px));opacity:0;transform:translateY(12px);
  transition:opacity .5s ease,transform .5s cubic-bezier(.2,.8,.2,1)}
.voo-caps li.on{opacity:1;transform:none}
.voo-caps .n{display:block;font-size:11px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--accent);font-weight:500;margin-bottom:9px;text-shadow:0 1px 8px rgba(0,0,0,.7)}
.voo-caps b{display:block;font-family:var(--display);font-weight:500;letter-spacing:-.02em;line-height:1.02;
  font-size:clamp(27px,5vw,50px);text-wrap:balance;text-shadow:0 2px 24px rgba(0,0,0,.55),0 1px 2px rgba(0,0,0,.4)}
.voo-caps i{display:block;font-style:normal;margin-top:10px;max-width:36ch;line-height:1.45;
  font-size:clamp(13.5px,1.6vw,15.5px);color:rgba(255,255,255,.84);text-shadow:0 1px 12px rgba(0,0,0,.75)}

/* Pontinhos do voo */
.voo-dots{position:absolute;right:max(16px,env(safe-area-inset-right));top:50%;transform:translateY(-50%);
  z-index:3;display:flex;flex-direction:column;gap:9px;margin:0;padding:0;list-style:none}
.voo-dots li{width:5px;height:5px;border-radius:50%;background:rgba(255,255,255,.32);
  transition:background .3s,transform .3s}
.voo-dots li.on{background:var(--accent);transform:scale(1.55)}

/* Conteúdo depois do voo */
.wrap{position:relative}
.wrap::before{content:"";position:absolute;left:0;right:0;top:-12vh;height:24vh;z-index:-1;
  background:linear-gradient(180deg,rgba(12,7,10,.9),transparent)}
.eyebrow{margin:0;font-size:11.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--accent);
  font-weight:500;text-shadow:0 1px 8px rgba(0,0,0,.6)}
.hero h2{font-family:var(--display);font-weight:500;letter-spacing:-.025em;line-height:.95;margin:0;
  font-size:clamp(30px,min(7.5vw,5vh),52px);text-wrap:balance;text-shadow:0 2px 30px rgba(0,0,0,.4)}

@media (prefers-reduced-motion:reduce){
  .voo{height:100vh;height:100svh}
  .voo-caps,.voo-dots,.cue,.skip,.voo-load{display:none}
  .voo-intro{position:relative;height:100%}
}
@media (max-width:640px){
  .voo-dots,.skip{display:none}
  .voo-caps li{right:max(22px,env(safe-area-inset-right))}
}
@media (max-height:700px){
  .voo-intro{gap:8px;padding-top:70px}
  .voo-intro h1{font-size:clamp(44px,min(15vw,13.5vh),110px)}
  .voo-intro .tag{font-size:13.5px;line-height:1.4}
  .voo-caps b{font-size:clamp(24px,4.6vw,38px)}
  .voo-caps i{font-size:13px;margin-top:7px}
}