/* ============================================================
   animations.css — Motion & Micro-Interactions
   CityForge SEO — "The Observatory"
   ============================================================ */

/* ============================================================
   SCROLL-REVEAL — Fade-in + Slide-up
   ============================================================ */
.fade-in {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.fade-in.visible {
  opacity: 1;
  transform: translateY(0);
}

/* Staggered delays for grid children */
.fade-in .city-card:nth-child(1),
.fade-in .step-card:nth-child(1),
.fade-in .pricing-card:nth-child(1),
.fade-in .proof-item:nth-child(1),
.fade-in .section-item:nth-child(1) { transition-delay: 0ms; }

.fade-in .city-card:nth-child(2),
.fade-in .step-card:nth-child(2),
.fade-in .pricing-card:nth-child(2),
.fade-in .proof-item:nth-child(2),
.fade-in .section-item:nth-child(2) { transition-delay: 80ms; }

.fade-in .city-card:nth-child(3),
.fade-in .step-card:nth-child(3),
.fade-in .pricing-card:nth-child(3),
.fade-in .proof-item:nth-child(3),
.fade-in .section-item:nth-child(3) { transition-delay: 160ms; }

.fade-in .city-card:nth-child(4),
.fade-in .pricing-card:nth-child(4),
.fade-in .proof-item:nth-child(4),
.fade-in .section-item:nth-child(4) { transition-delay: 240ms; }

.fade-in .city-card:nth-child(5),
.fade-in .section-item:nth-child(5) { transition-delay: 320ms; }

.fade-in .city-card:nth-child(6),
.fade-in .section-item:nth-child(6) { transition-delay: 400ms; }

.fade-in .section-item:nth-child(7) { transition-delay: 480ms; }
.fade-in .section-item:nth-child(8) { transition-delay: 560ms; }

/* ============================================================
   HERO GRID DRIFT — Subtle background animation
   ============================================================ */
@keyframes grid-drift {
  0% { background-position: 0 0, 0 0; }
  100% { background-position: 60px 60px, 60px 60px; }
}

/* ============================================================
   CTA PULSE — Glowing button
   ============================================================ */
@keyframes cta-pulse {
  0%, 100% { box-shadow: 0 0 20px rgba(14, 165, 233, 0.15); }
  50% { box-shadow: 0 0 32px rgba(14, 165, 233, 0.35); }
}

/* ============================================================
   SPINNER
   ============================================================ */
@keyframes spin {
  to { transform: rotate(360deg); }
}

/* ============================================================
   SHIMMER — Loading state placeholder
   ============================================================ */
@keyframes shimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

.shimmer {
  background: linear-gradient(
    90deg,
    var(--bg-card) 25%,
    rgba(255, 255, 255, 0.04) 50%,
    var(--bg-card) 75%
  );
  background-size: 200% 100%;
  animation: shimmer 1.5s ease-in-out infinite;
  border-radius: var(--radius-sm);
}

.shimmer-card {
  height: 200px;
  border-radius: var(--radius-md);
}

.shimmer-line {
  height: 16px;
  margin-bottom: var(--space-sm);
  border-radius: var(--radius-xs);
}

.shimmer-line.short { width: 60%; }
.shimmer-line.medium { width: 80%; }

/* ============================================================
   MAP DOT PULSE — Fresh SVG cities glow
   ============================================================ */
@keyframes dot-pulse {
  0%, 100% { filter: drop-shadow(0 0 4px rgba(16, 185, 129, 0.4)); opacity: 0.9; }
  50% { filter: drop-shadow(0 0 10px rgba(16, 185, 129, 0.8)); opacity: 1; }
}

.map-city.dot-fresh {
  animation: dot-pulse 3s ease-in-out infinite;
}

/* ============================================================
   COUNTER ROLL — Number animation
   ============================================================ */
@keyframes counter-in {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.counter-animated {
  animation: counter-in 0.4s ease-out forwards;
}

/* ============================================================
   TYPING CURSOR — Hero headline
   ============================================================ */
@keyframes blink-cursor {
  0%, 100% { opacity: 1; }
  50% { opacity: 0; }
}

.typing-cursor::after {
  content: '|';
  color: var(--accent-primary);
  animation: blink-cursor 0.8s step-end infinite;
  font-weight: var(--weight-normal);
  margin-left: 2px;
}

/* ============================================================
   CARD HOVER — Enhanced micro-interactions
   ============================================================ */
.city-card {
  transition:
    transform var(--transition-base),
    box-shadow var(--transition-base),
    border-color var(--transition-base),
    background var(--transition-base);
}

.pricing-card {
  transition:
    transform var(--transition-base),
    box-shadow var(--transition-base),
    border-color var(--transition-base);
}

/* ============================================================
   GLOW BORDER — Accent border on hover
   ============================================================ */
@keyframes glow-border {
  0%, 100% { border-color: rgba(14, 165, 233, 0.2); }
  50% { border-color: rgba(14, 165, 233, 0.5); }
}

.pricing-card.popular {
  animation: glow-border 3s ease-in-out infinite;
}

/* ============================================================
   UNLOCK CTA — Attention-grabbing animation
   ============================================================ */
@keyframes unlock-glow {
  0%, 100% { box-shadow: 0 0 16px rgba(16, 185, 129, 0.2); }
  50% { box-shadow: 0 0 32px rgba(16, 185, 129, 0.4); }
}

.btn-unlock {
  animation: unlock-glow 2.5s ease-in-out infinite;
}

.btn-unlock:hover {
  animation: none;
}

/* ============================================================
   NAV TRANSITION
   ============================================================ */
.main-nav {
  transition: background var(--transition-base), box-shadow var(--transition-base);
}

/* ============================================================
   FAQ TOGGLE TRANSITION
   ============================================================ */
.faq-a {
  transition: max-height 0.35s ease, padding 0.35s ease;
}

/* ============================================================
   SECTION-ITEM STAGGER (What's Inside)
   ============================================================ */
.section-item {
  transition:
    transform var(--transition-base),
    border-color var(--transition-base),
    background var(--transition-base);
}

/* ============================================================
   FRESHNESS DOT COLORS (for legend)
   ============================================================ */
.dot-fresh {
  background: var(--accent-secondary);
}

.dot-recent {
  background: var(--accent-warning);
}

.dot-aging {
  background: var(--text-muted);
}

/* ============================================================
   PAGE TRANSITION — Smooth content swap
   ============================================================ */
#app {
  transition: opacity 0.15s ease;
}

/* ============================================================
   REDUCED MOTION — Accessibility
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  .fade-in {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .hero-bg {
    animation: none;
  }

  .btn-unlock,
  .pricing-card.popular,
  .map-city.dot-fresh {
    animation: none;
  }

  .hero-ctas .btn-primary {
    animation: none;
  }

  * {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }
}