.app-shell:not(.route-admin) .horror-hero-carousel .horror-hero-card.is-entering {
  animation: horror-hero-card-enter 520ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

.app-shell:not(.route-admin) .horror-hero-carousel .horror-hero-card.is-entering .hero-poster {
  animation: horror-hero-poster-enter 620ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

.app-shell:not(.route-admin) .horror-hero-carousel .horror-hero-card.is-entering .hero-copy {
  animation: horror-hero-copy-enter 560ms 80ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

@keyframes horror-hero-card-enter {
  from { opacity: 0.72; }
  to { opacity: 1; }
}

@keyframes horror-hero-poster-enter {
  from { opacity: 0.66; transform: translateX(-10px); }
  to { opacity: 1; transform: translateX(0); }
}

@keyframes horror-hero-copy-enter {
  from { opacity: 0; transform: translateX(10px); }
  to { opacity: 1; transform: translateX(0); }
}

@media (prefers-reduced-motion: reduce) {
  .app-shell:not(.route-admin) .horror-hero-carousel .horror-hero-card.is-entering,
  .app-shell:not(.route-admin) .horror-hero-carousel .horror-hero-card.is-entering .hero-poster,
  .app-shell:not(.route-admin) .horror-hero-carousel .horror-hero-card.is-entering .hero-copy {
    animation: none;
  }
}