:root {
  --impact-mx: 0;
  --impact-my: 0;
  --impact-scroll: 0;
  --impact-velocity: 0;
}

.impact-layer {
  position: fixed;
  inset: 0;
  z-index: 1;
  overflow: hidden;
  pointer-events: none;
  opacity: 0;
  transition: opacity 900ms ease;
  mix-blend-mode: screen;
}

html.impact-ready .impact-layer { opacity: 1; }

.impact-layer::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 46%;
  width: min(92vw, 1500px);
  height: min(36vw, 520px);
  transform: translate(-50%, -50%) scale(calc(1 + var(--impact-velocity) * .018));
  border-radius: 50%;
  background:
    radial-gradient(ellipse at center, rgba(101,184,75,.09) 0 4%, rgba(79,159,58,.045) 18%, transparent 62%),
    radial-gradient(ellipse at 66% 50%, rgba(255,255,255,.026), transparent 42%);
  filter: blur(10px);
  opacity: .9;
}

.impact-layer::after {
  content: "";
  position: absolute;
  inset: -15%;
  background:
    linear-gradient(108deg, transparent 28%, rgba(79,159,58,.025) 43%, transparent 54%),
    linear-gradient(76deg, transparent 49%, rgba(255,255,255,.018) 50%, transparent 51%);
  transform: translateX(calc(var(--impact-mx) * 2.4vw));
  filter: blur(1px);
  opacity: .9;
}

.impact-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: .82;
}

.impact-vignette {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at calc(50% + var(--impact-mx) * 4%) calc(48% + var(--impact-my) * 3%), transparent 0 34%, rgba(5,7,6,.05) 64%, rgba(5,7,6,.34) 100%),
    linear-gradient(180deg, rgba(5,7,6,.1), transparent 18%, transparent 74%, rgba(5,7,6,.35));
}

.hero {
  isolation: isolate;
  perspective: 1500px;
}

.hero-copy,
.hero-index,
.scroll-cue {
  z-index: 4;
}

.hero-copy {
  position: relative;
  transform: translate3d(calc(var(--impact-mx) * -7px), calc(var(--impact-my) * -4px), 0);
  transition: transform 160ms linear;
}

.hero[data-impact-ready]::before {
  content: "HAPPEN";
  position: absolute;
  right: -4vw;
  top: 47%;
  z-index: 0;
  font-size: clamp(8rem, 24vw, 28rem);
  line-height: .72;
  font-weight: 950;
  letter-spacing: -.09em;
  color: transparent;
  -webkit-text-stroke: 1px rgba(243,246,239,.045);
  text-transform: uppercase;
  transform: translate3d(calc(var(--impact-mx) * 22px), calc(-50% + var(--impact-scroll) * -35px), -120px) rotate(-7deg);
  transform-origin: center;
  opacity: .72;
  white-space: nowrap;
  pointer-events: none;
}

.hero-reactor {
  --reactor-size: clamp(390px, 42vw, 720px);
  position: absolute;
  right: clamp(-12rem, -6vw, -2rem);
  top: 49%;
  z-index: 1;
  width: var(--reactor-size);
  height: var(--reactor-size);
  transform-style: preserve-3d;
  transform: translate3d(calc(var(--impact-mx) * 18px), calc(-50% + var(--impact-my) * 12px), -80px) rotateX(calc(64deg + var(--impact-my) * 5deg)) rotateZ(calc(-16deg + var(--impact-scroll) * 24deg));
  opacity: .72;
  filter: drop-shadow(0 0 40px rgba(79,159,58,.12));
  pointer-events: none;
}

.hero-reactor__ring,
.hero-reactor__core,
.hero-reactor__orbit,
.hero-reactor__cross {
  position: absolute;
  inset: 50% auto auto 50%;
  transform-style: preserve-3d;
}

.hero-reactor__ring {
  width: var(--size);
  height: var(--size);
  margin: calc(var(--size) / -2);
  border-radius: 50%;
  border: 1px solid rgba(101,184,75,var(--alpha,.24));
  box-shadow: inset 0 0 35px rgba(79,159,58,.025), 0 0 30px rgba(79,159,58,.025);
  animation: impact-ring var(--speed,16s) linear infinite;
}

.hero-reactor__ring::before,
.hero-reactor__ring::after {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  border-top: 2px solid rgba(101,184,75,.65);
  border-right: 2px solid transparent;
  filter: drop-shadow(0 0 8px rgba(79,159,58,.45));
}

.hero-reactor__ring::after {
  transform: rotate(142deg);
  opacity: .4;
}

.hero-reactor__ring.r1 { --size: 24%; --speed: 9s; --alpha: .42; }
.hero-reactor__ring.r2 { --size: 43%; --speed: 15s; --alpha: .29; animation-direction: reverse; }
.hero-reactor__ring.r3 { --size: 66%; --speed: 22s; --alpha: .19; }
.hero-reactor__ring.r4 { --size: 92%; --speed: 31s; --alpha: .11; animation-direction: reverse; }

