/*
  ACT III — Ancoragem Comercial / Screen Journey (Phase 4)
  -----------------------------------------------------------
  Namespace: tudo aqui vive sob #act-iii / .neo-act-iii. Consome os tokens de
  css/neo-cinematic-foundation.css (--neo-*).

  Handoff (seção 4 da autorização): .neo-act-iii__object usa a MESMA
  geometria percentual de .neo-act-ii__object — seu estado inicial (definido
  em js/acts/act-iii.js) usa os valores finais exatos da timeline do Ato II.

  Mecânica da aproximação (seção 6-8): um único transform (scale + translate)
  em .neo-act-iii__object, com transform-origin ancorado no CENTRO REAL da
  screen (medido via getBoundingClientRect em init/resize, nunca por frame —
  seção 29). Como a origem fica fixa na screen, o bezel/stand/base/NX/
  identidade — todos mais distantes da origem — saem do viewport SOZINHOS
  conforme a escala aumenta. Nenhum desses elementos precisa de uma animação
  própria de saída: a geometria resolve tudo. Isso é o oposto de "opacity:0"
  (seção 7) — é o motivo pelo qual a jornada funciona.
*/

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

.neo-act-iii__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%);
}

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

/* ---- object: mesmo wrapper rígido do Ato II (identidade+monitor+NX).
   transform-origin é setado via JS (screen center real). A escala deste
   único elemento é o mecanismo inteiro da aproximação. ---- */
.neo-act-iii__object {
  position: relative;
  z-index: var(--neo-z-monitor-body, 20);
  width: min(60vw, 640px);
  aspect-ratio: 220 / 250;
  will-change: transform;
}

.neo-act-iii__identity-group { position: absolute; inset: 0; }
.neo-act-iii__axis {
  position: absolute; left: 45%; top: 6%; width: 10%; height: 72%;
  transform-origin: top center;
}
.neo-act-iii__circle {
  position: absolute; inset: 0; width: 100%; height: 100%;
  overflow: visible; transform-origin: center; will-change: transform, opacity;
}
.neo-act-iii__glints {
  position: absolute; left: 22%; top: 7%; width: 56%; height: 24%; overflow: visible;
}
.neo-act-iii__glint { transform-box: fill-box; transform-origin: center; }

.neo-act-iii__monitor {
  position: absolute;
  left: 50%;
  top: 54%;
  transform: translate(-50%, -50%);
  width: min(66vw, 740px);
  aspect-ratio: 1536 / 1024;
}
.neo-act-iii__monitor img,
.neo-act-iii__monitor .neo-act-iii__screen-panel {
  position: absolute;
  width: 100%;
  height: 100%;
}
.neo-act-iii__monitor .neo-monitor-screen { z-index: var(--neo-z-monitor-screen, 30); }
.neo-act-iii__monitor .neo-monitor-chassis-aperture,
.neo-act-iii__monitor .neo-monitor-stand,
.neo-act-iii__monitor .neo-monitor-base { z-index: var(--neo-z-monitor-body, 20); }
/* ---- screen-panel: ocupa a ABERTURA real deixada pelo chassis-aperture
   (mesmo box da screen). Cor idêntica a --neo-bg, que é também o topo do
   gradiente de #hero (style.css: var(--bg) = #05050A) — a costura entre a
   screen e o DOM comercial é uma continuidade de cor real, não coincidência
   visual. Sempre presente; o raster da screen (NX) desvanece por cima dela
   (seção 7: opacity só como efeito secundário). ---- */
.neo-act-iii__screen-panel {
  z-index: 25;
  background: var(--neo-bg, #05050A);
}

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

/* ---- limiar: microevento de exposição muito curto (seção 6, estágio 5).
   Overlay simples, nunca portal/vortex/scanline. ---- */
.neo-act-iii__threshold {
  position: absolute;
  inset: 0;
  z-index: var(--neo-z-identity-fx, 40);
  background: #fff;
  opacity: 0;
  pointer-events: none;
  will-change: opacity;
}

@media (max-width: 768px) {
  .neo-act-iii__earth { width: min(220vw, 1400px); bottom: -14%; }
  .neo-act-iii__axis,
  .neo-act-iii__circle,
  .neo-act-iii__glints { filter: none !important; }
}

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