/* ===========================================================
   Sizon — Hero cinematográfico scroll-driven (mãos se aproximando)
   Afeta APENAS a seção .hero-section[data-hero-scene].
   Nenhuma outra seção, página, cor ou tipografia é alterada.
   =========================================================== */

/* `overflow:hidden` no wrapper cria um contexto de rolagem que anula o
   position:sticky do palco. `clip` é visualmente idêntico e mantém o pin. */
.sizon-page { overflow: clip; }

.hero-section[data-hero-scene] {
  --p: 0;               /* progresso suavizado 0 → 1 (definido via JS) */
  min-height: 0;
  height: 300vh;        /* seção alta: espaço de rolagem da cena */
  display: block;
  position: relative;
  isolation: isolate;
  background: #061426;
}

/* Palco fixado (pin) — sticky, sem salto no reload */
.hero-section[data-hero-scene] .hero-scene-stage {
  position: sticky;
  top: 0;
  height: 100vh;
  min-height: 600px;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  isolation: isolate;
  background: #061426;
}

/* ---------- camadas transparentes reais ---------- */
.hero-scene-layer {
  position: absolute;
  inset: 0;
  background-position: center 46%;
  background-repeat: no-repeat;
  background-size: cover;
  pointer-events: none;
  will-change: transform;
  backface-visibility: hidden;
}

.hero-scene-bg {
  z-index: 0;
  background-image: url('hero-scene/bg-tech.jpg');
  transform: scale(1.08) translate3d(calc(var(--p) * -10px), calc(var(--p) * -14px), 0);
}

/* ---------- estrutura 3D revelada pelo scroll ---------- */
.hero-scene-3d {
  position: absolute;
  inset: 0;
  z-index: 1;
  perspective: 1100px;
  perspective-origin: 50.5% 40%;
  pointer-events: none;
  opacity: calc(.12 + var(--p) * .88);
}

.hero-3d-inner {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
  transform: rotateX(calc(14deg - var(--p) * 14deg)) rotateY(calc(-12deg + var(--p) * 12deg));
}

.hero-3d-node,
.hero-3d-ring,
.hero-3d-floor {
  position: absolute;
  left: 50.5%;
  top: 40%;
  transform-style: preserve-3d;
}

/* anéis concêntricos que vêm da profundidade até o plano da luz */
.hero-3d-ring {
  width: 42vmin;
  height: 42vmin;
  margin: -21vmin 0 0 -21vmin;
  border-radius: 50%;
  border: 1px solid rgba(126, 214, 255, .34);
  box-shadow: 0 0 34px rgba(80, 180, 255, .12) inset;
}

.hero-3d-ring-a { transform: translateZ(calc(-620px + var(--p) * 600px)) rotateX(calc(68deg - var(--p) * 60deg)) scale(calc(.55 + var(--p) * .5)); }
.hero-3d-ring-b { transform: translateZ(calc(-880px + var(--p) * 760px)) rotateX(calc(76deg - var(--p) * 64deg)) rotateZ(38deg) scale(calc(.4 + var(--p) * .86)); border-color: rgba(255, 233, 200, .26); }
.hero-3d-ring-c { transform: translateZ(calc(-1180px + var(--p) * 980px)) rotateY(calc(72deg - var(--p) * 58deg)) scale(calc(.32 + var(--p) * 1.1)); border-color: rgba(126, 214, 255, .2); }

