/* ==========================================================================
   Animation CSS
   Lightweight motion for scroll reveals, hover states, and ambient particles.
   ========================================================================== */

.reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 760ms ease, transform 760ms ease;
}

.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.star-field {
  z-index: -2;
  overflow: hidden;
  background-image:
    radial-gradient(circle at 12% 24%, rgba(255, 255, 255, 0.68) 0 1px, transparent 1.8px),
    radial-gradient(circle at 32% 72%, rgba(157, 233, 246, 0.55) 0 1px, transparent 1.8px),
    radial-gradient(circle at 58% 18%, rgba(232, 215, 170, 0.55) 0 1px, transparent 1.8px),
    radial-gradient(circle at 84% 62%, rgba(255, 255, 255, 0.52) 0 1px, transparent 1.8px);
  background-size: 420px 420px, 520px 520px, 610px 610px, 760px 760px;
  animation: starsDrift 42s linear infinite;
  opacity: 0.54;
}

@keyframes starsDrift {
  from {
    transform: translate3d(0, 0, 0);
  }
  to {
    transform: translate3d(-80px, 60px, 0);
  }
}

.scroll-cue span {
  animation: scrollCue 1.7s ease-in-out infinite;
}

@keyframes scrollCue {
  0% {
    opacity: 0;
    transform: translate(-50%, 0);
  }
  35% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: translate(-50%, 14px);
  }
}

.feature-card,
.sound-panel,
.community-banner,
.link-grid a {
  transition: transform 260ms ease, border-color 260ms ease, background 260ms ease;
}

.feature-card:hover,
.sound-panel:hover,
.community-banner:hover {
  transform: translateY(-5px);
  border-color: rgba(137, 184, 255, 0.34);
}

@media (prefers-reduced-motion: reduce) {
  .star-field,
  .scroll-cue span {
    animation: none;
  }
}