/*
 * CROSSROAD Z LIQUID GATE
 * A generic transition surface. Any source and destination can be supplied by
 * CrossroadZTransition; the collection room is only the first consumer.
 */

.z-liquid-transition {
  --z-liquid-duration: 920ms;
  --z-liquid-x: 50vw;
  --z-liquid-y: 50vh;
  --z-liquid-source-w: 24px;
  --z-liquid-source-h: 24px;
  --z-liquid-actual: #82cdfc;
  --z-liquid-prediction: #dfe5e9;
  --z-liquid-accent: var(--z-liquid-actual);
  position: fixed;
  z-index: 94;
  inset: 0;
  overflow: hidden;
  contain: strict;
  isolation: isolate;
  pointer-events: none;
}

.z-liquid-prewarm {
  position: fixed;
  inset: 0;
  z-index: -1;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.z-liquid-prewarm .z-liquid-canvas {
  width: 100%;
  height: 100%;
}

.z-liquid-canvas,
.z-liquid-window,
.z-liquid-rim,
.z-liquid-core {
  position: absolute;
  pointer-events: none;
}

.z-liquid-canvas {
  z-index: 3;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  mix-blend-mode: normal;
  filter: saturate(1.12) contrast(1.06);
  animation: zLiquidCanvasEnter var(--z-liquid-duration) cubic-bezier(.22, .72, .18, 1) both;
}

.z-liquid-transition.is-exit .z-liquid-canvas {
  animation-name: zLiquidCanvasExit;
}

.z-liquid-window {
  z-index: 1;
  left: var(--z-liquid-x);
  top: var(--z-liquid-y);
  width: var(--z-liquid-source-w);
  height: var(--z-liquid-source-h);
  border-radius: 50%;
  background: transparent;
  box-shadow:
    0 0 0 200vmax rgba(1, 7, 12, .9),
    inset 0 0 24px color-mix(in srgb, var(--z-liquid-accent) 30%, transparent);
  translate: -50% -50%;
  will-change: width, height, box-shadow;
  animation: zLiquidWindowEnter var(--z-liquid-duration) cubic-bezier(.22, .72, .18, 1) both;
}

.z-liquid-transition.is-exit .z-liquid-window {
  animation-name: zLiquidWindowExit;
}

.z-liquid-rim {
  z-index: 4;
  left: var(--z-liquid-x);
  top: var(--z-liquid-y);
  width: max(var(--z-liquid-source-w), 24px);
  height: max(var(--z-liquid-source-h), 24px);
  border: 1px solid color-mix(in srgb, var(--z-liquid-accent) 78%, transparent);
  border-radius: 50%;
  translate: -50% -50%;
  box-shadow:
    0 0 16px color-mix(in srgb, var(--z-liquid-accent) 42%, transparent),
    inset 0 0 18px color-mix(in srgb, var(--z-liquid-accent) 25%, transparent);
  will-change: width, height, opacity, filter;
  animation: zLiquidRimEnter var(--z-liquid-duration) cubic-bezier(.22, .72, .18, 1) both;
}

.z-liquid-transition.is-exit .z-liquid-rim {
  animation-name: zLiquidRimExit;
}

.z-liquid-rim i {
  position: absolute;
  inset: -10%;
  border: 1px solid color-mix(in srgb, var(--z-liquid-accent) 32%, transparent);
  border-radius: 48% 52% 46% 54% / 54% 43% 57% 46%;
}

.z-liquid-rim i:nth-child(1) {
  rotate: 17deg;
  animation: zLiquidRimOrbit 620ms linear infinite;
}

.z-liquid-rim i:nth-child(2) {
  inset: -18%;
  border-color: color-mix(in srgb, var(--z-liquid-prediction) 26%, transparent);
  rotate: -23deg;
  animation: zLiquidRimOrbit 780ms linear infinite reverse;
}

.z-liquid-rim i:nth-child(3) {
  inset: 7%;
  border-color: color-mix(in srgb, var(--z-liquid-accent) 48%, transparent);
  rotate: 41deg;
  animation: zLiquidRimOrbit 510ms linear infinite;
}

.z-liquid-core {
  z-index: 5;
  left: var(--z-liquid-x);
  top: var(--z-liquid-y);
  width: 8px;
  height: 8px;
  border-radius: 50%;
  translate: -50% -50%;
  background: var(--z-liquid-accent);
  box-shadow:
    0 0 14px var(--z-liquid-accent),
    0 0 34px color-mix(in srgb, var(--z-liquid-accent) 68%, transparent);
  animation: zLiquidCoreEnter var(--z-liquid-duration) ease-out both;
}

.z-liquid-transition.is-exit .z-liquid-core {
  animation-name: zLiquidCoreExit;
}

.is-z-liquid-source {
  filter: brightness(1.08);
}

@keyframes zLiquidCanvasEnter {
  0% { opacity: 0; }
  8% { opacity: .92; }
  70% { opacity: .82; }
  100% { opacity: 0; }
}

@keyframes zLiquidCanvasExit {
  0% { opacity: 0; }
  12% { opacity: .76; }
  82% { opacity: .9; }
  100% { opacity: 0; }
}

@keyframes zLiquidWindowEnter {
  0% {
    left: var(--z-liquid-x);
    top: var(--z-liquid-y);
    width: var(--z-liquid-source-w);
    height: var(--z-liquid-source-h);
    box-shadow: 0 0 0 200vmax rgba(1, 7, 12, 0);
  }
  12% {
    left: var(--z-liquid-x);
    top: var(--z-liquid-y);
    width: max(var(--z-liquid-source-w), 32px);
    height: max(var(--z-liquid-source-h), 32px);
    box-shadow: 0 0 0 200vmax rgba(1, 7, 12, .88);
  }
  43% {
    left: 58vw;
    top: 48vh;
    width: 46vmax;
    height: 46vmax;
    box-shadow: 0 0 0 200vmax rgba(1, 7, 12, .86);
  }
  72% {
    left: 50vw;
    top: 50vh;
    width: 112vmax;
    height: 112vmax;
    box-shadow: 0 0 0 200vmax rgba(1, 7, 12, .48);
  }
  100% {
    left: 50vw;
    top: 50vh;
    width: 260vmax;
    height: 260vmax;
    box-shadow: 0 0 0 200vmax rgba(1, 7, 12, 0);
  }
}

@keyframes zLiquidWindowExit {
  0% {
    left: 50vw;
    top: 50vh;
    width: 260vmax;
    height: 260vmax;
    box-shadow: 0 0 0 200vmax rgba(1, 7, 12, 0);
  }
  35% {
    left: 50vw;
    top: 50vh;
    width: 105vmax;
    height: 105vmax;
    box-shadow: 0 0 0 200vmax rgba(1, 7, 12, .52);
  }
  72% {
    left: 58vw;
    top: 48vh;
    width: 38vmax;
    height: 38vmax;
    box-shadow: 0 0 0 200vmax rgba(1, 7, 12, .88);
  }
  100% {
    left: var(--z-liquid-x);
    top: var(--z-liquid-y);
    width: var(--z-liquid-source-w);
    height: var(--z-liquid-source-h);
    box-shadow: 0 0 0 200vmax rgba(1, 7, 12, 0);
  }
}

@keyframes zLiquidRimEnter {
  0% { left: var(--z-liquid-x); top: var(--z-liquid-y); opacity: 0; filter: blur(5px); }
  8% { left: var(--z-liquid-x); top: var(--z-liquid-y); opacity: 1; filter: blur(0); }
  22% {
    left: 72vw;
    top: 34vh;
    width: 12vmax;
    height: 12vmax;
  }
  58% {
    left: 52vw;
    top: 50vh;
    width: 72vmax;
    height: 72vmax;
    opacity: .9;
  }
  100% {
    left: 50vw;
    top: 50vh;
    width: 230vmax;
    height: 230vmax;
    opacity: 0;
    filter: blur(2px);
  }
}

@keyframes zLiquidRimExit {
  0% {
    left: 50vw;
    top: 50vh;
    width: 230vmax;
    height: 230vmax;
    opacity: 0;
  }
  18% { left: 50vw; top: 50vh; opacity: .72; }
  68% {
    left: 68vw;
    top: 38vh;
    width: 34vmax;
    height: 34vmax;
    opacity: 1;
  }
  100% {
    left: var(--z-liquid-x);
    top: var(--z-liquid-y);
    width: max(var(--z-liquid-source-w), 24px);
    height: max(var(--z-liquid-source-h), 24px);
    opacity: 0;
    filter: blur(4px);
  }
}

@keyframes zLiquidCoreEnter {
  0% { left: var(--z-liquid-x); top: var(--z-liquid-y); opacity: 0; scale: .4; }
  10% { left: var(--z-liquid-x); top: var(--z-liquid-y); opacity: 1; scale: 1.8; }
  28% { left: 66vw; top: 42vh; opacity: .82; scale: 5; }
  62% { left: 50vw; top: 50vh; opacity: .2; scale: 12; }
  100% { left: 50vw; top: 50vh; opacity: 0; scale: 18; }
}

@keyframes zLiquidCoreExit {
  0% { left: 50vw; top: 50vh; opacity: 0; scale: 18; }
  54% { left: 58vw; top: 48vh; opacity: .32; scale: 9; }
  88% { left: var(--z-liquid-x); top: var(--z-liquid-y); opacity: 1; scale: 2; }
  100% { left: var(--z-liquid-x); top: var(--z-liquid-y); opacity: 0; scale: .4; }
}

@keyframes zLiquidRimOrbit {
  to { rotate: 377deg; }
}

html.z-liquid-gate-ready .trailer-archive.is-collection-threshold .collection-room,
html.z-liquid-gate-ready .trailer-archive.is-collection-exiting .collection-room {
  animation: none;
}

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