.space-intro {
  position: fixed;
  inset: 0;
  z-index: 999;
  display: grid;
  place-items: center;
  overflow: hidden;
  background:
    radial-gradient(circle at 30% 16%, rgba(103,214,200,0.22), transparent 24%),
    radial-gradient(circle at 76% 28%, rgba(137,191,255,0.20), transparent 30%),
    radial-gradient(circle at 50% 94%, rgba(242,184,91,0.12), transparent 35%),
    linear-gradient(180deg, #030816 0%, #07111f 48%, #111f35 100%);
  transition: opacity 0.9s ease, visibility 0.9s ease, transform 0.9s ease;
}

body.intro-finished .space-intro {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: scale(1.04);
  display: none !important;
}

.star-layer,
.star-layer::before,
.star-layer::after {
  position: absolute;
  inset: -20%;
  content: "";
  background-image:
    radial-gradient(circle, rgba(255,255,255,0.95) 0 1px, transparent 1.4px),
    radial-gradient(circle, rgba(137,191,255,0.95) 0 1px, transparent 1.6px),
    radial-gradient(circle, rgba(103,214,200,0.75) 0 1px, transparent 1.3px);
  background-size: 120px 120px, 210px 210px, 340px 340px;
  background-position: 0 0, 40px 60px, 100px 120px;
  opacity: 0.75;
  animation: starDrift 28s linear infinite;
}

.star-layer::before {
  opacity: 0.42;
  transform: scale(1.4) rotate(9deg);
  animation-duration: 42s;
}

.star-layer::after {
  opacity: 0.28;
  transform: scale(1.8) rotate(-13deg);
  animation-duration: 64s;
}

@keyframes starDrift {
  from { transform: translate3d(0,0,0); }
  to { transform: translate3d(-130px, 90px, 0); }
}

.orbit-ring {
  position: absolute;
  width: min(70vw, 760px);
  aspect-ratio: 1;
  border: 1px solid rgba(137,191,255,0.18);
  border-radius: 50%;
  box-shadow: inset 0 0 40px rgba(137,191,255,0.08), 0 0 90px rgba(103,214,200,0.10);
  transform: rotateX(68deg) rotateZ(-16deg);
  animation: orbitPulse 4.8s ease-in-out infinite;
}

.orbit-ring::before,
.orbit-ring::after {
  content: "";
  position: absolute;
  inset: 12%;
  border-radius: 50%;
  border: 1px dashed rgba(255,255,255,0.14);
}

.orbit-ring::after {
  inset: 27%;
  border-style: solid;
  border-color: rgba(242,184,91,0.14);
}

@keyframes orbitPulse {
  0%,100% { opacity: 0.72; filter: blur(0px); }
  50% { opacity: 1; filter: blur(0.4px); }
}

/* 캐릭터 진입 비활성화 */
.guide-stage,
.character-card,
.intro-grid {
  display: none !important;
}

.intro-brand-stage {
  position: relative;
  z-index: 2;
  display: grid;
  justify-items: center;
  gap: 18px;
  text-align: center;
  width: min(100% - 40px, 720px);
  padding: 28px 20px 40px;
  animation: introStageIn 0.9s ease both;
}

@keyframes introStageIn {
  from { opacity: 0; transform: translateY(18px) scale(0.98); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

.intro-logo-reel {
  width: min(42vw, 220px);
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 45%, rgba(255,255,255,0.18), transparent 42%),
    radial-gradient(circle at 50% 50%, rgba(103,214,200,0.16), transparent 62%);
  box-shadow:
    0 0 0 1px rgba(255,255,255,0.12),
    0 0 60px rgba(103,214,200,0.22),
    0 24px 60px rgba(0,0,0,0.35);
  animation: logoReelPlay 8.4s ease-in-out both;
}

.intro-logo-mark {
  width: 78%;
  height: 78%;
  filter: drop-shadow(0 0 18px rgba(137,191,255,0.45));
  animation: logoSpinGlow 8.4s ease-in-out both;
}

@keyframes logoReelPlay {
  0% { opacity: 0; transform: scale(0.72); filter: blur(8px); }
  18% { opacity: 1; transform: scale(1.06); filter: blur(0); }
  55% { transform: scale(1); }
  100% { opacity: 1; transform: scale(1); }
}

@keyframes logoSpinGlow {
  0% { transform: rotate(-12deg) scale(0.9); opacity: 0.4; }
  35% { transform: rotate(8deg) scale(1.05); opacity: 1; }
  70% { transform: rotate(-2deg) scale(1); }
  100% { transform: rotate(0deg) scale(1); }
}

.intro-brand-title {
  margin: 8px 0 0;
  font-size: clamp(34px, 7vw, 56px);
  font-weight: 900;
  letter-spacing: -0.06em;
  animation: brandTitleIn 0.8s ease 0.35s both;
}

.intro-brand-title .rainbow-glow-text {
  font-size: inherit;
  font-weight: inherit;
  letter-spacing: inherit;
}

@keyframes brandTitleIn {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: translateY(0); }
}

.intro-brand-sub {
  margin: 0;
  font-size: clamp(13px, 2.4vw, 18px);
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  animation: brandSubIn 0.8s ease 0.55s both;
}

@keyframes brandSubIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

/* 무지개 빛 — clip(글자)과 glow(발광) 분리 */
.rainbow-glow-wrap {
  display: inline-block;
  filter:
    drop-shadow(0 0 6px rgba(255, 90, 160, 0.9))
    drop-shadow(0 0 14px rgba(90, 180, 255, 0.65))
    drop-shadow(0 0 24px rgba(180, 90, 255, 0.4));
  animation: rainbowGlowPulse 1.8s ease-in-out infinite;
}

.rainbow-glow-text {
  display: inline-block;
  font: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  font-weight: inherit;
  background-image: linear-gradient(
    90deg,
    #ff3d7f 0%,
    #ff8a3d 16%,
    #ffd93d 33%,
    #3dff9a 50%,
    #3db8ff 66%,
    #b44dff 83%,
    #ff3d7f 100%
  );
  background-size: 300% auto;
  -webkit-background-clip: text;
  background-clip: text;
  color: #ff8a3d;
  -webkit-text-fill-color: transparent;
}

/* 큰 텍스트: 왼쪽 → 오른쪽 */
.rainbow-dir-a .rainbow-glow-text {
  animation: rainbowFlowA 2.2s linear infinite;
}

/* 작은 텍스트: 오른쪽 → 왼쪽 (반대) */
.rainbow-dir-b .rainbow-glow-text {
  animation: rainbowFlowB 2.2s linear infinite;
}

@keyframes rainbowFlowA {
  0% { background-position: 0% 50%; }
  100% { background-position: 100% 50%; }
}

@keyframes rainbowFlowB {
  0% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

@keyframes rainbowGlowPulse {
  0%, 100% {
    filter:
      drop-shadow(0 0 5px rgba(255, 90, 160, 0.85))
      drop-shadow(0 0 12px rgba(90, 180, 255, 0.5))
      drop-shadow(0 0 20px rgba(180, 90, 255, 0.32));
  }
  33% {
    filter:
      drop-shadow(0 0 8px rgba(255, 180, 60, 0.95))
      drop-shadow(0 0 16px rgba(255, 220, 80, 0.6))
      drop-shadow(0 0 26px rgba(61, 255, 154, 0.4));
  }
  66% {
    filter:
      drop-shadow(0 0 8px rgba(61, 184, 255, 0.95))
      drop-shadow(0 0 16px rgba(180, 77, 255, 0.6))
      drop-shadow(0 0 26px rgba(255, 61, 127, 0.4));
  }
}

.rainbow-text {
  display: inline-block;
  background-image: linear-gradient(90deg, #ff3d7f, #ff8a3d, #ffd93d, #3dff9a, #3db8ff, #b44dff, #ff3d7f);
  background-size: 300% auto;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  animation: rainbowFlowA 2.2s linear infinite;
}

.intro-skip {
  margin-top: 10px;
  min-height: 42px;
  padding: 0 18px;
  opacity: 0.85;
  animation: brandSubIn 0.7s ease 1.1s both;
}

.intro-progress {
  position: absolute;
  left: 50%;
  bottom: 24px;
  z-index: 5;
  width: min(100% - 42px, 420px);
  transform: translateX(-50%);
  height: 5px;
  border-radius: 999px;
  background: rgba(255,255,255,0.12);
  overflow: hidden;
}

.intro-progress span {
  display: block;
  height: 100%;
  width: 0;
  border-radius: inherit;
  background: linear-gradient(90deg, #ff3d7f, #ff8a3d, #3dff9a, #3db8ff, #b44dff);
  background-size: 200% 100%;
  animation: introLoad 8.8s ease forwards, rainbowFlowA 2.2s linear infinite;
}

@keyframes introLoad { to { width: 100%; } }

@media (max-width: 760px) {
  .intro-logo-reel {
    width: min(48vw, 170px);
  }

  .intro-brand-title {
    font-size: clamp(28px, 9vw, 40px);
  }

  .intro-brand-sub {
    letter-spacing: 0.08em;
  }
}

@media (prefers-reduced-motion: reduce) {
  .intro-logo-reel,
  .intro-logo-mark,
  .intro-brand-title,
  .intro-brand-sub,
  .rainbow-text,
  .rainbow-glow-text,
  .intro-progress span,
  .star-layer,
  .orbit-ring {
    animation: none !important;
  }

  .rainbow-text,
  .rainbow-glow-text,
  .rainbow-glow-wrap {
    animation: none !important;
  }

  .rainbow-text,
  .rainbow-glow-text {
    color: #f2b85b;
    -webkit-text-fill-color: #f2b85b;
    background: none;
  }

  .rainbow-glow-wrap {
    filter: drop-shadow(0 0 10px rgba(242,184,91,0.55));
  }

  .intro-progress span { width: 100%; }
}