/* Cinematic cold-open played on BEGIN (js/intro.js). Skippable. */
#intro {
  position: fixed; inset: 0; z-index: 40; display: none;
  background: radial-gradient(ellipse at 50% 42%, #06121a 0%, #02060a 70%, #010406 100%);
  overflow: hidden; cursor: pointer; user-select: none;
  font-family: Menlo, Consolas, monospace;
}
#intro.out { animation: intro-out 0.55s ease-in forwards; }
@keyframes intro-out { to { opacity: 0; } }

.intro-vignette {
  position: absolute; inset: 0; pointer-events: none;
  box-shadow: inset 0 0 220px 70px rgba(0, 0, 0, 0.92);
  animation: intro-breathe 4.2s ease-in-out infinite;
}
@keyframes intro-breathe {
  0%, 100% { box-shadow: inset 0 0 220px 70px rgba(0, 0, 0, 0.92); }
  50%      { box-shadow: inset 0 0 280px 110px rgba(0, 0, 0, 0.82); }
}
/* expanding sonar ping ring */
.intro-sonar {
  position: absolute; left: 50%; top: 44%; width: 10px; height: 10px; margin: -5px;
  border-radius: 50%; border: 1px solid rgba(90, 210, 230, 0.45);
  animation: intro-ping 4.2s linear infinite;
}
.intro-sonar::after {
  content: ''; position: absolute; inset: -1px; border-radius: 50%;
  border: 1px solid rgba(90, 210, 230, 0.3);
  animation: intro-ping 4.2s linear infinite; animation-delay: 2.1s;
}
@keyframes intro-ping { 0% { transform: scale(1); opacity: 0.7; } 100% { transform: scale(90); opacity: 0; } }
/* drifting motes */
.intro-scan {
  position: absolute; inset: 0; pointer-events: none; opacity: 0.5;
  background: repeating-linear-gradient(0deg, rgba(0,0,0,0) 0 2px, rgba(0,0,0,0.3) 2px 3px);
}

.intro-text {
  position: absolute; inset: 0; display: flex; flex-direction: column;
  align-items: center; justify-content: center; text-align: center; opacity: 0; padding: 0 24px;
}
.intro-text.show { animation: intro-in 0.55s ease-out forwards; }
@keyframes intro-in {
  from { opacity: 0; transform: translateY(10px); letter-spacing: 18px; filter: blur(3px); }
  to   { opacity: 1; transform: none;            letter-spacing: 8px;  filter: blur(0); }
}
.intro-big { font-size: 40px; letter-spacing: 8px; line-height: 1.2; color: #cfe6ec;
             text-shadow: 0 0 24px rgba(120, 200, 220, 0.4); }
.intro-sub { font-size: 13px; letter-spacing: 6px; margin-top: 16px; color: #7fa6b4; }

/* per-beat color grading */
.beat-cyan  .intro-big { color: #9fe2ee; text-shadow: 0 0 26px rgba(120, 220, 240, 0.5); }
.beat-amber .intro-big { color: #f5cf86; text-shadow: 0 0 26px rgba(245, 200, 110, 0.5); }
.beat-amber .intro-sub { color: #b89868; }
.beat-red   .intro-big { color: #ef6a5a; text-shadow: 0 0 28px rgba(230, 70, 50, 0.6); }
.beat-red   .intro-sub { color: #c08070; }
.beat-red   .intro-vignette { box-shadow: inset 0 0 240px 80px rgba(60, 0, 0, 0.6); animation: intro-redflash 1.5s ease-in-out infinite; }
@keyframes intro-redflash {
  0%, 100% { box-shadow: inset 0 0 240px 80px rgba(50, 0, 0, 0.55); }
  50%      { box-shadow: inset 0 0 280px 120px rgba(120, 10, 10, 0.4); }
}
.beat-dim   .intro-big { color: #b8c4c8; font-size: 30px; text-transform: lowercase; letter-spacing: 5px; }
.beat-dim   .intro-sub { color: #8a9aa0; text-transform: lowercase; }
.beat-wake  .intro-big { color: #ff5a44; font-size: 60px; letter-spacing: 16px;
             text-shadow: 0 0 40px rgba(255, 70, 50, 0.7), 0 0 10px rgba(255, 90, 60, 1); }
.beat-wake  .intro-vignette { animation: intro-wakeflash 1.1s ease-out; }
@keyframes intro-wakeflash {
  0%  { box-shadow: inset 0 0 0 2000px rgba(255, 240, 230, 0.5); }
  30% { box-shadow: inset 0 0 220px 70px rgba(0, 0, 0, 0.9); }
  100%{ box-shadow: inset 0 0 220px 70px rgba(0, 0, 0, 0.92); }
}

.intro-skip {
  position: absolute; right: 20px; bottom: 18px;
  font-size: 10px; letter-spacing: 3px; color: rgba(170, 195, 205, 0.55);
  border: 1px solid rgba(120, 160, 175, 0.25); padding: 5px 10px; border-radius: 2px;
}
.intro-skip b { color: #aee0ec; font-weight: normal; }