/* ============================================================
   Harmony — motion tokens & keyframes
   Calm, subtle motion. One shared easing. Hover/colour is quick
   (~.2s); panels settle (~.4s); the yin-yang theme cross-fade is
   slow and decorative (~.9s) but must never block input.
   The spinning mark is the universal loader.
   ============================================================ */
:root {
  --ease:       cubic-bezier(.4, 0, .2, 1);   /* @kind other */
  --ease-out:   cubic-bezier(.2, .7, .2, 1);  /* @kind other */
  --dur-fast:   .2s;   /* @kind other */
  --dur:        .4s;   /* @kind other */
  --dur-theme:  .9s;   /* @kind other */
}

/* ---- keyframes (shared by components + the .mark-spin loader) ---- */
@keyframes hm-spin    { to { transform: rotate(360deg); } }
@keyframes hm-pulse   { 0%,100% { opacity: 1; }   50% { opacity: .35; } }
@keyframes hm-blink   { 0%,50% { opacity: 1; }     50.01%,100% { opacity: 0; } }
@keyframes hm-shimmer { 0%,100% { opacity: .4; }   50% { opacity: .75; } }
@keyframes hm-rise    { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes hm-fade    { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes hm-progress{ 0% { transform: translateX(-100%); } 100% { transform: translateX(280%); } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}