/* ============================================================
   HERO ANIMATION — Neural Network Mesh
   Animated node network with purple→teal gradient
   Fits between navbar and hero content
   ============================================================ */

.hero-animation {
  position: relative;
  width: 100%;
  height: 35vh;
  min-height: 200px;
  max-height: 400px;
  overflow: hidden;
  background: transparent;
  /* No margin needed — now inside hero-split */
  margin: 0;
}

.hero-animation canvas {
  display: block;
  width: 100%;
  height: 100%;
}

/* Gradient overlays for seamless edge blending */
.hero-animation::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 120px;
  background: linear-gradient(to top, var(--black) 0%, transparent 100%);
  pointer-events: none;
  z-index: 2;
}

/* Top fade for seamless navbar blend */
.hero-animation::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 60px;
  background: linear-gradient(to bottom, var(--black) 0%, transparent 100%);
  pointer-events: none;
  z-index: 2;
}

/* Side fades via extra pseudo element on canvas */
.hero-animation canvas {
  mask-image: linear-gradient(
    to right,
    transparent 0%,
    black 8%,
    black 92%,
    transparent 100%
  );
  -webkit-mask-image: linear-gradient(
    to right,
    transparent 0%,
    black 8%,
    black 92%,
    transparent 100%
  );
}

/* Central text overlay — hidden, buzzwords are now in canvas */
.hero-animation-text {
  display: none;
}

/* ============================================================
   NAVBAR LOGO — Hidden until fly-through completes,
   then fades in as if the logo "landed" there
   ============================================================ */
.navbar .nav-logo {
  opacity: 0;
  animation: navLogoAppear 0.8s ease-out 4.2s forwards;
}

@keyframes navLogoAppear {
  0% {
    opacity: 0;
    transform: scale(1.3);
    filter: blur(3px);
  }
  100% {
    opacity: 1;
    transform: scale(1);
    filter: blur(0);
  }
}

/* ============================================================
   HERO LOGO FLY-THROUGH
   Approaches from afar, becomes readable, keeps growing
   past you and dissolves as it touches the edges
   ============================================================ */
.hero-logo-entrance {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 3;
  pointer-events: none;
  overflow: hidden;
  perspective: 800px;
}

.hero-logo-text {
  font-family: 'Space Grotesk', -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: clamp(48px, 8vw, 96px);
  font-weight: 700;
  letter-spacing: 0.12em;
  white-space: nowrap;
  background: var(--gradient-brand, linear-gradient(135deg, #8b5cf6 0%, #14b8a6 100%));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  -webkit-font-smoothing: antialiased;
  text-rendering: geometricPrecision;
  backface-visibility: hidden;
  animation: logoFlyThrough 4.5s linear forwards;
  will-change: transform, opacity, filter;
}

/* Perfectly smooth fly-through — linear timing, all easing baked into values.
   Scale: exponential growth. Opacity: smooth bell curve. Blur: inverse bell. */
@keyframes logoFlyThrough {
  0%   { transform: scale3d(0.15, 0.15, 1); opacity: 0;     filter: blur(18px);  }
  5%   { transform: scale3d(0.21, 0.21, 1); opacity: 0.07;  filter: blur(15px);  }
  10%  { transform: scale3d(0.28, 0.28, 1); opacity: 0.15;  filter: blur(12px);  }
  15%  { transform: scale3d(0.36, 0.36, 1); opacity: 0.28;  filter: blur(9px);   }
  20%  { transform: scale3d(0.45, 0.45, 1); opacity: 0.45;  filter: blur(6px);   }
  25%  { transform: scale3d(0.56, 0.56, 1); opacity: 0.62;  filter: blur(4px);   }
  30%  { transform: scale3d(0.70, 0.70, 1); opacity: 0.80;  filter: blur(2px);   }
  35%  { transform: scale3d(0.84, 0.84, 1); opacity: 0.92;  filter: blur(0.8px); }
  40%  { transform: scale3d(1.00, 1.00, 1); opacity: 1;     filter: blur(0);     }
  45%  { transform: scale3d(1.18, 1.18, 1); opacity: 0.96;  filter: blur(0);     }
  50%  { transform: scale3d(1.40, 1.40, 1); opacity: 0.88;  filter: blur(0);     }
  55%  { transform: scale3d(1.68, 1.68, 1); opacity: 0.75;  filter: blur(0.5px); }
  60%  { transform: scale3d(2.00, 2.00, 1); opacity: 0.60;  filter: blur(1px);   }
  65%  { transform: scale3d(2.38, 2.38, 1); opacity: 0.45;  filter: blur(2px);   }
  70%  { transform: scale3d(2.80, 2.80, 1); opacity: 0.30;  filter: blur(3px);   }
  75%  { transform: scale3d(3.28, 3.28, 1); opacity: 0.20;  filter: blur(4px);   }
  80%  { transform: scale3d(3.80, 3.80, 1); opacity: 0.12;  filter: blur(5px);   }
  85%  { transform: scale3d(4.38, 4.38, 1); opacity: 0.06;  filter: blur(6.5px); }
  90%  { transform: scale3d(5.00, 5.00, 1); opacity: 0.03;  filter: blur(8px);   }
  95%  { transform: scale3d(5.72, 5.72, 1); opacity: 0.01;  filter: blur(9px);   }
  100% { transform: scale3d(6.50, 6.50, 1); opacity: 0;     filter: blur(10px);  }
}

/* Mobile adjustments — doubled height (not !important so heroCollapse animation can override) */
@media (max-width: 768px) {
  .hero-animation {
    height: 56vh;
    min-height: 320px;
    max-height: 520px;
  }

  .hero-animation::after {
    height: 80px;
  }

  .hero-animation::before {
    height: 40px;
  }
}

@media (max-width: 480px) {
  .hero-animation {
    height: 44vh;
    min-height: 240px;
    max-height: 400px;
  }

  .hero-animation::after {
    height: 60px;
  }

  .hero-animation::before {
    height: 30px;
  }
}

/* Logo size adjustments for mobile */
@media (max-width: 768px) {
  .hero-logo-text {
    font-size: clamp(36px, 10vw, 64px);
    letter-spacing: 0.08em;
  }
}

@media (max-width: 480px) {
  .hero-logo-text {
    font-size: clamp(28px, 10vw, 48px);
    letter-spacing: 0.06em;
  }
}

/* Reduced motion preference */
@media (prefers-reduced-motion: reduce) {
  .hero-animation canvas {
    animation: none;
  }

  .hero-animation-text .ainode-mark {
    animation: none;
    opacity: 0.15;
  }

  .hero-logo-text {
    animation: none !important;
    opacity: 0;
  }

  .navbar .nav-logo {
    animation: none !important;
    opacity: 1;
  }
}