/* ============================================================
   EYES ONLY - Onboarding Splash Screen
   "YOU'VE GONE ROGUE" title card with progress bar
   ============================================================ */

.onboarding-overlay {
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: #0a0a0a;
  z-index: 5000;
  animation: onboarding-fade-in 0.5s ease-out;
  overflow: hidden;
}

@keyframes onboarding-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* Fade out: slide up + fade */
.onboarding-overlay.onboarding-fade-out {
  animation: onboarding-fade-out 0.4s ease-in forwards;
}

@keyframes onboarding-fade-out {
  from { opacity: 1; transform: translateY(0); }
  to   { opacity: 0; transform: translateY(-30px); }
}

/* ---- Title ---- */

.onboarding-title {
  font-family: 'Courier New', monospace;
  font-size: clamp(2.2rem, 10vw, 5rem);
  font-weight: bold;
  color: #ccc;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  line-height: 1.1;
  text-align: center;
  animation: onboarding-title-in 0.5s ease-out 0.1s both;
}

.title-accent {
  color: #ff1c4a;
  text-shadow:
    0 0 30px rgba(255, 28, 74, 0.8),
    0 0 80px rgba(255, 28, 74, 0.4);
}

@keyframes onboarding-title-in {
  from { opacity: 0; transform: scale(0.85); }
  to   { opacity: 1; transform: scale(1); }
}

/* ---- Subtitle ---- */

.onboarding-subtitle {
  font-family: 'Courier New', monospace;
  font-size: clamp(0.65rem, 2vw, 0.9rem);
  color: #555;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  margin-top: 0.8em;
  animation: onboarding-sub-in 0.4s ease-out 0.4s both;
}

@keyframes onboarding-sub-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ---- Progress Bar ---- */

.onboarding-progress-container {
  width: clamp(200px, 50vw, 360px);
  height: 3px;
  background: #1a1a1a;
  border-radius: 2px;
  margin-top: 2.5em;
  overflow: hidden;
  animation: onboarding-sub-in 0.4s ease-out 0.6s both;
}

.onboarding-progress-fill {
  width: 0;
  height: 100%;
  background: linear-gradient(90deg, #ff1c4a, #ff4466);
  border-radius: 2px;
  transition: none;
}

.onboarding-progress-fill.filling {
  width: 100%;
  transition: width 1.2s linear;
}

/* ---- Decorative Scanline ---- */

.onboarding-scanline {
  position: absolute;
  left: 0;
  width: 100%;
  height: 2px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255, 28, 74, 0.15) 20%,
    rgba(255, 28, 74, 0.3) 50%,
    rgba(255, 28, 74, 0.15) 80%,
    transparent 100%
  );
  animation: scanline-sweep 2.2s linear;
  pointer-events: none;
}

@keyframes scanline-sweep {
  from { top: 0; opacity: 1; }
  to   { top: 100%; opacity: 0; }
}