/* Story cards: full-bleed art with a slow Ken Burns drift, the caption in the calm lower 30%. */
.scene-intro {
  padding: 0;
  gap: 0;
  justify-content: flex-start;
  cursor: pointer;
  color: #fff;
}

.intro-stage, .intro-shade {
  position: absolute;
  inset: var(--bleed-inset);
  overflow: hidden;
  pointer-events: none;
}
.intro-stage { background: #060b1f; }
.intro-card { position: absolute; inset: 0; animation: intro-in 520ms ease-out backwards; }
.intro-art {
  position: absolute;
  inset: 0;
  background: var(--art, none) center / cover no-repeat, linear-gradient(180deg, #13245a, #070e27);
  transform-origin: 50% 40%;
  animation: intro-drift 9s ease-out forwards;
}
.is-two-promises .intro-art, .is-all-lost .intro-art { animation-name: intro-drift-back; }

.intro-shade {
  background:
    linear-gradient(180deg, rgba(3, 6, 20, 0.7) 0%, transparent 16%),
    linear-gradient(180deg, transparent 52%, rgba(3, 6, 20, 0.78) 72%, rgba(3, 6, 20, 0.95) 100%);
}

/* Stand-in staging from the arena and the character cards, until the painted story art exists. */
.intro-cast { position: absolute; inset: 0; }
.intro-card.has-story .intro-cast, .intro-card.has-story .intro-confetti { display: none; }
.intro-card:not(.has-story).is-summit .intro-art, .intro-card:not(.has-story).is-rematch .intro-art { filter: brightness(0.8) saturate(1.1); }
.intro-card:not(.has-story).is-two-promises .intro-art { filter: brightness(0.55) blur(calc(var(--u) * 3)); }
.intro-card:not(.has-story).is-world-party .intro-art { filter: brightness(0.7) sepia(0.25); }
.intro-card:not(.has-story).is-all-lost .intro-art { filter: grayscale(0.9) brightness(0.35); }
.intro-card:not(.has-story).is-still-standing .intro-art { filter: grayscale(0.6) brightness(0.3); }
.intro-card:not(.has-story).is-still-standing::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 80% 45% at 50% 30%, rgba(255, 196, 110, 0.55), transparent 70%);
  animation: intro-dawn 3s ease-out backwards;
}

.intro-who {
  position: absolute;
  left: 50%;
  top: 38%;
  width: calc(var(--u) * 300);
  height: calc(var(--u) * 400);
  margin: calc(var(--u) * -200) 0 0 calc(var(--u) * -150);
}
.intro-who .bp-card-name { font-size: calc(var(--u) * 26); }

