/*
 * Voo de drone (módulo drone_scroll do Estúdio) — ver sites/studio/drone-scroll.blade.php e site-voo-drone.js.
 *
 * A base é a versão estática: o primeiro quadro ao fundo e os textos em sequência (sem JavaScript, para robôs, com
 * movimento reduzido ou com o voo ainda sendo preparado). A versão que voa com a rolagem vale só com o voo pronto
 * (.voo-com-midia) e para quem não pediu movimento reduzido.
 *
 * --voo-altura: a altura da seção, em % da tela (o "comprimento" do voo); --voo-overlay: o escurecimento (0–0,8);
 * --voo-topo: a altura do cabeçalho fixo, para o palco parar logo abaixo dele (o script mede).
 */
.studio-block.studio-drone_scroll { padding: 0; }
.studio-drone_scroll > .studio-wrap { width: 100%; max-width: none; }

.voo { position: relative; background: var(--studio-bg); color: var(--studio-ink); }
.voo-palco {
    position: relative; overflow: hidden; min-height: 72vh;
    display: flex; flex-direction: column; justify-content: flex-end;
}
.voo-poster, .voo-poster img, .voo-canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.voo-poster img { display: block; object-fit: cover; }
.voo-canvas { display: block; }
.voo-sombra {
    position: absolute; inset: 0; pointer-events: none;
    background: linear-gradient(to top,
        rgba(4, 8, 16, calc(var(--voo-overlay, .3) + .45)) 0%,
        rgba(4, 8, 16, var(--voo-overlay, .3)) 55%,
        rgba(4, 8, 16, calc(var(--voo-overlay, .3) * .45)) 100%);
}

/* ── as cenas de texto ─────────────────────────────────────── */
.voo-cenas {
    position: relative; z-index: 1; display: grid; gap: 56px;
    width: min(100%, 1240px); margin-inline: auto; padding: 140px max(24px, 6vw) 80px; box-sizing: border-box;
}
.voo-cena { max-width: 680px; }
.voo-cena .studio-eyebrow { color: var(--studio-accent); }
.studio-block .voo-cena h2 {
    font-size: clamp(38px, 6.2vw, 88px); line-height: 1.02; letter-spacing: -.035em; margin: 10px 0 18px; max-width: 13ch;
}
.studio-block .voo-cena h3 { font-size: clamp(30px, 4.4vw, 58px); line-height: 1.05; letter-spacing: -.03em; margin: 0 0 14px; color: inherit; }
.voo-cena p { font-size: clamp(16px, 1.45vw, 20px); line-height: 1.55; margin: 0; max-width: 34em; opacity: .92; }
.voo-cena :is(h2, h3, p) { text-shadow: 0 2px 28px rgba(0, 0, 0, .35); }
.voo-cena .studio-button { margin-top: 26px; }

/* ── o voo com a rolagem ───────────────────────────────────── */
@media (prefers-reduced-motion: no-preference) {
    .voo-com-midia { --voo-topo: 0px; height: calc(var(--voo-altura, 400) * 1vh); }
    .voo-com-midia .voo-palco {
        position: sticky; top: var(--voo-topo); min-height: 0;
        height: calc(100vh - var(--voo-topo)); height: calc(100svh - var(--voo-topo));
    }
    .voo-com-midia .voo-cenas { position: absolute; inset: 0; width: auto; padding: 0; display: block; }
    .voo-com-midia .voo-cena {
        position: absolute; left: max(24px, 6vw); bottom: clamp(84px, 13vh, 140px); width: min(680px, calc(100% - 2 * max(24px, 6vw)));
        opacity: 0; transform: translateY(28px); pointer-events: none;
        transition: opacity .6s ease, transform .6s cubic-bezier(.2, .7, .2, 1);
    }
    .voo-com-midia .voo-cena.ativa { opacity: 1; transform: none; pointer-events: auto; }

    .voo-progresso {
        position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; height: 3px;
        background: var(--studio-accent); transform-origin: 0 50%; transform: scaleX(var(--p, 0));
    }
    .voo-dica {
        position: absolute; left: 50%; bottom: 20px; z-index: 2; transform: translateX(-50%);
        display: flex; flex-direction: column; align-items: center; gap: 10px;
        font-size: 11px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; opacity: .85;
        transition: opacity .4s ease;
    }
    .voo-dica i { width: 1px; height: 30px; background: currentColor; transform-origin: 50% 0; animation: voo-dica 1.8s ease-in-out infinite; }
    .voo-rolou .voo-dica { opacity: 0; }
}
@keyframes voo-dica {
    0% { transform: scaleY(0); opacity: 1; }
    65% { transform: scaleY(1); opacity: 1; }
    100% { transform: scaleY(1); opacity: 0; }
}
/* Barra e dica só existem no voo com a rolagem. */
.voo-progresso, .voo-dica { display: none; }
@media (prefers-reduced-motion: no-preference) {
    .voo-com-midia .voo-progresso { display: block; }
    .voo-com-midia .voo-dica { display: flex; }
}

/* ── só no editor: enviar o vídeo e acompanhar o preparo ───── */
.voo-editor {
    position: absolute; z-index: 3; top: 28px; left: 50%; transform: translateX(-50%);
    width: min(440px, calc(100% - 40px)); box-sizing: border-box; padding: 20px 22px;
    display: grid; gap: 8px; justify-items: center; text-align: center;
    border-radius: 16px; background: rgba(15, 23, 42, .82); color: #fff; backdrop-filter: blur(6px);
    font: 14px/1.5 Inter, system-ui, sans-serif;
}
.voo-editor strong { font-size: 15px; }
.voo-editor small { opacity: .8; }
.voo-editor .studio-button { margin-top: 6px; }
.voo-editor[data-voo-estado="falhou"] strong { color: #fecaca; }
.voo-girando {
    width: 22px; height: 22px; border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, .25); border-top-color: #fff; animation: voo-girar .8s linear infinite;
}
@keyframes voo-girar { to { transform: rotate(360deg); } }