style.css

/* Smooth scroll behavior */
html {
  scroll-behavior: smooth;
}

/* Reveal on scroll */
.reveal {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .7s ease, transform .7s ease;
}
.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}

/* Blob animations */
.blob {
  animation: float 16s ease-in-out infinite;
}
.blob-fuchsia {
  animation-duration: 20s;
}
.blob-spin {
  animation: spin 40s linear infinite;
}
@keyframes float {
  0% { transform: translateY(0) translateX(0); }
  50% { transform: translateY(-24px) translateX(16px); }
  100% { transform: translateY(0) translateX(0); }
}
@keyframes spin {
  0% { transform: translateX(-50%) rotate(0deg); }
  100% { transform: translateX(-50%) rotate(360deg); }
}

/* Optional: Reduce motion preference */
@media (prefers-reduced-motion: reduce) {
  .reveal, .blob, .blob-fuchsia, .blob-spin {
    animation: none !important;
    transition: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}

/* Simple prose styling for modal content */
.prose h4 {
  margin: 1rem 0 .5rem;
  font-weight: 600;
}
.prose p {
  margin: .5rem 0;
  color: #374151;
}
.prose ul {
  margin: .5rem 0 .5rem 1.25rem;
  color: #374151;
}