.opening--prism {
  background:
    radial-gradient(circle at 50% 48%, rgba(53, 214, 255, 0.12), transparent 28%),
    #fff;
}

.prism {
  position: absolute;
  width: 72vmax;
  aspect-ratio: 1;
  clip-path: polygon(50% 0, 100% 100%, 0 100%);
  opacity: 0;
  mix-blend-mode: multiply;
  filter: saturate(1.15);
}

.prism-one {
  background: linear-gradient(145deg, rgba(23, 101, 255, 0.86), rgba(53, 214, 255, 0.28));
}

.prism-two {
  background: linear-gradient(35deg, rgba(103, 55, 255, 0.82), rgba(36, 107, 254, 0.24));
}

.prism-three {
  width: 54vmax;
  background: linear-gradient(210deg, rgba(53, 214, 255, 0.7), rgba(23, 101, 255, 0.16));
}

.prism-four {
  width: 42vmax;
  background: linear-gradient(300deg, rgba(240, 67, 212, 0.48), rgba(116, 69, 255, 0.12));
}

.opening--prism.is-playing .prism-one {
  animation: prism-one 3.15s cubic-bezier(0.7, 0, 0.2, 1) forwards;
}

.opening--prism.is-playing .prism-two {
  animation: prism-two 3.05s cubic-bezier(0.7, 0, 0.2, 1) 0.08s forwards;
}

.opening--prism.is-playing .prism-three {
  animation: prism-three 2.9s cubic-bezier(0.7, 0, 0.2, 1) 0.16s forwards;
}

.opening--prism.is-playing .prism-four {
  animation: prism-four 2.8s cubic-bezier(0.7, 0, 0.2, 1) 0.22s forwards;
}

.prism-line {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 130vmax;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(36, 107, 254, 0.76), transparent);
  opacity: 0;
  transform-origin: center;
}

.prism-line-one {
  transform: translate(-50%, -50%) rotate(31deg) scaleX(0);
}

.prism-line-two {
  transform: translate(-50%, -50%) rotate(-47deg) scaleX(0);
}

.opening--prism.is-playing .prism-line-one {
  animation: prism-line-one 1.35s ease 0.85s forwards;
}

.opening--prism.is-playing .prism-line-two {
  animation: prism-line-two 1.35s ease 1.05s forwards;
}

.prism-flare {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 8px;
  aspect-ratio: 1;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 0 0 rgba(53, 214, 255, 0), 0 0 70px 25px rgba(53, 214, 255, 0.78);
  opacity: 0;
  transform: translate(-50%, -50%);
}

.opening--prism.is-playing .prism-flare {
  animation: prism-flare 0.7s ease 1.92s forwards;
}

.opening--prism.is-playing .opening-brand {
  animation: prism-brand 0.85s cubic-bezier(0.22, 1, 0.36, 1) 2.25s forwards;
}

@keyframes prism-one {
  0% { opacity: 0; transform: translate(-70vw, -58vh) rotate(-38deg); }
  18% { opacity: 0.78; }
  56% { opacity: 0.72; transform: translate(-10vw, -6vh) rotate(18deg); }
  76% { opacity: 0.48; transform: translate(4vw, 2vh) rotate(39deg); }
  100% { opacity: 0; transform: translate(74vw, 34vh) rotate(88deg); }
}

@keyframes prism-two {
  0% { opacity: 0; transform: translate(72vw, -54vh) rotate(64deg); }
  20% { opacity: 0.72; }
  56% { opacity: 0.74; transform: translate(12vw, -5vh) rotate(21deg); }
  76% { opacity: 0.5; transform: translate(-4vw, 3vh) rotate(-8deg); }
  100% { opacity: 0; transform: translate(-76vw, 42vh) rotate(-64deg); }
}

@keyframes prism-three {
  0% { opacity: 0; transform: translate(-54vw, 70vh) rotate(12deg); }
  22% { opacity: 0.74; }
  58% { opacity: 0.68; transform: translate(-5vw, 10vh) rotate(-32deg); }
  100% { opacity: 0; transform: translate(54vw, -70vh) rotate(-98deg); }
}

@keyframes prism-four {
  0% { opacity: 0; transform: translate(62vw, 65vh) rotate(-22deg); }
  24% { opacity: 0.62; }
  58% { opacity: 0.56; transform: translate(6vw, 7vh) rotate(35deg); }
  100% { opacity: 0; transform: translate(-62vw, -66vh) rotate(102deg); }
}

@keyframes prism-line-one {
  0% { opacity: 0; transform: translate(-50%, -50%) rotate(31deg) scaleX(0); }
  40% { opacity: 0.8; }
  100% { opacity: 0; transform: translate(-50%, -50%) rotate(31deg) scaleX(1); }
}

@keyframes prism-line-two {
  0% { opacity: 0; transform: translate(-50%, -50%) rotate(-47deg) scaleX(0); }
  40% { opacity: 0.7; }
  100% { opacity: 0; transform: translate(-50%, -50%) rotate(-47deg) scaleX(1); }
}

@keyframes prism-flare {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(0.2); }
  45% { opacity: 1; transform: translate(-50%, -50%) scale(1.8); }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(5); }
}

@keyframes prism-brand {
  from { opacity: 0; transform: scale(0.88); filter: blur(10px); }
  to { opacity: 1; transform: scale(1); filter: blur(0); }
}