/*
 * Z DEPTH PASS
 * A transition-only composite layer. The existing Crossroad DOM stays still;
 * three disposable planes carry the sense of forward travel.
 */

html.z-depth-pass-ready .collection-z-gate,
html.z-depth-pass-ready .collection-z-continuity {
  display: none !important;
}

.z-depth-pass-host {
  --z-pass-duration: 640ms;
  --z-pass-x: 50vw;
  --z-pass-y: 50vh;
  position: fixed;
  z-index: 91;
  inset: 0;
  overflow: hidden;
  contain: strict;
  pointer-events: none;
  perspective: 1100px;
  perspective-origin: var(--z-pass-x) var(--z-pass-y);
  background:
    linear-gradient(112deg, rgba(2, 8, 13, .94), rgba(5, 19, 29, .82) 52%, rgba(2, 7, 11, .96));
  opacity: 0;
  transform: translateZ(0);
  will-change: opacity;
  animation: zPassHostEnter var(--z-pass-duration) linear both;
}

.z-depth-pass-host.is-exit {
  animation-name: zPassHostExit;
}

.z-depth-pass-plane {
  position: absolute;
  inset: -18%;
  transform-style: preserve-3d;
  backface-visibility: hidden;
  will-change: transform, opacity;
}

.z-depth-pass-plane::before,
.z-depth-pass-plane::after {
  content: "";
  position: absolute;
  pointer-events: none;
}

.z-depth-pass-plane.is-far {
  opacity: .5;
  background:
    linear-gradient(90deg, transparent 0 23.4%, rgba(130, 205, 252, .2) 23.5% 23.62%, transparent 23.7%),
    repeating-linear-gradient(90deg, transparent 0 12vw, rgba(130, 205, 252, .055) 12.05vw 12.12vw, transparent 12.2vw 24vw);
  animation: zPassFarEnter var(--z-pass-duration) cubic-bezier(.22, .72, .18, 1) both;
}

.z-depth-pass-plane.is-far::after {
  left: 0;
  right: 0;
  top: 54%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(130, 205, 252, .5) 24%, rgba(130, 205, 252, .18) 72%, transparent);
}

.z-depth-pass-plane.is-mid {
  opacity: .7;
  background:
    linear-gradient(90deg, transparent 0 23.25%, rgba(171, 225, 252, .44) 23.34% 23.46%, transparent 23.55%),
    linear-gradient(0deg, transparent 0 53.7%, color-mix(in srgb, var(--prediction) 26%, transparent) 53.78% 53.9%, transparent 54%);
  animation: zPassMidEnter var(--z-pass-duration) cubic-bezier(.22, .72, .18, 1) both;
}

.z-depth-pass-plane.is-mid::before {
  inset: 14% 11%;
  border: 1px solid rgba(130, 205, 252, .09);
  border-left-color: rgba(130, 205, 252, .3);
  border-bottom-color: color-mix(in srgb, var(--prediction) 16%, transparent);
}

.z-depth-pass-plane.is-near {
  opacity: 0;
  background:
    linear-gradient(118deg, transparent 0 14%, rgba(191, 229, 249, .18) 14.1% 14.3%, transparent 14.45% 41%, color-mix(in srgb, var(--prediction) 12%, transparent) 41.1% 41.3%, transparent 41.45%),
    linear-gradient(64deg, transparent 0 68%, rgba(130, 205, 252, .14) 68.1% 68.25%, transparent 68.4%);
  animation: zPassNearEnter var(--z-pass-duration) cubic-bezier(.22, .72, .18, 1) both;
}

.z-depth-pass-plane.is-near::before,
.z-depth-pass-plane.is-near::after {
  width: 18vw;
  height: 10vw;
  max-width: 260px;
  max-height: 145px;
  border: 1px solid rgba(181, 223, 245, .2);
  background: linear-gradient(135deg, rgba(130, 205, 252, .04), transparent 62%);
}

.z-depth-pass-plane.is-near::before {
  left: 7%;
  top: 24%;
  transform: rotate(-8deg);
}

.z-depth-pass-plane.is-near::after {
  right: 8%;
  bottom: 18%;
  transform: rotate(7deg);
}

