/* ==========================================================================
   HERO ATMOSPHERE — cinematic visual only (desktop + mobile)
   ========================================================================== */

@keyframes hero-smoke-drift {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); opacity: 0.75; }
  50% { transform: translate3d(-10px, -6px, 0) scale(1.03); opacity: 1; }
}

@keyframes hero-beam-pulse {
  0%, 100% { opacity: 0.55; }
  50% { opacity: 0.85; }
}

/* ---- Remove flat green rectangle: dark base, layered spotlight ---- */
.hero {
  background: #050505 !important;
}

.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 42% 55% at 74% 52%, rgba(182, 255, 0, 0.05) 0%, transparent 62%),
    radial-gradient(ellipse 120% 90% at 50% 100%, rgba(8, 8, 8, 0.9) 0%, transparent 55%),
    linear-gradient(90deg, #050505 0%, #050505 38%, transparent 42%, transparent 100%);
}

/* Tame full-section cinema glows that flatten the right side */
@media (min-width: 901px) {
  .hero__cinema-glow--center {
    opacity: 0.28 !important;
    background: radial-gradient(ellipse 50% 45% at 50% 45%, rgba(182, 255, 0, 0.1) 0%, transparent 72%) !important;
    filter: blur(100px) !important;
  }

  .hero__cinema-glow--right {
    opacity: 0.45 !important;
    background: radial-gradient(ellipse 42% 40% at 50% 42%, rgba(182, 255, 0, 0.14) 0%, transparent 70%) !important;
  }

  .hero__cinema-spotlight {
    opacity: 0.5 !important;
    filter: blur(55px) !important;
  }

  .hero__cinema-vignette {
    background:
      radial-gradient(ellipse 90% 80% at 68% 48%, transparent 18%, rgba(0, 0, 0, 0.55) 100%),
      linear-gradient(180deg, rgba(0, 0, 0, 0.35) 0%, transparent 22%, transparent 72%, rgba(0, 0, 0, 0.75) 100%),
      linear-gradient(90deg, rgba(0, 0, 0, 0.2) 0%, transparent 38%) !important;
  }
}

/* ---- Visual column: no box, seamless bleed ---- */
.hero__scene.hero-visual,
.hero-visual {
  isolation: isolate;
}

