/* ==========================================================================
   HERO BOTTOM FIX — natural fade, premium background (Hero only)
   Loads last. Does not touch About, Services, or other sections.
   ========================================================================== */

.hero__mobile-fade {
  display: none;
}

/* ---- Section bg: no heavy floor gradient ---- */
.hero {
  background:
    radial-gradient(ellipse 52% 48% at 68% 34%, rgba(16, 20, 10, 0.22) 0%, transparent 58%),
    #050505 !important;
}

.hero__cinema-vignette {
  background:
    radial-gradient(ellipse 92% 76% at 68% 36%, transparent 32%, rgba(0, 0, 0, 0.36) 100%),
    linear-gradient(105deg, rgba(0, 0, 0, 0.22) 0%, transparent 44%, transparent 100%) !important;
}

.hero__cinema-glow--right {
  opacity: 0.55 !important;
  background: radial-gradient(ellipse 42% 40% at 50% 34%, rgba(182, 255, 0, 0.14) 0%, transparent 68%) !important;
  filter: blur(90px) !important;
}

.hero__cinema-glow--center {
  opacity: 0.35 !important;
}

.hero__cinema-spotlight {
  opacity: 0.65 !important;
  background: radial-gradient(ellipse 44% 48% at 50% 32%, rgba(182, 255, 0, 0.1) 0%, transparent 72%) !important;
}

/* ---- Atmosphere: sides + top vignette only, body stays visible ---- */
.hero__atmo {
  -webkit-mask-image: radial-gradient(
    ellipse 92% 100% at 50% 40%,
    #000 40%,
    rgba(0, 0, 0, 0.42) 72%,
    transparent 100%
  ) !important;
  mask-image: radial-gradient(
    ellipse 92% 100% at 50% 40%,
    #000 40%,
    rgba(0, 0, 0, 0.42) 72%,
    transparent 100%
  ) !important;
}

