/* components/intro/intro.css */
:root {
  --orange: #FF6B1A;
  --orange-light: #FFAA5C;
  --orange-dim: #7A3712;
  --gray-line: #232323;
}

.intro-screen {
  position: fixed; inset: 0; background: #0A0A0A;
  display: flex; align-items: center; justify-content: center; z-index: 9999;
}

.rig { position: relative; width: 480px; max-width: 90vw; display: flex; align-items: center; justify-content: center; }

.track {
  position: absolute; left: 0; right: 0; height: 1px; background: var(--gray-line);
  animation: trackFade 0.3s ease-out forwards; animation-delay: 0.56s;
}
@keyframes trackFade { 0% { opacity: 1; } 100% { opacity: 0; } }

.charge {
  position: absolute; left: 0; top: 0; height: 2px; width: 0%;
  background: linear-gradient(90deg, transparent, var(--orange) 55%, var(--orange-light));
  box-shadow: 0 0 8px 0px rgba(255, 107, 26, 0.5);
  animation: chargeLine 0.56s cubic-bezier(0.65, 0, 0.35, 1) forwards;
}
@keyframes chargeLine { 0% { width: 0%; opacity: 0.6; } 80% { width: 100%; opacity: 1; } 100% { width: 100%; opacity: 0; } }

.pulse {
  position: absolute; width: 2px; height: 0px; background: var(--orange-light);
  box-shadow: 0 0 12px 1px rgba(255, 107, 26, 0.55);
  animation: pulseFire 0.4s ease-out forwards; animation-delay: 0.52s; opacity: 0;
}
@keyframes pulseFire { 0% { height: 0px; opacity: 0; } 25% { height: 64px; opacity: 1; } 100% { height: 4px; opacity: 0; } }

.mark {
  position: relative; display: flex; align-items: center; gap: 12px; opacity: 0;
  clip-path: inset(0 50% 0 50%);
  animation: reveal 0.5s cubic-bezier(0.16, 1, 0.3, 1) forwards; animation-delay: 0.56s;
}
@keyframes reveal { 0% { opacity: 0; clip-path: inset(0 50% 0 50%); } 100% { opacity: 1; clip-path: inset(0 0% 0 0%); } }

.mark-text {
  font-family: 'Poppins', -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
  font-size: 30px; font-weight: 600; letter-spacing: 0.08em; color: #F2F2F2; white-space: nowrap;
}
.mark-text .accent { color: var(--orange); }

.dot {
  width: 7px; height: 7px; border-radius: 50%; background: var(--orange);
  opacity: 0; transform: scale(0.3); box-shadow: 0 0 0px rgba(255, 107, 26, 0);
  animation: dotOn 0.45s ease-out forwards; animation-delay: 0.95s;
}
@keyframes dotOn {
  0% { opacity: 0; transform: scale(0.3); box-shadow: 0 0 0px rgba(255, 107, 26, 0); }
  50% { opacity: 1; transform: scale(1.5); box-shadow: 0 0 16px 4px rgba(255, 107, 26, 0.65); }
  100% { opacity: 1; transform: scale(1); box-shadow: 0 0 8px 2px rgba(255, 107, 26, 0.5); }
}

.afterglow {
  position: absolute; inset: -40px;
  background: radial-gradient(circle, rgba(255, 107, 26, 0.10), transparent 70%);
  opacity: 0; animation: glowFade 1s ease-out forwards; animation-delay: 0.5s; pointer-events: none;
}
@keyframes glowFade { 0% { opacity: 0; } 35% { opacity: 1; } 100% { opacity: 0; } }

.intro-screen.exit { animation: screenExit 0.45s ease-in forwards; }
@keyframes screenExit { 0% { opacity: 1; } 100% { opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
  .charge, .pulse, .mark, .dot, .afterglow { animation: none !important; }
  .mark { opacity: 1; clip-path: inset(0 0% 0 0%); }
  .dot { opacity: 1; transform: scale(1); }
  .charge, .pulse, .afterglow { opacity: 0; }
}