/* ==========================================================================
   Life HQ — Motion
   Tasteful only: gentle entrances, alive hovers, nothing flashy.
   ========================================================================== */

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

@keyframes fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes pop-in {
  from { opacity: 0; transform: scale(0.92); }
  to   { opacity: 1; transform: scale(1); }
}

@keyframes shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

@keyframes float-slow {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-10px) rotate(1.5deg); }
}

@keyframes pulse-dot {
  0%, 100% { box-shadow: 0 0 0 4px var(--yellow-100); }
  50% { box-shadow: 0 0 0 7px rgba(255, 233, 154, 0.5); }
}

.animate-in {
  animation: fade-up var(--dur-slow) var(--ease-soft) both;
}

/* Stagger children of the dashboard as they enter */
.main-inner > .section {
  animation: fade-up var(--dur-slow) var(--ease-soft) both;
}
.main-inner > .section:nth-child(1) { animation-delay: 0ms; }
.main-inner > .section:nth-child(2) { animation-delay: 60ms; }
.main-inner > .section:nth-child(3) { animation-delay: 120ms; }
.main-inner > .section:nth-child(4) { animation-delay: 180ms; }
.main-inner > .section:nth-child(5) { animation-delay: 240ms; }
.main-inner > .section:nth-child(6) { animation-delay: 300ms; }
.main-inner > .section:nth-child(7) { animation-delay: 360ms; }
.main-inner > .section:nth-child(8) { animation-delay: 420ms; }

.hero-blob svg .blob {
  animation: float-slow 9s ease-in-out infinite;
  transform-origin: center;
}
.hero-blob svg .blob:nth-of-type(2) { animation-delay: -3s; animation-duration: 11s; }
.hero-blob svg .blob:nth-of-type(3) { animation-delay: -6s; animation-duration: 13s; }

.nav-link.is-active::before {
  animation: pulse-dot 2.4s ease-in-out infinite;
}

.sticky-note {
  animation: pop-in var(--dur-normal) var(--ease-out) both;
}

.check-item, .timeline-item, .launch-btn, .money-card {
  animation: fade-in var(--dur-normal) var(--ease-out) both;
}

.sidebar-brand .mark {
  transition: transform var(--dur-normal) var(--ease-soft);
}
.sidebar-brand:hover .mark { transform: rotate(-6deg) scale(1.05); }