@keyframes pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.5; transform: scale(1.2); }
}

@keyframes floatParticle {
  0%, 100% { transform: translateY(0) translateX(0); }
  50% { transform: translateY(-20px) translateX(10px); }
}

.fade-up {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .7s cubic-bezier(.22,.61,.36,1), transform .7s cubic-bezier(.22,.61,.36,1);
}
.fade-up.visible {
  opacity: 1;
  transform: translateY(0);
}
.fade-up.delay-1 { transition-delay: .08s; }
.fade-up.delay-2 { transition-delay: .16s; }
.fade-up.delay-3 { transition-delay: .24s; }

/* Subtle bar fill entry */
.fade-up.visible .bar-fill {
  animation: fillBar 1.2s cubic-bezier(.22,.61,.36,1) forwards;
}
@keyframes fillBar {
  from { width: 0; }
}

/* Ambient floating background particles (CSS only, subtle) */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background-image:
    radial-gradient(1px 1px at 20% 30%, rgba(74,222,128,0.3), transparent),
    radial-gradient(1px 1px at 70% 60%, rgba(74,222,128,0.2), transparent),
    radial-gradient(1px 1px at 40% 80%, rgba(74,222,128,0.25), transparent),
    radial-gradient(1px 1px at 90% 20%, rgba(74,222,128,0.2), transparent);
  animation: floatParticle 12s ease-in-out infinite;
  opacity: 0.6;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
  .fade-up { opacity: 1; transform: none; }
}