.is-world-party .intro-who { width: calc(var(--u) * 380); height: calc(var(--u) * 510); margin: calc(var(--u) * -255) 0 0 calc(var(--u) * -190); animation: intro-wave 2.4s 400ms ease-in-out infinite alternate; }
.is-world-party .intro-cast::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 38%;
  width: calc(var(--u) * 760);
  height: calc(var(--u) * 760);
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, rgba(255, 226, 150, 0.45), transparent 62%);
}
.intro-confetti {
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(circle, #f2c14e 0 calc(var(--u) * 5), transparent calc(var(--u) * 6)),
    radial-gradient(circle, #fff3c4 0 calc(var(--u) * 4), transparent calc(var(--u) * 5)),
    radial-gradient(circle, #2c6fd6 0 calc(var(--u) * 4), transparent calc(var(--u) * 5));
  background-size: calc(var(--u) * 90) calc(var(--u) * 110), calc(var(--u) * 130) calc(var(--u) * 90), calc(var(--u) * 150) calc(var(--u) * 140);
  background-position: 0 0, calc(var(--u) * 40) calc(var(--u) * 30), calc(var(--u) * 70) calc(var(--u) * 60);
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 55%, transparent 72%);
  mask-image: linear-gradient(180deg, #000 0%, #000 55%, transparent 72%);
  animation: intro-confetti 6s linear infinite;
  opacity: 0.9;
}

.is-two-promises .intro-who.is-leader { margin-left: calc(var(--u) * -320); transform: rotate(-5deg); animation: intro-from-l 600ms 100ms ease-out backwards; }
.is-two-promises .intro-who.is-rival { margin-left: calc(var(--u) * 20); animation: intro-from-r 600ms 700ms ease-out backwards, intro-puff 900ms 1400ms ease-in-out 3; }
.intro-divide {
  position: absolute;
  left: 50%;
  top: 14%;
  width: calc(var(--u) * 6);
  height: 50%;
  margin-left: calc(var(--u) * -3);
  background: linear-gradient(180deg, transparent, #f2c14e 20%, #fff3c4 50%, #f2c14e 80%, transparent);
  box-shadow: 0 0 calc(var(--u) * 24) rgba(242, 193, 78, 0.8);
  transform: rotate(8deg);
  animation: intro-grow 500ms 500ms ease-out backwards;
}

.is-summit .intro-who, .is-rematch .intro-who { top: 42%; width: calc(var(--u) * 250); height: calc(var(--u) * 334); margin-top: calc(var(--u) * -167); }
.is-summit .intro-who.is-leader, .is-rematch .intro-who.is-founder { margin-left: calc(var(--u) * -300); transform: rotate(-4deg); animation: intro-from-l 700ms ease-out backwards; }
.is-summit .intro-who.is-rival, .is-rematch .intro-who.is-rival { margin-left: calc(var(--u) * 50); transform: rotate(4deg); animation: intro-from-r 700ms ease-out backwards; }
.intro-vs {
  position: absolute;
  left: 50%;
  top: 42%;
  transform: translate(-50%, -50%);
  font-size: calc(var(--u) * 110);
  font-style: italic;
  animation: intro-vs 900ms 600ms cubic-bezier(0.2, 1.6, 0.4, 1) backwards;
}

.is-all-lost .intro-who {
  top: 50%;
  filter: grayscale(1) brightness(0.75);
  transform: rotate(84deg);
  animation: intro-fall 1100ms 200ms cubic-bezier(0.5, 0, 0.7, 1.4) backwards;
}
.intro-glove { position: absolute; width: calc(var(--u) * 130); height: calc(var(--u) * 130); filter: drop-shadow(0 0 calc(var(--u) * 18) rgba(255, 210, 110, 0.7)); }
.intro-glove svg, .intro-figure svg { display: block; width: 100%; height: 100%; }
.is-all-lost .intro-glove { left: 14%; top: 56%; transform: rotate(-100deg); animation: intro-drop 900ms 1100ms cubic-bezier(0.4, 0, 0.6, 1.5) backwards; }

/* A silhouette with no face; the glove sits on its raised fist. */
.intro-figure {
  position: absolute;
  left: 50%;
  top: 28%;
  width: calc(var(--u) * 220);
  height: calc(var(--u) * 462);
  margin-left: calc(var(--u) * -110);
  filter: drop-shadow(0 0 calc(var(--u) * 30) rgba(255, 196, 110, 0.55));
  animation: intro-rise 1400ms ease-out backwards;
}
.is-still-standing .intro-glove { left: calc(var(--u) * 124); top: calc(var(--u) * -52); width: calc(var(--u) * 110); height: calc(var(--u) * 110); transform: rotate(-8deg); animation: intro-raise 1200ms 700ms ease-out backwards, intro-glow 1.8s 2s ease-in-out infinite alternate; }

.intro-caption {
  position: absolute;
  left: calc(var(--u) * 48);
  right: calc(var(--u) * 48);
  bottom: calc(max(72px, var(--u) * 140) - var(--drop) * 0.5);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(var(--u) * 14);
  pointer-events: none;
}
.intro-title { font-size: calc(var(--u) * 64); line-height: 1.05; animation: intro-up 500ms 150ms ease-out backwards; }
.intro-text {
  margin: 0;
  max-width: calc(var(--u) * 620);
  font-size: calc(var(--u) * 38);
  line-height: 1.3;
  font-weight: 700;
  text-shadow: 0 calc(var(--u) * 3) calc(var(--u) * 10) rgba(0, 0, 0, 0.85);
  animation: intro-up 500ms 350ms ease-out backwards;
}
.intro-next {
  position: absolute;
  left: 0;
  right: 0;
  bottom: calc(max(20px, var(--u) * 48) - var(--drop) * 0.5);
  margin: 0;
  font-size: calc(var(--u) * 24);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255, 243, 196, 0.75);
  pointer-events: none;
  animation: title-pulse 1.8s ease-in-out infinite;
}

.intro-progress {
  position: absolute;
  top: calc(var(--u) * 22 - var(--lift) * 0.6);
  left: calc(var(--u) * 32);
  right: calc(var(--u) * 32);
  display: flex;
  gap: calc(var(--u) * 10);
  pointer-events: none;
}
.intro-seg { flex: 1; height: calc(var(--u) * 8); border-radius: 999px; background: rgba(255, 255, 255, 0.28); overflow: hidden; }
.intro-seg i { display: block; height: 100%; width: 100%; background: #f2c14e; transform: scaleX(0); transform-origin: left center; }
.intro-seg.is-done i { transform: none; }
.intro-seg.is-now i { animation: intro-fill var(--dur, 5000ms) linear forwards; }
/* The fill is the card's clock, so reduced motion must not shorten it. */
@media (prefers-reduced-motion: reduce) {
  .scene-intro .intro-seg.is-now i { animation-duration: var(--dur, 5000ms) !important; }
}

.scene .intro-skip {
  position: absolute;
  top: calc(var(--u) * 50 - var(--lift) * 0.6);
  right: calc(var(--u) * 28);
  min-width: calc(var(--u) * 170);
  font-size: calc(var(--u) * 30);
  z-index: 2;
}

[data-layout="landscape"] .intro-who { top: 36%; width: calc(var(--u) * 240); height: calc(var(--u) * 320); margin: calc(var(--u) * -160) 0 0 calc(var(--u) * -120); }
[data-layout="landscape"] .is-world-party .intro-who { width: calc(var(--u) * 270); height: calc(var(--u) * 360); margin: calc(var(--u) * -180) 0 0 calc(var(--u) * -135); }
[data-layout="landscape"] .is-world-party .intro-cast::before { top: 36%; }
[data-layout="landscape"] .is-two-promises .intro-who.is-leader { margin-left: calc(var(--u) * -300); }
[data-layout="landscape"] .is-two-promises .intro-who.is-rival { margin-left: calc(var(--u) * 60); }
[data-layout="landscape"] .intro-divide { top: 8%; height: 58%; }
[data-layout="landscape"] .is-summit .intro-who, [data-layout="landscape"] .is-rematch .intro-who { top: 38%; width: calc(var(--u) * 220); height: calc(var(--u) * 294); margin-top: calc(var(--u) * -147); }
[data-layout="landscape"] .is-summit .intro-who.is-leader, [data-layout="landscape"] .is-rematch .intro-who.is-founder { margin-left: calc(var(--u) * -330); }
[data-layout="landscape"] .is-summit .intro-who.is-rival, [data-layout="landscape"] .is-rematch .intro-who.is-rival { margin-left: calc(var(--u) * 110); }
[data-layout="landscape"] .intro-vs { top: 38%; font-size: calc(var(--u) * 96); }
[data-layout="landscape"] .is-all-lost .intro-who { top: 42%; }
[data-layout="landscape"] .is-all-lost .intro-glove { left: 30%; top: 46%; width: calc(var(--u) * 100); height: calc(var(--u) * 100); }
[data-layout="landscape"] .intro-figure { top: 14%; transform: scale(0.8); transform-origin: 50% 0; }
[data-layout="landscape"] .intro-caption { left: calc(var(--u) * 200); right: calc(var(--u) * 200); bottom: max(56px, calc(var(--u) * 84)); gap: calc(var(--u) * 8); }
[data-layout="landscape"] .intro-title { font-size: calc(var(--u) * 52); }
[data-layout="landscape"] .intro-text { max-width: calc(var(--u) * 860); font-size: calc(var(--u) * 32); }
[data-layout="landscape"] .intro-next { bottom: max(16px, calc(var(--u) * 24)); font-size: calc(var(--u) * 20); }
[data-layout="landscape"] .intro-progress { left: calc(var(--u) * 300); right: calc(var(--u) * 300); }
[data-layout="landscape"] .scene .intro-skip, [data-layout="landscape"] .intro-skip { top: calc(var(--u) * 24); }

@keyframes intro-in { from { opacity: 0; } }
@keyframes intro-drift { from { transform: scale(1.02); } to { transform: scale(1.12) translate(-1.5%, -1%); } }
@keyframes intro-drift-back { from { transform: scale(1.12) translate(1.5%, -1%); } to { transform: scale(1.02); } }
@keyframes intro-fill { to { transform: none; } }
@keyframes intro-up { from { opacity: 0; transform: translateY(calc(var(--u) * 24)); } }
@keyframes intro-wave { to { transform: translateY(calc(var(--u) * -14)) rotate(1.5deg); } }
@keyframes intro-confetti { from { background-position: 0 calc(var(--u) * -110), calc(var(--u) * 40) calc(var(--u) * -60), calc(var(--u) * 70) calc(var(--u) * -80); } to { background-position: calc(var(--u) * 30) calc(var(--u) * 550), calc(var(--u) * 10) calc(var(--u) * 480), calc(var(--u) * 110) calc(var(--u) * 620); } }
@keyframes intro-from-l { from { opacity: 0; transform: translateX(calc(var(--u) * -240)) rotate(-14deg); } }
@keyframes intro-from-r { from { opacity: 0; transform: translateX(calc(var(--u) * 240)) rotate(14deg); } }
@keyframes intro-puff { 50% { transform: scale(1.08); } }
@keyframes intro-grow { from { transform: rotate(8deg) scaleY(0); } }
@keyframes intro-vs { from { opacity: 0; transform: translate(-50%, -50%) scale(2.4); } }
@keyframes intro-fall { from { transform: rotate(0deg); filter: none; } }
@keyframes intro-drop { from { opacity: 0; transform: translateY(calc(var(--u) * -260)) rotate(-120deg); } }
@keyframes intro-raise { from { opacity: 0; transform: translateY(calc(var(--u) * 180)) rotate(20deg); } }
@keyframes intro-glow { to { filter: brightness(1.25) drop-shadow(0 0 calc(var(--u) * 44) rgba(255, 220, 130, 0.95)); } }
@keyframes intro-rise { from { opacity: 0; transform: translateY(calc(var(--u) * 40)); } }
@keyframes intro-dawn { from { opacity: 0; } }