/* =========================================================
   AifoBeta — Hero Neural Network (borderless 3D)
   ========================================================= */

.hero.hero--split {
  overflow: visible;
}

.hero--split .hero-container {
  position: relative;
  z-index: 2;
  display: block;
}

.hero--split .hero-inner {
  max-width: min(500px, 40%);
  width: 100%;
  min-width: 0;
  padding: 60px 0 80px;
  min-height: calc(100vh - var(--nav-h) - var(--nav-offset) - 64px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: relative;
  z-index: 2;
}

.hero--split .hero-content {
  max-width: 100%;
}

.hero--split .hero-headline {
  font-size: clamp(42px, 4.6vw, 72px);
  max-width: 12ch;
}

.hero--split .hero-sub {
  max-width: 42ch;
}

/* Full-bleed 3D — large hero presence */
.hero-network {
  position: absolute;
  top: 50%;
  right: -2%;
  transform: translateY(-50%);
  width: min(72vw, 920px);
  height: min(96vh, 900px);
  z-index: 1;
  pointer-events: auto;
  overflow: visible;
  visibility: visible;
}

.neural-canvas {
  display: block;
  width: 100%;
  height: 100%;
  cursor: grab;
  position: relative;
  z-index: 1;
}

.neural-bloom {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 2;
  mix-blend-mode: screen;
}

.neural-canvas:active {
  cursor: grabbing;
}

.hero-network-glow {
  position: absolute;
  inset: -20%;
  background:
    radial-gradient(ellipse at 38% 42%, rgba(0,229,204,0.24) 0%, transparent 58%),
    radial-gradient(ellipse at 62% 58%, rgba(124,58,237,0.22) 0%, transparent 55%),
    radial-gradient(ellipse at 50% 75%, rgba(255,61,154,0.12) 0%, transparent 50%);
  filter: blur(72px);
  z-index: -1;
  pointer-events: none;
  animation: nn-glow-breathe 8s ease-in-out infinite;
}

@keyframes nn-glow-breathe {
  0%, 100% { opacity: 0.82; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.07); }
}

.hero-network.is-ready .hero-network-glow {
  animation: nn-glow-breathe 8s ease-in-out infinite, nn-glow-shift 12s ease-in-out infinite;
}

@keyframes nn-glow-shift {
  0%, 100% { filter: blur(72px) hue-rotate(0deg); }
  50% { filter: blur(80px) hue-rotate(12deg); }
}

@media (max-width: 1280px) {
  .hero-network {
    width: min(66vw, 780px);
    height: min(92vh, 780px);
    right: -1%;
  }
  .hero--split .hero-inner {
    max-width: min(460px, 38%);
  }
}

@media (max-width: 1100px) {
  .hero-network {
    width: min(62vw, 680px);
    height: min(88vh, 700px);
  }
  .hero--split .hero-inner {
    max-width: 36%;
  }
}

@media (max-width: 1024px) {
  .hero--split .hero-inner {
    max-width: 100%;
    padding-top: min(50vw, 320px);
    min-height: auto;
  }
  .hero-network {
    top: 52px;
    right: auto;
    left: 50%;
    transform: translateX(-50%);
    width: min(98vw, 680px);
    height: min(52vw, 380px);
  }
}

@media (max-width: 768px) {
  .hero--split .hero-inner { padding-top: min(56vw, 300px); }
  .hero-network {
    height: min(56vw, 340px);
    top: 40px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero-network-glow { animation: none; }
}