html {
  overflow-x: clip;
}

[data-cinema] {
  opacity: 1;
  transform: none;
}

.cinema-active [data-cinema]:not([data-cinema-visible="true"]) {
  opacity: 0;
  transform: translate3d(0, var(--cinema-enter-y, 28px), 0);
}

.cinema-active [data-cinema][data-cinema-visible="true"] {
  opacity: 1;
  transform: none;
  transition:
    opacity var(--cinema-duration, 760ms) var(--cinema-ease, ease),
    transform var(--cinema-duration, 760ms) var(--cinema-ease, ease);
  transition-delay: calc(var(--cinema-index, 0) * 30ms);
}

[data-cinema-header] [data-cinema] {
  --cinema-enter-y: -10px;
}

.cinema-active [data-cinema-header] [data-cinema][data-cinema-visible="true"] {
  transition-duration: 560ms;
  transition-delay: calc(var(--cinema-index, 0) * 55ms);
}

[data-cinema-depth] {
  transform: translate3d(
    calc(var(--cinema-depth-x, 0) * 1px),
    calc(var(--cinema-scroll, 0) * var(--cinema-depth, 12px)),
    0
  );
}

html[data-cinema-state="entering"] [data-cinema-depth],
html[data-cinema-state="entering"] [data-cinema-light] {
  will-change: transform, opacity;
}

[data-cinema-mask="aperture"] {
  clip-path: inset(0 0 0 0 round var(--cinema-mask-radius, 0));
}

.cinema-active [data-cinema-mask="aperture"]:not([data-cinema-visible="true"]) {
  clip-path: inset(0 50% 0 50% round var(--cinema-mask-radius, 0));
}

[data-cinema-mask="wipe"] {
  clip-path: inset(0 0 0 0);
}

.cinema-active [data-cinema-mask="wipe"]:not([data-cinema-visible="true"]) {
  clip-path: inset(0 100% 0 0);
}

[data-cinema-light] {
  overflow: hidden;
  position: relative;
}

[data-cinema-light]::after {
  background: linear-gradient(
    110deg,
    transparent 35%,
    rgb(255 255 255 / 0.42) 50%,
    transparent 65%
  );
  content: "";
  inset: 0;
  pointer-events: none;
  position: absolute;
  transform: translateX(-130%);
}

.cinema-active [data-cinema-light][data-cinema-visible="true"]::after {
  animation: cinema-specular 900ms var(--cinema-ease, ease) both;
}

[data-cinema-hero] [data-cinema-transition] {
  transition-duration: var(--cinema-duration, 760ms);
  transition-timing-function: var(--cinema-ease, ease);
}

@keyframes cinema-specular {
  to {
    transform: translateX(130%);
  }
}

@media (max-width: 768px) {
  [data-cinema-depth] {
    transform: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  [data-cinema],
  [data-cinema-mask],
  [data-cinema-depth],
  [data-cinema-light] {
    animation: none !important;
    clip-path: none !important;
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}