/**
 * Accessible animation slider.
 */

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

.animation-slider {
  --animation-slider-surface-width: var(--animation-slider-boxed-width, 1140);
  --animation-slider-surface-height: var(--animation-slider-boxed-height, 520);
  position: relative;
  width: 100%;
  height: auto;
  max-height: calc(var(--animation-slider-surface-height) * 1px);
  aspect-ratio: var(--animation-slider-surface-width) / var(--animation-slider-surface-height);
  overflow: hidden;
  background: var(--animation-slider-background-color, #fff);
}

.animation-slider--fullscreen {
  --animation-slider-surface-width: var(--animation-slider-fullscreen-width, 1140);
  --animation-slider-surface-height: var(--animation-slider-fullscreen-height, 520);
}

.animation-slider .splide__track,
.animation-slider .splide__list,
.animation-slider .splide__slide {
  height: 100%;
}

.animation-slider:not(.is-initialized) .splide__slide:not(:first-child) {
  display: none;
}

.animation-slider__media,
.animation-slider__picture,
.animation-slider__image {
  display: block;
  width: 100%;
  height: 100%;
}

.animation-slider__image {
  object-fit: cover;
  object-position: center center;
}

.animation-slider__overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, .38);
  pointer-events: none;
}

.animation-slider__caption {
  position: absolute;
  z-index: 3;
  top: var(--animation-caption-y, 0);
  left: var(--animation-caption-x, 50%);
  width: var(--animation-caption-width, 650px);
  max-width: calc(100% - 96px);
  box-sizing: border-box;
  transform: translateX(var(--animation-caption-translate-x, -50%));
  transition-property: opacity, transform;
  transition-duration: var(--animation-slider-alt-duration, 800ms);
  transition-delay: 0ms;
  transition-timing-function: var(--animation-slider-easing, ease-in-out);
}

.animation-slider__caption[data-animation-x="center"] {
  text-align: center;
}

.animation-slider__caption--title {
  transition-duration: var(--animation-slider-title-duration, 1150ms);
}

.animation-slider__caption--link {
  transition-duration: var(--animation-slider-link-duration, 500ms);
}

.animation-slider__caption--separator {
  transition-duration: var(--animation-slider-title-duration, 1150ms);
}

.animation-slider__caption--title {
  color: #fff;
  font-family: var(--brand-font-family, "Raleway", sans-serif);
  font-size: calc(42px * var(--animation-slider-scale, 1));
  line-height: 1.2;
  overflow-wrap: break-word;
}

.animation-slider__caption--alt {
  color: #fff;
  font-size: calc(24px * var(--animation-slider-scale, 1));
  font-weight: 300;
}

.animation-slider__caption--link {
  color: #fff;
  font-size: calc(16px * var(--animation-slider-scale, 1));
  font-weight: 300;
}

.animation-slider.is-initialized .animation-slider__caption {
  opacity: 0;
  transform: translateX(var(--animation-caption-translate-x, -50%)) translateY(100%);
}

.animation-slider.is-initialized .splide__slide.is-active .animation-slider__caption {
  opacity: 1;
  transform: translateX(var(--animation-caption-translate-x, -50%)) translateY(0);
  transition-delay: var(--animation-caption-delay, 0ms);
}

.animation-slider__separator {
  width: 100%;
  max-width: 500px;
  margin: 0 auto;
}

.animation-slider .splide__arrows {
  pointer-events: none;
}

.animation-slider .splide__arrow {
  position: absolute;
  z-index: 5;
  top: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  color: #fff;
  background: rgba(0, 0, 0, .42);
  opacity: .78;
  transform: translateY(-50%);
  transition: opacity .2s ease, background-color .2s ease;
  pointer-events: auto;
}

.animation-slider .splide__arrow:hover,
.animation-slider .splide__arrow:focus-visible {
  opacity: 1;
  background: var(--brand-primary-color);
}

.animation-slider .splide__arrow--prev {
  left: 20px;
}

.animation-slider .splide__arrow--next {
  right: 20px;
}

.animation-slider .splide__arrow svg {
  display: block;
  width: 18px;
  height: 18px;
  fill: currentColor;
}

/* splide-core.min.css ships no theme, so mirror the previous-arrow glyph here */
.animation-slider .splide__arrow--prev svg {
  transform: scaleX(-1);
}

/* Vertical (top-to-bottom) sliding: arrows point up/down */
.animation-slider.splide--ttb .splide__arrow--prev svg {
  transform: rotate(-90deg);
}

.animation-slider.splide--ttb .splide__arrow--next svg {
  transform: rotate(90deg);
}

.animation-slider__toggle {
  position: absolute;
  z-index: 6;
  right: 16px;
  bottom: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, .75);
  border-radius: 50%;
  color: #fff;
  background: rgba(0, 0, 0, .52);
  line-height: 1;
}

.animation-slider__toggle svg {
  display: block;
  width: 14px;
  height: 14px;
  fill: currentColor;
}

.animation-slider__toggle:hover,
.animation-slider__toggle:focus-visible {
  background: var(--brand-primary-color);
}

.animation-slider__progress {
  position: absolute;
  z-index: 5;
  right: 0;
  bottom: 0;
  left: 0;
  height: 4px;
  overflow: hidden;
  background: rgba(255, 255, 255, .28);
}