.hero-reactor__core {
  width: 12%;
  height: 12%;
  margin: -6%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(243,246,239,.95) 0 4%, rgba(101,184,75,.72) 5% 14%, rgba(79,159,58,.16) 36%, transparent 72%);
  box-shadow: 0 0 28px rgba(101,184,75,.5), 0 0 90px rgba(79,159,58,.22), 0 0 180px rgba(79,159,58,.1);
  animation: impact-core 2.6s ease-in-out infinite;
}

.hero-reactor__orbit {
  width: 78%;
  height: 22%;
  margin: -11% -39%;
  border-radius: 50%;
  border: 1px solid rgba(243,246,239,.08);
  transform: rotateX(72deg) rotateZ(18deg);
}

.hero-reactor__orbit::before,
.hero-reactor__orbit::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 7px;
  height: 7px;
  margin-top: -3px;
  border-radius: 50%;
  background: var(--green-bright);
  box-shadow: 0 0 18px rgba(101,184,75,.7);
  animation: impact-orbit 5.8s ease-in-out infinite alternate;
}
.hero-reactor__orbit::before { left: 7%; }
.hero-reactor__orbit::after { right: 7%; animation-delay: -2.9s; }

.hero-reactor__cross {
  width: 96%;
  height: 96%;
  margin: -48%;
  background:
    linear-gradient(90deg, transparent 49.85%, rgba(79,159,58,.12) 50%, transparent 50.15%),
    linear-gradient(0deg, transparent 49.85%, rgba(79,159,58,.1) 50%, transparent 50.15%);
  border-radius: 50%;
  opacity: .55;
}

@keyframes impact-ring {
  to { transform: rotateZ(360deg) rotateX(6deg); }
}
@keyframes impact-core {
  50% { transform: scale(1.22); filter: brightness(1.22); }
}
@keyframes impact-orbit {
  from { transform: translateX(0) scale(.72); opacity: .35; }
  to { transform: translateX(34px) scale(1.15); opacity: 1; }
}

.impact-section-sweep {
  position: absolute;
  left: 0;
  right: 0;
  top: 7%;
  height: 86%;
  z-index: -1;
  pointer-events: none;
  overflow: hidden;
  opacity: 0;
  transition: opacity .8s ease;
}

.impact-section-sweep::before {
  content: "";
  position: absolute;
  left: -12%;
  top: 46%;
  width: 124%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(79,159,58,.18) 22%, rgba(243,246,239,.1) 50%, rgba(79,159,58,.14) 72%, transparent);
  box-shadow: 0 0 40px rgba(79,159,58,.08);
  transform: rotate(-3deg) scaleX(.65);
  transform-origin: center;
  transition: transform 1.4s cubic-bezier(.2,.75,.2,1);
}

.impact-section-sweep::after {
  content: "";
  position: absolute;
  inset: 20% 4%;
  background: radial-gradient(ellipse at 50% 50%, rgba(79,159,58,.035), transparent 58%);
  filter: blur(20px);
}

section.impact-inview > .impact-section-sweep { opacity: 1; }
section.impact-inview > .impact-section-sweep::before { transform: rotate(-3deg) scaleX(1); }

.capability-card::after {
  content: "";
  position: absolute;
  inset: -1px;
  pointer-events: none;
  background: radial-gradient(340px circle at var(--spot-x,50%) var(--spot-y,50%), rgba(101,184,75,.105), transparent 48%);
  opacity: 0;
  transition: opacity .3s ease;
}
.capability-card:hover::after { opacity: 1; }

.button.impact-magnetic {
  will-change: transform;
  transition: transform .18s cubic-bezier(.2,.75,.2,1), background .25s ease, color .25s ease, box-shadow .25s ease;
}
.button-primary.impact-magnetic:hover {
  box-shadow: 0 18px 65px rgba(79,159,58,.2), 0 0 0 1px rgba(101,184,75,.24) inset;
}

.section-heading h2,
.operations-copy h2,
.system-copy h2,
.field-copy h2,
.about-statement h2,
.brief-intro h2 {
  text-wrap: balance;
}

html[data-performance="lean"] .impact-canvas,
html[data-performance="static"] .impact-canvas,
html[data-performance="lean"] .hero-reactor,
html[data-performance="static"] .hero-reactor {
  display: none;
}

html[data-performance="balanced"] .impact-canvas { opacity: .42; }
html[data-performance="balanced"] .hero-reactor { opacity: .48; }

@media (max-width: 900px) {
  .hero-reactor {
    --reactor-size: min(74vw, 520px);
    right: -30vw;
    top: 42%;
    opacity: .42;
  }
  .hero[data-impact-ready]::before {
    right: -18vw;
    top: 42%;
    font-size: 34vw;
    opacity: .4;
  }
}

@media (max-width: 620px) {
  .impact-layer::after { opacity: .45; }
  .hero-reactor { opacity: .3; right: -38vw; }
  .hero-copy { transform: none; }
  .capability-card::after { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .impact-canvas { display: none; }
  .impact-layer::before,
  .impact-layer::after,
  .hero-copy,
  .hero[data-impact-ready]::before,
  .hero-reactor { transform: none; }
  .hero-reactor { right: -10%; top: 50%; opacity: .18; }
  .hero-reactor__ring,
  .hero-reactor__core,
  .hero-reactor__orbit::before,
  .hero-reactor__orbit::after { animation: none !important; }
  .impact-section-sweep::before { transition: none; transform: none; }
}