.hero-graphic {
  position: absolute;
  z-index: 0;
  right: 4vw;
  top: 41%;
  width: clamp(240px, 35vw, 560px);
  height: auto;
  aspect-ratio: 1100 / 950;
  transform: translateY(-50%);
  pointer-events: none;
  overflow: visible;
}
.hero-ribbon-left, .hero-ribbon-right { color: var(--daydream); }
.hero-ribbon-left { animation: ribbon-left-drift 8s ease-in-out infinite; }
.hero-ribbon-right { animation: ribbon-right-drift 8s ease-in-out infinite; }
.hero-connector { color: var(--ink); fill: none; stroke: currentColor; stroke-width: 7; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 0; }
.hero-connector-in { animation: signal-in 8s ease-in-out infinite; }
.hero-connector-out { animation: signal-out 8s ease-in-out infinite; }
.hero-signal { color: var(--caffeine); transform-box: fill-box; transform-origin: center; animation: signal-pulse 3s ease-in-out infinite; }
.hero-cut { transform-box: view-box; transform-origin: 455px 503px; transform: scaleX(1); opacity: 1; animation: ribbon-cut 8s linear infinite; }
@keyframes ribbon-left-drift {
  0%, 15%, 85%, 100% { transform: translate(0, 0); }
  40%, 55% { transform: translate(calc(-1 * var(--ribbon-shift, 20px)), 0); }
}
@keyframes ribbon-right-drift {
  0%, 15%, 85%, 100% { transform: translate(0, 0); }
  40%, 55% { transform: translate(var(--ribbon-shift, 20px), 0); }
}
@keyframes signal-in {
  0%, 90%, 100% { stroke-dashoffset: 1; }
  12%, 62% { stroke-dashoffset: 0; }
}
@keyframes signal-out {
  0%, 36%, 100% { stroke-dashoffset: 1; }
  52%, 72% { stroke-dashoffset: 0; }
}
@keyframes signal-pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(.5); }
}
@keyframes ribbon-cut {
  0%, 12% { transform: scaleX(0); opacity: 1; }
  38%, 62% { transform: scaleX(1); opacity: 1; }
  84% { transform: scaleX(1); opacity: 0; }
  100% { transform: scaleX(0); opacity: 0; }
}
@media (max-width: 1000px) {
  .hero-graphic { --ribbon-shift: 14px; width: clamp(280px, 65vw, 520px); right: 2vw; top: 42%; opacity: .18; }
}
@media (max-width: 800px) {
  .landing-main { padding-top: 36px; }
}
@media (prefers-reduced-motion: reduce), print {
  .hero-graphic use, .hero-cut { animation: none; }
}