.sidewire {
  position: fixed;
  top: 0; bottom: 0;
  left: 6px;
  width: 14px;
  color: var(--fg-dim);
  opacity: 0.4;
  animation: wire-pulse 4s ease-in-out infinite;
}
@keyframes wire-pulse { 50% { opacity: 0.85; } }

@supports (animation-timeline: scroll()) {
  .sidewire path {
    animation: wire-fill linear;
    animation-timeline: scroll();
  }
  @keyframes wire-fill { from { stroke-dashoffset: 1000; } to { stroke-dashoffset: 0; } }
}

@media (max-width: 640px) { .sidewire { display: none; } }

::view-transition-old(root),
::view-transition-new(root) { animation-duration: 220ms; }

@media (prefers-reduced-motion: reduce) {
  .sidewire { animation: none; }
}

:root[data-motion="off"] .sidewire { display: none; }

#whoami   { view-transition-name: section-whoami; }
#skills   { view-transition-name: section-skills; }
#projects { view-transition-name: section-projects; }
#hail     { view-transition-name: section-hail; }

:root[data-motion="off"] *,
:root[data-motion="off"] *::before,
:root[data-motion="off"] *::after {
  animation-duration: 0s !important;
  animation-iteration-count: 1 !important;
  transition-duration: 0s !important;
}
@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.001s !important; transition-duration: 0.001s !important; }
}