.animation-slider__progress-bar {
  width: 100%;
  height: 100%;
  background: var(--brand-primary-color);
  transform: scaleX(0);
  transform-origin: left center;
  will-change: transform;
}

.animation-slider--fallback .animation-slider__toggle,
.animation-slider--fallback .animation-slider__progress {
  display: none;
}

.animation-slider.animation-slider--fallback {
  visibility: visible;
}

.animation-slider--fallback .splide__slide:not(:first-child) {
  display: none;
}

.animation-slider--fallback .animation-slider__caption {
  opacity: 1;
  transform: translateX(var(--animation-caption-translate-x, -50%)) translateY(0);
  transition-delay: 0ms;
}

/* Stacked caption: title, description and link flow inside one block that is
   centered on both axes, so long titles can never overlap the other captions. */
.animation-slider__caption--stack {
  top: 50%;
  transform: translateX(var(--animation-caption-translate-x, -50%)) translateY(-50%);
}

.animation-slider__caption--stack .animation-text {
  margin: 0;
}

.animation-slider__caption--stack > * + * {
  margin-top: calc(18px * var(--animation-slider-scale, 1));
}

.animation-slider.is-initialized .animation-slider__caption--stack {
  transform: translateX(var(--animation-caption-translate-x, -50%)) translateY(-42%);
}

.animation-slider.is-initialized .splide__slide.is-active .animation-slider__caption--stack {
  transform: translateX(var(--animation-caption-translate-x, -50%)) translateY(-50%);
}

.animation-slider--fallback .animation-slider__caption--stack {
  transform: translateX(var(--animation-caption-translate-x, -50%)) translateY(-50%);
}

/* Ephemeral visual plane used only while a slide transition is running.
   It is decorative, non-interactive, and removed as soon as the move ends. */
.animation-slider__transition-plane {
  position: absolute;
  inset: 0;
  z-index: 4;
  overflow: hidden;
  pointer-events: none;
  contain: layout paint style;
}

.animation-slider__transition-cell {
  position: absolute;
  background-repeat: no-repeat;
  pointer-events: none;
  will-change: transform, opacity;
}

.animation-slider__transition-veil {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: #000;
}

.animation-slider-video {
  position: relative;
  width: 100%;
  overflow: hidden;
  background: #000;
}

.animation-slider-video--hero {
  height: auto;
  max-height: calc(var(--animation-slider-video-height, 650) * 1px);
  aspect-ratio: var(--animation-slider-video-width, 1140) / var(--animation-slider-video-height, 650);
}

.animation-slider-video__toggle {
  position: absolute;
  z-index: 2;
  right: 16px;
  bottom: 14px;
  min-width: 36px;
  min-height: 36px;
  padding: 7px 10px;
  border: 1px solid rgba(255, 255, 255, .75);
  border-radius: var(--brand-radius, 8px);
  color: #fff;
  background: rgba(0, 0, 0, .52);
  font-size: 12px;
  line-height: 1;
}

.animation-slider-video__toggle:hover,
.animation-slider-video__toggle:focus-visible {
  background: var(--brand-primary-color);
}

.animation-slider-video__media {
  display: block;
  width: 100%;
  height: 100%;
  background: #000;
  object-fit: cover;
}

.animation-slider-video--moviebox .animation-slider-video__media {
  height: auto;
  max-height: calc(var(--animation-slider-video-height, 650) * 1px);
  aspect-ratio: var(--animation-slider-video-width, 1140) / var(--animation-slider-video-height, 650);
  object-fit: contain;
}

@media (max-width: 991px) {
  .animation-slider--boxed {
    --animation-slider-surface-width: var(--animation-slider-boxed-width-tablet, 960);
    --animation-slider-surface-height: var(--animation-slider-boxed-height-tablet, 480);
  }

  .animation-slider--fullscreen {
    --animation-slider-surface-width: var(--animation-slider-fullscreen-width-tablet, 960);
    --animation-slider-surface-height: var(--animation-slider-fullscreen-height-tablet, 480);
  }
}

@media (max-width: 767px) {
  .animation-slider--boxed {
    --animation-slider-surface-width: var(--animation-slider-boxed-width-small, 720);
    --animation-slider-surface-height: var(--animation-slider-boxed-height-small, 420);
  }

  .animation-slider--fullscreen {
    --animation-slider-surface-width: var(--animation-slider-fullscreen-width-small, 720);
    --animation-slider-surface-height: var(--animation-slider-fullscreen-height-small, 420);
  }
}

@media (max-width: 575px) {
  .animation-slider--boxed {
    --animation-slider-surface-width: var(--animation-slider-boxed-width-mobile, 540);
    --animation-slider-surface-height: var(--animation-slider-boxed-height-mobile, 360);
  }

  .animation-slider--fullscreen {
    --animation-slider-surface-width: var(--animation-slider-fullscreen-width-mobile, 540);
    --animation-slider-surface-height: var(--animation-slider-fullscreen-height-mobile, 360);
  }

  .animation-slider--boxed .animation-slider__image {
    object-fit: contain;
    background: var(--animation-slider-background-color, #fff);
  }

  .animation-slider .splide__arrow--prev {
    left: 8px;
  }

  .animation-slider .splide__arrow--next {
    right: 8px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .animation-slider__caption,
  .animation-slider .splide__arrow {
    transition-duration: 0ms !important;
    transition-delay: 0ms !important;
  }

  .animation-slider__transition-plane {
    display: none;
  }
}