:root{
  /* ---- Motion. Slow, deliberate, no bounce. Nothing in this brand springs. ---- */
  --ease-out:cubic-bezier(0.22,0.61,0.36,1); /* @kind other */
  --ease-in-out:cubic-bezier(0.4,0,0.2,1); /* @kind other */
  --dur-fast:140ms; /* @kind other */      /* colour / opacity on hover */
  --dur-base:240ms; /* @kind other */      /* underline sweeps, link states */
  --dur-slow:620ms; /* @kind other */      /* section reveals, fades */
  --dur-image:900ms; /* @kind other */     /* photographic cross-fades */

  --transition-color:color var(--dur-fast) var(--ease-out),background-color var(--dur-fast) var(--ease-out),border-color var(--dur-fast) var(--ease-out); /* @kind other */
  --transition-rule:transform var(--dur-base) var(--ease-out),opacity var(--dur-base) var(--ease-out); /* @kind other */

  /* Reveal: fade up a short distance. No scale, no blur, no slide from the side. */
  --reveal-distance:14px;
}

@keyframes mf-fade-up{from{opacity:0;transform:translateY(var(--reveal-distance))}to{opacity:1;transform:none}}
@keyframes mf-fade{from{opacity:0}to{opacity:1}}

.mf-reveal{animation:mf-fade-up var(--dur-slow) var(--ease-out) both}

@media (prefers-reduced-motion:reduce){
  .mf-reveal{animation:none}
  *{transition-duration:1ms !important;animation-duration:1ms !important}
}