/**
 * Animation paragraph + Featured walls mount.
 * Layout is self-contained (does not rely on carousel img flow).
 * Default viewport: 1:1 mobile, 4:3 desktop. Crop override via inline
 * aspect-ratio / --sap-animation-crop.
 */

.sap-animation {
  position: relative;
  width: 100%;
}

/* Beat .carousel-viewport { display:flex } so the aspect box is stable. */
.sap-animation__frame,
.carousel-viewport.sap-animation__frame {
  display: block;
  position: relative;
  width: 100%;
  overflow: hidden;
  background: #fff;
  aspect-ratio: 1 / 1;
  max-height: none;
}

@media (min-width: 48rem) {
  .sap-animation__frame,
  .carousel-viewport.sap-animation__frame {
    aspect-ratio: 4 / 3;
  }
}

.sap-animation__frame--crop,
.carousel-viewport.sap-animation__frame--crop {
  aspect-ratio: var(--sap-animation-crop, 4 / 3);
}

.paragraph-walls-mount {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  pointer-events: none;
  z-index: 1;
}

.paragraph-walls-mount canvas {
  display: block;
}

/*
 * Fallback always fills the aspect box (absolute + cover).
 * Do NOT switch to position:relative / height:auto when inactive —
 * that collapses the box to intrinsic image height and fights carousel.
 */
.sap-animation__fallback,
.sap-animation .carousel-viewport img.sap-animation__fallback,
.carousel.inset .carousel-viewport img.sap-animation__fallback,
.sap-animation--fallback .sap-animation__fallback,
.sap-animation:not(.sap-animation--active) .sap-animation__fallback {
  display: block !important;
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  max-height: none !important;
  object-fit: cover !important;
  object-position: center !important;
  z-index: 0;
  visibility: visible;
  opacity: 1;
}

/* Hide fallback when WebGL is running (beat carousel img rules). */
.sap-animation--active .sap-animation__fallback,
.sap-animation--active .carousel-viewport img.sap-animation__fallback,
.sap-animation--active.carousel .carousel-viewport img.sap-animation__fallback,
.carousel.inset .sap-animation--active .carousel-viewport img.sap-animation__fallback {
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

.sap-animation--fallback .paragraph-walls-mount {
  display: none !important;
}

@media (prefers-reduced-motion: reduce) {
  .paragraph-walls-mount {
    display: none !important;
  }

  /* Still fill the aspect box — do not collapse to intrinsic height. */
  .sap-animation__fallback,
  .sap-animation .carousel-viewport img.sap-animation__fallback {
    visibility: visible !important;
    opacity: 1 !important;
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
  }
}

.sap-animation .carousel-controls {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.375rem;
  padding-top: 0.875rem;
}

@media (min-width: 64rem) {
  .sap-animation .carousel-controls {
    padding-top: 0.75rem;
  }
}

.sap-animation .carousel-credit .carousel-caption :where(p) {
  margin-bottom: 0;
}

.sap-featured-section__figure.sap-animation__frame {
  margin: 0;
}

/* Featured column is a stretch grid. Keep the animation square on lg. */
@media (min-width: 62rem) {
  .sap-featured-section__figure.sap-animation__frame,
  .sap-featured-section__figure.sap-animation__frame.sap-animation__frame--crop {
    aspect-ratio: 1 / 1;
    align-self: start;
    width: 100%;
    height: auto;
  }
}

.sap-featured-section__figure .sap-featured-section__img.sap-animation__fallback {
  width: 100%;
  height: 100%;
  object-fit: cover;
}