/* Motion, shared by the site and the app (motion.js has the rules).
 *
 * --spring is a real damped spring (damping ratio 0.78) sampled into CSS's
 * linear(): a quick start, about 2% of overshoot, settled by the end of
 * --spring-dur. --spring-soft is the same spring critically damped - no
 * overshoot - for fades and blurs, which shouldn't go past where they stop.
 * A browser without linear() falls back to its default ease.
 */
:root {
  --spring: linear(0, 0.0266, 0.0934, 0.1842, 0.2869, 0.3925, 0.4949, 0.5899, 0.6751, 0.7494,
                   0.8125, 0.8649, 0.9074, 0.9409, 0.9668, 0.986, 0.9998, 1.0092, 1.0152, 1.0185,
                   1.0198, 1.0197, 1.0187, 1.017, 1.0151, 1.013, 1.0109, 1.0089, 1.0071, 1.0056,
                   1.0042, 1.0031, 1.0022, 1.0014, 1.0009, 1.0004, 1);
  --spring-soft: linear(0, 0.055, 0.1734, 0.3101, 0.4422, 0.5591, 0.6575, 0.7374, 0.8009, 0.8503,
                        0.8883, 0.9172, 0.9389, 0.9551, 0.9672, 0.9761, 0.9826, 0.9874, 0.9909,
                        0.9935, 0.9953, 0.9966, 0.9976, 0.9983, 1);
  --spring-dur: 480ms;
  --swap-dur: 240ms;
}

/* Words that changed re-enter with a short blur ([data-swap], motion.js). */
@keyframes swap-in {
  from { opacity: 0; filter: blur(5px); transform: translateY(3px); }
  to   { opacity: 1; filter: none; transform: none; }
}
.swapping { animation: swap-in var(--swap-dur) var(--spring-soft) both; }
/* data-swap="still": for something placed with a transform of its own (the
   status line is centred with one), only the blur and the fade. */
@keyframes swap-in-still { from { opacity: 0; filter: blur(5px); } to { opacity: 1; filter: none; } }
[data-swap="still"].swapping { animation-name: swap-in-still; }

/* The liquid marker (motion.js liquid()): placed by its own springs, so it
   has no transition of its own - only its fade. */
.liquid {
  position: absolute; left: 0; top: 0;
  pointer-events: none;
  opacity: 0;
  transition: opacity 200ms var(--spring-soft);
}
.liquid.on { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  .swapping { animation: none; }
  :root { --spring-dur: 1ms; }
}