/* =========================================================
   SEDIMENT TRANSPORT SIMULATION — animations.css
   Wind/water motion + UI keyframes
   ========================================================= */

/* ---- Curly wind streaks: drift + gentle wobble ---- */
.wind-arrows .arrow {
  animation: wind-streak 3.2s linear infinite;
  will-change: transform;
  transform-origin: 50% 50%;
}
@keyframes wind-streak {
  0%   { transform: translate(-90px,  0px);  opacity: 0; }
  10%  { transform: translate(-60px, -3px); opacity: 0.9; }
  35%  { transform: translate(-15px,  3px); opacity: 1; }
  65%  { transform: translate( 25px, -3px); opacity: 1; }
  90%  { transform: translate( 70px,  2px); opacity: 0.8; }
  100% { transform: translate( 95px,  0px); opacity: 0; }
}

/* ---- Wind turbulence/dust ---- */
.wind-turbulence path {
  animation: turbulence-pulse 3s ease-in-out infinite;
}
@keyframes turbulence-pulse {
  0%, 100% { transform: translateY(0); opacity: 0.25; }
  50%      { transform: translateY(-6px); opacity: 0.45; }
}

/* ---- Water current arrows ---- */
.water-arrows .arrow {
  animation: water-flow 1.6s linear infinite;
  will-change: transform;
}
@keyframes water-flow {
  0%   { transform: translateX(-60px); opacity: 0; }
  15%  { opacity: 1; }
  85%  { opacity: 1; }
  100% { transform: translateX(80px); opacity: 0; }
}

/* ---- Particle base ---- */
.particle {
  transform-box: fill-box;
  transform-origin: center;
  will-change: transform, opacity;
}

/* ---- Suspension bobbing ---- */
.suspension {
  animation: suspension-bob 2.4s ease-in-out infinite;
}
@keyframes suspension-bob {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-8px); }
}

/* ---- Rolling rotation (driven by JS attribute but supports CSS fallback) ---- */
.rolling { transition: transform 60ms linear; }

/* ---- Water surface ripples ---- */
.surface-ripple {
  stroke: #6AB5E5;
  stroke-width: 0.8;
  fill: none;
  opacity: 0;
  animation: ripple-expand 3s ease-out infinite;
}
@keyframes ripple-expand {
  0%   { r: 4;  opacity: 0.55; }
  100% { r: 30; opacity: 0;    }
}

/* ---- Erosion fade-in (controlled by JS) ---- */
#water-erosion { transition: opacity 1.2s ease-in; }

/* ---- Wind direction indicator pulse ---- */
#wind-direction-label {
  animation: label-fade 4s ease-in-out infinite;
}
@keyframes label-fade {
  0%, 100% { opacity: 0.5; }
  50%      { opacity: 1;   }
}

/* ---- State: paused — freeze CSS animations ---- */
body.is-paused .wind-arrows .arrow,
body.is-paused .water-arrows .arrow,
body.is-paused .wind-turbulence path,
body.is-paused .suspension,
body.is-paused .surface-ripple {
  animation-play-state: paused;
}