/* aurora-hero.css — Animated aurora background scene */

/* ─── Keyframes ──────────────────────────────────────────────────────────── */
@keyframes aurora-rise {
  0%   { transform: translateY(60px) scaleY(0.6); opacity: 0; }
  50%  { opacity: 1; }
  100% { transform: translateY(0px)  scaleY(1);   opacity: 0.85; }
}

@keyframes aurora-fade {
  0%, 100% { opacity: 0.3; }
  50%       { opacity: 0.9; }
}

@keyframes aurora-floor-glow {
  0%, 100% { opacity: 0.25; transform: scaleX(1); }
  50%       { opacity: 0.55; transform: scaleX(1.05); }
}

@keyframes aurora-main-glow {
  0%, 100% { opacity: 0.4; filter: blur(60px); }
  50%       { opacity: 0.8; filter: blur(40px); }
}

@keyframes aurora-move-grid {
  0%   { background-position: 0 0; }
  100% { background-position: 0 80px; }
}

@keyframes aurora-beam-drift {
  0%   { transform: translateX(-18px) skewX(-6deg) scaleY(0.9); }
  50%  { transform: translateX(18px)  skewX(6deg)  scaleY(1.05); }
  100% { transform: translateX(-18px) skewX(-6deg) scaleY(0.9); }
}

@keyframes aurora-pulse-orb {
  0%, 100% { transform: scale(1)    blur(0px); opacity: 0.55; }
  50%       { transform: scale(1.12) blur(2px); opacity: 0.9; }
}

/* ─── Scene wrapper ──────────────────────────────────────────────────────── */
.aurora-scene {
  position: relative;
  width: 100%;
  overflow: hidden;
  background: radial-gradient(ellipse 120% 80% at 50% 110%, #001a0e 0%, #000 60%);
}

/* Moving grid */
.aurora-grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(to right,  rgba(0,255,140,0.04) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(0,255,140,0.04) 1px, transparent 1px);
  background-size: 60px 80px;
  animation: aurora-move-grid 6s linear infinite;
  mask-image: linear-gradient(to top, rgba(0,0,0,0.6) 0%, transparent 70%);
  -webkit-mask-image: linear-gradient(to top, rgba(0,0,0,0.6) 0%, transparent 70%);
  pointer-events: none;
}

/* Floor reflection */
.aurora-floor {
  position: absolute;
  bottom: 0;
  left: -10%;
  width: 120%;
  height: 30%;
  background: radial-gradient(ellipse 80% 100% at 50% 100%, rgba(0,255,120,0.18) 0%, transparent 70%);
  animation: aurora-floor-glow 4s ease-in-out infinite;
  pointer-events: none;
}

/* Main ambient orb */
.aurora-orb {
  position: absolute;
  top: 10%;
  left: 50%;
  transform: translateX(-50%);
  width: 60%;
  height: 50%;
  border-radius: 50%;
  background: radial-gradient(ellipse at center, rgba(0,255,120,0.22) 0%, rgba(0,200,80,0.08) 45%, transparent 70%);
  filter: blur(48px);
  animation: aurora-main-glow 5s ease-in-out infinite;
  pointer-events: none;
}

/* Light beams */
.aurora-beam {
  position: absolute;
  bottom: 0;
  width: 2px;
  border-radius: 100px;
  transform-origin: bottom center;
  pointer-events: none;
  animation: aurora-rise 3.5s ease-out forwards, aurora-beam-drift 7s ease-in-out infinite;
}

/* Each beam = gradient from accent green to transparent */
.aurora-beam::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: inherit;
  filter: blur(3px);
  opacity: 0.5;
}

/* Content layer (sits above scene) */
.aurora-content {
  position: relative;
  z-index: 2;
}

/* Fade-out vignette at top + sides */
.aurora-vignette {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 100% 40% at 50% 0%, rgba(0,0,0,0.7) 0%, transparent 60%),
    linear-gradient(to right, rgba(0,0,0,0.4) 0%, transparent 15%, transparent 85%, rgba(0,0,0,0.4) 100%);
  pointer-events: none;
  z-index: 1;
}