.intro-splash {
  --intro-edge: 0 0 0;
  --intro-glow: 0 0 0;
  isolation: isolate;
  background: rgb(var(--intro-edge));
  transition: opacity .95s var(--ease), visibility 0s linear .95s, background-color .12s linear;
}

.intro-splash::before {
  z-index: 0;
  background:
    linear-gradient(180deg, rgb(var(--intro-edge) / .16), transparent 28%, transparent 72%, rgb(var(--intro-edge) / .28)),
    linear-gradient(90deg, rgb(var(--intro-glow) / .08), transparent 30%, transparent 70%, rgb(var(--intro-glow) / .08));
}

.intro-splash::after {
  z-index: 4;
  background:
    linear-gradient(180deg, rgb(0 0 0 / .34), transparent 24%, transparent 76%, rgb(0 0 0 / .48)),
    linear-gradient(90deg, rgb(0 0 0 / .3), transparent 22%, transparent 78%, rgb(0 0 0 / .3));
}

.intro-ambient {
  position: absolute;
  z-index: 1;
  inset: -12%;
  width: 124%;
  height: 124%;
  pointer-events: none;
  opacity: 1;
  filter: blur(clamp(54px, 6vw, 96px)) saturate(1.65) brightness(.74);
  transform: scale(1.08);
  transform-origin: center;
}

.intro-contour {
  position: absolute;
  z-index: 2;
  inset: -5%;
  width: 110%;
  height: 110%;
  pointer-events: none;
  opacity: .58;
  filter: blur(clamp(6px, .9vw, 14px)) drop-shadow(0 0 20px rgb(var(--intro-glow) / .62));
  mix-blend-mode: screen;
  transform: scale(1.04);
  transform-origin: center;
}

.intro-splash video {
  z-index: 3;
  mix-blend-mode: screen;
  filter: contrast(1.08) brightness(1.02);
}

@media (max-width: 600px) {
  .intro-ambient {
    filter: blur(46px) saturate(1.55) brightness(.7);
    transform: scale(1.12);
  }

  .intro-contour {
    opacity: .5;
    filter: blur(7px) drop-shadow(0 0 14px rgb(var(--intro-glow) / .56));
  }
}