/* =========================================================
   BANNER DO TOPO — vida orgânica (camada por cima de animacoes-extra.css)
   O js/animacoes-banner.js cuida da flutuação em loop (ondas senoidais somadas),
   da profundidade das camadas e do parallax amortecido do mouse. Aqui ficam:
   - a ENTRADA com mola (overshoot pequeno), escalonada, que vale sozinha no CSS
     (assim não há "pisca" antes do JS rodar);
   - o desligamento das animações antigas do banner (float/brilho mecânicos), que o
     JS novo substitui por movimento mais natural;
   - a origem das transformações (o personagem "pisa no chão" ao amassar/esticar).
   Mesmas regras da casa: só transform/opacity; tudo o que se mexe fica dentro de
   (prefers-reduced-motion: no-preference); o will-change é ligado pelo JS só enquanto anima.
   ========================================================= */

@media (prefers-reduced-motion: no-preference) {

  /* ---------- desliga o movimento antigo do banner (o JS novo assume) ---------- */

  /* a flutuação antiga (anima-ex-flutua) e o brilho antigo (anima-ex-brilha) mexiam no
     transform por keyframes; como o JS novo escreve translate/rotate/scale, precisamos
     tirar as animações antigas desses elementos para não brigarem. */
  .page-home .hero .promo__char,
  .page-home .hero .promo__palco,
  .page-home .hero .promo__num,
  .page-home .hero .promo__star,
  .page-home .hero .promo__dot {
    animation: none;
  }

  /* a transição antiga em "translate" (0.4s) deixava o parallax do JS arrastado/borrado */
  .page-home .hero .promo__char,
  .page-home .hero .promo__palco,
  .page-home .hero .promo__num,
  .page-home .hero .promo__star,
  .page-home .hero .promo__dot {
    transition: none;
  }

  /* o personagem e o palco amassam/esticam a partir do "chão" (pés), não do centro */
  .page-home .hero .promo__char,
  .page-home .hero .promo__palco {
    transform-origin: 50% 100%;
  }

  /* ---------- entrada com mola: selo, título, frase, fatos e botões ---------- */

  .page-home .hero .promo__copy > * {
    animation: bn-entra-copy 0.7s var(--anima-mola) both;
  }

  .page-home .hero .promo__badge { animation-delay: 0.06s; }
  .page-home .hero .promo__title { animation-delay: 0.15s; }
  .page-home .hero .promo__lede  { animation-delay: 0.24s; }
  .page-home .hero .promo__facts { animation-delay: 0.32s; }
  .page-home .hero .promo__cta   { animation-delay: 0.40s; }

  @keyframes bn-entra-copy {
    from { opacity: 0; transform: translateY(16px); }
    to   { opacity: 1; transform: translateY(0); }
  }

  /* a arte (personagem/produto/cena) entra depois, com um "assentar" (a mola dá o overshoot) */
  .page-home .hero .promo__art {
    animation: bn-entra-art 0.9s var(--anima-mola) 0.3s both;
  }

  @keyframes bn-entra-art {
    from { opacity: 0; transform: translateY(22px) scale(0.9); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
  }

  /* os enfeites (energias, bolinhas, número) chegam suaves logo em seguida; a partir daí
     quem manda no transform deles é o JS (que escreve translate/rotate/scale, sem apagar isto) */
  .page-home .hero .promo__num,
  .page-home .hero .promo__star,
  .page-home .hero .promo__dot {
    /* "backwards" (e não "both") de propósito: ao terminar, solta o opacity para o JS
       poder fazer as energias/bolinhas piscarem de leve */
    animation: bn-entra-enfeite 0.8s var(--anima-suave) 0.35s backwards;
  }

  @keyframes bn-entra-enfeite {
    from { opacity: 0; }
    to   { opacity: 1; }
  }
}

/* ===== vídeo de fundo do banner ilustrado (fofo, bem suave atrás do conteúdo) ===== */
.page-home .hero .promo.promo--drawn { position: relative; isolation: isolate; overflow: hidden; }

.page-home .hero .promo__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
  opacity: 0.42;
  mix-blend-mode: luminosity;
  pointer-events: none;
}

.page-home .hero .promo.promo--drawn > .promo__copy,
.page-home .hero .promo.promo--drawn > .promo__art {
  position: relative;
  z-index: 1;
}

@media (prefers-reduced-motion: reduce) {
  .page-home .hero .promo__video { display: none; }
}