/* SnapBus Welcome Intro Loader Stylesheet - Fix Overlay & Centering */

#intro-overlay {
  --color-steel-blue: #2563EB;
  --color-steel-blue-light: #60A5FA;
  --color-steel-blue-dark: #1D4ED8;

  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: 9999;
  background: #0A0A0A;
  overflow: hidden;
}

/* Centered content wrapper to align all elements on the exact same axis */
#intro-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  position: relative;
}

/* Skip Control - Positioned in the corner, never overlaps centered elements */
#intro-overlay .skip-btn {
  position: absolute;
  top: 30px;
  right: 30px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: var(--color-steel-blue-light);
  padding: 8px 18px;
  border-radius: 30px;
  font-family: 'Outfit', sans-serif;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  z-index: 100005;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, background-color 0.2s ease, color 0.2s ease;
}

#intro-overlay .skip-btn.visible {
  opacity: 1;
  visibility: visible;
}

#intro-overlay .skip-btn:hover {
  background: rgba(255, 255, 255, 0.12);
  color: #FFFFFF;
}

/* Base style for all phase elements to support absolute centering */
.intro-phase {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  opacity: 0;
  visibility: hidden;
}

/* ==========================================================================
   PHASE 1: BEACON (0.0s - 1.5s)
   ========================================================================== */
.signal-dot-container {
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 100001;
  animation: phase1-beacon 1.5s linear forwards;
}

.signal-dot {
  width: 12px;
  height: 12px;
  background-color: var(--color-steel-blue);
  border-radius: 50%;
  position: relative;
}

.signal-pulse {
  position: absolute;
  top: -6px;
  left: -6px;
  width: 24px;
  height: 24px;
  border: 2px solid var(--color-steel-blue);
  border-radius: 50%;
  opacity: 0;
  animation: pulse-ring 0.75s ease-out infinite;
}

@keyframes pulse-ring {
  0% { transform: scale(0.6); opacity: 0.9; }
  100% { transform: scale(2.8); opacity: 0; }
}

@keyframes phase1-beacon {
  0% { opacity: 0; visibility: hidden; }
  10% { opacity: 1; visibility: visible; }
  90% { opacity: 1; visibility: visible; }
  100% { opacity: 0; visibility: hidden; }
}

/* ==========================================================================
   PHASE 2 & 3: ROUTE & JOURNEY (1.65s - 4.5s)
   ========================================================================== */
.intro-svg-wrapper {
  width: 100%;
  height: 60px;
  left: 0;
  transform: translate(0, -50%); /* Keeps centered vertically, spans 100% horizontal */
  z-index: 100000;
  opacity: 1;
  visibility: visible;
}

/* Horizontal line drawing (1.65s - 4.5s) */
.intro-route-path {
  fill: none;
  stroke: var(--color-steel-blue);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-dasharray: 1000;
  stroke-dashoffset: 1000;
  opacity: 0;
  visibility: hidden;
  animation: phase2-route-line 2.85s linear forwards;
  animation-delay: 1.65s;
}

@keyframes phase2-route-line {
  /* Phase 2: Drawing left-to-right (1.65s - 3.0s) */
  0% { opacity: 0; visibility: hidden; stroke-dashoffset: 1000; }
  1% { opacity: 1; visibility: visible; stroke-dashoffset: 1000; }
  47% { opacity: 1; visibility: visible; stroke-dashoffset: 0; } /* Fully drawn at 3.0s */
  /* Phase 3: Route line stays visible for bus track (3.0s - 4.5s) */
  99% { opacity: 1; visibility: visible; stroke-dashoffset: 0; }
  100% { opacity: 0; visibility: hidden; stroke-dashoffset: 0; }
}

/* Bus travels along the line (3.0s - 4.5s) */
.intro-bus-group {
  opacity: 0;
  visibility: hidden;
  transform: translate(-100px, -20.4px) scale(1.8); /* Start off-screen left */
  animation: phase3-bus-journey 1.5s cubic-bezier(0.25, 1, 0.5, 1) forwards;
  animation-delay: 3.0s;
}

#wheel-front {
  transform-origin: 38px 24px;
}

#wheel-rear {
  transform-origin: 14px 24px;
}

@keyframes phase3-bus-journey {
  0% { opacity: 0; visibility: hidden; transform: translate(-100px, -20.4px) scale(1.8); }
  5% { opacity: 1; visibility: visible; transform: translate(-100px, -20.4px) scale(1.8); }
  98% { opacity: 1; visibility: visible; transform: translate(456.8px, -20.4px) scale(1.8); } /* Centered perfectly: 500px mid-point minus half bus width (24px * 1.8 = 43.2px) */
  100% { opacity: 0; visibility: hidden; transform: translate(456.8px, -20.4px) scale(1.8); }
}

