/* One outline-to-fill reveal per hover. Removing hover restores the original immediately. */
.wordmark.logo-motion { position: relative; width: fit-content; }
.logo-motion .logo-outline { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; visibility: hidden; pointer-events: none; }
.logo-outline path { fill: none; stroke: #000; stroke-width: .7px; vector-effect: non-scaling-stroke; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 1; }
@media (any-hover: hover) and (prefers-reduced-motion: no-preference) {
  .logo-motion:hover .brand-logo { animation: peters-logo-fill 3.2s linear both; }
  .logo-motion:hover .logo-outline { visibility: visible; animation: peters-logo-outline 3.2s linear both; }
  .logo-motion:hover .logo-outline path { animation: peters-logo-trace var(--trace-duration) var(--trace-delay) cubic-bezier(.42, 0, .58, 1) both; }
}
@keyframes peters-logo-trace { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes peters-logo-fill {
  0%, 76.5625% { opacity: 0; animation-timing-function: ease-in-out; }
  100% { opacity: 1; }
}
@keyframes peters-logo-outline {
  0%, 76.5625% { opacity: 1; animation-timing-function: ease-in-out; }
  100% { opacity: 0; }
}