/**
 * Home Page Styles
 */

/* ========================================
   Page Load Animations
   ======================================== */
@keyframes fade-up {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Hero staggered reveal */
.hero-badge,
.hero h1,
.hero-description,
.hero-buttons,
.hero-terminal {
  opacity: 0;
  animation: fade-up 0.8s ease-out forwards;
}

.hero-badge         { animation-delay: 0.1s; }
.hero h1            { animation-delay: 0.25s; }
.hero-description   { animation-delay: 0.4s; }
.hero-buttons       { animation-delay: 0.55s; }
.hero-terminal      { animation-delay: 0.5s; animation-duration: 1s; }

/* Features section — header and cards */
.features-header,
.card {
  opacity: 0;
  animation: fade-up 0.6s ease-out forwards;
  animation-play-state: paused;
}

.features-header { animation-delay: 0s; }
.card:nth-child(1) { animation-delay: 0.05s; }
.card:nth-child(2) { animation-delay: 0.1s; }
.card:nth-child(3) { animation-delay: 0.15s; }
.card:nth-child(4) { animation-delay: 0.2s; }
.card:nth-child(5) { animation-delay: 0.25s; }
.card:nth-child(6) { animation-delay: 0.3s; }
.card:nth-child(7) { animation-delay: 0.35s; }
.card:nth-child(8) { animation-delay: 0.4s; }

/* Code section */
.code-section .section-header,
.code-section .code-block {
  opacity: 0;
  animation: fade-up 0.6s ease-out forwards;
  animation-play-state: paused;
}

.code-section .section-header { animation-delay: 0s; }
.code-section .code-block     { animation-delay: 0.15s; }

/* Footer */
.footer-top,
.footer-bottom {
  opacity: 0;
  animation: fade-up 0.6s ease-out forwards;
  animation-play-state: paused;
}

.footer-top    { animation-delay: 0s; }
.footer-bottom { animation-delay: 0.1s; }

/* Trigger animations when scrolled into view */
.features-header.is-visible,
.card.is-visible,
.code-section .section-header.is-visible,
.code-section .code-block.is-visible,
.footer-top.is-visible,
.footer-bottom.is-visible {
  animation-play-state: running;
}

/* ========================================
   Features Section
   ======================================== */
.features {
  padding: var(--space-3xl) var(--space-md);
  border-top: 1px solid var(--border-subtle);
}

.features-inner {
  max-width: var(--container-xl);
  margin: 0 auto;
}

.features-header {
  margin-bottom: var(--space-2xl);
}

.features-header .label {
  color: var(--color-accent);
  margin-bottom: var(--space-sm);
  display: block;
}

.features-header h2 {
  margin: 0;
}

/* ========================================
   Code Section
   ======================================== */
.code-section {
  padding: var(--space-3xl) var(--space-md);
  background: rgba(0, 0, 0, 0.3);
  border-top: 1px solid var(--border-subtle);
}

.code-container {
  max-width: var(--container-md);
  margin: 0 auto;
}

.code-section .section-header {
  text-align: center;
  margin-bottom: var(--space-2xl);
}

.code-section .section-header h2 {
  margin-bottom: var(--space-sm);
}

.code-section .section-header p {
  color: var(--color-gray-500);
  font-size: 0.875rem;
  margin: 0;
}