/* Hero background effect: sharp fixed bg, edge blur via backdrop-filter */

.hero-bse-effect {
  position: relative;
  overflow: hidden;
  /* pages.css provides the fixed background image — untouched */
}

/* Frosted glass layer, masked so only edges blur.
   NO background-image here — backdrop-filter blurs whatever is behind. */
.hero-bse-effect::before {
  content: "";
  position: absolute;
  inset: 0;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);

  /* Center fully transparent → sharp. Blur fades in toward edges. */
  -webkit-mask-image: radial-gradient(ellipse 50% 50% at center,
    transparent 0%,
    transparent 30%,
    rgba(0,0,0,0.6) 58%,
    black 85%
  );
  mask-image: radial-gradient(ellipse 50% 50% at center,
    transparent 0%,
    transparent 30%,
    rgba(0,0,0,0.6) 58%,
    black 85%
  );
}

/* Subtle dark vignette */
.hero-bse-effect::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at center,
    rgba(0,0,0,0.0) 0%,
    rgba(0,0,0,0.28) 65%,
    rgba(0,0,0,0.48) 100%
  );
}

.hero-bse-effect > * {
  position: relative;
  z-index: 1;
}