.hero-visual::before {
  left: 50% !important;
  bottom: 6% !important;
  width: min(42vw, 360px) !important;
  height: min(58vh, 520px) !important;
  transform: translateX(-50%) !important;
  background: radial-gradient(
    ellipse 48% 52% at 50% 54%,
    rgba(182, 255, 0, 0.55) 0%,
    rgba(182, 255, 0, 0.22) 38%,
    rgba(182, 255, 0, 0.06) 58%,
    transparent 78%
  ) !important;
  filter: blur(38px) !important;
  -webkit-mask-image: radial-gradient(ellipse 85% 85% at 50% 52%, #000 25%, transparent 100%);
  mask-image: radial-gradient(ellipse 85% 85% at 50% 52%, #000 25%, transparent 100%);
  opacity: 0.95 !important;
}

.hero-visual::after {
  left: 50% !important;
  bottom: 0 !important;
  width: 110% !important;
  height: 90% !important;
  transform: translateX(-50%) !important;
  background:
    radial-gradient(ellipse 42% 36% at 28% 44%, rgba(200, 200, 200, 0.14) 0%, transparent 62%),
    radial-gradient(ellipse 38% 34% at 74% 46%, rgba(160, 160, 160, 0.12) 0%, transparent 58%),
    radial-gradient(ellipse 50% 40% at 50% 38%, rgba(255, 255, 255, 0.05) 0%, transparent 65%) !important;
  opacity: 0.85 !important;
  mix-blend-mode: screen !important;
  animation: hero-smoke-drift 16s ease-in-out infinite;
}

/* ---- Layered spotlight system ---- */
.hero__atmo-spot-halo {
  position: absolute;
  left: 50%;
  top: 44%;
  width: min(75vw, 680px);
  height: min(82vh, 780px);
  transform: translate(-50%, -50%);
  background: radial-gradient(
    circle,
    rgba(182, 255, 0, 0.12) 0%,
    rgba(182, 255, 0, 0.05) 42%,
    transparent 72%
  );
  filter: blur(55px);
  z-index: 0;
}

.hero__atmo-glow {
  left: 50% !important;
  top: 44% !important;
  width: min(58vw, 520px) !important;
  height: min(68vh, 640px) !important;
  background: radial-gradient(
    ellipse 52% 48% at 50% 50%,
    rgba(182, 255, 0, 0.28) 0%,
    rgba(182, 255, 0, 0.12) 35%,
    rgba(182, 255, 0, 0.03) 58%,
    transparent 76%
  ) !important;
  filter: blur(32px) !important;
  z-index: 1;
}

.hero__atmo-glow--soft {
  top: 46% !important;
  width: min(48vw, 420px) !important;
  height: min(55vh, 520px) !important;
  background: radial-gradient(
    circle,
    rgba(182, 255, 0, 0.35) 0%,
    rgba(182, 255, 0, 0.12) 45%,
    transparent 75%
  ) !important;
  filter: blur(24px) !important;
  z-index: 2;
}

.hero__atmo-spot-core {
  position: absolute;
  left: 50%;
  top: 43%;
  width: min(32vw, 280px);
  height: min(42vh, 400px);
  transform: translate(-50%, -50%);
  background: radial-gradient(
    ellipse 50% 48% at 50% 52%,
    rgba(210, 255, 80, 0.5) 0%,
    rgba(182, 255, 0, 0.28) 32%,
    rgba(182, 255, 0, 0.08) 55%,
    transparent 78%
  );
  filter: blur(20px);
  z-index: 3;
  mix-blend-mode: screen;
}

.hero__atmo-shoulder-smoke {
  position: absolute;
  inset: 8% 0 12%;
  z-index: 4;
  pointer-events: none;
  background:
    radial-gradient(ellipse 38% 28% at 22% 36%, rgba(140, 140, 140, 0.2) 0%, transparent 68%),
    radial-gradient(ellipse 36% 26% at 78% 38%, rgba(120, 120, 120, 0.18) 0%, transparent 65%),
    radial-gradient(ellipse 55% 35% at 50% 32%, rgba(180, 180, 180, 0.08) 0%, transparent 70%);
  filter: blur(28px);
  mix-blend-mode: screen;
  animation: hero-smoke-drift 14s ease-in-out infinite reverse;
}

.hero__atmo-floor-shadow {
  position: absolute;
  left: 50%;
  bottom: 0;
  width: min(50vw, 420px);
  height: min(8vh, 72px);
  transform: translateX(-50%);
  background: radial-gradient(ellipse 55% 80% at 50% 50%, rgba(0, 0, 0, 0.55) 0%, transparent 72%);
  filter: blur(14px);
  z-index: 11;
  pointer-events: none;
}

.hero__atmo-beams {
  z-index: 5;
  animation: hero-beam-pulse 8s ease-in-out infinite;
}

.hero__atmo-smoke,
.hero__atmo-smoke--2 {
  z-index: 4;
}

.hero__atmo-lines,
.hero__atmo-triangle {
  z-index: 6;
}

.hero__atmo-particles {
  z-index: 7;
  opacity: 0.5 !important;
}

.hero__atmo-edge-fade {
  position: absolute;
  inset: -15% -25% -10% -30%;
  z-index: 8;
  pointer-events: none;
  background:
    radial-gradient(ellipse 72% 78% at 50% 48%, transparent 22%, rgba(5, 5, 5, 0.35) 68%, rgba(5, 5, 5, 0.92) 100%);
}

.hero__atmo-vignette {
  inset: -8% -18% -6% -22% !important;
  z-index: 9 !important;
  opacity: 0.9 !important;
  background:
    radial-gradient(ellipse 78% 72% at 50% 46%, transparent 18%, rgba(0, 0, 0, 0.35) 62%, rgba(0, 0, 0, 0.82) 100%) !important;
}

.hero__atmo-grain {
  z-index: 10;
  opacity: 0.24 !important;
  mix-blend-mode: overlay;
}

/* ---- Trainer integration: rim light + depth ---- */
.hero-trainer,
.trainer-photo--hero {
  position: relative;
  z-index: 12 !important;
  filter:
    drop-shadow(0 0 28px rgba(182, 255, 0, 0.32))
    drop-shadow(0 0 56px rgba(182, 255, 0, 0.14))
    drop-shadow(0 0 100px rgba(182, 255, 0, 0.06))
    drop-shadow(0 10px 36px rgba(0, 0, 0, 0.5)) !important;
}

/* =============================================================================
   MOBILE HERO ONLY
   ============================================================================= */

@media (max-width: 900px) {
  .hero {
    background: #050505 !important;
  }

  .hero::before {
    background:
      radial-gradient(ellipse 90% 55% at 50% 28%, rgba(182, 255, 0, 0.04) 0%, transparent 55%),
      radial-gradient(ellipse 100% 40% at 50% 0%, rgba(12, 14, 8, 0.8) 0%, transparent 70%) !important;
  }

  .hero__scene.hero-visual,
  .hero-visual {
    background: transparent !important;
    overflow: hidden !important;
  }

  .hero-visual::before {
    width: 72% !important;
    height: 78% !important;
    bottom: 4% !important;
    filter: blur(32px) !important;
  }

  .hero-visual::after {
    width: 120% !important;
    height: 95% !important;
    opacity: 0.9 !important;
  }

  .hero__atmo {
    inset: -6% -8% 0 -8% !important;
  }

  .hero__atmo-spot-halo {
    width: 95%;
    height: 88%;
    top: 46%;
    filter: blur(40px);
  }

  .hero__atmo-spot-core {
    width: 58%;
    height: 62%;
    top: 42%;
    filter: blur(16px);
  }

  .hero__atmo-glow {
    width: 80% !important;
    height: 75% !important;
    top: 44% !important;
  }

  .hero__atmo-glow--soft {
    width: 65% !important;
    height: 60% !important;
  }

  .hero__atmo-shoulder-smoke {
    inset: 5% 0 8%;
    filter: blur(22px);
  }

  .hero__atmo-edge-fade {
    inset: -4% -6% -2% -6%;
    background:
      radial-gradient(ellipse 88% 82% at 50% 46%, transparent 28%, rgba(5, 5, 5, 0.4) 72%, rgba(5, 5, 5, 0.95) 100%);
  }

  .hero__atmo-vignette {
    inset: 0 !important;
    opacity: 0.95 !important;
    background:
      radial-gradient(ellipse 92% 85% at 50% 44%, transparent 24%, rgba(0, 0, 0, 0.4) 70%, rgba(0, 0, 0, 0.88) 100%) !important;
  }

  .hero__atmo-triangle--1 {
    opacity: 0.35 !important;
  }

  .hero__atmo-particles {
    display: block !important;
    opacity: 0.38 !important;
  }

  .hero-trainer,
  .trainer-photo--hero {
    filter:
      drop-shadow(0 0 24px rgba(182, 255, 0, 0.34))
      drop-shadow(0 0 48px rgba(182, 255, 0, 0.16))
      drop-shadow(0 8px 28px rgba(0, 0, 0, 0.45)) !important;
  }

  .hero__content {
    position: relative;
    z-index: 2;
    padding-top: 0.25rem !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero-visual::after,
  .hero__atmo-shoulder-smoke,
  .hero__atmo-beams {
    animation: none !important;
  }
}