/* Motion that belongs to the captured heroes, scoped to the local storefront. */
body.cds-local-storefront .cds-homepage-hero__pagination.cds-carousel-nav { bottom: 24px; }

body.cds-local-storefront .cds-homepage-hero[data-cds-hero-motion="ready"] .cds-homepage-hero__slide {
  opacity: 1 !important;
  visibility: hidden;
  pointer-events: none;
  transform: translate3d(var(--cds-hero-x, 0px), 0, 0) !important;
  transition: none !important;
}

body.cds-local-storefront .cds-homepage-hero[data-cds-hero-motion="ready"] .cds-homepage-hero__slide:is(.is-active, [data-cds-hero-participant]) {
  visibility: visible;
}

body.cds-local-storefront .cds-homepage-hero[data-cds-hero-motion="ready"] .cds-homepage-hero__slide.is-active {
  pointer-events: auto;
}

/* A neighboring slide may show its artwork during a drag, but only the
   selected slide owns readable copy. This also covers interrupted settles. */
body.cds-local-storefront .cds-homepage-hero[data-cds-hero-motion="ready"] .cds-homepage-hero__slide:not(.is-active) .cds-homepage-hero__content {
  opacity: 0 !important;
}

body.cds-local-storefront .cds-homepage-hero[data-cds-hero-settling] .cds-homepage-hero__slide[data-cds-hero-participant] {
  transition: transform 560ms cubic-bezier(0.22, 1, 0.36, 1) !important;
}

body.cds-local-storefront .cds-homepage-hero[data-cds-hero-dragging] {
  cursor: grabbing;
  user-select: none;
}

/* The local base CSS holds captured content visible. Animate independent
   filter/translate properties so the first paint still has the saved stagger. */
@keyframes cds-local-hero-enter {
  from { filter: opacity(0); translate: 0 14px; }
  to { filter: opacity(1); translate: 0 0; }
}

@media (prefers-reduced-motion: no-preference) {
  body.cds-local-storefront .cds-homepage-hero.cds-homepage-hero--enter .cds-homepage-hero__slide:first-child .cds-homepage-hero__content > :is(.cds-homepage-hero__proof, .cds-homepage-hero__eyebrow, .cds-homepage-hero__title, .cds-homepage-hero__copy, .cds-homepage-hero__cta) {
    animation: cds-local-hero-enter 900ms cubic-bezier(0.22, 1, 0.36, 1) both !important;
  }
  body.cds-local-storefront .cds-homepage-hero.cds-homepage-hero--enter .cds-homepage-hero__slide:first-child .cds-homepage-hero__content > :is(.cds-homepage-hero__proof, .cds-homepage-hero__eyebrow) { animation-delay: 100ms !important; }
  body.cds-local-storefront .cds-homepage-hero.cds-homepage-hero--enter .cds-homepage-hero__slide:first-child .cds-homepage-hero__content > .cds-homepage-hero__title { animation-delay: 200ms !important; }
  body.cds-local-storefront .cds-homepage-hero.cds-homepage-hero--enter .cds-homepage-hero__slide:first-child .cds-homepage-hero__content > .cds-homepage-hero__copy { animation-delay: 300ms !important; }
  body.cds-local-storefront .cds-homepage-hero.cds-homepage-hero--enter .cds-homepage-hero__slide:first-child .cds-homepage-hero__content > .cds-homepage-hero__cta { animation-delay: 400ms !important; }

  body.cds-local-storefront .cds-wallpaper-hero.cds-wallpaper-hero--enter .cds-wallpaper-hero__content > :is(.cds-wallpaper-hero__proof, .cds-wallpaper-hero__title, .cds-wallpaper-hero__benefits, .cds-wallpaper-hero__cta) {
    animation: cds-local-hero-enter 720ms cubic-bezier(0.22, 1, 0.36, 1) both !important;
  }
  body.cds-local-storefront .cds-wallpaper-hero.cds-wallpaper-hero--enter .cds-wallpaper-hero__content > .cds-wallpaper-hero__proof { animation-delay: 80ms !important; }
  body.cds-local-storefront .cds-wallpaper-hero.cds-wallpaper-hero--enter .cds-wallpaper-hero__content > .cds-wallpaper-hero__title { animation-delay: 160ms !important; }
  body.cds-local-storefront .cds-wallpaper-hero.cds-wallpaper-hero--enter .cds-wallpaper-hero__content > .cds-wallpaper-hero__benefits { animation-delay: 250ms !important; }
  body.cds-local-storefront .cds-wallpaper-hero.cds-wallpaper-hero--enter .cds-wallpaper-hero__content > .cds-wallpaper-hero__cta { animation-delay: 340ms !important; }
}

@media (prefers-reduced-motion: reduce) {
  body.cds-local-storefront .cds-homepage-hero[data-cds-hero-motion="ready"] .cds-homepage-hero__slide { transition: none !important; }
  body.cds-local-storefront .cds-homepage-hero.cds-homepage-hero--enter .cds-homepage-hero__content > *,
  body.cds-local-storefront .cds-wallpaper-hero.cds-wallpaper-hero--enter .cds-wallpaper-hero__content > *,
  body.cds-local-storefront .cds-chroma-collection-hero.cds-chroma-collection-hero--enter .cds-chroma-collection-hero__content > * {
    animation: none !important;
    filter: none !important;
    translate: none !important;
  }
}