/*
 * This file deliberately targets only the existing hero image layers.
 * Ring, badges, masks, dimensions and all surrounding hero styles remain owned by the theme.
 */

.fhc-hero-slider-configured .hero-visual__scene {
  --fhc-transition-duration: 1500ms;
}

.fhc-hero-slider-configured .hero-visual__scene.fhc-slider-ready::before,
.fhc-hero-slider-configured .hero-visual__circle-image.fhc-slider-ready {
  background-image: none !important;
}

.fhc-hero-slider__outer-layer,
.fhc-hero-slider__inner-layer {
  position: absolute;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: var(--hero-photo-position);
  opacity: 0;
  pointer-events: none;
  transition-property: opacity;
  transition-duration: var(--fhc-transition-duration);
  transition-timing-function: ease-in-out;
}

.fhc-hero-slider__outer-layer {
  z-index: 0;
  inset:
    var(--hero-landscape-top)
    var(--hero-landscape-right)
    var(--hero-landscape-bottom)
    var(--hero-landscape-left);
  filter: saturate(0.98) contrast(0.98);

  -webkit-mask-image: radial-gradient(
    ellipse 74% 82% at 63% 35%,
    #000 0%,
    #000 38%,
    rgba(0, 0, 0, 0.70) 52%,
    rgba(0, 0, 0, 0.24) 68%,
    rgba(0, 0, 0, 0.06) 80%,
    rgba(0, 0, 0, 0) 92%
  );
  mask-image: radial-gradient(
    ellipse 74% 82% at 63% 35%,
    #000 0%,
    #000 38%,
    rgba(0, 0, 0, 0.70) 52%,
    rgba(0, 0, 0, 0.24) 68%,
    rgba(0, 0, 0, 0.06) 80%,
    rgba(0, 0, 0, 0) 92%
  );
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  -webkit-mask-position: center;
  mask-position: center;
}

.fhc-hero-slider__outer-layer.is-active {
  opacity: 0.58;
}

.fhc-hero-slider__inner-layer {
  inset: 0;
  z-index: 0;
}

.fhc-hero-slider__inner-layer.is-active {
  opacity: 1;
}

@media (max-width: 767.98px) {
  .fhc-hero-slider__outer-layer {
    -webkit-mask-image: radial-gradient(
      circle at 50% 50%,
      #000 0%,
      rgba(0, 0, 0, 0.58) 62%,
      rgba(0, 0, 0, 0) 88%
    );
    mask-image: radial-gradient(
      circle at 50% 50%,
      #000 0%,
      rgba(0, 0, 0, 0.58) 62%,
      rgba(0, 0, 0, 0) 88%
    );
  }

  .fhc-hero-slider__outer-layer.is-active {
    opacity: 0.22;
  }
}

@media (prefers-reduced-motion: reduce) {
  .fhc-hero-slider__outer-layer,
  .fhc-hero-slider__inner-layer {
    transition: none !important;
  }
}