/* ══════════════════════════════════════════
   HERO BACKGROUND ANIMATION
══════════════════════════════════════════ */

.hero-canvas {
  position: fixed;
  top: 0;
  left: 0;
  pointer-events: none;
  z-index: 500;
}

.hero-rays {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 499;
  overflow: hidden;
}

.hero-ray--orb {
  position: absolute;
  top: -40%;
  left: -15%;
  width: 65vw;
  height: 65vw;
  border-radius: 50%;
  background: rgba(139, 69, 255, 0.10);
  filter: blur(90px);
  animation: ray-pulse 7s ease-in-out infinite;
}

.hero-ray--sweep1 {
  position: absolute;
  top: -15%;
  left: -10%;
  width: 75vw;
  height: 30vh;
  background: linear-gradient(90deg, rgba(255,255,255,0.08) 0%, rgba(255,255,255,0.03) 55%, transparent 100%);
  filter: blur(50px);
  transform-origin: top left;
  animation: ray-sweep1 8s ease-in-out infinite;
}

.hero-ray--sweep2 {
  position: absolute;
  top: -5%;
  left: -5%;
  width: 55vw;
  height: 14vh;
  background: linear-gradient(90deg, rgba(255,255,255,0.10) 0%, rgba(255,255,255,0.04) 50%, transparent 100%);
  filter: blur(28px);
  transform-origin: top left;
  animation: ray-sweep2 5s ease-in-out infinite alternate;
  animation-delay: 1.2s;
}

.hero-ray--core {
  position: absolute;
  top: 0%;
  left: -2%;
  width: 45vw;
  height: 4vh;
  background: linear-gradient(90deg, rgba(139,69,255,0.28) 0%, rgba(255,255,255,0.08) 50%, transparent 100%);
  filter: blur(14px);
  transform-origin: top left;
  mix-blend-mode: screen;
  animation: ray-core 3.5s ease-in-out infinite;
}

.hero-ray--center {
  position: absolute;
  top: -25%;
  left: 50%;
  transform: translateX(-50%);
  width: 45vw;
  height: 75vh;
  background: linear-gradient(180deg, rgba(139,69,255,0.10) 0%, rgba(139,69,255,0.03) 60%, transparent 100%);
  filter: blur(70px);
  transform-origin: top center;
  animation: ray-center 6s ease-in-out infinite;
}

/* ── Keyframes ── */
@keyframes ray-pulse {
  0%, 100% { transform: scale(1);    opacity: 0.7; }
  50%       { transform: scale(1.1); opacity: 1;   }
}

@keyframes ray-sweep1 {
  0%, 100% { transform: rotate(32deg) scaleY(1);   opacity: 0.6; }
  50%      { transform: rotate(27deg) scaleY(1.4); opacity: 1;   }
}

@keyframes ray-sweep2 {
  0%   { transform: rotate(22deg) translateY(0);       opacity: 0.6; }
  100% { transform: rotate(26deg) translateY(4vh) scale(1.15); opacity: 1; }
}

@keyframes ray-core {
  0%, 100% { transform: rotate(22deg) scaleX(0.85); opacity: 0.5; }
  50%      { transform: rotate(22deg) scaleX(1.15);  opacity: 1;   }
}

@keyframes ray-center {
  0%, 100% { opacity: 0.4; }
  50%      { opacity: 0.8; }
}