/*
  ACT IV — Ignição & Partida (Phase 5)
  --------------------------------------
  Namespace: tudo aqui vive sob #act-iv / .neo-act-iv. Consome os tokens de
  css/neo-cinematic-foundation.css (--neo-*).

  Ao contrário dos Atos II/III, o Ato IV NÃO herda um HANDOFF pixel-exato do
  ato cinematográfico anterior — seu antecessor imediato no DOM é #contato
  (conteúdo comercial real), não uma cena cinematográfica. Por isso o Ato IV
  constrói seu próprio estado inicial ("monitor reemerge"), como nova
  narrativa — não uma repetição do reverse do Ato III (seção 5/6 da
  autorização da Phase 5).
*/

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

.neo-act-iv__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.05) 0%, transparent 70%),
    radial-gradient(ellipse 40% 40% at 50% 65%, rgba(168, 85, 247, 0.03) 0%, transparent 70%);
}

/* ---- Earth: reaparece como referência física, depois perde escala/
   posição — a narrativa de afastamento é carregada por transform, não por
   opacity (seção 12 da autorização). ---- */
.neo-act-iv__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, 10);
  will-change: transform, opacity;
}
.neo-act-iv__earth img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  display: block;
}

/* ---- Moon: mínima, distante, revelada só no final. Nunca a mesma escala
   de Earth. ---- */
.neo-act-iv__moon {
  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-iv__moon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

.neo-act-iv__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-iv__identity-group { position: absolute; inset: 0; }
.neo-act-iv__axis {
  position: absolute; left: 45%; top: 2%; width: 10%; height: 80%;
  transform-origin: top center;
  will-change: transform, opacity, filter;
}
.neo-act-iv__circle {
  position: absolute; inset: 0; width: 100%; height: 100%;
  overflow: visible; transform-origin: center; will-change: transform, opacity;
}
.neo-act-iv__glints {
  position: absolute; left: 22%; top: 7%; width: 56%; height: 24%; overflow: visible;
}
.neo-act-iv__glint { transform-box: fill-box; transform-origin: center; }

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

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

@media (max-width: 768px) {
  .neo-act-iv__earth { width: min(190vw, 1200px); bottom: -10%; }
  .neo-act-iv__moon { left: 72%; top: 18%; width: min(16vw, 90px); }
  .neo-act-iv__axis,
  .neo-act-iv__circle,
  .neo-act-iv__glints { filter: none !important; }
}

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