/* Scroll reveal animations — always visible fallback first.
   Elements start hidden; JS adds .visible on scroll.
   CSS fallback: if .visible is never added (headless/no-JS/screenshot),
   the animation-based fallback ensures everything is visible after a short delay. */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .55s ease, transform .55s ease;
  /* Safety net: force-show after 0.3 s so screenshots / no-JS always see content */
  animation: reveal-fallback 0s 0.3s forwards;
}
@keyframes reveal-fallback {
  to { opacity: 1; transform: none; }
}
.reveal.visible {
  opacity: 1;
  transform: none;
  animation: none; /* once JS adds .visible, JS transition takes over */
}

/* Stagger cards — only apply delay when JS has actually triggered .visible,
   so fallback animation isn't delayed per card */
.themes-grid .theme-card.visible:nth-child(1) { transition-delay: 0s; }
.themes-grid .theme-card.visible:nth-child(2) { transition-delay: .08s; }
.themes-grid .theme-card.visible:nth-child(3) { transition-delay: .16s; }
.themes-grid .theme-card.visible:nth-child(4) { transition-delay: .24s; }
.themes-grid .theme-card.visible:nth-child(5) { transition-delay: .32s; }
.themes-grid .theme-card.visible:nth-child(6) { transition-delay: .4s; }

.testimonials-grid .testimonial-card.visible:nth-child(2) { transition-delay: .1s; }
.testimonials-grid .testimonial-card.visible:nth-child(3) { transition-delay: .2s; }

/* Active nav link */
.nav-links a.active { color: var(--gold-dk); opacity: 1; }

/* Testimonials: always-on CSS fade-in (no JS dependency) */
@keyframes card-fadein {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: none; }
}
.testimonial-card {
  animation: card-fadein .55s ease both;
}
.testimonials-grid .testimonial-card:nth-child(1) { animation-delay: .05s; }
.testimonials-grid .testimonial-card:nth-child(2) { animation-delay: .15s; }
.testimonials-grid .testimonial-card:nth-child(3) { animation-delay: .25s; }