.loading-intro {
  --intro-gold: #ff4fb8;
  position: fixed;
  z-index: 1000;
  inset: 0;
  display: grid;
  overflow: hidden;
  place-items: center;
  background:
    radial-gradient(circle at 42% 44%, rgba(74, 173, 255, .12), transparent 38%),
    radial-gradient(circle at 61% 48%, rgba(255, 64, 182, .15), transparent 40%),
    #030307;
  color: #f5ead6;
  font-family: Georgia, "Times New Roman", serif;
  transition: opacity 650ms ease, visibility 650ms ease;
}

.loading-intro.is-exiting { opacity: 0; visibility: hidden; }
.loading-intro[hidden] { display: none; }

.loading-intro__geometry {
  position: absolute;
  inset: 0;
  opacity: .65;
}

.loading-intro__geometry::before,
.loading-intro__geometry::after,
.loading-intro__geometry i {
  position: absolute;
  content: "";
  border: 1px solid rgba(187, 111, 255, .25);
  transform: rotate(45deg);
  transition: transform 1s cubic-bezier(.2,.8,.2,1), opacity 500ms ease;
}

.loading-intro__geometry::before { top: -12vw; left: 14vw; width: 34vw; height: 34vw; }
.loading-intro__geometry::after { right: 13vw; bottom: -18vw; width: 40vw; height: 40vw; }
.loading-intro__geometry i:nth-child(1) { top: 18%; left: 9%; width: 10vw; height: 10vw; }
.loading-intro__geometry i:nth-child(2) { top: 10%; right: 12%; width: 17vw; height: 17vw; }
.loading-intro__geometry i:nth-child(3) { bottom: 14%; left: 20%; width: 13vw; height: 13vw; }
.loading-intro__geometry i:nth-child(4) { right: 28%; bottom: 8%; width: 8vw; height: 8vw; }

.loading-intro__stage {
  position: relative;
  width: min(78vw, 680px);
  aspect-ratio: 1;
}

.loading-intro__portrait,
.loading-intro__fragment {
  position: absolute;
  inset: 0;
}

