/* ====== Scroll-Triggered Reveal Animations ====== */
/* Loaded on example + city pages for premium feel */

/* Base reveal state — hidden until in view */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}

/* Stagger children in grids */
.reveal-stagger > * {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.5s ease, transform 0.5s ease;
}
.reveal-stagger.visible > *:nth-child(1) { transition-delay: 0ms; opacity: 1; transform: translateY(0); }
.reveal-stagger.visible > *:nth-child(2) { transition-delay: 80ms; opacity: 1; transform: translateY(0); }
.reveal-stagger.visible > *:nth-child(3) { transition-delay: 160ms; opacity: 1; transform: translateY(0); }
.reveal-stagger.visible > *:nth-child(4) { transition-delay: 240ms; opacity: 1; transform: translateY(0); }
.reveal-stagger.visible > *:nth-child(5) { transition-delay: 320ms; opacity: 1; transform: translateY(0); }
.reveal-stagger.visible > *:nth-child(6) { transition-delay: 400ms; opacity: 1; transform: translateY(0); }

/* ====== Animated Bar Chart ====== */
.anim-chart {
  background: white;
  border-radius: 16px;
  padding: 28px 24px;
  box-shadow: 0 4px 24px rgba(13,43,62,0.08);
  border: 1px solid #E2EAF0;
  margin-bottom: 32px;
}
.anim-chart-title {
  font-size: 1.15rem;
  font-weight: 700;
  color: #0B1F3A;
  margin-bottom: 4px;
}
.anim-chart-subtitle {
  font-size: 0.88rem;
  color: #6B7C8D;
  margin-bottom: 24px;
}
.anim-bar-row {
  margin-bottom: 16px;
}
.anim-bar-label {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 6px;
}
.anim-bar-name {
  font-size: 0.88rem;
  font-weight: 600;
  color: #2C3E50;
}
.anim-bar-value {
  font-size: 0.88rem;
  font-weight: 700;
  color: #0B1F3A;
}
.anim-bar-track {
  height: 28px;
  background: #F0F4F8;
  border-radius: 6px;
  overflow: hidden;
  position: relative;
}
.anim-bar-fill {
  height: 100%;
  border-radius: 6px;
  width: 0%;
  transition: width 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding-right: 8px;
}
.anim-bar-fill.animated {
  /* width set by JS */
}
.anim-bar-pct {
  font-size: 0.72rem;
  font-weight: 700;
  color: white;
  white-space: nowrap;
}
/* Bar colors */
.anim-bar-fill.bar-5yr { background: linear-gradient(90deg, #0B1F3A, #1A3A5C); }
.anim-bar-fill.bar-7yr { background: linear-gradient(90deg, #2563EB, #3B82F6); }
.anim-bar-fill.bar-15yr { background: linear-gradient(90deg, #D97706, #F59E0B); }
.anim-bar-fill.bar-27yr, .anim-bar-fill.bar-39yr { background: #CBD5E1; }

/* Stagger bar animations */
.anim-chart.visible .anim-bar-row:nth-child(1) .anim-bar-fill { transition-delay: 0ms; }
.anim-chart.visible .anim-bar-row:nth-child(2) .anim-bar-fill { transition-delay: 120ms; }
.anim-chart.visible .anim-bar-row:nth-child(3) .anim-bar-fill { transition-delay: 240ms; }
.anim-chart.visible .anim-bar-row:nth-child(4) .anim-bar-fill { transition-delay: 360ms; }

/* ====== Savings Callout ====== */
.anim-savings {
  margin-top: 20px;
  padding: 16px 20px;
  background: linear-gradient(135deg, #EFF6FF, #DBEAFE);
  border: 1px solid #93C5FD;
  border-radius: 10px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.anim-savings-label {
  font-size: 0.9rem;
  font-weight: 600;
  color: #1E40AF;
}
.anim-savings-value {
  font-size: 1.4rem;
  font-weight: 800;
  color: #1D4ED8;
}

/* ====== Methodology Note ====== */
.anim-chart-note {
  font-size: 0.75rem;
  color: #94A3B8;
  margin-top: 12px;
  text-align: center;
  font-style: italic;
}

/* ====== Inline Photo ====== */
.article-photo {
  width: 100%;
  border-radius: 12px;
  margin: 24px 0;
  box-shadow: 0 4px 24px rgba(0,0,0,0.08);
  object-fit: cover;
  max-height: 400px;
}

/* ====== Reduced Motion ====== */
@media (prefers-reduced-motion: reduce) {
  .reveal, .reveal-stagger > *, .anim-bar-fill {
    transition: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}