/* Wheel rotation loops */
.intro-bus-group.traveling #wheel-front,
.intro-bus-group.traveling #wheel-rear {
  animation: roll-wheels-loop 1.5s linear infinite;
}

@keyframes roll-wheels-loop {
  to { transform: rotate(360deg); }
}

/* ==========================================================================
   PHASE 4: SNAP FLASH (4.65s - 5.05s)
   ========================================================================== */
#intro-overlay .flash-shutter {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #FFFFFF;
  opacity: 0;
  visibility: hidden;
  z-index: 100004;
  animation: phase4-flash 0.4s ease-in-out forwards;
  animation-delay: 4.65s;
}

@keyframes phase4-flash {
  0% { opacity: 0; visibility: hidden; }
  1% { opacity: 0; visibility: visible; }
  45%, 55% { opacity: 1; visibility: visible; }
  99% { opacity: 0; visibility: visible; }
  100% { opacity: 0; visibility: hidden; }
}

/* ==========================================================================
   PHASE 5 & 6: WORDMARK & TAGLINE (5.2s - 7.6s)
   ========================================================================== */
.intro-logo-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 100002;
  /* Bind typography closer for tight visual cohesion */
  gap: 8px;
}

#intro-logo-box {
  opacity: 1 !important;
  visibility: visible !important;
}

/* Wordmark fades & scales in (5.2s - 7.6s) */
.intro-wordmark {
  font-family: 'Outfit', sans-serif;
  font-size: 3.5rem;
  font-weight: 800;
  letter-spacing: -1.5px;
  line-height: 1;
  opacity: 0;
  visibility: hidden;
  animation: phase5-wordmark 2.4s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  animation-delay: 5.2s;
}

.intro-wordmark .snap {
  color: var(--color-steel-blue);
}

.intro-wordmark .bus {
  color: #FFFFFF;
  font-weight: 300;
}

@keyframes phase5-wordmark {
  /* Scale & fade in (5.2s - 5.8s) */
  0% { opacity: 0; visibility: hidden; transform: scale(0.9); }
  25% { opacity: 1; visibility: visible; transform: scale(1); }
  /* Remain visible (5.8s - 7.0s) */
  75% { opacity: 1; visibility: visible; transform: scale(1); }
  /* Phase 7: Fade out (7.0s - 7.6s) */
  100% { opacity: 0; visibility: hidden; transform: scale(1); }
}

/* Tagline fades in below (5.9s - 7.6s) */
.intro-tagline {
  font-family: 'Outfit', sans-serif;
  font-size: 1.25rem;
  font-weight: 500;
  color: var(--color-steel-blue-light);
  opacity: 0;
  visibility: hidden;
  white-space: nowrap;
  animation: phase6-tagline 1.7s ease-out forwards;
  animation-delay: 5.9s;
}

@keyframes phase6-tagline {
  /* Fade in (5.9s - 6.5s) */
  0% { opacity: 0; visibility: hidden; }
  35% { opacity: 1; visibility: visible; }
  /* Remain visible (6.5s - 7.0s) */
  64% { opacity: 1; visibility: visible; }
  /* Phase 7: Fade out (7.0s - 7.6s) */
  100% { opacity: 0; visibility: hidden; }
}

/* ==========================================================================
   HOMEPAGE FADE-IN AFTER REVEAL (7.8s+)
   ========================================================================== */
body.intro-running #main-content,
body.intro-running #global-header,
body.intro-running #global-footer {
  opacity: 0 !important;
  visibility: hidden !important;
}

body.intro-complete #main-content,
body.intro-complete #global-header,
body.intro-complete #global-footer {
  opacity: 1 !important;
  visibility: visible !important;
  transition: opacity 0.5s ease, visibility 0.5s;
}

/* ==========================================================================
   REDUCED MOTION CONFIG (1.5s fade-in/out of static logo)
   ========================================================================== */
#intro-overlay.reduced-motion .signal-dot-container,
#intro-overlay.reduced-motion .intro-svg-wrapper,
#intro-overlay.reduced-motion .flash-shutter {
  display: none !important;
}

#intro-overlay.reduced-motion .intro-wordmark {
  animation: rm-wordmark 2.2s ease forwards;
  animation-delay: 0s;
}

#intro-overlay.reduced-motion .intro-tagline {
  animation: rm-tagline 2.2s ease forwards;
  animation-delay: 0s;
}

@keyframes rm-wordmark {
  0% { opacity: 0; visibility: hidden; }
  22% { opacity: 1; visibility: visible; }
  77% { opacity: 1; visibility: visible; }
  100% { opacity: 0; visibility: hidden; }
}

@keyframes rm-tagline {
  0% { opacity: 0; visibility: hidden; }
  22% { opacity: 1; visibility: visible; }
  77% { opacity: 1; visibility: visible; }
  100% { opacity: 0; visibility: hidden; }
}