/* =========================================================
   SOUL HERO — cinematic opening
   ========================================================= */

.soul-intro {
  position: fixed;
  inset: 0;
  z-index: 99999;
  display: grid;
  place-items: center;
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 50%, rgba(40, 105, 185, .10) 0%, rgba(8, 15, 28, .18) 18%, #000 55%),
    #000;
  isolation: isolate;
  pointer-events: none;
  opacity: 1;
  animation: soulIntroCurtain 1100ms cubic-bezier(.22,.8,.22,1) 2250ms forwards;
}

/* Deep cinematic vignette */
.soul-intro::before {
  content: "";
  position: absolute;
  inset: -10%;
  z-index: -1;
  background:
    radial-gradient(ellipse at center, transparent 25%, rgba(0,0,0,.45) 62%, #000 86%);
  animation: soulVignette 3000ms ease-out forwards;
}

/* Fine scanlines for a game/anime-style reveal */
.soul-intro::after {
  content: "";
  position: absolute;
  inset: 0;
  opacity: .16;
  background: repeating-linear-gradient(
    to bottom,
    transparent 0,
    transparent 3px,
    rgba(255,255,255,.035) 4px
  );
  mix-blend-mode: screen;
  animation: soulScanFade 1800ms ease-out 1000ms forwards;
}

.soul-intro-aura {
  position: absolute;
  left: 50%;
  top: 50%;
  width: min(52vw, 620px);
  aspect-ratio: 1;
  transform: translate(-50%, -50%) scale(.2);
  border-radius: 50%;
  background:
    radial-gradient(circle,
      rgba(80, 170, 255, .20) 0%,
      rgba(45, 115, 230, .11) 22%,
      rgba(255, 190, 65, .06) 36%,
      transparent 68%);
  filter: blur(8px);
  opacity: 0;
  animation: soulAura 2300ms cubic-bezier(.16,1,.3,1) 80ms forwards;
}

.soul-intro-ring {
  position: absolute;
  left: 50%;
  top: 50%;
  width: min(32vw, 390px);
  aspect-ratio: 1;
  border: 1px solid rgba(115, 190, 255, .42);
  border-radius: 50%;
  transform: translate(-50%, -50%) scale(.25);
  opacity: 0;
  box-shadow:
    0 0 24px rgba(80, 160, 255, .16),
    inset 0 0 24px rgba(80, 160, 255, .08);
  animation:
    soulRingOpen 1900ms cubic-bezier(.16,1,.3,1) 170ms forwards,
    soulRingSpin 4200ms linear 170ms infinite;
}

.soul-intro-ring.ring-two {
  width: min(43vw, 520px);
  border-color: rgba(255, 195, 90, .18);
  animation:
    soulRingOpen 2100ms cubic-bezier(.16,1,.3,1) 300ms forwards,
    soulRingSpinReverse 6500ms linear 300ms infinite;
}

.soul-intro-ring.ring-three {
  width: min(58vw, 700px);
  border-style: dashed;
  border-color: rgba(100, 170, 255, .11);
  animation:
    soulRingOpen 2300ms cubic-bezier(.16,1,.3,1) 420ms forwards,
    soulRingSpin 9000ms linear 420ms infinite;
}

.soul-intro-core {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  transform: translate(-50%, -50%) scale(0);
  background: #fff;
  box-shadow:
    0 0 10px #fff,
    0 0 35px rgba(85, 175, 255, .95),
    0 0 90px rgba(65, 125, 255, .55);
  animation: soulCore 900ms cubic-bezier(.16,1,.3,1) 0ms forwards;
}

.soul-intro-logo {
  position: relative;
  z-index: 5;
  width: 88px;
  height: auto;
  display: block;
  opacity: 0;
  transform: scale(.22) rotate(-2deg);
  transform-origin: center;
  filter:
    drop-shadow(0 0 4px rgba(105, 190, 255, .85))
    drop-shadow(0 0 22px rgba(65, 145, 255, .48))
    drop-shadow(0 0 46px rgba(255, 190, 70, .20));
  will-change: transform, opacity, filter;
  animation:
    soulLogoIgnite 260ms ease-out 180ms forwards,
    soulLogoOpen 1450ms cubic-bezier(.12,1,.24,1) 260ms forwards,
    soulLogoPulse 900ms ease-in-out 850ms 2 alternate,
    soulLogoExit 480ms cubic-bezier(.55,0,1,.45) 2040ms forwards;
}

.soul-intro-flash {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  transform: translate(-50%, -50%) scale(0);
  background: #fff;
  box-shadow:
    0 0 15px #fff,
    0 0 70px rgba(90, 180, 255, .9),
    0 0 150px rgba(255, 195, 80, .55);
  opacity: 0;
  animation: soulFlash 900ms ease-out 1550ms forwards;
}

/* Floating embers / particles */
.soul-intro-particles {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

.soul-intro-particle {
  position: absolute;
  width: var(--size);
  height: var(--size);
  left: var(--x);
  top: var(--y);
  border-radius: 50%;
  background: rgba(210, 238, 255, .9);
  box-shadow: 0 0 10px rgba(80, 175, 255, .8);
  opacity: 0;
  animation: soulParticle var(--duration) ease-out var(--delay) forwards;
}

.soul-intro-particle.gold {
  background: rgba(255, 211, 117, .9);
  box-shadow: 0 0 10px rgba(255, 190, 70, .75);
}

.soul-intro-label {
  position: absolute;
  z-index: 6;
  left: 50%;
  top: calc(50% + min(17vw, 205px));
  transform: translateX(-50%) translateY(12px);
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .48em;
  white-space: nowrap;
  color: rgba(220, 239, 255, .72);
  opacity: 0;
  animation: soulLabel 900ms ease-out 900ms forwards;
}

body.soul-intro-active > *:not(.soul-intro) {
  opacity: 0;
  animation: soulPageReveal 950ms cubic-bezier(.16,1,.3,1) 2250ms forwards;
}

@keyframes soulCore {
  0% { transform: translate(-50%,-50%) scale(0); opacity: 0; }
  45% { transform: translate(-50%,-50%) scale(1); opacity: 1; }
  100% { transform: translate(-50%,-50%) scale(0); opacity: 0; }
}

@keyframes soulAura {
  0% { transform: translate(-50%,-50%) scale(.2); opacity: 0; }
  30% { opacity: 1; }
  72% { transform: translate(-50%,-50%) scale(1.15); opacity: .9; }
  100% { transform: translate(-50%,-50%) scale(1.45); opacity: 0; }
}

@keyframes soulRingOpen {
  0% { transform: translate(-50%,-50%) scale(.18); opacity: 0; }
  28% { opacity: .95; }
  100% { transform: translate(-50%,-50%) scale(1); opacity: .45; }
}

@keyframes soulRingSpin {
  to { rotate: 360deg; }
}

@keyframes soulRingSpinReverse {
  to { rotate: -360deg; }
}

@keyframes soulLogoIgnite {
  from { opacity: 0; filter: drop-shadow(0 0 2px rgba(255,255,255,.9)); }
  to { opacity: 1; filter: drop-shadow(0 0 4px rgba(105,190,255,.85)) drop-shadow(0 0 22px rgba(65,145,255,.48)) drop-shadow(0 0 46px rgba(255,190,70,.20)); }
}

@keyframes soulLogoOpen {
  0% { transform: scale(.22) rotate(-2deg); }
  68% { transform: scale(1.13) rotate(.4deg); }
  100% { transform: scale(1) rotate(0); }
}

@keyframes soulLogoPulse {
  from { filter: drop-shadow(0 0 5px rgba(105,190,255,.85)) drop-shadow(0 0 22px rgba(65,145,255,.48)) drop-shadow(0 0 46px rgba(255,190,70,.20)); }
  to { filter: drop-shadow(0 0 10px rgba(130,210,255,1)) drop-shadow(0 0 38px rgba(65,145,255,.72)) drop-shadow(0 0 70px rgba(255,190,70,.30)); }
}

@keyframes soulLogoExit {
  to { opacity: 0; transform: scale(1.07); filter: blur(1px) drop-shadow(0 0 55px rgba(120,200,255,.8)); }
}

@keyframes soulFlash {
  0% { opacity: 0; transform: translate(-50%,-50%) scale(0); }
  20% { opacity: .8; transform: translate(-50%,-50%) scale(1); }
  100% { opacity: 0; transform: translate(-50%,-50%) scale(55); }
}

@keyframes soulParticle {
  0% { opacity: 0; transform: translate(0, 0) scale(.2); }
  15% { opacity: .9; }
  100% { opacity: 0; transform: translate(var(--dx), var(--dy)) scale(1.5); }
}

@keyframes soulLabel {
  to { opacity: 1; transform: translateX(-50%) translateY(0); }
}

@keyframes soulVignette {
  from { opacity: 1; }
  to { opacity: .72; }
}

@keyframes soulScanFade {
  to { opacity: 0; }
}

@keyframes soulIntroCurtain {
  0% { opacity: 1; visibility: visible; }
  65% { opacity: .35; }
  100% { opacity: 0; visibility: hidden; }
}

@keyframes soulPageReveal {
  0% { opacity: 0; transform: translateY(8px); }
  100% { opacity: 1; transform: translateY(0); }
}

@media (min-width: 700px) {
  .soul-intro-logo { width: 150px; }
}

@media (min-width: 1100px) {
  .soul-intro-logo { width: 190px; }
}

@media (prefers-reduced-motion: reduce) {
  .soul-intro,
  .soul-intro *,
  body.soul-intro-active > *:not(.soul-intro) {
    animation: none !important;
  }

  .soul-intro { display: none; }
  body.soul-intro-active > *:not(.soul-intro) {
    opacity: 1;
    transform: none;
  }
}