/* ==========================================================================
   PHOTO INTEGRATION — final polish (Hero, About, Service modals only)
   Loads last. Does not touch service preview cards.
   ========================================================================== */

/* ---- Shared atmosphere mask (dissolve block edges) ---- */
.hero__atmo,
.about__portrait-atmo {
  -webkit-mask-image: radial-gradient(
    ellipse 76% 80% at 50% 50%,
    #000 32%,
    rgba(0, 0, 0, 0.55) 58%,
    transparent 100%
  );
  mask-image: radial-gradient(
    ellipse 76% 80% at 50% 50%,
    #000 32%,
    rgba(0, 0, 0, 0.55) 58%,
    transparent 100%
  );
}

/* =============================================================================
   HERO — body glow, edge dissolve, no rectangular green box
   ============================================================================= */

.hero::before {
  background:
    radial-gradient(ellipse 38% 48% at 72% 52%, rgba(182, 255, 0, 0.03) 0%, transparent 68%),
    radial-gradient(ellipse 120% 90% at 50% 100%, rgba(6, 6, 6, 0.92) 0%, transparent 55%),
    linear-gradient(90deg, #050505 0%, #050505 40%, transparent 46%, transparent 100%) !important;
}

.hero-visual::before {
  background: radial-gradient(
    ellipse 30% 42% at 50% 54%,
    rgba(182, 255, 0, 0.08) 0%,
    rgba(182, 255, 0, 0.03) 42%,
    transparent 68%
  ) !important;
  filter: blur(56px) !important;
  -webkit-mask-image: radial-gradient(ellipse 68% 72% at 50% 52%, #000 30%, transparent 100%) !important;
  mask-image: radial-gradient(ellipse 68% 72% at 50% 52%, #000 30%, transparent 100%) !important;
  opacity: 0.9 !important;
}

.hero-visual::after {
  background:
    radial-gradient(ellipse 34% 30% at 26% 44%, rgba(160, 160, 160, 0.1) 0%, transparent 62%),
    radial-gradient(ellipse 32% 28% at 74% 46%, rgba(140, 140, 140, 0.08) 0%, transparent 58%),
    radial-gradient(ellipse 44% 36% at 50% 38%, rgba(200, 200, 200, 0.05) 0%, transparent 65%) !important;
  -webkit-mask-image: radial-gradient(ellipse 70% 74% at 50% 50%, #000 24%, transparent 100%) !important;
  mask-image: radial-gradient(ellipse 70% 74% at 50% 50%, #000 24%, transparent 100%) !important;
  opacity: 0.75 !important;
}

.hero__atmo-spot-halo {
  background: radial-gradient(
    ellipse 36% 44% at 50% 52%,
    rgba(182, 255, 0, 0.06) 0%,
    rgba(182, 255, 0, 0.02) 45%,
    transparent 72%
  ) !important;
  filter: blur(64px) !important;
}

.hero__atmo-glow {
  background: radial-gradient(
    ellipse 28% 38% at 50% 52%,
    rgba(182, 255, 0, 0.14) 0%,
    rgba(182, 255, 0, 0.05) 40%,
    transparent 72%
  ) !important;
  filter: blur(42px) !important;
}

.hero__atmo-glow--soft {
  background: radial-gradient(
    ellipse 24% 32% at 50% 54%,
    rgba(182, 255, 0, 0.16) 0%,
    rgba(182, 255, 0, 0.04) 48%,
    transparent 76%
  ) !important;
  filter: blur(32px) !important;
}

.hero__atmo-spot-core {
  background: radial-gradient(
    ellipse 22% 30% at 50% 54%,
    rgba(200, 230, 90, 0.18) 0%,
    rgba(182, 255, 0, 0.08) 38%,
    transparent 72%
  ) !important;
  filter: blur(26px) !important;
  opacity: 0.7 !important;
  mix-blend-mode: screen;
}

.hero__atmo-shoulder-smoke {
  background:
    radial-gradient(ellipse 32% 24% at 18% 38%, rgba(110, 110, 110, 0.16) 0%, transparent 68%),
    radial-gradient(ellipse 32% 24% at 82% 40%, rgba(100, 100, 100, 0.14) 0%, transparent 65%),
    radial-gradient(ellipse 48% 30% at 50% 34%, rgba(150, 150, 150, 0.06) 0%, transparent 70%) !important;
  filter: blur(32px) !important;
}

.hero__atmo-boundary-fog {
  position: absolute;
  inset: -6% -10% -4% -10%;
  z-index: 8;
  pointer-events: none;
  background:
    radial-gradient(ellipse 42% 38% at 0% 18%, rgba(5, 5, 5, 0.75) 0%, transparent 72%),
    radial-gradient(ellipse 42% 38% at 100% 18%, rgba(5, 5, 5, 0.75) 0%, transparent 72%),
    radial-gradient(ellipse 50% 42% at 50% 0%, rgba(5, 5, 5, 0.55) 0%, transparent 68%),
    radial-gradient(ellipse 38% 32% at 8% 92%, rgba(80, 80, 80, 0.14) 0%, transparent 68%),
    radial-gradient(ellipse 38% 32% at 92% 92%, rgba(80, 80, 80, 0.14) 0%, transparent 68%),
    radial-gradient(ellipse 55% 40% at 50% 100%, rgba(5, 5, 5, 0.65) 0%, transparent 70%);
  filter: blur(22px);
}

.hero__atmo-edge-fade {
  inset: -4% -8% -2% -8% !important;
  background: radial-gradient(
    ellipse 74% 78% at 50% 50%,
    transparent 26%,
    rgba(5, 5, 5, 0.35) 62%,
    rgba(5, 5, 5, 0.96) 100%
  ) !important;
}

.hero__atmo-vignette {
  inset: -2% -6% 0 -6% !important;
  opacity: 0.92 !important;
  background:
    radial-gradient(ellipse 72% 76% at 50% 48%, transparent 24%, rgba(0, 0, 0, 0.38) 66%, rgba(0, 0, 0, 0.88) 100%),
    linear-gradient(180deg, transparent 58%, rgba(0, 0, 0, 0.55) 100%) !important;
}

.hero__atmo-floor-shadow {
  background: radial-gradient(ellipse 38% 85% at 50% 0%, rgba(0, 0, 0, 0.62) 0%, transparent 72%) !important;
  filter: blur(18px) !important;
}

/* Darken transparent PNG margins so glow doesn't read as a rectangle */
.hero__atmo-transparency-fill {
  position: absolute;
  left: 50%;
  top: 50%;
  width: min(44vw, 400px);
  height: min(78vh, 680px);
  transform: translate(-50%, -50%);
  z-index: 7;
  pointer-events: none;
  background: radial-gradient(
    ellipse 52% 56% at 50% 52%,
    transparent 38%,
    rgba(5, 5, 5, 0.55) 62%,
    rgba(5, 5, 5, 0.92) 100%
  );
  filter: blur(6px);
}

.hero__atmo-side-dissolve {
  position: absolute;
  inset: 0;
  z-index: 8;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(5, 5, 5, 0.92) 0%, transparent 16%, transparent 84%, rgba(5, 5, 5, 0.92) 100%),
    linear-gradient(180deg, rgba(5, 5, 5, 0.55) 0%, transparent 14%, transparent 78%, rgba(5, 5, 5, 0.75) 100%);
}

.hero-trainer-wrap {
  position: relative;
  z-index: 12;
  width: fit-content;
  max-width: 100%;
  height: 88vh;
  max-height: calc(100vh - var(--header-h) - 1rem);
  margin: 0 auto;
  isolation: isolate;
  -webkit-mask-image: radial-gradient(ellipse 90% 92% at 50% 50%, #000 76%, transparent 100%);
  mask-image: radial-gradient(ellipse 90% 92% at 50% 50%, #000 76%, transparent 100%);
  filter:
    drop-shadow(0 16px 44px rgba(0, 0, 0, 0.58))
    drop-shadow(0 6px 20px rgba(0, 0, 0, 0.38))
    drop-shadow(0 0 36px rgba(182, 255, 0, 0.07))
    drop-shadow(2px 0 14px rgba(255, 255, 255, 0.035));
}

.hero-trainer-wrap .hero-trainer,
.hero-trainer-wrap .trainer-photo--hero {
  display: block;
  position: relative;
  left: auto !important;
  right: auto !important;
  bottom: auto !important;
  transform: none !important;
  margin: 0 !important;
  height: 100% !important;
  max-height: 100% !important;
  width: auto !important;
  max-width: 100% !important;
  object-fit: contain !important;
  object-position: center center !important;
  filter: none !important;
}

.about__portrait-frame {
  align-items: flex-end !important;
  justify-content: center !important;
}

.about-trainer-wrap {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  width: fit-content;
  max-width: 135%;
  height: 92%;
  margin: 0 auto;
  -webkit-mask-image: radial-gradient(ellipse 88% 90% at 50% 48%, #000 74%, transparent 100%);
  mask-image: radial-gradient(ellipse 88% 90% at 50% 48%, #000 74%, transparent 100%);
  filter:
    drop-shadow(0 14px 38px rgba(0, 0, 0, 0.55))
    drop-shadow(0 0 32px rgba(182, 255, 0, 0.06))
    drop-shadow(1px 0 10px rgba(255, 255, 255, 0.03));
}

.about-trainer-wrap .trainer-photo--about {
  display: block;
  width: auto !important;
  height: 100% !important;
  max-width: 100% !important;
  max-height: 100% !important;
  object-fit: contain !important;
  object-position: center bottom !important;
  filter: none !important;
}

.hero-trainer,
.trainer-photo--hero {
  filter:
    drop-shadow(0 16px 44px rgba(0, 0, 0, 0.58))
    drop-shadow(0 6px 20px rgba(0, 0, 0, 0.38))
    drop-shadow(0 0 36px rgba(182, 255, 0, 0.07))
    drop-shadow(2px 0 14px rgba(255, 255, 255, 0.035)) !important;
}

@media (min-width: 901px) {
  .hero__cinema-glow--center,
  .hero__cinema-glow--right {
    opacity: 0.16 !important;
  }

  .hero-visual::before {
    background: radial-gradient(
      ellipse 30% 42% at 50% 54%,
      rgba(182, 255, 0, 0.08) 0%,
      rgba(182, 255, 0, 0.03) 42%,
      transparent 68%
    ) !important;
    filter: blur(56px) !important;
    -webkit-mask-image: radial-gradient(ellipse 68% 72% at 50% 52%, #000 30%, transparent 100%) !important;
    mask-image: radial-gradient(ellipse 68% 72% at 50% 52%, #000 30%, transparent 100%) !important;
  }

  .hero__atmo-spot-halo {
    background: radial-gradient(
      ellipse 36% 44% at 50% 52%,
      rgba(182, 255, 0, 0.06) 0%,
      rgba(182, 255, 0, 0.02) 45%,
      transparent 72%
    ) !important;
  }

  .hero__atmo-glow {
    background: radial-gradient(
      ellipse 28% 38% at 50% 52%,
      rgba(182, 255, 0, 0.14) 0%,
      rgba(182, 255, 0, 0.05) 40%,
      transparent 72%
    ) !important;
  }

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

  .hero__atmo-spot-core {
    background: radial-gradient(
      ellipse 22% 30% at 50% 54%,
      rgba(200, 230, 90, 0.18) 0%,
      rgba(182, 255, 0, 0.08) 38%,
      transparent 72%
    ) !important;
    opacity: 0.7 !important;
  }

  .hero__atmo-transparency-fill {
    width: min(44vw, 400px);
    height: min(78vh, 680px);
  }

  .hero__cinema-vignette {
    background:
      radial-gradient(ellipse 88% 78% at 68% 48%, transparent 20%, rgba(0, 0, 0, 0.62) 100%),
      linear-gradient(180deg, rgba(0, 0, 0, 0.4) 0%, transparent 24%, transparent 70%, rgba(0, 0, 0, 0.8) 100%),
      linear-gradient(90deg, rgba(0, 0, 0, 0.28) 0%, transparent 40%) !important;
  }
}

@media (max-width: 900px) {
  .hero__atmo,
  .about__portrait-atmo {
    -webkit-mask-image: radial-gradient(
      ellipse 88% 84% at 50% 50%,
      #000 36%,
      rgba(0, 0, 0, 0.5) 62%,
      transparent 100%
    ) !important;
    mask-image: radial-gradient(
      ellipse 88% 84% at 50% 50%,
      #000 36%,
      rgba(0, 0, 0, 0.5) 62%,
      transparent 100%
    ) !important;
  }

  .hero-visual::before {
    background: radial-gradient(
      ellipse 40% 44% at 50% 52%,
      rgba(182, 255, 0, 0.04) 0%,
      rgba(182, 255, 0, 0.015) 42%,
      transparent 68%
    ) !important;
  }

  .hero__atmo-glow,
  .hero__atmo-glow--soft,
  .hero__atmo-spot-core {
    opacity: 0.45 !important;
  }

  .hero__atmo-bottom-fog {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 38%;
    z-index: 9;
    pointer-events: none;
    background: linear-gradient(180deg, transparent 0%, rgba(5, 5, 5, 0.55) 55%, rgba(5, 5, 5, 0.95) 100%);
    filter: blur(8px);
  }

  .hero__atmo-transparency-fill {
    width: 88% !important;
    height: 92% !important;
  }

  .hero__atmo-boundary-fog {
    inset: -2% -4% 0 -4%;
    filter: blur(18px);
  }

  .hero__atmo-edge-fade {
    background: radial-gradient(
      ellipse 90% 86% at 50% 50%,
      transparent 28%,
      rgba(5, 5, 5, 0.42) 68%,
      rgba(5, 5, 5, 0.97) 100%
    ) !important;
  }

  .hero-trainer-wrap {
    height: 92% !important;
    max-height: 92% !important;
    -webkit-mask-image: radial-gradient(ellipse 92% 94% at 50% 50%, #000 80%, transparent 100%) !important;
    mask-image: radial-gradient(ellipse 92% 94% at 50% 50%, #000 80%, transparent 100%) !important;
  }

  .hero-trainer-wrap .hero-trainer,
  .hero-trainer-wrap .trainer-photo--hero {
    filter: none !important;
  }

  .hero-trainer,
  .trainer-photo--hero {
    filter:
      drop-shadow(0 12px 36px rgba(0, 0, 0, 0.52))
      drop-shadow(0 0 28px rgba(182, 255, 0, 0.06)) !important;
  }
}

/* =============================================================================
   ABOUT — deeper card, spotlight, corner smoke (structure unchanged)
   ============================================================================= */

.about__portrait-card {
  background: linear-gradient(
    155deg,
    rgba(8, 8, 8, 0.72) 0%,
    rgba(6, 6, 6, 0.58) 48%,
    rgba(5, 5, 5, 0.65) 100%
  ) !important;
  border-color: rgba(182, 255, 0, 0.16) !important;
  box-shadow:
    0 0 48px rgba(182, 255, 0, 0.04),
    inset 0 0 56px rgba(0, 0, 0, 0.45),
    0 24px 56px rgba(0, 0, 0, 0.55) !important;
}

.about__portrait-card::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  border-radius: inherit;
  background:
    radial-gradient(ellipse 82% 78% at 50% 42%, transparent 42%, rgba(5, 5, 5, 0.42) 100%),
    radial-gradient(ellipse 38% 32% at 0% 0%, rgba(5, 5, 5, 0.35) 0%, transparent 72%),
    radial-gradient(ellipse 38% 32% at 100% 0%, rgba(5, 5, 5, 0.35) 0%, transparent 72%),
    radial-gradient(ellipse 36% 30% at 0% 100%, rgba(5, 5, 5, 0.3) 0%, transparent 70%),
    radial-gradient(ellipse 36% 30% at 100% 100%, rgba(5, 5, 5, 0.3) 0%, transparent 70%);
}

.about__portrait-glow--core {
  top: 42% !important;
  width: 72% !important;
  height: 52% !important;
  background: radial-gradient(
    ellipse 50% 48% at 50% 46%,
    rgba(182, 255, 0, 0.16) 0%,
    rgba(182, 255, 0, 0.06) 38%,
    transparent 72%
  ) !important;
  filter: blur(28px) !important;
}

.about__portrait-glow--edge {
  opacity: 0.45 !important;
  background: radial-gradient(
    ellipse 90% 85% at 50% 50%,
    transparent 35%,
    rgba(5, 5, 5, 0.55) 100%
  ) !important;
}

.about__portrait-edge-fog {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  border-radius: inherit;
  background:
    radial-gradient(ellipse 34% 28% at 0% 0%, rgba(70, 70, 70, 0.14) 0%, transparent 72%),
    radial-gradient(ellipse 34% 28% at 100% 0%, rgba(70, 70, 70, 0.14) 0%, transparent 72%),
    radial-gradient(ellipse 32% 26% at 0% 100%, rgba(60, 60, 60, 0.12) 0%, transparent 70%),
    radial-gradient(ellipse 32% 26% at 100% 100%, rgba(60, 60, 60, 0.12) 0%, transparent 70%);
  filter: blur(16px);
  mix-blend-mode: screen;
}

.about__portrait-depth-fill {
  position: absolute;
  left: 50%;
  top: 54%;
  width: 92%;
  height: 88%;
  transform: translate(-50%, -50%);
  z-index: 1;
  pointer-events: none;
  background: radial-gradient(
    ellipse 48% 52% at 50% 46%,
    rgba(5, 5, 5, 0.15) 0%,
    rgba(5, 5, 5, 0.62) 58%,
    rgba(5, 5, 5, 0.9) 100%
  );
  filter: blur(4px);
}

.about__portrait-smoke {
  background:
    radial-gradient(ellipse 55% 42% at 50% 38%, rgba(90, 90, 90, 0.14) 0%, transparent 68%),
    radial-gradient(ellipse 38% 34% at 6% 52%, rgba(65, 65, 65, 0.12) 0%, transparent 62%),
    radial-gradient(ellipse 38% 34% at 94% 52%, rgba(65, 65, 65, 0.12) 0%, transparent 62%) !important;
  opacity: 0.65 !important;
}

.trainer-photo--about {
  filter:
    drop-shadow(0 14px 38px rgba(0, 0, 0, 0.55))
    drop-shadow(0 0 32px rgba(182, 255, 0, 0.06))
    drop-shadow(1px 0 10px rgba(255, 255, 255, 0.03)) !important;
}

.about-trainer-wrap .trainer-photo--about {
  filter: none !important;
}

@media (max-width: 900px) {
  .about__portrait-card::after {
    background:
      radial-gradient(ellipse 86% 82% at 50% 44%, transparent 38%, rgba(5, 5, 5, 0.48) 100%),
      radial-gradient(ellipse 40% 34% at 0% 0%, rgba(5, 5, 5, 0.38) 0%, transparent 72%),
      radial-gradient(ellipse 40% 34% at 100% 0%, rgba(5, 5, 5, 0.38) 0%, transparent 72%);
  }

  .about__portrait-glow--core {
    top: 44% !important;
    height: 48% !important;
  }
}

/* =============================================================================
   SERVICE MODALS ONLY — positioning classes (preview cards untouched)
   ============================================================================= */

.service-modal__visual .service-modal__image,
.service-modal__image-banner .service-modal__image {
  object-fit: cover !important;
  object-position: center 50% !important;
  background: #050505 !important;
}

.service-modal__image.object-top {
  object-position: center 32% !important;
}

.service-modal__image.object-center {
  object-position: center 50% !important;
}

.service-modal__image.object-person-focus {
  object-position: center 54% !important;
}

.service-modal__image.object-lower {
  object-position: center 62% !important;
}

.service-modal[data-active-service="mfr"] .service-modal__image {
  object-position: center 56% !important;
}

.service-modal[data-active-service="core-training"] .service-modal__image {
  object-position: center 68% !important;
}

.service-modal[data-active-service="corrective"] .service-modal__image {
  object-position: center 52% !important;
}

.service-modal[data-active-service="msk-rehab"] .service-modal__image {
  object-position: center 57% !important;
}

.service-modal[data-active-service="pilates-back"] .service-modal__image {
  object-position: center 68% !important;
}

.service-modal[data-active-service="nutrition"] .service-modal__image {
  object-position: center 28% !important;
}

@media (min-width: 901px) {
  .service-modal__visual--desktop .service-modal__image,
  .service-modal__image-banner .service-modal__image {
    object-fit: cover !important;
  }

  .service-modal[data-active-service="mfr"] .service-modal__visual--desktop .service-modal__image,
  .service-modal[data-active-service="mfr"] .service-modal__image-banner .service-modal__image {
    object-position: center 56% !important;
  }

  .service-modal[data-active-service="core-training"] .service-modal__visual--desktop .service-modal__image,
  .service-modal[data-active-service="core-training"] .service-modal__image-banner .service-modal__image {
    object-position: center 68% !important;
  }

  .service-modal[data-active-service="corrective"] .service-modal__visual--desktop .service-modal__image,
  .service-modal[data-active-service="corrective"] .service-modal__image-banner .service-modal__image {
    object-position: center 52% !important;
  }

  .service-modal[data-active-service="msk-rehab"] .service-modal__visual--desktop .service-modal__image,
  .service-modal[data-active-service="msk-rehab"] .service-modal__image-banner .service-modal__image {
    object-position: center 57% !important;
  }

  .service-modal[data-active-service="pilates-back"] .service-modal__visual--desktop .service-modal__image,
  .service-modal[data-active-service="pilates-back"] .service-modal__image-banner .service-modal__image {
    object-position: center 68% !important;
  }

  .service-modal[data-active-service="nutrition"] .service-modal__visual--desktop .service-modal__image,
  .service-modal[data-active-service="nutrition"] .service-modal__image-banner .service-modal__image {
    object-position: center 28% !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero__atmo-boundary-fog,
  .about__portrait-edge-fog {
    animation: none !important;
  }
}