/* The animated "Reslvd." wordmark (make-wordmark.py writes the SVG, wordmark.js starts the intro).
   Idea: "resolved". The letters arrive slightly out of place and snap into line, then the dot
   lands. On hover the letters ripple and the dot hops and turns lime. */
.wordmark .wm { display: block; height: .74em; width: auto; overflow: visible; }
.header .wordmark .wm { height: .76em; }
.wm .wm-l, .wm .wm-dot { transform-box: fill-box; transform-origin: 50% 100%; }
.wm .wm-dot { transition: fill 300ms var(--shape-ease, ease); }
.wm .wm-l:nth-child(1) { --r: -14deg; --x: -30%; }
.wm .wm-l:nth-child(2) { --r: 10deg; --x: 20%; }
.wm .wm-l:nth-child(3) { --r: -8deg; --x: -15%; }
.wm .wm-l:nth-child(4) { --r: 16deg; --x: 40%; }
.wm .wm-l:nth-child(5) { --r: -12deg; --x: -25%; }
.wm .wm-l:nth-child(6) { --r: 9deg; --x: 15%; }

/* Intro: once per visit (wordmark.js adds .wm-intro). */
.wm-intro .wm-l { animation: wm-snap 900ms var(--shape-ease, ease) both; animation-delay: calc(var(--i) * 70ms); }
.wm-intro .wm-dot { animation: wm-land 900ms cubic-bezier(.3, 0, .2, 1) both; animation-delay: 560ms; }
@keyframes wm-snap {
  0% { opacity: 0; transform: translate(var(--x), 45%) rotate(var(--r)); }
  45% { opacity: 1; transform: translate(calc(var(--x) * .25), -6%) rotate(calc(var(--r) * -.3)); }
  100% { opacity: 1; transform: none; }
}
@keyframes wm-land {
  0% { opacity: 0; transform: translateY(-260%); }
  45% { opacity: 1; transform: translateY(0) scale(1.25, .7); fill: var(--shape-lime); }
  65% { transform: translateY(-55%) scale(.92, 1.08); }
  85% { transform: translateY(0) scale(1.08, .92); }
  100% { transform: none; }
}

/* Hover: a ripple through the letters, the dot hops and turns lime. */
.wordmark:is(:hover, :focus-visible) .wm-l { animation: wm-ripple 620ms var(--shape-ease, ease) both; animation-delay: calc(var(--i) * 45ms); }
.wordmark:is(:hover, :focus-visible) .wm-dot { fill: var(--shape-lime); animation: wm-hop 620ms var(--shape-ease, ease) 270ms both; }
@keyframes wm-ripple { 0%, 100% { transform: none; } 40% { transform: translateY(-14%) rotate(calc(var(--r) * -.25)); } }
@keyframes wm-hop { 0%, 100% { transform: none; } 35% { transform: translateY(-70%) scale(.9, 1.1); } 70% { transform: translateY(0) scale(1.15, .85); } }

@media (prefers-reduced-motion: reduce) {
  .wm .wm-l, .wm .wm-dot { animation: none !important; }
}