/* ST VINCENTS — landing slideshow.
   The splash backdrop becomes a stack of full-screen slides that crossfade.
   Each slide is the shared media component (image or Bunny loop), so a slide
   needs no styling of its own beyond being told to fill the screen. */

/* The carousel reuses .video-container-full (fixed, full-screen, z-index -1 —
   behind the landing's logo/meta but above its background colour), which is the
   same wrapper the single landing video already used. */
#landing .landing-carousel {
  overflow: hidden;
}

#landing .landing-carousel__slide {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  /* Keep the slide painted while it fades out; visibility is handled by opacity
     alone so the crossfade has something to fade between. The length is the
     editor's, set as a custom property on the carousel itself. */
  transition: opacity var(--svlc-fade, 1.2s) ease;
  pointer-events: none;
}

#landing .landing-carousel__slide.is-active {
  opacity: 1;
}

/* Both media shapes fill the screen and crop, exactly like the landing's
   original .background__image did. */
#landing .landing-carousel__slide .sv-media,
#landing .landing-carousel__slide > img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

#landing .landing-carousel__slide > img {
  object-fit: cover;
}

/* The media component ships a white .overlay for tile/exhibition hover states.
   There is no hover on the splash backdrop, and a stray overlay would wash the
   slide out mid-fade — drop it here. */
#landing .landing-carousel .overlay {
  display: none;
}

/* Per-slide captions. All captions are rendered into the same grid cell so the
   block is as tall as the longest one and nothing shifts as they change; only
   the active one is visible. */
#landing .landing-cta-rotator {
  display: grid;
}

#landing .landing-cta-rotator__item {
  grid-area: 1 / 1;
  opacity: 0;
  /* Half the slide fade, so the caption has settled by the time the picture
     behind it has. */
  transition: opacity calc(var(--svlc-fade, 1.2s) * 0.5) ease;
  pointer-events: none;
}

#landing .landing-cta-rotator__item.is-active {
  opacity: 1;
  pointer-events: auto;
}

/* Someone who has asked for less motion gets the first slide, held still. */
@media (prefers-reduced-motion: reduce) {
  #landing .landing-carousel__slide,
  #landing .landing-cta-rotator__item {
    transition: none;
  }
}

/* Slide dots — the only visible sign that the backdrop is a slideshow, and the
   way to move between slides by hand. They sit OUTSIDE the carousel wrapper in
   the markup: that wrapper is z-index:-1 and forms its own stacking context, so
   anything inside it would paint behind the splash and take no clicks. */
#landing .landing-carousel__dots {
  position: absolute;
  left: 50%;
  bottom: 40px;
  transform: translateX(-50%);
  display: flex;
  gap: 14px;
  z-index: 3;
  line-height: 0;
}

#landing .landing-carousel__dot {
  width: 8px;
  height: 8px;
  padding: 0;
  margin: 0;
  min-width: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.45);
  background-image: none;
  box-shadow: none;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  transition: background 0.3s ease;
}

#landing .landing-carousel__dot:hover {
  background: rgba(255, 255, 255, 0.7);
}

#landing .landing-carousel__dot.is-active {
  background: #fff;
}

#landing .landing-carousel__dot:focus-visible {
  outline: 1px solid #fff;
  outline-offset: 3px;
}