:root {
  --xena-cyan: #39e7ff;
  --xena-magenta: #ff2eb8;
  --xena-void: #030108;
}

.xena-cinematic-bg {
  position: fixed;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  opacity: .76;
  mix-blend-mode: screen;
  filter: saturate(1.18) contrast(1.05);
}

body.xena-cinematic-ready::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse at 50% 112%, rgba(108, 46, 220, .19), transparent 50%),
    linear-gradient(180deg, rgba(2, 0, 9, .12), rgba(2, 0, 9, .68));
}

.xena-cinematic-transition {
  position: fixed;
  inset: 0;
  z-index: 2147483000;
  display: grid;
  place-items: center;
  pointer-events: none;
  visibility: hidden;
  opacity: 0;
  overflow: hidden;
  background: #020006;
  contain: layout paint style;
}

.xena-cinematic-transition::before,
.xena-cinematic-transition::after {
  content: "";
  position: absolute;
  inset: -12%;
}

.xena-cinematic-transition::before {
  background:
    linear-gradient(96deg, transparent 0 41%, rgba(57, 231, 255, .95) 45%, #fff 49%, rgba(255, 46, 184, .94) 53%, transparent 58%),
    repeating-linear-gradient(0deg, transparent 0 7px, rgba(57, 231, 255, .16) 8px 9px, transparent 10px 19px);
  filter: blur(2px) saturate(1.5);
  transform: translateX(-125%) skewX(-12deg);
}

.xena-cinematic-transition::after {
  background:
    radial-gradient(circle at center, transparent 0 1%, rgba(3, 1, 8, .94) 1.5% 100%),
    conic-gradient(from 25deg at 50% 50%, rgba(57, 231, 255, .55), transparent 17%, rgba(255, 46, 184, .45), transparent 42%, rgba(57, 231, 255, .35), transparent 70%);
  transform: scale(2.4);
}

.xena-cinematic-transition.is-entering,
.xena-cinematic-transition.is-leaving {
  visibility: visible;
  opacity: 1;
}

.xena-cinematic-transition.is-entering {
  animation: xena-overlay-clear .7s cubic-bezier(.22, .7, .12, 1) both;
}

.xena-cinematic-transition.is-entering::after {
  animation: xena-iris-open .7s cubic-bezier(.2, .72, .08, 1) both;
}

.xena-cinematic-transition.is-leaving::before {
  animation: xena-glitch-tear .48s steps(8, end) both;
}

.xena-cinematic-transition.is-leaving::after {
  animation: xena-iris-close .48s cubic-bezier(.7, 0, .9, .35) both;
}

@keyframes xena-overlay-clear {
  0%, 68% { opacity: 1; }
  100% { opacity: 0; visibility: hidden; }
}

@keyframes xena-iris-open {
  0% { transform: scale(1); }
  100% { transform: scale(5); }
}

@keyframes xena-iris-close {
  0% { transform: scale(5); }
  68%, 100% { transform: scale(1); }
}

@keyframes xena-glitch-tear {
  0% { transform: translateX(-125%) skewX(-12deg); clip-path: polygon(0 0, 100% 3%, 100% 18%, 0 14%); }
  28% { transform: translateX(-35%) skewX(12deg); clip-path: polygon(0 24%, 100% 20%, 100% 48%, 0 53%); }
  52% { transform: translateX(12%) skewX(-8deg); clip-path: polygon(0 8%, 100% 14%, 100% 83%, 0 72%); }
  76% { transform: translateX(55%) skewX(9deg); clip-path: polygon(0 44%, 100% 35%, 100% 100%, 0 94%); }
  100% { transform: translateX(125%) skewX(-12deg); clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); }
}

@media (max-width: 700px) {
  .xena-cinematic-bg { opacity: .64; }
}

@media (prefers-reduced-motion: reduce) {
  .xena-cinematic-transition,
  .xena-cinematic-transition::before,
  .xena-cinematic-transition::after {
    animation: none !important;
  }
  .xena-cinematic-transition.is-entering { visibility: hidden; opacity: 0; }
}