/* Hero background lifestyle image — Madison Meds branded photo, layered behind hero content. */
/* Scroll-linked fade: image opacity is multiplied by --hero-scroll-factor (set by inline JS on scroll). */

.hero--with-bg { position: relative; overflow: hidden; --hero-scroll-factor: 1; }

/* Ensure content stacks above image */
.hero--with-bg > .container { position: relative; z-index: 3; }

/* Lift the ambient orb pseudo-elements above the bg so they don't dim it */
.hero--with-bg::before,
.hero--with-bg::after { z-index: 2; }

.hero__bg{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Bias crop toward top-right so the woman's head and face are visible on wide viewports */
  object-position: right 22%;
  z-index: 0;
  pointer-events: none;
  user-select: none;
  will-change: opacity, filter;
  filter: blur(1px) saturate(1.05);
  transform: translateZ(0);
  /* Soft feather on top / bottom / left so the image blends into the page */
  -webkit-mask-image:
    linear-gradient(180deg, transparent 0%, #000 12%, #000 82%, transparent 100%),
    linear-gradient(90deg, transparent 0%, #000 28%, #000 100%);
  -webkit-mask-composite: source-in;
          mask-image:
    linear-gradient(180deg, transparent 0%, #000 12%, #000 82%, transparent 100%),
    linear-gradient(90deg, transparent 0%, #000 28%, #000 100%);
          mask-composite: intersect;
  /* Base opacity 90%, multiplied by scroll factor for fade-on-scroll */
  opacity: calc(.90 * var(--hero-scroll-factor));
}

.hero__overlay{
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  /* White wash on the left half so text stays legible over the image */
  background:
    linear-gradient(90deg,
      rgba(255,255,255,0.80) 0%,
      rgba(255,255,255,0.44) 32%,
      rgba(255,255,255,0.10) 60%,
      rgba(255,255,255,0.00) 100%);
}

/* Tablet: pull the crop a bit further right toward the face */
@media (max-width: 1024px){
  .hero__bg{ object-position: right 18%; }
}

/* Mobile: shift crop to keep the woman visible on the right, and strengthen the wash so text is readable */
@media (max-width: 767px){
  .hero__bg{
    object-position: 68% top;
    filter: blur(2px) saturate(1.03);
    /* On mobile, mainly feather the bottom so the image blends into the section below the hero */
    -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 78%, transparent 100%);
            mask-image: linear-gradient(180deg, #000 0%, #000 78%, transparent 100%);
  }
  .hero--with-bg .hero__overlay{
    background:
      linear-gradient(180deg,
        rgba(255,255,255,0.70) 0%,
        rgba(255,255,255,0.40) 45%,
        rgba(255,255,255,0.78) 100%),
      linear-gradient(90deg,
        rgba(255,255,255,0.25) 0%,
        rgba(255,255,255,0.06) 60%,
        rgba(255,255,255,0.00) 100%);
  }
}

/* Reduce motion: keep the image but drop the scroll fade */
@media (prefers-reduced-motion: reduce){
  .hero__bg{ filter: blur(1px); }
}