.hero::before {
  background:
    radial-gradient(ellipse 32% 38% at 72% 36%, rgba(182, 255, 0, 0.04) 0%, transparent 68%),
    linear-gradient(90deg, #050505 0%, #050505 40%, transparent 48%, transparent 100%) !important;
}

/* ---- Premium glow: head & shoulders only ---- */
.hero-visual::before {
  background: radial-gradient(
    ellipse 26% 30% at 50% 34%,
    rgba(182, 255, 0, 0.09) 0%,
    rgba(182, 255, 0, 0.03) 46%,
    transparent 72%
  ) !important;
  filter: blur(58px) !important;
  -webkit-mask-image: radial-gradient(ellipse 70% 76% at 50% 36%, #000 26%, transparent 100%) !important;
  mask-image: radial-gradient(ellipse 70% 76% at 50% 36%, #000 26%, transparent 100%) !important;
}

.hero-visual::after {
  background:
    radial-gradient(ellipse 34% 28% at 24% 40%, rgba(160, 160, 160, 0.08) 0%, transparent 62%),
    radial-gradient(ellipse 32% 26% at 76% 42%, rgba(140, 140, 140, 0.06) 0%, transparent 58%),
    radial-gradient(ellipse 40% 32% at 50% 32%, rgba(200, 200, 200, 0.04) 0%, transparent 65%) !important;
  -webkit-mask-image: radial-gradient(ellipse 78% 80% at 50% 38%, #000 20%, transparent 100%) !important;
  mask-image: radial-gradient(ellipse 78% 80% at 50% 38%, #000 20%, transparent 100%) !important;
  opacity: 0.65 !important;
}

.hero__atmo-spot-halo {
  background: radial-gradient(
    ellipse 36% 34% at 50% 34%,
    rgba(182, 255, 0, 0.07) 0%,
    rgba(182, 255, 0, 0.025) 42%,
    transparent 72%
  ) !important;
}

.hero__atmo-glow {
  background: radial-gradient(
    ellipse 22% 26% at 50% 33%,
    rgba(182, 255, 0, 0.11) 0%,
    rgba(182, 255, 0, 0.04) 42%,
    transparent 72%
  ) !important;
}

.hero__atmo-glow--soft {
  background: radial-gradient(
    ellipse 18% 22% at 50% 32%,
    rgba(182, 255, 0, 0.13) 0%,
    rgba(182, 255, 0, 0.04) 48%,
    transparent 76%
  ) !important;
}

.hero__atmo-spot-core {
  background: radial-gradient(
    ellipse 16% 20% at 50% 31%,
    rgba(200, 230, 90, 0.14) 0%,
    rgba(182, 255, 0, 0.05) 40%,
    transparent 72%
  ) !important;
  opacity: 0.6 !important;
}

.hero__atmo-shoulder-smoke {
  background:
    radial-gradient(ellipse 34% 26% at 50% 36%, rgba(130, 130, 130, 0.09) 0%, transparent 68%),
    radial-gradient(ellipse 26% 20% at 16% 40%, rgba(100, 100, 100, 0.07) 0%, transparent 65%),
    radial-gradient(ellipse 26% 20% at 84% 40%, rgba(100, 100, 100, 0.07) 0%, transparent 65%) !important;
}

.hero__atmo-lines {
  opacity: 0.14 !important;
}

/* ---- No harsh bottom overlays on the figure ---- */
.hero__atmo-vignette {
  opacity: 0.58 !important;
  background: radial-gradient(
    ellipse 84% 86% at 50% 40%,
    transparent 36%,
    rgba(0, 0, 0, 0.18) 74%,
    rgba(0, 0, 0, 0.42) 100%
  ) !important;
}

.hero__atmo-edge-fade {
  inset: -2% -8% 0 -8% !important;
  background: radial-gradient(
    ellipse 86% 92% at 50% 40%,
    transparent 38%,
    rgba(5, 5, 5, 0.18) 74%,
    rgba(5, 5, 5, 0.62) 100%
  ) !important;
}

.hero__atmo-side-dissolve {
  background: linear-gradient(
    90deg,
    rgba(5, 5, 5, 0.78) 0%,
    transparent 14%,
    transparent 86%,
    rgba(5, 5, 5, 0.78) 100%
  ) !important;
}

.hero__atmo-boundary-fog {
  background:
    radial-gradient(ellipse 38% 34% at 0% 14%, rgba(5, 5, 5, 0.55) 0%, transparent 72%),
    radial-gradient(ellipse 38% 34% at 100% 14%, rgba(5, 5, 5, 0.55) 0%, transparent 72%),
    radial-gradient(ellipse 46% 36% at 50% 0%, rgba(5, 5, 5, 0.38) 0%, transparent 68%),
    radial-gradient(ellipse 50% 18% at 50% 100%, rgba(90, 90, 90, 0.06) 0%, transparent 72%) !important;
  filter: blur(24px);
}

.hero__atmo-bottom-fog {
  height: 16% !important;
  background: linear-gradient(
    180deg,
    rgba(5, 5, 5, 0) 0%,
    rgba(5, 5, 5, 0.05) 55%,
    rgba(5, 5, 5, 0.16) 100%
  ) !important;
  filter: blur(12px);
  opacity: 0.85;
}

.hero__atmo-transparency-fill {
  opacity: 0.55;
  background: radial-gradient(
    ellipse 52% 56% at 50% 42%,
    transparent 46%,
    rgba(5, 5, 5, 0.22) 74%,
    rgba(5, 5, 5, 0.38) 100%
  ) !important;
  filter: blur(10px);
}

.hero__atmo-floor-shadow {
  top: auto !important;
  bottom: 0 !important;
  height: 12% !important;
  background: radial-gradient(ellipse 40% 65% at 50% 0%, rgba(0, 0, 0, 0.22) 0%, transparent 74%) !important;
  filter: blur(22px) !important;
  opacity: 0.75;
}

/* ---- Trainer: no mask on body, soft ground shadow only ---- */
.hero-trainer-wrap {
  -webkit-mask-image: none !important;
  mask-image: none !important;
  filter:
    drop-shadow(0 12px 32px rgba(0, 0, 0, 0.42))
    drop-shadow(0 0 28px rgba(182, 255, 0, 0.06))
    drop-shadow(1px 0 10px rgba(255, 255, 255, 0.03));
}

.hero-trainer-wrap::before {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -1%;
  width: 48%;
  height: 7%;
  transform: translateX(-50%);
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(ellipse 52% 80% at 50% 0%, rgba(0, 0, 0, 0.26) 0%, transparent 74%);
  filter: blur(18px);
}

.hero-trainer-wrap::after {
  display: none;
}

.hero-trainer-wrap .hero-trainer,
.hero-trainer-wrap .trainer-photo--hero {
  position: relative;
  z-index: 0;
}

@media (min-width: 901px) {
  .hero__cinema-vignette {
    background:
      radial-gradient(ellipse 90% 78% at 68% 40%, transparent 26%, rgba(0, 0, 0, 0.42) 100%),
      linear-gradient(90deg, rgba(0, 0, 0, 0.2) 0%, transparent 42%) !important;
  }
}

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

  .hero__cinema-vignette {
    opacity: 0.35 !important;
  }

  .hero__atmo-bottom-fog {
    display: block !important;
    height: 28% !important;
    z-index: 13 !important;
    background: linear-gradient(
      180deg,
      rgba(5, 5, 5, 0) 0%,
      rgba(5, 5, 5, 0.06) 50%,
      rgba(5, 5, 5, 0.28) 100%
    ) !important;
    filter: blur(10px);
    opacity: 1 !important;
  }

  .hero-visual::after {
    content: "" !important;
    inset: auto 0 0 0 !important;
    top: auto !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    height: 32% !important;
    transform: none !important;
    z-index: 14 !important;
    pointer-events: none;
    animation: none !important;
    filter: blur(8px) !important;
    opacity: 0.85 !important;
    mix-blend-mode: normal !important;
    -webkit-mask-image: none !important;
    mask-image: none !important;
    background: linear-gradient(
      to bottom,
      rgba(5, 5, 5, 0) 0%,
      rgba(5, 5, 5, 0.1) 55%,
      rgba(5, 5, 5, 0.38) 100%
    ) !important;
  }

  .hero__scene.hero-visual,
  .hero-visual {
    overflow: hidden !important;
    background: transparent !important;
    align-items: flex-end !important;
    margin-bottom: 0 !important;
  }

  .hero-trainer-wrap {
    height: 96% !important;
    max-height: 96% !important;
    margin-left: auto !important;
    margin-right: auto !important;
    -webkit-mask-image: none !important;
    mask-image: none !important;
  }

  .hero__content {
    position: relative;
    z-index: 1;
    margin-top: -1.25rem !important;
    padding-top: 1.25rem !important;
  }

  .hero__content::before {
    content: "";
    position: absolute;
    top: -2.5rem;
    left: 0;
    right: 0;
    height: 2.5rem;
    pointer-events: none;
    background: linear-gradient(to bottom, rgba(5, 5, 5, 0), #050505);
    z-index: -1;
  }

  .hero > .container.hero__inner {
    gap: 0 !important;
  }

  .hero__mobile-fade {
    display: block;
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 36%;
    z-index: 20;
    pointer-events: none;
    background: linear-gradient(
      to bottom,
      rgba(5, 5, 5, 0) 0%,
      rgba(5, 5, 5, 0.06) 48%,
      rgba(5, 5, 5, 0.32) 82%,
      rgba(5, 5, 5, 0.88) 100%
    );
    filter: blur(4px);
  }
}