.hero-panorama { --direction: 1; }
.hero-panorama[data-direction="backward"] { --direction: -1; }
.hero-frame.is-leaving { z-index: 1; }
.hero-frame.is-entering { z-index: 2; }

.hero-effect--fade .is-entering { animation: motion-fade var(--transition-time) ease both; }
@keyframes motion-fade { from { opacity: 0; } to { opacity: 1; } }

.hero-effect--slide .is-entering { animation: motion-slide-in var(--transition-time) cubic-bezier(.22,.7,.2,1) both; }
.hero-effect--slide .is-leaving { animation: motion-slide-out var(--transition-time) cubic-bezier(.22,.7,.2,1) both; }
@keyframes motion-slide-in { from { transform: translateX(calc(100% * var(--direction))); } to { transform: translateX(0); } }
@keyframes motion-slide-out { from { transform: translateX(0); } to { transform: translateX(calc(-100% * var(--direction))); } }

.hero-effect--zoom .is-entering { animation: motion-fade var(--transition-time) ease both; }
.hero-effect--zoom .is-entering > img { animation: motion-zoom-in var(--transition-time) ease-out both; }
.hero-effect--zoom .is-leaving > img { animation: motion-zoom-out var(--transition-time) ease both; }
@keyframes motion-zoom-in { from { transform: scale(1.1); } to { transform: scale(1); } }
@keyframes motion-zoom-out { from { transform: scale(1); } to { transform: scale(1.045); } }

.hero-effect--wipe .is-entering { animation: motion-wipe-right var(--transition-time) cubic-bezier(.2,.65,.25,1) both; }
.hero-effect--wipe[data-direction="backward"] .is-entering { animation-name: motion-wipe-left; }
@keyframes motion-wipe-right { from { clip-path: inset(0 0 0 100%); } to { clip-path: inset(0); } }
@keyframes motion-wipe-left { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0); } }

.hero-effect--iris .is-entering { animation: motion-iris var(--transition-time) cubic-bezier(.25,.7,.25,1) both; }
@keyframes motion-iris { from { clip-path: circle(0% at 50% 50%); } to { clip-path: circle(100% at 50% 50%); } }

.hero-effect--focus .is-entering { animation: motion-fade var(--transition-time) ease both; }
.hero-effect--focus .is-entering > img { animation: motion-focus-in var(--transition-time) ease-out both; }
.hero-effect--focus .is-leaving > img { animation: motion-focus-out var(--transition-time) ease both; }
@keyframes motion-focus-in { from { filter: blur(16px); transform: scale(1.035); } to { filter: blur(0); transform: scale(1); } }
@keyframes motion-focus-out { from { filter: blur(0); transform: scale(1); } to { filter: blur(16px); transform: scale(1.035); } }

.hero-effect--dark { background: #090909; }
.hero-effect--dark .is-entering { animation: motion-dark-in var(--transition-time) ease both; }
.hero-effect--dark .is-leaving { animation: motion-dark-out var(--transition-time) ease both; }
@keyframes motion-dark-in { 0%, 52% { opacity: 0; } 100% { opacity: 1; } }
@keyframes motion-dark-out { 0% { opacity: 1; } 48%, 100% { opacity: 0; } }

.hero-effect--turn .is-entering { animation: motion-turn-in var(--transition-time) ease-out both; }
.hero-effect--turn .is-leaving { animation: motion-turn-out var(--transition-time) ease-in both; }
@keyframes motion-turn-in {
  0%, 30% { opacity: 0; transform: perspective(1300px) rotateY(calc(66deg * var(--direction))) scale(.91); }
  100% { opacity: 1; transform: perspective(1300px) rotateY(0) scale(1); }
}
@keyframes motion-turn-out {
  0% { opacity: 1; transform: perspective(1300px) rotateY(0) scale(1); }
  70%, 100% { opacity: 0; transform: perspective(1300px) rotateY(calc(-66deg * var(--direction))) scale(.91); }
}

@media (prefers-reduced-motion: reduce) {
  .hero-panorama .hero-frame, .hero-panorama .hero-frame > img { animation: none; }
}