/* ============================================================
   HERO AMBIENT BACKGROUND
   - drifting aurora glow blobs (seamless ping-pong)
   - subtle animated grid
   - interactive constellation particle canvas (js/hero-ambient.js)
   ============================================================ */
.hero { isolation: isolate; }

.hero-ambient {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}
.hero-ambient canvas {
  position: absolute;
  inset: 0;
}

/* Aurora glow blobs */
.amb-aurora {
  position: absolute;
  border-radius: 50%;
  filter: blur(72px);
  opacity: .5;
  mix-blend-mode: multiply;
  will-change: transform;
}
.amb-a1 {
  width: 540px; height: 540px;
  top: -140px; left: -120px;
  background: radial-gradient(circle at 35% 35%, rgba(17,176,122,.55), transparent 70%);
  animation: amb-drift1 19s ease-in-out infinite alternate;
}
.amb-a2 {
  width: 480px; height: 480px;
  bottom: -160px; right: -90px;
  background: radial-gradient(circle at 50% 50%, rgba(200,164,78,.5), transparent 70%);
  animation: amb-drift2 23s ease-in-out infinite alternate;
}
.amb-a3 {
  width: 420px; height: 420px;
  top: 28%; left: 44%;
  background: radial-gradient(circle at 50% 50%, rgba(13,107,78,.32), transparent 70%);
  animation: amb-drift3 27s ease-in-out infinite alternate;
}
.amb-a4 {
  width: 300px; height: 300px;
  top: 8%; right: 18%;
  background: radial-gradient(circle at 50% 50%, rgba(232,202,114,.5), transparent 70%);
  animation: amb-drift4 21s ease-in-out infinite alternate;
  animation-delay: -7s;
}
/* Two-stop + alternate = seamless ping-pong, never resets */
@keyframes amb-drift1 {
  from { transform: translate(0,0) scale(1); }
  to   { transform: translate(80px,60px) scale(1.14); }
}
@keyframes amb-drift2 {
  from { transform: translate(0,0) scale(1); }
  to   { transform: translate(-80px,-55px) scale(1.16); }
}
@keyframes amb-drift3 {
  from { transform: translate(0,0) scale(1); }
  to   { transform: translate(60px,-50px) scale(1.2); }
}
@keyframes amb-drift4 {
  from { transform: translate(0,0) scale(1); }
  to   { transform: translate(-50px,45px) scale(1.1); }
}

/* Subtle drifting grid for depth (seamless tiling) */
.amb-grid {
  position: absolute;
  inset: -2px;
  background-image:
    linear-gradient(rgba(13,107,78,.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(13,107,78,.045) 1px, transparent 1px);
  background-size: 46px 46px;
  -webkit-mask: radial-gradient(ellipse 72% 62% at 50% 42%, #000 28%, transparent 76%);
  mask: radial-gradient(ellipse 72% 62% at 50% 42%, #000 28%, transparent 76%);
  animation: amb-grid-pan 42s linear infinite;
}
@keyframes amb-grid-pan {
  from { background-position: 0 0, 0 0; }
  to   { background-position: 46px 46px, 46px 46px; }
}

@media (prefers-reduced-motion: reduce) {
  .amb-aurora, .amb-grid { animation: none !important; }
}