/* VytalGuard homepage slider clarity contract v1.0.0
 *
 * Keeps tenant media at native browser sharpness and applies the configured
 * scrim only where it is useful for readability. The compact homepage keeps
 * copy in a separate panel, so its default gradient is intentionally limited
 * to the bottom edge of the image instead of washing the whole photograph.
 */

#hero-slider-track .hero-slide__picture,
#hero-slider-track .hero-slide__media {
  overflow: hidden;
  isolation: isolate;
}

#hero-slider-track .hero-slide__image,
#hero-slider-track .hero-slide__video,
#hero-slider-track .hero-slide__embed {
  opacity: 1 !important;
  filter: none !important;
  transform: none !important;
  animation: none !important;
  image-rendering: auto;
  backface-visibility: visible;
}

#hero-slider-track .hero-slide__image,
#hero-slider-track .hero-slide__video {
  object-fit: cover;
  object-position: center center;
}

/* Classic hero: concentrate the configurable scrim behind the copy. */

#hero-slider-track .hero-slide__overlay {
  opacity: 1 !important;
  background:
    linear-gradient(
      90deg,
      color-mix(
        in srgb,
        rgb(3 20 35)
          calc(var(--hero-overlay-opacity, 0.55) * 100%),
        transparent
      ) 0%,
      color-mix(
        in srgb,
        rgb(3 20 35)
          calc(var(--hero-overlay-opacity, 0.55) * 54%),
        transparent
      ) 38%,
      transparent 74%
    ),
    linear-gradient(
      180deg,
      transparent 72%,
      rgb(2 6 23 / 24%) 100%
    ) !important;
  mix-blend-mode: normal;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

#hero-slider-track
.hero-slide__overlay[data-alignment="right"] {
  background:
    linear-gradient(
      270deg,
      color-mix(
        in srgb,
        rgb(3 20 35)
          calc(var(--hero-overlay-opacity, 0.55) * 100%),
        transparent
      ) 0%,
      color-mix(
        in srgb,
        rgb(3 20 35)
          calc(var(--hero-overlay-opacity, 0.55) * 54%),
        transparent
      ) 38%,
      transparent 74%
    ),
    linear-gradient(
      180deg,
      transparent 72%,
      rgb(2 6 23 / 24%) 100%
    ) !important;
}

#hero-slider-track
.hero-slide__overlay[data-alignment="center"] {
  background:
    radial-gradient(
      ellipse at center,
      color-mix(
        in srgb,
        rgb(3 20 35)
          calc(var(--hero-overlay-opacity, 0.55) * 86%),
        transparent
      ) 0%,
      color-mix(
        in srgb,
        rgb(3 20 35)
          calc(var(--hero-overlay-opacity, 0.55) * 44%),
        transparent
      ) 38%,
      transparent 76%
    ),
    linear-gradient(
      180deg,
      transparent 72%,
      rgb(2 6 23 / 24%) 100%
    ) !important;
}

#hero-slider-track
.hero-slide__overlay[data-overlay="dark"] {
  background:
    color-mix(
      in srgb,
      rgb(3 7 18)
        calc(var(--hero-overlay-opacity, 0.55) * 100%),
      transparent
    ) !important;
}

#hero-slider-track
.hero-slide__overlay[data-overlay="light"] {
  background:
    color-mix(
      in srgb,
      rgb(255 255 255)
        calc(var(--hero-overlay-opacity, 0.55) * 100%),
      transparent
    ) !important;
}

#hero-slider-track
.hero-slide__overlay[data-overlay="brand"] {
  background:
    color-mix(
      in srgb,
      var(--color-primary)
        calc(var(--hero-overlay-opacity, 0.55) * 100%),
      transparent
    ) !important;
}

#hero-slider-track
.hero-slide__overlay[data-overlay="none"] {
  background: transparent !important;
}

body:not(.homepage--compact)
.hero-slide[data-overlay="light"]
.hero__content,
body:not(.homepage--compact)
.hero-slide[data-overlay="light"]
.hero__content h1,
body:not(.homepage--compact)
.hero-slide[data-overlay="light"]
.hero__content .eyebrow,
body:not(.homepage--compact)
.hero-slide[data-overlay="light"]
.hero__description {
  color: var(--secondary-950);
  text-shadow: 0 1px 20px rgb(255 255 255 / 44%);
}

/* Compact hero: copy is below the image, so keep the default photo clear. */

.homepage--compact
#hero-slider-track
.hero-slide__overlay[data-overlay="gradient"] {
  background:
    linear-gradient(
      180deg,
      transparent 72%,
      color-mix(
        in srgb,
        rgb(2 6 23)
          calc(var(--hero-overlay-opacity, 0.55) * 36%),
        transparent
      ) 100%
    ) !important;
}

/* Keep the Branding Studio previews faithful to the public renderer. */

.homepage-slide-preview > img,
.homepage-preview-hero__media img {
  opacity: 1 !important;
  filter: none !important;
  transform: none !important;
  animation: none !important;
  image-rendering: auto;
}

.homepage-slide-preview__overlay,
.homepage-preview-hero__overlay {
  opacity: 1 !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

.homepage-slide-preview__overlay[data-overlay="gradient"],
.homepage-preview-hero__overlay[data-overlay="gradient"] {
  background:
    linear-gradient(
      90deg,
      color-mix(
        in srgb,
        rgb(3 20 35)
          calc(var(--hero-overlay-opacity, var(--homepage-hero-overlay-opacity, 0.55)) * 100%),
        transparent
      ) 0%,
      color-mix(
        in srgb,
        rgb(3 20 35)
          calc(var(--hero-overlay-opacity, var(--homepage-hero-overlay-opacity, 0.55)) * 48%),
        transparent
      ) 40%,
      transparent 76%
    ) !important;
}

@media (prefers-reduced-motion: reduce) {
  #hero-slider-track .hero-slide,
  #hero-slider-track .hero-slide__image,
  #hero-slider-track .hero-slide__video,
  .homepage-slide-preview > img,
  .homepage-preview-hero__media img {
    animation: none !important;
    transition: none !important;
    transform: none !important;
  }
}

html[data-reduce-motion="true"]
#hero-slider-track .hero-slide,
html[data-reduce-motion="true"]
#hero-slider-track .hero-slide__image,
html[data-reduce-motion="true"]
#hero-slider-track .hero-slide__video {
  animation: none !important;
  transition: none !important;
  transform: none !important;
}