/*
  ACT V — Aproximação, Descida, Pouso, Identidade (Phase 6)
  -------------------------------------------------------------
  Namespace: tudo aqui vive sob #act-v / .neo-act-v. Consome os tokens de
  css/neo-cinematic-foundation.css (--neo-*).

  Handoff (seção 4 da autorização): estado inicial reproduz os valores
  finais exatos da timeline do Ato IV (constante HANDOFF em act-v.js).

  4 camadas lunares empilhadas (distant/approach/horizon/surface) —
  crossfades curtos entre estágios adjacentes, sempre com escala/posição
  próximas no ponto de transição (seção 8: continuidade geométrica,
  opacity só secundária). horizon/surface são full-bleed: a partir do
  estágio "horizon", a Lua deixa de ser um corpo no céu e passa a ser o
  próprio chão da cena.

  O CTA final REAL não vive aqui — fica em #act-v-cta, seção comum
  (não aria-hidden) logo depois, mesmo padrão já usado no handoff
  Ato III → #hero.
*/

#act-v {
  height: 100vh;
  position: relative;
  overflow: hidden;
  background: var(--neo-bg, #05050A);
  display: flex;
  align-items: center;
  justify-content: center;
}

.neo-act-v__space {
  position: absolute;
  inset: 0;
  z-index: var(--neo-z-background-space, 0);
  background:
    radial-gradient(ellipse 55% 55% at 50% 40%, rgba(79, 168, 255, 0.04) 0%, transparent 70%),
    radial-gradient(ellipse 40% 40% at 50% 65%, rgba(168, 85, 247, 0.02) 0%, transparent 70%);
}

.neo-act-v__earth {
  position: absolute;
  left: 50%;
  bottom: -6%;
  width: min(120vw, 1400px);
  max-width: none;
  aspect-ratio: 1536 / 1024;
  transform: translateX(-50%);
  transform-origin: 50% 100%;
  z-index: var(--neo-z-planetary, 5);
  will-change: transform, opacity;
}
.neo-act-v__earth img { width: 100%; height: 100%; object-fit: cover; object-position: center top; display: block; }

/* ---- Lua: 4 camadas empilhadas, mesmo z-index (crossfade puro) ---- */
.neo-act-v__moon-distant,
.neo-act-v__moon-approach {
  position: absolute;
  left: 68%;
  top: 24%;
  width: min(12vw, 130px);
  aspect-ratio: 1536 / 1024;
  z-index: var(--neo-z-planetary, 10);
  will-change: opacity, transform;
}
.neo-act-v__moon-distant img,
.neo-act-v__moon-approach img { width: 100%; height: 100%; object-fit: contain; display: block; }

.neo-act-v__moon-horizon,
.neo-act-v__moon-surface {
  position: absolute;
  inset: 0;
  z-index: var(--neo-z-planetary, 10);
  overflow: hidden;
  will-change: opacity;
}
.neo-act-v__moon-horizon img,
.neo-act-v__moon-surface img {
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 130%;
  max-width: none;
  transform: translateX(-50%);
  object-fit: cover;
  object-position: center bottom;
  display: block;
}

/* ---- luz de contato: gradiente contido, nunca spotlight teatral ---- */
.neo-act-v__landing-light {
  position: absolute;
  left: 50%;
  bottom: 18%;
  width: 46vw;
  height: 30vh;
  transform: translateX(-50%);
  z-index: var(--neo-z-planetary, 12);
  background: radial-gradient(ellipse 50% 50% at 50% 100%, rgba(230, 238, 255, 0.16) 0%, rgba(120, 150, 255, 0.05) 45%, transparent 75%);
  opacity: 0;
  pointer-events: none;
  will-change: opacity;
}

.neo-act-v__object {
  position: relative;
  z-index: var(--neo-z-monitor-body, 20);
  width: min(60vw, 640px);
  aspect-ratio: 220 / 250;
  will-change: transform, opacity;
}
.neo-act-v__identity-group { position: absolute; inset: 0; }
.neo-act-v__axis {
  position: absolute; left: 45%; top: 2%; width: 10%; height: 80%;
  transform-origin: top center;
}
.neo-act-v__circle {
  position: absolute; inset: 0; width: 100%; height: 100%;
  overflow: visible; transform-origin: center; will-change: transform, opacity;
}
.neo-act-v__glints {
  position: absolute; left: 22%; top: 7%; width: 56%; height: 24%; overflow: visible;
}
.neo-act-v__glint { transform-box: fill-box; transform-origin: center; }

.neo-act-v__monitor {
  position: absolute; left: 50%; top: 54%; transform: translate(-50%, -50%);
  width: min(66vw, 740px); aspect-ratio: 1536 / 1024;
}
.neo-act-v__monitor img,
.neo-act-v__monitor .neo-act-v__screen-panel { position: absolute; width: 100%; height: 100%; }
.neo-act-v__monitor .neo-monitor-screen { z-index: var(--neo-z-monitor-screen, 30); }
.neo-act-v__monitor .neo-monitor-chassis-aperture,
.neo-act-v__monitor .neo-monitor-stand,
.neo-act-v__monitor .neo-monitor-base { z-index: var(--neo-z-monitor-body, 20); }
.neo-act-v__screen-panel { z-index: 25; background: var(--neo-bg, #05050A); }

.neo-act-v__nx {
  position: absolute; left: 50%; top: 4%; width: 15%; aspect-ratio: 257 / 177;
  transform: translate(-50%, 0);
}
.neo-act-v__nx img { width: 100%; height: 100%; object-fit: contain; }

/* ---- lockup final: decorativo, eco visual da marca (a âncora acessível
   real fica no nav, sempre presente) ---- */
.neo-act-v__lockup {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: var(--neo-z-identity-fx, 40);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  opacity: 0;
  will-change: opacity, transform;
}
.neo-act-v__lockup-nx { width: min(14vw, 140px); }
.neo-act-v__lockup-nx img { width: 100%; height: auto; display: block; }
.neo-act-v__lockup-wordmark { width: min(22vw, 240px); }
.neo-act-v__lockup-wordmark img { width: 100%; height: auto; display: block; }

@media (max-width: 768px) {
  .neo-act-v__earth { width: min(190vw, 1200px); bottom: -10%; }
  .neo-act-v__moon-distant,
  .neo-act-v__moon-approach { left: 72%; top: 18%; width: min(16vw, 90px); }
  .neo-act-v__landing-light { width: 80vw; height: 24vh; }
  .neo-act-v__axis,
  .neo-act-v__circle,
  .neo-act-v__glints { filter: none !important; }
  .neo-act-v__lockup-nx { width: min(24vw, 110px); }
  .neo-act-v__lockup-wordmark { width: min(46vw, 200px); }
}

@media (prefers-reduced-motion: reduce) {
  #act-v { height: auto; min-height: 100vh; padding: 80px 0; }
}

/* ---- CTA final: seção REAL, fora do bloco decorativo aria-hidden,
   mesmo padrão do handoff Ato III -> #hero. ---- */
#act-v-cta {
  background: var(--bg2, #0A0A16);
  padding: 100px 24px;
  text-align: center;
}
#act-v-cta .container { max-width: 620px; margin: 0 auto; }
#act-v-cta h2 { margin-bottom: 16px; }
#act-v-cta p { color: var(--text-muted); margin-bottom: 32px; }