/* ------------------------------------------------------------------
   The logo draws itself, then the outline fades so only the clean shape stays
   ------------------------------------------------------------------ */
.logo-svg svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}

.logo-svg .s path {
  fill: none;
  stroke: currentColor;
  stroke-width: 7;
  stroke-dasharray: 1 1;
  stroke-dashoffset: 1;
  animation: draw .75s cubic-bezier(.5, 0, .2, 1) forwards, stroke-off .45s ease forwards;
  animation-delay: calc(var(--g0, 0s) + var(--d, 0s)), calc(var(--g0, 0s) + 1.5s);
}

.logo-svg .f {
  fill: currentColor;
  fill-rule: evenodd;
  opacity: 0;
  animation: fill-in .6s ease forwards;
  animation-delay: calc(var(--g0, 0s) + 1s);
}

@keyframes draw       { to { stroke-dashoffset: 0; } }
@keyframes fill-in    { to { opacity: 1; } }
@keyframes stroke-off { to { stroke-opacity: 0; } }

.logo-svg { width: 66px; aspect-ratio: 580 / 950; }

@media (prefers-reduced-motion: reduce) {
  .logo-svg .s path { animation: none; stroke-dashoffset: 0; stroke-opacity: 0; }
  .logo-svg .f { animation: none; opacity: 1; }
}