/* ===========================================
   Code Like a Pro — Minimal Light Theme
   Only what Tailwind CDN can't handle
   =========================================== */

/* --- Slide System --- */
.slide {
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  padding: 3rem 2rem 4rem;
}
.slide.active {
  display: flex;
  animation: slideIn .4s cubic-bezier(.16,1,.3,1);
}

/* --- Stagger Children --- */
.stagger > * {
  opacity: 0;
  transform: translateY(12px);
}
.slide.active .stagger > * {
  animation: fadeUp .45s cubic-bezier(.16,1,.3,1) forwards;
}
.slide.active .stagger > *:nth-child(1)  { animation-delay:.04s }
.slide.active .stagger > *:nth-child(2)  { animation-delay:.08s }
.slide.active .stagger > *:nth-child(3)  { animation-delay:.12s }
.slide.active .stagger > *:nth-child(4)  { animation-delay:.16s }
.slide.active .stagger > *:nth-child(5)  { animation-delay:.20s }
.slide.active .stagger > *:nth-child(6)  { animation-delay:.24s }
.slide.active .stagger > *:nth-child(7)  { animation-delay:.28s }
.slide.active .stagger > *:nth-child(8)  { animation-delay:.32s }
.slide.active .stagger > *:nth-child(9)  { animation-delay:.36s }
.slide.active .stagger > *:nth-child(10) { animation-delay:.40s }

@keyframes slideIn {
  from { opacity:0; transform:translateY(20px) }
  to   { opacity:1; transform:translateY(0) }
}
@keyframes fadeUp {
  to { opacity:1; transform:translateY(0) }
}
@keyframes pulse-soft {
  0%,100% { opacity:.5 }
  50%     { opacity:1 }
}

/* --- Progress Bar --- */
#progress-fill { transition: width .4s cubic-bezier(.16,1,.3,1) }

/* --- Nav Dots --- */
.nav-dot {
  width: 6px; height: 6px;
  border-radius: 3px;
  background: #d1d5db;
  border: none; padding: 0;
  cursor: pointer;
  transition: all .25s ease;
}
.nav-dot:hover { background: #9ca3af }
.nav-dot.active { width: 20px; background: #6d28d9 }
.nav-dot.sec-ai.active { background: #0891b2 }
.nav-dot.sec-github.active { background: #059669 }
.nav-dot.sec-deploy.active { background: #ea580c }
.nav-dot.sec-summary.active { background: #2563eb }

/* --- Syntax Highlighting (dark code blocks) --- */
.s-tag  { color: #f87171 }
.s-attr { color: #fbbf24 }
.s-val  { color: #4ade80 }
.s-kw   { color: #c084fc }
.s-fn   { color: #60a5fa }
.s-str  { color: #4ade80 }
.s-num  { color: #fb923c }
.s-cmt  { color: #6b7280 }
.s-prop { color: #60a5fa }