/* GATOGATO wordmark with its reveal, from gatogato/assets/logo/wordmark-reveal.html
   (tuned by João on 6 Nov 2026): outlines draw, then each letter fills from the bottom.
   --wm-k stretches the timing: 1 on scroll-in, 0.8 on hover. Without script or with
   reduced motion the logo simply stands, filled. */
.logo-lottie-green,
.logo-lottie-gainsboro,
.logo-lottie-gainsboro-footer { width: auto; margin-bottom: 0; line-height: 0; }
.logo-lottie-gainsboro,
.logo-lottie-gainsboro-footer { color: #EAEADD; } /* cream on olive */
.logo-lottie-green { color: #677843; }            /* brand olive on cream, like the nav links */

.wordmark { --wm-k: 1; display: block; height: var(--logo-h, 36px); width: auto; aspect-ratio: 291.46 / 69.12; fill: currentColor; overflow: visible; }
/* Until the script has armed it, a logo stays hidden: otherwise the finished logo flashes first and then plays again. */
@media (scripting: enabled) and (prefers-reduced-motion: no-preference) {
  .wordmark:not(.armed) { visibility: hidden; }
}
/* The nav logo is 20 % bigger than the footer's. */
.navbar1_logo-link .wordmark { --logo-h: 43.2px; }
@media (max-width: 479px) {
  .wordmark { --logo-h: 27px; }
  .navbar1_logo-link .wordmark { --logo-h: 32.4px; }
}
.wordmark .wm-l { fill: none; stroke: none; }
.wordmark.armed .wm-l { stroke: currentColor; stroke-width: 1.5px; vector-effect: non-scaling-stroke; stroke-dasharray: 1 1; stroke-dashoffset: .9; }
.wordmark.armed .wm-f { transform: translateY(72px); }
/* The letter clips only apply while it runs: a clip on the same shape thins the edges. */
.wordmark.armed:not(.done) .wm-g { clip-path: var(--c); }
/* Once it stands, it is the plain logo again: no line, no running animation (own layer, different anti-aliasing). */
.wordmark.armed.done .wm-l { display: none; }
.wordmark.armed.done .wm-f { animation: none; transform: none; }
.wordmark.play .wm-l { animation: wm-draw calc(1006ms * var(--wm-k)) cubic-bezier(.625, .05, 0, 1) both, wm-off 1ms linear calc(1254ms * var(--wm-k)) forwards; }
.wordmark.play .wm-f { animation: wm-rise calc(858ms * var(--wm-k)) cubic-bezier(.23, 1, .32, 1) calc((116ms + var(--i) * 40ms) * var(--wm-k)) both; }
@keyframes wm-draw { from { stroke-dashoffset: .9; } to { stroke-dashoffset: 0; } }
@keyframes wm-rise { from { transform: translateY(72px); } to { transform: none; } }
@keyframes wm-off { to { stroke-opacity: 0; } }