/* ============================================================================
   hero-scene.css — a cena VIVA da hero: "O Vale Noturno da Missão".
   Parallax multicamada + scrubtelling (movimento atrelado ao scroll, padrão do DS):
   ao rolar a hero, as camadas deslizam em profundidades diferentes e o FOGUETE
   decola. A jornada do lançador (trilha → pico → foguete) ao fundo; o mago (o
   criador com IA) na frente à direita. Texto à esquerda, sem brigar com a arte.
   Régua do DS: semântico (conta o lançamento), e 100% off em reduced-motion.
   Camadas (trás→frente): céu · montanhas · foguete · trilha · foreground · mago.
   ============================================================================ */

/* Conteúdo acima da cena. */
.hero > .hero-top,
.hero > .hero-core,
.hero > .hero-foot { position: relative; z-index: 2; }

/* Cena full-bleed (sangra além do container de 1100px). */
.hero-scene {
  position: absolute; top: 0; bottom: 0;
  left: 50%; width: 100vw; margin-left: -50vw;
  z-index: 0; overflow: hidden; pointer-events: none;
  --px: 0; --py: 0;
  /* mouse-parallax: leve tilt do conjunto (o scroll-parallax vive nas camadas) */
  transform: translate3d(calc(var(--px) * -14px), calc(var(--py) * -10px), 0);
  transition: transform .3s var(--ease-out, ease-out);
}

.layer { position: absolute; pointer-events: none; }
.layer > img { display: block; width: 100%; height: auto; image-rendering: pixelated; }

/* --- Empilhamento (trás → frente) --- */
.sky {
  inset: 0; width: 100%; height: 100%; z-index: 0;
}
.sky > img { width: 100%; height: 100%; object-fit: cover; object-position: center 22%; }

.mountains  { left: -7.5%; width: 115%; bottom: 10%; z-index: 1; }
.rocket-wrap{ left: -8%;   width: 95%;  bottom: 0;   z-index: 2; }
.hero-scene .trail      { left: -6%;   width: 112%; bottom: 0;   z-index: 3; }
.foreground { left: -7.5%; width: 115%; bottom: -1%; z-index: 4; }

/* Foguete: bob sutil em loop (o wrapper cuida do parallax de scroll). */
.rocket-wrap > img { animation: rk-bob 3.6s ease-in-out infinite; }

/* --- O mago, protagonista à direita --- */
.hero-mago {
  position: absolute; z-index: 5; bottom: 0;
  right: 0; left: auto;
  width: clamp(300px, 42vw, 600px); aspect-ratio: 1 / 1;
}
.hero-mago > img { display: block; width: 100%; height: 100%; image-rendering: pixelated; }

/* Camadas de luz do mago (mix screen = luz somada). */
.fx { position: absolute; border-radius: 50%; mix-blend-mode: screen; }
.fx-laptop {
  left: 50%; top: 66%; width: 46%; height: 34%; transform: translate(-50%, -50%);
  background: radial-gradient(ellipse at center, rgba(56,189,248,.55) 0%, rgba(56,189,248,.22) 38%, transparent 70%);
  animation: fx-breathe 4.2s ease-in-out infinite;
}
.fx-candle {
  left: 16%; top: 62%; width: 15%; height: 20%; transform: translate(-50%, -50%);
  background: radial-gradient(circle at center, rgba(255,182,39,.6) 0%, rgba(245,166,35,.25) 40%, transparent 72%);
  animation: fx-flicker 2.3s steps(3, end) infinite;
}
.fx-lantern {
  left: 84%; top: 67%; width: 17%; height: 22%; transform: translate(-50%, -50%);
  background: radial-gradient(circle at center, rgba(255,182,39,.55) 0%, rgba(245,166,35,.22) 42%, transparent 72%);
  animation: fx-flicker 3.1s steps(3, end) infinite .6s;
}

