/* Keyframes and scroll-reveal states */
@keyframes pulse {
  0% { box-shadow: 0 0 0 0 rgba(18, 161, 80, 0.55); }
  70% { box-shadow: 0 0 0 10px rgba(18, 161, 80, 0); }
  100% { box-shadow: 0 0 0 0 rgba(18, 161, 80, 0); }
}
@keyframes blink { 50% { opacity: 0; } }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes float { 50% { transform: translateY(-8px); } }
@keyframes drift {
  33% { transform: translate(30px, -20px) scale(1.05); }
  66% { transform: translate(-20px, 25px) scale(0.95); }
}
@keyframes wave {
  0%, 60%, 100% { transform: rotate(0); }
  10%, 30% { transform: rotate(14deg); }
  20% { transform: rotate(-8deg); }
  40% { transform: rotate(-4deg); }
  50% { transform: rotate(10deg); }
}

/* Elements start hidden only when JS is running (html.js), so the page works without it */
.js .reveal { opacity: 0; transform: translateY(24px); transition: opacity 0.7s var(--ease), transform 0.7s var(--ease); }
.js .reveal.visible { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .js .reveal { opacity: 1; transform: none; }
  .photo-badge, .status-dot, .blob, .wave { animation: none; }
}