/* Duda image-slider repair.
 *
 * Duda's hero slider keeps every slide's text at `visibility: hidden` and its
 * runtime reveals only the active slide. Off-platform the runtime never runs,
 * so the headline and description are in the DOM, sized, and painted nowhere:
 * the hero looks like a bare photo.
 *
 * Same shape as the entrance-animation trap, and the same treatment. These
 * rules reveal the active slide's text with no JavaScript required;
 * clone-slider.js then rotates the slides and animates the text in.
 */

/* The active slide's text, whichever class marks it. */
.dmImageSlider .flex-active-slide .slide-inner,
.dmImageSlider .flex-active-slide .text-wrapper,
.dmImageSlider .flex-active-slide .slide-title,
.dmImageSlider .flex-active-slide .slide-description,
.dmImageSlider .flex-active-slide .btn-container,
.dmImageSlider li.clone-slide-active .slide-inner,
.dmImageSlider li.clone-slide-active .text-wrapper,
.dmImageSlider li.clone-slide-active .slide-title,
.dmImageSlider li.clone-slide-active .slide-description,
.dmImageSlider li.clone-slide-active .btn-container {
  visibility: visible !important;
}

/* Crossfade between slides. */
/* Stack every slide in one place.
 *
 * Duda only emits the overlap rule for sliders configured `isFade: true` --
 * the selector is literally scoped to `[sliderscriptparams*="isFade':true"]`.
 * A slider set to `isFade: false` is meant to be a horizontal track that the
 * runtime translates, so off-platform its slides stay in normal flow and pile
 * up DOWNWARDS. The first slide happens to land inside the band, so the section
 * looks correct until the first rotation, after which the active slide sits
 * below the band and the whole section reads as empty.
 *
 * That is why a text-only testimonial band appeared blank while the page height
 * and the DOM text both looked perfect. Supply the overlap ourselves for every
 * slider we wire, instead of inheriting it only for the fade ones. Keeping all
 * slides in flow (float + negative margin, as FlexSlider does) rather than
 * absolutely positioning them means the band still sizes to its tallest slide. */
.dmImageSlider.clone-slider-ready ul.slides > li {
  float: left !important;
  width: 100% !important;
  margin-right: -100% !important;
  position: relative !important;
}

.dmImageSlider ul.slides > li {
  /* Duda's own measured `animationDuration`, published per slider by the JS. */
  transition: opacity var(--clone-slide-ms, 600ms) ease-in-out;
}

.dmImageSlider ul.slides > li.clone-slide-active {
  opacity: 1;
  z-index: 2;
}

.dmImageSlider ul.slides > li.clone-slide-idle {
  opacity: 0;
  z-index: 1;
}

/* Slide-mode sliders (`isFade: false`) move rather than dissolve. Reproduce
   that as a short horizontal entrance so the two modes stay distinguishable. */
.dmImageSlider[data-clone-mode="slide"] ul.slides > li.clone-slide-active {
  animation: cloneSlideIn var(--clone-slide-ms, 600ms) ease-out both;
}

@keyframes cloneSlideIn {
  from { transform: translateX(24px); opacity: 0; }
  to   { transform: translateX(0); opacity: 1; }
}

/* Text entrance, matching the platform's own feel: rise and fade as the slide
   becomes active. Applied by JS so a JS failure leaves the text readable. */
.dmImageSlider li.clone-slide-active.clone-slide-enter .slide-title,
.dmImageSlider li.clone-slide-active.clone-slide-enter .slide-description,
.dmImageSlider li.clone-slide-active.clone-slide-enter .btn-container {
  animation: cloneSlideTextIn 0.9s ease-out both;
}

.dmImageSlider li.clone-slide-active.clone-slide-enter .slide-description {
  animation-delay: 0.12s;
}

.dmImageSlider li.clone-slide-active.clone-slide-enter .btn-container {
  animation-delay: 0.24s;
}

@keyframes cloneSlideTextIn {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Arrows are part of the original; keep them usable. */
.dmImageSlider .flex-prev,
.dmImageSlider .flex-next {
  cursor: pointer;
  z-index: 3;
}

@media (prefers-reduced-motion: reduce) {
  .dmImageSlider li.clone-slide-active.clone-slide-enter .slide-title,
  .dmImageSlider li.clone-slide-active.clone-slide-enter .slide-description,
  .dmImageSlider li.clone-slide-active.clone-slide-enter .btn-container {
    animation: none;
  }
  .dmImageSlider[data-clone-mode="slide"] ul.slides > li.clone-slide-active {
    animation: none;
  }
  .dmImageSlider ul.slides > li { transition: none; }
}