.loading-intro__portrait { filter: drop-shadow(0 30px 50px #000); }

.loading-intro__fragment {
  display: block;
  opacity: 0;
  background: url("assets/fighters/wild-brawler-injured-intro-v1.jpg") center / cover no-repeat;
  transform: translate3d(var(--fragment-x, 0), var(--fragment-y, 18px), 0) scale(.985);
  transition: opacity 420ms ease, transform 700ms cubic-bezier(.16,.8,.26,1), filter 600ms ease;
  filter: brightness(.5) saturate(.65);
}

.loading-intro__fragment--eye { --fragment-x: -26px; clip-path: polygon(18% 33%, 54% 25%, 58% 48%, 25% 53%); }
.loading-intro__fragment--brow { --fragment-x: 24px; clip-path: polygon(45% 17%, 82% 26%, 76% 49%, 50% 43%); }
.loading-intro__fragment--cheek { --fragment-x: -20px; clip-path: polygon(9% 44%, 52% 38%, 56% 76%, 18% 83%); }
.loading-intro__fragment--nose { --fragment-x: 18px; clip-path: polygon(43% 34%, 69% 35%, 71% 71%, 47% 73%); }
.loading-intro__fragment--mouth { --fragment-x: -14px; clip-path: polygon(28% 65%, 76% 61%, 83% 84%, 31% 88%); }
.loading-intro__fragment--body { --fragment-y: 28px; clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); opacity: 0; }

.loading-intro[data-phase="1"] .loading-intro__fragment--eye,
.loading-intro[data-phase="2"] .loading-intro__fragment--eye,
.loading-intro[data-phase="2"] .loading-intro__fragment--brow,
.loading-intro[data-phase="3"] .loading-intro__fragment:not(.loading-intro__fragment--body),
.loading-intro[data-phase="4"] .loading-intro__fragment {
  opacity: 1;
  transform: translate3d(0,0,0) scale(1);
}

.loading-intro[data-phase="3"] .loading-intro__fragment { filter: brightness(.72) saturate(.8); }
.loading-intro[data-phase="4"] .loading-intro__fragment { filter: brightness(.96) saturate(.98); }
.loading-intro[data-phase="4"] .loading-intro__fragment:not(.loading-intro__fragment--body) { opacity: 0; }

.loading-intro__brand {
  position: absolute;
  z-index: 3;
  right: 0;
  bottom: 8%;
  left: 0;
  opacity: 0;
  text-align: center;
  text-transform: uppercase;
  transform: translateY(18px);
  transition: opacity 350ms ease, transform 550ms ease;
}

.loading-intro.is-complete .loading-intro__brand { opacity: 1; transform: none; }
.loading-intro__brand strong { font-size: clamp(2rem, 7vw, 4.8rem); letter-spacing: -.04em; text-shadow: 0 8px 28px #000; }
.loading-intro__brand strong span { color: var(--intro-gold); }
.loading-intro__brand p { margin: 8px 0 0; color: #d5bd96; font-family: system-ui, sans-serif; font-size: clamp(.62rem, 1.2vw, .78rem); font-weight: 800; letter-spacing: .18em; }

.loading-intro__readout {
  position: absolute;
  right: clamp(24px, 5vw, 70px);
  bottom: clamp(26px, 5vh, 60px);
  left: clamp(24px, 5vw, 70px);
  display: grid;
  grid-template-columns: 72px 1fr auto;
  align-items: center;
  gap: 18px;
  font-family: system-ui, sans-serif;
}

.loading-intro__readout > span { color: #f4d69b; font-size: 1.25rem; font-weight: 900; font-variant-numeric: tabular-nums; }
.loading-intro__readout > div { height: 2px; overflow: hidden; background: #25211b; }
.loading-intro__readout > div i { display: block; width: 0; height: 100%; background: linear-gradient(90deg, #50d9ff, #956cff 52%, #ff4fb8); box-shadow: 0 0 18px rgba(255,79,184,.7); transition: width 100ms linear; }
.loading-intro__readout small { color: #7f7567; font-size: .58rem; font-weight: 800; letter-spacing: .18em; text-transform: uppercase; }

.loading-intro__skip {
  position: absolute;
  top: clamp(20px, 4vh, 44px);
  right: clamp(20px, 4vw, 52px);
  padding: 10px 15px;
  border: 1px solid rgba(210,138,45,.35);
  color: #c7b99f;
  background: rgba(0,0,0,.35);
  font-family: system-ui, sans-serif;
  font-size: .63rem;
  font-weight: 800;
  letter-spacing: .16em;
  text-transform: uppercase;
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
  transition: opacity 250ms ease, border-color 250ms ease;
}

.loading-intro.can-skip .loading-intro__skip { opacity: 1; pointer-events: auto; }
.loading-intro__skip:hover { border-color: #e9b553; }
.loading-intro.is-complete .loading-intro__readout { opacity: 0; transition: opacity 250ms ease; }
.loading-intro.is-complete .loading-intro__geometry { transform: scale(1.35); opacity: 0; transition: transform 700ms ease, opacity 450ms ease; }

@media (max-width: 600px) {
  .loading-intro__stage { width: min(112vw, 620px); transform: translateY(-5vh); }
  .loading-intro__readout { grid-template-columns: 56px 1fr; gap: 12px; }
  .loading-intro__readout small { grid-column: 1 / -1; text-align: right; }
  .loading-intro__brand { bottom: 3%; }
  .loading-intro__brand p { max-width: 280px; margin: 8px auto 0; line-height: 1.5; }
}

@media (prefers-reduced-motion: reduce) {
  .loading-intro__geometry { display: none; }
  .loading-intro__fragment { transition: opacity 180ms ease; transform: none; }
  .loading-intro__skip { transition: none; }
}