.z-depth-pass-host.is-exit .z-depth-pass-plane.is-far {
  animation-name: zPassFarExit;
}

.z-depth-pass-host.is-exit .z-depth-pass-plane.is-mid {
  animation-name: zPassMidExit;
}

.z-depth-pass-host.is-exit .z-depth-pass-plane.is-near {
  animation-name: zPassNearExit;
}

@keyframes zPassHostEnter {
  0% { opacity: 0; }
  9% { opacity: .78; }
  68% { opacity: .72; }
  100% { opacity: 0; }
}

@keyframes zPassHostExit {
  0% { opacity: 0; }
  12% { opacity: .7; }
  72% { opacity: .66; }
  100% { opacity: 0; }
}

@keyframes zPassFarEnter {
  0% { opacity: .12; transform: translate3d(0, 0, -760px) scale(.96); }
  100% { opacity: .5; transform: translate3d(0, 2%, 90px) scale(1.02); }
}

@keyframes zPassMidEnter {
  0% { opacity: .08; transform: translate3d(0, -1%, -520px) scale(.95); }
  100% { opacity: .64; transform: translate3d(0, 3%, 250px) scale(1.035); }
}

@keyframes zPassNearEnter {
  0% { opacity: 0; transform: translate3d(0, -3%, -240px) scale(.94); }
  30% { opacity: .46; }
  100% { opacity: 0; transform: translate3d(0, 7%, 540px) scale(1.08); }
}

@keyframes zPassFarExit {
  0% { opacity: .4; transform: translate3d(0, 2%, 80px) scale(1.02); }
  100% { opacity: .08; transform: translate3d(0, 0, -720px) scale(.96); }
}

@keyframes zPassMidExit {
  0% { opacity: .56; transform: translate3d(0, 3%, 230px) scale(1.03); }
  100% { opacity: .06; transform: translate3d(0, -1%, -500px) scale(.95); }
}

@keyframes zPassNearExit {
  0% { opacity: 0; transform: translate3d(0, 7%, 500px) scale(1.07); }
  35% { opacity: .38; }
  100% { opacity: 0; transform: translate3d(0, -3%, -220px) scale(.95); }
}

/* The destination only resolves; the large room DOM is not scaled. */
html.z-depth-pass-ready .trailer-archive.is-collection-threshold .collection-room {
  animation: zPassDestinationEnter var(--z-pass-enter-duration, 640ms) cubic-bezier(.22, .72, .18, 1) both;
  transform: none;
}

html.z-depth-pass-ready .trailer-archive.is-collection-exiting .collection-room {
  animation: zPassDestinationExit var(--z-pass-exit-duration, 560ms) cubic-bezier(.22, .72, .18, 1) both;
  transform: none;
}

@keyframes zPassDestinationEnter {
  0%, 32% { opacity: 0; }
  72% { opacity: .58; }
  100% { opacity: 1; }
}

@keyframes zPassDestinationExit {
  0% { opacity: 1; }
  54% { opacity: .32; }
  100% { opacity: 0; }
}

html[data-z-depth-profile="quiet"] .z-depth-pass-plane.is-near {
  display: none;
}

html[data-z-depth-profile="quiet"] .z-depth-pass-host {
  perspective: none;
}

html[data-z-depth-profile="quiet"] .z-depth-pass-plane.is-far,
html[data-z-depth-profile="quiet"] .z-depth-pass-plane.is-mid {
  transform: translateZ(0);
}

@media (max-width: 1023px), (hover: none), (pointer: coarse) {
  .z-depth-pass-host {
    --z-pass-duration: 420ms;
    perspective: none;
  }

  .z-depth-pass-plane.is-near {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .z-depth-pass-host {
    display: none;
  }

  html.z-depth-pass-ready .trailer-archive.is-collection-threshold .collection-room {
    animation: zPassReduced 210ms ease both;
  }

  html.z-depth-pass-ready .trailer-archive.is-collection-exiting .collection-room {
    animation: zPassReduced 180ms ease reverse both;
  }

  @keyframes zPassReduced {
    from { opacity: 0; }
    to { opacity: 1; }
  }
}