/* malha em perspectiva que sobe do fundo */
.hero-3d-floor {
  width: 190vmax;
  height: 190vmax;
  margin: -95vmax 0 0 -95vmax;
  transform: translateZ(calc(-760px + var(--p) * 300px)) translateY(26vmin) rotateX(78deg) scale(calc(.8 + var(--p) * .35));
  background-image:
    linear-gradient(to right, rgba(120, 206, 250, .3) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(120, 206, 250, .3) 1px, transparent 1px);
  background-size: 7vmin 7vmin;
  -webkit-mask-image: radial-gradient(circle at 50% 50%, #000 0%, rgba(0, 0, 0, .35) 26%, transparent 46%);
  mask-image: radial-gradient(circle at 50% 50%, #000 0%, rgba(0, 0, 0, .35) 26%, transparent 46%);
  opacity: calc(.25 + var(--p) * .55);
}

/* nós de dados orbitando o ponto de luz, cada um em sua própria profundidade */
.hero-3d-node {
  width: 8px;
  height: 8px;
  margin: -4px 0 0 -4px;
  border-radius: 50%;
  background: rgba(214, 244, 255, .95);
  box-shadow: 0 0 14px rgba(120, 214, 255, .8);
}

.hero-3d-node:nth-child(5) { transform: translate3d(calc(-26vmin + var(--p) * 9vmin), -14vmin, calc(-900px + var(--p) * 820px)); }
.hero-3d-node:nth-child(6) { transform: translate3d(calc(24vmin - var(--p) * 8vmin), -18vmin, calc(-1100px + var(--p) * 980px)); }
.hero-3d-node:nth-child(7) { transform: translate3d(calc(-18vmin + var(--p) * 6vmin), 12vmin, calc(-700px + var(--p) * 620px)); }
.hero-3d-node:nth-child(8) { transform: translate3d(calc(20vmin - var(--p) * 7vmin), 16vmin, calc(-500px + var(--p) * 430px)); }

/* ---------- luz central ---------- */
.hero-scene-core,
.hero-scene-rays {
  position: absolute;
  left: 50.5%;
  top: 40%;
  transform: translate(-50%, -50%) scale(calc(0.62 + var(--p) * 0.7));
  pointer-events: none;
  z-index: 3;
}

.hero-scene-core {
  width: 46vmin;
  height: 46vmin;
  border-radius: 50%;
  opacity: calc(0.34 + var(--p) * 0.66);
  background:
    radial-gradient(circle, rgba(255, 249, 238, .95) 0%, rgba(255, 236, 206, .55) 7%, rgba(120, 214, 255, .28) 22%, rgba(24, 96, 160, .12) 44%, rgba(6, 20, 38, 0) 68%);
  mix-blend-mode: screen;
}

.hero-scene-rays {
  width: 92vmin;
  height: 92vmin;
  opacity: calc(var(--p) * var(--p) * 0.6);
  background:
    conic-gradient(from 0deg,
      rgba(190, 236, 255, .5) 0deg, rgba(190, 236, 255, 0) 2.5deg,
      rgba(255, 240, 216, .4) 30deg, rgba(255, 240, 216, 0) 32deg,
      rgba(190, 236, 255, 0) 58deg, rgba(190, 236, 255, .34) 60deg, rgba(190, 236, 255, 0) 62deg,
      rgba(255, 240, 216, 0) 96deg, rgba(255, 240, 216, .28) 98deg, rgba(255, 240, 216, 0) 100deg,
      rgba(190, 236, 255, 0) 142deg, rgba(190, 236, 255, .4) 144deg, rgba(190, 236, 255, 0) 147deg,
      rgba(255, 240, 216, 0) 196deg, rgba(255, 240, 216, .3) 198deg, rgba(255, 240, 216, 0) 200deg,
      rgba(190, 236, 255, 0) 252deg, rgba(190, 236, 255, .36) 254deg, rgba(190, 236, 255, 0) 257deg,
      rgba(255, 240, 216, 0) 308deg, rgba(255, 240, 216, .26) 310deg, rgba(255, 240, 216, 0) 312deg,
      rgba(190, 236, 255, 0) 358deg, rgba(190, 236, 255, .5) 360deg);
  -webkit-mask-image: radial-gradient(circle, rgba(0, 0, 0, 0) 6%, #000 20%, rgba(0, 0, 0, 0) 58%);
  mask-image: radial-gradient(circle, rgba(0, 0, 0, 0) 6%, #000 20%, rgba(0, 0, 0, 0) 58%);
  mix-blend-mode: screen;
  filter: blur(.5px);
}

/* pulso sutil de energia — apenas no estado final */
.hero-scene-pulse {
  position: absolute;
  left: 50.5%;
  top: 40%;
  width: 30vmin;
  height: 30vmin;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  opacity: 0;
  pointer-events: none;
  z-index: 3;
  background: radial-gradient(circle, rgba(255, 252, 244, .5) 0%, rgba(140, 220, 255, .22) 38%, rgba(6, 20, 38, 0) 70%);
  mix-blend-mode: screen;
}

.hero-section[data-hero-scene].is-contact .hero-scene-pulse {
  animation: sizon-hero-pulse 2.6s cubic-bezier(.22, .61, .36, 1) infinite;
}

@keyframes sizon-hero-pulse {
  0%   { opacity: 0;   transform: translate(-50%, -50%) scale(.55); }
  22%  { opacity: .85; }
  100% { opacity: 0;   transform: translate(-50%, -50%) scale(2.1); }
}

/* vinheta preservada, redesenhada para o palco */
.hero-section[data-hero-scene] .hero-vignette {
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(3, 16, 34, .92), rgba(3, 16, 34, .5) 46%, rgba(3, 16, 34, .14)),
    linear-gradient(0deg, rgba(3, 16, 34, .92), transparent 52%, rgba(3, 16, 34, .34));
}

/* texto e navegação sempre nítidos, acima da cena */
.hero-section[data-hero-scene] .hero-content,
.hero-section[data-hero-scene] .scroll-cue {
  position: relative;
  z-index: 6;
}

.hero-section[data-hero-scene] .hero-content { padding-top: 132px; }

@media (max-height: 760px) {
  .hero-section[data-hero-scene] .hero-copy h1 { font-size: clamp(38px, 5.4vw, 62px); }
  .hero-section[data-hero-scene] .hero-foot { margin-top: 52px; }
  .hero-section[data-hero-scene] .hero-content { padding-top: 104px; padding-bottom: 76px; }
}

.hero-section[data-hero-scene] .hero-copy {
  transform: translate3d(0, calc(var(--p) * -26px), 0);
}

.hero-section[data-hero-scene] .hero-foot {
  opacity: calc(1 - var(--p) * .8);
}

.hero-section[data-hero-scene] .scroll-cue {
  opacity: calc(1 - var(--p) * 1.6);
}

/* camadas decorativas originais do hero seguem existindo, só recuam na cena */
.hero-section[data-hero-scene] .hero-image { display: none; }
.hero-section[data-hero-scene] .light-overlay,
.hero-section[data-hero-scene] .data-horizon { z-index: 5; }

/* ---------- responsivo ---------- */
@media (max-width: 900px) {
  .hero-section[data-hero-scene] { height: 280vh; }
  .hero-scene-layer { background-position: center 44%; }
  .hero-scene-core { width: 60vmin; height: 60vmin; }
}

@media (max-width: 560px) {
  .hero-section[data-hero-scene] { height: 250vh; }
  .hero-section[data-hero-scene] .hero-scene-stage { min-height: 560px; }
}

/* ---------- acessibilidade: movimento reduzido ---------- */
@media (prefers-reduced-motion: reduce) {
  .hero-section[data-hero-scene] .hero-3d-inner { transform: none; }
  .hero-section[data-hero-scene] .hero-scene-3d { opacity: .75; }
  .hero-section[data-hero-scene] { height: auto; min-height: 860px; }
  .hero-section[data-hero-scene] .hero-scene-stage { position: relative; height: auto; min-height: 860px; }
  .hero-section[data-hero-scene] .hero-scene-bg { transform: none; }
  .hero-section[data-hero-scene] .hero-scene-core { opacity: .8; transform: translate(-50%, -50%) scale(1.1); }
  .hero-section[data-hero-scene] .hero-scene-rays { opacity: .3; transform: translate(-50%, -50%) scale(1.1); }
  .hero-section[data-hero-scene].is-contact .hero-scene-pulse { animation: none; opacity: .3; }
  .hero-section[data-hero-scene] .hero-copy { transform: none; }
  .hero-section[data-hero-scene] .hero-foot,
  .hero-section[data-hero-scene] .scroll-cue { opacity: 1; }
}