/* MRVËY site cinema
   A single fabric-shutter transition between pages. */

.site-cinema-transition {
  position: fixed;
  inset: 0;
  z-index: 1600;
  display: block;
  overflow: hidden;
  pointer-events: none;
  visibility: hidden;
  opacity: 0;
  contain: layout paint size;
}

.site-cinema-transition.is-active {
  visibility: visible;
}

.site-cinema-transition__panel {
  position: absolute;
  left: 0;
  display: block;
  width: 100%;
  height: calc(50% + 1px);
  background:
    linear-gradient(90deg, rgba(255, 255, 255, .025), transparent 18% 82%, rgba(0, 0, 0, .14)),
    repeating-linear-gradient(90deg, rgba(255, 255, 255, .018) 0 1px, transparent 1px 5px),
    radial-gradient(circle at 76% 24%, rgba(88, 101, 255, .15), transparent 34%),
    var(--brand-ink, #10120f);
  transform: scaleY(0);
  backface-visibility: hidden;
}

.site-cinema-transition__panel--top {
  top: 0;
  transform-origin: 50% 0;
}

.site-cinema-transition__panel--bottom {
  bottom: 0;
  background-position: 0 0, 0 0, 24% 76%, 0 0;
  transform-origin: 50% 100%;
}

:where(
  .btn-primary,
  .btn-secondary,
  .nav-cta,
  .story-contact__button,
  .studio-button,
  .qv2-button,
  .founder-button
):active {
  transform: scale(.975);
}

@media (prefers-reduced-motion: reduce) {
  .site-cinema-transition {
    display: none;
  }
}