html.motion-ready [data-reveal],
html.motion-ready [data-split-reveal],
html.motion-ready [data-line-reveal] {
  opacity: 0;
  transform: translateY(34px);
  transition:
    opacity .78s cubic-bezier(.2, .75, .25, 1),
    transform .78s cubic-bezier(.2, .75, .25, 1);
}

html.motion-ready [data-split-reveal] {
  transform: translateY(54px);
  transition-duration: .95s;
}

html.motion-ready [data-line-reveal] {
  clip-path: inset(0 0 100% 0);
  transform: translateY(20px);
  transition:
    opacity .9s cubic-bezier(.2, .75, .25, 1),
    transform .9s cubic-bezier(.2, .75, .25, 1),
    clip-path 1.05s cubic-bezier(.2, .75, .25, 1);
}

html.motion-ready .is-revealed {
  opacity: 1;
  transform: translateY(0);
}

html.motion-ready [data-line-reveal].is-revealed {
  clip-path: inset(0 0 0 0);
}

.cinema-hero__visual {
  transform:
    translate3d(var(--hero-x, 0), var(--hero-y, 0), 0)
    rotate(var(--hero-rotate, 0deg));
  transition: transform .5s cubic-bezier(.2, .75, .25, 1);
}

.hero-mini-card {
  animation: hero-card-float 5.5s ease-in-out infinite;
}

.hero-mini-card--pink {
  animation-delay: -2.3s;
}

@keyframes hero-card-float {
  0%,
  100% { margin-top: 0; }
  50% { margin-top: -9px; }
}

@media (prefers-reduced-motion: reduce) {
  html.motion-ready [data-reveal],
  html.motion-ready [data-split-reveal],
  html.motion-ready [data-line-reveal] {
    opacity: 1;
    clip-path: none;
    transform: none;
  }

  .hero-mini-card {
    animation: none;
  }

  .cinema-hero__visual {
    transform: none;
  }
}