/*
 * Animations — keyframes used across hero / regions / phone / closing
 * / particles. Each is opt-in via class, and `html[data-motion="reduce"]`
 * disables all of them in one rule at the bottom.
 */

@keyframes fadeRise {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes breathe {
  0%, 100% { opacity: 0.55; transform: translate(-50%, -50%) scale(1); }
  50%      { opacity: 0.85; transform: translate(-50%, -50%) scale(1.06); }
}
@keyframes float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(6px); }
}
@keyframes marquee {
  from { transform: translateX(var(--m-from, 0)); }
  to   { transform: translateX(var(--m-to, -50%)); }
}
@keyframes drift {
  0%   { transform: translate3d(0,0,0) scale(1); }
  50%  { transform: translate3d(20px,-10px,0) scale(1.04); }
  100% { transform: translate3d(0,0,0) scale(1); }
}
@keyframes spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}
@keyframes sway {
  0%, 100% { transform: rotate(-3deg); }
  50%      { transform: rotate(3deg); }
}
@keyframes glowPulse {
  0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--color-accent) 30%, transparent); }
  50%      { box-shadow: 0 0 0 14px color-mix(in srgb, var(--color-accent) 0%, transparent); }
}
@keyframes shimmer {
  0%   { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}
@keyframes regionEnter {
  from { opacity: 0; transform: translateY(12px) scale(0.98); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes particleRise {
  0%   { transform: translate(0, 0) scale(0.6); opacity: 0; }
  20%  { opacity: 0.6; }
  100% { transform: translate(var(--dx, 40px), var(--dy, -80vh)) scale(1.2); opacity: 0; }
}
@keyframes countUp {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes ripple {
  0%   { transform: scale(0.8); opacity: 0.8; }
  100% { transform: scale(2.4); opacity: 0; }
}

.animate-fade-rise { animation: fadeRise 700ms var(--ease-out-soft) both; }
.animate-breathe   { animation: breathe 4.5s var(--ease-in-out) infinite; }
.animate-float     { animation: float 2.2s var(--ease-in-out) infinite; }
.animate-glow      { animation: glowPulse 2.8s var(--ease-out-soft) infinite; }
.animate-sway      { animation: sway 7s var(--ease-in-out) infinite; transform-origin: bottom center; }
.animate-spin-slow { animation: spin 32s linear infinite; }

/* Delay helpers */
.delay-80  { animation-delay: 80ms !important; }
.delay-160 { animation-delay: 160ms !important; }
.delay-240 { animation-delay: 240ms !important; }
.delay-320 { animation-delay: 320ms !important; }
.delay-400 { animation-delay: 400ms !important; }
.delay-560 { animation-delay: 560ms !important; }
.delay-720 { animation-delay: 720ms !important; }

html[data-motion="reduce"] [class*="animate-"],
html[data-motion="reduce"] .particle,
html[data-motion="reduce"] .gallery__strip,
html[data-motion="reduce"] .region-card__motif {
  animation: none !important;
}