.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .7s var(--transition-smooth), transform .7s var(--transition-smooth);
}
.reveal.in-view {
  opacity: 1;
  transform: none;
}

/* Stagger children of grids/lists slightly for a nicer cascade */
.bento.in-view .bento-card,
.steps__grid.in-view .step-card,
.locations__grid.in-view .location-chip {
  animation: fadeUp .6s var(--transition-smooth) both;
}
.bento-card:nth-child(2) { animation-delay: .05s; }
.bento-card:nth-child(3) { animation-delay: .1s; }
.bento-card:nth-child(4) { animation-delay: .15s; }
.bento-card:nth-child(5) { animation-delay: .2s; }

@keyframes fadeUp {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes floatRing {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-8px) rotate(2deg); }
}
.hero-card__ring--1 { animation: floatRing 7s ease-in-out infinite; }
.hero-card__ring--2 { animation: floatRing 9s ease-in-out infinite reverse; }

@keyframes dotPulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: .4; transform: scale(.7); }
}
.hero-card__dot--1 { animation: dotPulse 2.4s ease-in-out infinite; }
.hero-card__dot--2 { animation: dotPulse 2.4s ease-in-out infinite .6s; }
.hero-card__dot--3 { animation: dotPulse 2.4s ease-in-out infinite 1.2s; }

@media (prefers-reduced-motion: reduce) {
  .reveal,
  .bento.in-view .bento-card,
  .steps__grid.in-view .step-card,
  .locations__grid.in-view .location-chip,
  .hero-card__ring--1,
  .hero-card__ring--2,
  .hero-card__dot--1,
  .hero-card__dot--2,
  .hero-card__dot--3 {
    animation: none !important;
    transition: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}