/* ============================================================
   ANIMATIONS
   Shared keyframes and animated decoration elements.
   ============================================================ */

/* ---- Stars: twinkling dot decoration ---- */
.star {
  position: absolute;
  background: white;
  border-radius: 50%;
  width: 2px;
  height: 2px;
  animation: twinkle 3s ease-in-out infinite;
}

@keyframes twinkle {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.15; }
}

/* ---- Float: gentle vertical bobbing for icons and balloon ---- */
@keyframes float {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-8px); }
}

/* ---- Panel-in: the shared entrance for anything that appears —
   condition cards, tab groups, session chips. Rises in softly;
   pair with --ease-out-soft. ---- */
@keyframes panel-in {
  from {
    opacity: 0;
    transform: translateY(8px) scale(0.98);
  }
}

/* ---- Turbo view transitions: pages crossfade instead of teleporting.
   Enabled by the view-transition meta tag in the layout. ---- */
::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: 0.2s;
}

/* ---- Reduced motion: the ambient layer goes still, everywhere.
   Every float/twinkle/drift user across the app is gated here so no
   page can forget its own gate. (Interactive transitions are gated
   next to their own rules.) ---- */
@media (prefers-reduced-motion: reduce) {
  .star,
  .spot-header-icon,
  .spot-card-new-icon,
  .stale-notice-icon,
  .balloon-icon,
  .empty-balloon,
  .balloon-wrapper,
  .cloud,
  .scroll-hint,
  .cta-bg-balloon {
    animation: none !important;
  }

  ::view-transition-group(*),
  ::view-transition-old(root),
  ::view-transition-new(root) {
    animation: none !important;
  }
}