/* Full-screen canvas starlight and ordered screen entrances. */
#starfield {
  position: fixed; inset: 0; z-index: 0; display: block;
  width: 100vw; height: 100dvh; pointer-events: none;
  background: radial-gradient(circle at 50% -20%, #26214b 0, #0b0b1b 67%);
}

#app { position: relative; z-index: 1; }

.scene {
  background:
    radial-gradient(circle at 72% -8%, color-mix(in srgb, var(--accent) 27%, transparent), transparent 32%),
    radial-gradient(circle at 10% 64%, rgba(39, 49, 90, .58) 0, transparent 36%),
    linear-gradient(155deg, rgba(23, 21, 46, .47), rgba(13, 13, 30, .62) 70%);
}

.scene::before { display: none; }

.enter-button { display: grid; gap: 2px; place-content: center; min-height: 58px; overflow: hidden; }
.enter-button span { font-weight: 850; }
.enter-button small { font-size: 10px; font-weight: 600; letter-spacing: .04em; opacity: .72; }
.role-card > strong { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.role-card > strong em { color: #f0e4ff; font-size: 11px; font-style: normal; font-weight: 750; letter-spacing: .04em; }

.scene-enter .hero .eyebrow,
.scene-enter .hero h1,
.scene-enter .hero > p,
.scene-enter .hero .primary,
.scene-enter .mini-demo,
.scene-enter .section-title,
.scene-enter .role-card,
.scene-enter .top,
.scene-enter .detail,
.scene-enter .gate,
.scene-enter .rules,
.scene-enter .challenge-head,
.scene-enter .stage,
.scene-enter .result,
.scene-enter .history {
  opacity: 0;
  animation: screen-rise .62s cubic-bezier(.2, .75, .25, 1) forwards;
}

.scene-enter .hero .eyebrow { animation-delay: .08s; }
.scene-enter .hero h1 { animation-delay: .17s; }
.scene-enter .hero > p { animation-delay: .29s; }
.scene-enter .hero .primary { animation-delay: .42s; }
.scene-enter .mini-demo { animation-delay: .56s; }
.scene-enter .section-title { animation-delay: .67s; }
.scene-enter .role-card:nth-of-type(1) { animation-delay: .73s; }
.scene-enter .role-card:nth-of-type(2) { animation-delay: .81s; }
.scene-enter .role-card:nth-of-type(3) { animation-delay: .89s; }
.scene-enter .top { animation-delay: .04s; }
.scene-enter .detail,
.scene-enter .gate,
.scene-enter .rules,
.scene-enter .challenge-head { animation-delay: .12s; }
.scene-enter .stage,
.scene-enter .result,
.scene-enter .history { animation-delay: .23s; }

.scene-enter .hero .enter-button {
  animation-name: screen-rise, cta-glow;
  animation-delay: .42s, 1.2s;
  animation-duration: .62s, 2.8s;
  animation-iteration-count: 1, infinite;
}

.scene-enter .big-symbol,
.scene-enter .gate-symbol {
  animation: float 4.5s ease-in-out .7s infinite, seal-in .72s cubic-bezier(.2, .75, .25, 1) .13s both;
}

.scene-enter .path i.current { animation: node-pulse 1.6s ease-in-out infinite; }

@keyframes screen-rise {
  from { opacity: 0; transform: translateY(18px); filter: blur(4px); }
  to { opacity: 1; transform: none; filter: blur(0); }
}

@keyframes seal-in {
  from { opacity: 0; transform: scale(.72) rotate(-18deg); }
  to { opacity: 1; transform: scale(1) rotate(0); }
}

@keyframes cta-glow {
  50% { box-shadow: 0 13px 34px color-mix(in srgb, var(--accent) 27%, transparent), 0 0 0 7px color-mix(in srgb, var(--accent) 14%, transparent); }
}

@keyframes node-pulse {
  50% { transform: scale(1.45); box-shadow: 0 0 15px #f5eaff; }
}

.reduce-motion #starfield { display: none; }
.reduce-motion .scene-enter * { animation: none !important; opacity: 1 !important; filter: none !important; transform: none !important; }

@media (prefers-reduced-motion: reduce) {
  #starfield { display: none; }
  .scene-enter * { animation: none !important; opacity: 1 !important; filter: none !important; transform: none !important; }
}