/* Faíscas mágicas subindo do laptop. */
.sparks { position: absolute; left: 50%; top: 58%; width: 34%; height: 30%; transform: translate(-50%, -50%); }
.sparks i {
  position: absolute; bottom: 0; width: 3px; height: 3px; border-radius: 50%;
  background: var(--ai, #38BDF8); box-shadow: 0 0 5px 1px rgba(56,189,248,.8);
  opacity: 0; animation: fx-rise 3.4s ease-out infinite;
}
.sparks i:nth-child(1){left:46%;animation-delay:0s}   .sparks i:nth-child(2){left:58%;animation-delay:.5s}
.sparks i:nth-child(3){left:40%;animation-delay:1.1s}  .sparks i:nth-child(4){left:63%;animation-delay:1.7s}
.sparks i:nth-child(5){left:51%;animation-delay:2.2s}  .sparks i:nth-child(6){left:35%;animation-delay:2.7s}
.sparks i:nth-child(7){left:69%;animation-delay:1.4s}  .sparks i:nth-child(8){left:55%;animation-delay:.9s}

/* --- Scrim de legibilidade: escurece embaixo (mobile) e à esquerda (desktop) --- */
.hero-scene::after {
  content: ""; position: absolute; inset: 0; z-index: 6; pointer-events: none;
  background:
    linear-gradient(to bottom, rgba(10,14,23,.35) 0%, transparent 16%, transparent 52%, rgba(10,14,23,.82) 84%, var(--void) 100%);
}

/* --- SCRUBTELLING: parallax atrelado ao scroll da hero (compositor-driven) --- */
@supports (animation-timeline: scroll()) {
  @media (prefers-reduced-motion: no-preference) {
    .sky, .mountains, .rocket-wrap, .hero-scene .trail, .foreground, .hero-mago {
      animation-timeline: scroll(root);
      animation-range: 0 100vh;           /* durante a primeira dobra */
      animation-fill-mode: both;
      animation-timing-function: linear;
    }
    .sky        { animation-name: par-sky; }
    .mountains  { animation-name: par-mtn; }
    .rocket-wrap{ animation-name: par-rocket; }   /* decola ao rolar */
    .hero-scene .trail      { animation-name: par-trail; }
    .foreground { animation-name: par-fore; }
    .hero-mago  { animation-name: par-mago; }
  }
}
/* Deslocamentos em vh/vw: proporcionais à tela → mais encorpado no desktop.
   Contraste FORTE de velocidade entre camadas = profundidade (sensação de
   câmera entrando na cena). Céu quase parado + leve zoom; foreground/mago
   correm; foguete decola alto. */
@keyframes par-sky    { to { transform: translateY(-3vh)  scale(1.07); } }
@keyframes par-mtn    { to { transform: translateY(-11vh); } }
@keyframes par-rocket { to { transform: translate(6vw, -42vh) scale(.86); opacity: .55; } }
@keyframes par-trail  { to { transform: translateY(-20vh); } }
@keyframes par-fore   { to { transform: translateY(-30vh) scale(1.06); } }
@keyframes par-mago   { to { transform: translateY(-15vh) scale(1.06); } }

@keyframes rk-bob     { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
@keyframes fx-breathe { 0%,100% { opacity:.7; transform:translate(-50%,-50%) scale(1); } 50% { opacity:1; transform:translate(-50%,-50%) scale(1.08); } }
@keyframes fx-flicker { 0%,100% { opacity:.85; } 33% { opacity:1; } 66% { opacity:.6; } }
@keyframes fx-rise    { 0% { opacity:0; transform:translateY(0) scale(.7); } 18% { opacity:1; } 80% { opacity:.55; } 100% { opacity:0; transform:translateY(-92px) scale(1); } }

/* --- Desktop: texto à esquerda, mago à direita, scrim lateral --- */
@media (min-width: 900px) {
  .hero-core { align-items: flex-start; text-align: left; max-width: 52%; margin-right: auto; }
  .hero-eyebrow, .hero-cta { justify-content: flex-start; }
  .headline { justify-items: start; }
  .hero-sub { margin-left: 0; }
  .hero-scene::after {
    background:
      linear-gradient(to right, rgba(10,14,23,.95) 0%, rgba(10,14,23,.7) 30%, transparent 58%),
      linear-gradient(to bottom, transparent 50%, rgba(10,14,23,.6) 78%, var(--void) 99%);
  }
}

/* --- Mobile: mago recua ao centro, scrim forte embaixo --- */
@media (max-width: 899px) {
  /* centralizado via transform → desliga o scroll-parallax do mago pra não conflitar */
  .hero-mago { right: 50%; transform: translateX(50%) !important; animation: none !important; width: clamp(260px, 78vw, 420px); opacity: .9; }
  .hero-scene::after {
    background: linear-gradient(to bottom, rgba(10,14,23,.55) 0%, transparent 30%, rgba(10,14,23,.35) 60%, rgba(10,14,23,.9) 100%);
  }
}

/* DOUTRINA: sem um único frame de movimento — cena estática e legível. */
@media (prefers-reduced-motion: reduce) {
  .hero-scene { transform: none; }
  .sky, .mountains, .rocket-wrap, .hero-scene .trail, .foreground, .hero-mago,
  .rocket-wrap > img, .fx-laptop, .fx-candle, .fx-lantern, .sparks i {
    animation: none !important; transform: none !important;
  }
  .hero-mago { }               /* posição base já correta */
  .sparks { display: none; }
  .fx-laptop { opacity: .85; }
}