/* hero-bg-animated.css — drifting nebulous hero background.
   Activated only when .hero has the `.hero--animated` class. */

/* Strip the static gradient stack from .hero, keep just the galaxy texture
   as a quiet base layer. The animated blobs live in two child .dye divs. */
.hero--animated {
  background-image: url('assets/galaxy-bg.png') !important;
}

@property --lime-x { syntax: "<percentage>"; inherits: false; initial-value: 30%; }
@property --lime-y { syntax: "<percentage>"; inherits: false; initial-value: 0%; }
@property --lime-rx { syntax: "<percentage>"; inherits: false; initial-value: 70%; }
@property --lime-ry { syntax: "<percentage>"; inherits: false; initial-value: 50%; }
@property --vio-x { syntax: "<percentage>"; inherits: false; initial-value: 50%; }
@property --vio-y { syntax: "<percentage>"; inherits: false; initial-value: 110%; }

.hero--animated .dye {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}

.hero--animated .dye--lime {
  background: radial-gradient(
    ellipse var(--lime-rx) var(--lime-ry) at var(--lime-x) var(--lime-y),
    rgba(193, 250, 29, 0.20) 0%,
    rgba(193, 250, 29, 0.18) 18%,
    rgba(193, 250, 29, 0.11) 38%,
    rgba(193, 250, 29, 0.05) 58%,
    rgba(193, 250, 29, 0.02) 78%,
    transparent 100%
  );
  filter: blur(8px);
  animation: drift-lime 26s linear infinite alternate;
}

.hero--animated .dye--violet {
  background: radial-gradient(
    ellipse 110% 75% at var(--vio-x) var(--vio-y),
    rgba(92, 50, 240, 0.70) 0%,
    rgba(92, 50, 240, 0.45) 30%,
    rgba(92, 50, 240, 0.20) 55%,
    rgba(92, 50, 240, 0.06) 80%,
    transparent 100%
  );
  animation: drift-violet 34s linear infinite alternate;
}

/* Hero content must sit above the dye layers. */
.hero--animated > *:not(.dye) { position: relative; z-index: 1; }

@keyframes drift-lime {
  0%   { --lime-x:  -5%; --lime-y: -15%; --lime-rx: 65%; --lime-ry: 50%; }
  25%  { --lime-x:  60%; --lime-y:  10%; --lime-rx: 75%; --lime-ry: 58%; }
  50%  { --lime-x:  85%; --lime-y: -10%; --lime-rx: 60%; --lime-ry: 52%; }
  75%  { --lime-x:  20%; --lime-y:  25%; --lime-rx: 70%; --lime-ry: 62%; }
  100% { --lime-x:  50%; --lime-y:  -8%; --lime-rx: 68%; --lime-ry: 50%; }
}

@keyframes drift-violet {
  0%   { --vio-x:  20%; --vio-y: 120%; }
  25%  { --vio-x:  80%; --vio-y:  95%; }
  50%  { --vio-x:  50%; --vio-y: 115%; }
  75%  { --vio-x:  10%; --vio-y: 100%; }
  100% { --vio-x:  70%; --vio-y: 125%; }
}

@media (prefers-reduced-motion: reduce) {
  .dye--lime, .dye--violet { animation: none; }
}