/* Soundinator home-page machine (machine-v2.svg).
   Drawn by scripts/draw_home_machine.py. Ink contours are FILLED tapered
   shapes (.o-ink), so they scale with the zoom like real ink; hatching and
   strings are thin strokes that scale with them. The page lights one part at
   a time by adding .lit to its .o-part group; only that part turns amber. */

.hm-machine {
  --o-ink: #ecebe6;          /* contour ink */
  --o-ink-soft: #a9a8a2;     /* hatching */
  --o-accent: #f5a623;       /* the one accent, on the lit part only */
  /* solid, shaded planes (owner 2026-10-17): mid greys that read as an object
     against the black ground, still dark beside a bright aesthetic */
  --o-panel: #3b3a37;        /* faces toward the viewer */
  --o-plane-top: #514f4b;    /* upward planes */
  --o-plane-side: #22211f;   /* planes turned from the light */
  --o-paper: #5c5a55;        /* the program sheet, the drum head */
  --o-bell: #161514;         /* inside of the horn: the deepest shadow */
  display: block;
}

/* materials: each part its own muted, dark hue, so the machine reads as built
   things, and the one bright amber (the lit part's ink) still stands alone */
.hm-machine #pBody, .hm-machine [data-o="pBody"]    { --o-panel: #3a2e25; --o-plane-top: #4c3d31; --o-plane-side: #221a14; }   /* walnut */
.hm-machine #pCrank, .hm-machine [data-o="pCrank"]   { --o-panel: #343b42; --o-plane-top: #48505a; --o-plane-side: #1c2126; }   /* cast iron */
.hm-machine #pRoll, .hm-machine [data-o="pRoll"]    { --o-panel: #3d3229; --o-plane-top: #4f4135; --o-plane-side: #241d17; --o-paper: #7a705c; }   /* wood, cream paper */
.hm-machine #pCabinet, .hm-machine [data-o="pCabinet"] { --o-panel: #263a31; --o-plane-top: #34503f; --o-plane-side: #142019; --o-paper: #6f6754; }   /* green lacquer */
.hm-machine #pHorn, .hm-machine [data-o="pHorn"]    { --o-panel: #4d4030; --o-plane-top: #61523c; --o-plane-side: #2b2319; --o-bell: #1e170e; }   /* aged bronze */
.hm-machine #pDrum, .hm-machine [data-o="pDrum"]    { --o-panel: #4a2626; --o-plane-top: #5e3333; --o-plane-side: #2a1414; --o-paper: #7a705c; }   /* oxblood, cream head */

.hm-machine .o-ink,
.hm-machine .o-fill { fill: var(--o-ink); }
.hm-machine .o-front { fill: var(--o-panel); }
.hm-machine .o-top { fill: var(--o-plane-top); }
.hm-machine .o-side { fill: var(--o-plane-side); }
.hm-machine .o-paper,
.hm-machine .o-head { fill: var(--o-paper); }
.hm-machine .o-bell { fill: var(--o-bell); }
.hm-machine .o-back { fill: var(--o-plane-side); }

.hm-machine .o-hatch,
.hm-machine .o-line,
.hm-machine .o-hair,
.hm-machine .o-detail,
.hm-machine .o-sheet,
.hm-machine .o-dot {
  fill: none;
  stroke-linecap: round;
}
.hm-machine .o-hatch { stroke: var(--o-ink-soft); stroke-width: 0.6; opacity: 0.85; }
.hm-machine .o-hatch-soft { stroke-width: 0.45; opacity: 0.8; }
.hm-machine .o-line { stroke: var(--o-ink); stroke-width: 0.7; }
.hm-machine .o-hair { stroke: var(--o-ink); stroke-width: 0.75; }
.hm-machine .o-detail { stroke: var(--o-ink-soft); stroke-width: 0.6; stroke-dasharray: 2 6; }
.hm-machine .o-sheet { stroke: var(--o-ink-soft); stroke-width: 0.8; stroke-linecap: butt; }
.hm-machine .o-dot { stroke: var(--o-ink); stroke-width: 2.6; }

/* Lit part: its ink, hatching and accents turn amber. */
.hm-machine .o-part { transition: color 0.4s; }
.hm-machine .o-part.lit .o-ink,
.hm-machine .o-part.lit .o-fill { fill: var(--o-accent); }
.hm-machine .o-part.lit .o-hatch,
.hm-machine .o-part.lit .o-line,
.hm-machine .o-part.lit .o-hair,
.hm-machine .o-part.lit .o-sheet,
.hm-machine .o-part.lit .o-dot,
.hm-machine .o-part.lit .o-detail { stroke: var(--o-accent); }
.hm-machine .o-part.lit .o-hatch { opacity: 0.85; }

/* Motion: paused until the part is lit. */
.hm-machine .m-spin,
.hm-machine .m-roll,
.hm-machine .m-pulse,
.hm-machine .m-slide,
.hm-machine .m-swing,
.hm-machine .m-tilt,
.hm-machine .m-wave {
  animation-play-state: paused;
  animation-iteration-count: infinite;
}
.hm-machine .m-spin { animation: o-spin 7s linear infinite paused; }
.hm-machine .m-roll { animation: o-roll 5s linear infinite paused; }
.hm-machine .m-pulse { animation: o-pulse 1.1s steps(2, jump-none) infinite paused; }
.hm-machine .m-slide { animation: o-slide 1.8s ease-in-out infinite paused; }
.hm-machine .m-swing { animation: o-swing 0.9s cubic-bezier(0.5, 0, 0.75, 0) infinite paused; }
.hm-machine .m-tilt { animation: o-tilt 0.9s ease-in-out infinite paused; }
/* Waves exist only while the horn is lit (a paused, delayed wave would
   freeze mid-fade as a smudge). */
.hm-machine .m-wave { opacity: 0; animation: none; }
.hm-machine .o-part.lit .m-wave { animation: o-wave 1.8s ease-out infinite; }

.hm-machine .o-part.lit .m-spin,
.hm-machine .o-part.lit .m-roll,
.hm-machine .o-part.lit .m-pulse,
.hm-machine .o-part.lit .m-slide,
.hm-machine .o-part.lit .m-swing,
.hm-machine .o-part.lit .m-tilt { animation-play-state: running; }

@keyframes o-spin { to { transform: rotate(360deg); } }
@keyframes o-roll { to { stroke-dashoffset: -120; } }
@keyframes o-pulse { 0% { opacity: 1; } 100% { opacity: 0.25; } }
@keyframes o-slide {
  0%, 100% { transform: translate(calc(-1 * var(--sx, 9px)), calc(-1 * var(--sy, 0px))); }
  50% { transform: translate(var(--sx, 9px), var(--sy, 0px)); }
}
@keyframes o-swing {
  0%, 60%, 100% { transform: rotate(0deg); }
  80% { transform: rotate(7deg); }
}
@keyframes o-tilt {
  0%, 100% { transform: rotate(0deg); }
  30% { transform: rotate(-2.5deg); }
  65% { transform: rotate(1.5deg); }
}
@keyframes o-wave {
  0% { transform: translate(0, 0); opacity: 0; }
  25% { opacity: 1; }
  100% { transform: translate(var(--wx), var(--wy)); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .hm-machine .m-spin,
  .hm-machine .m-roll,
  .hm-machine .m-pulse,
  .hm-machine .m-slide,
  .hm-machine .m-swing,
  .hm-machine .m-tilt,
  .hm-machine .m-wave,
  .hm-machine .o-part.lit .m-wave { animation: none; }
  .hm-machine .o-part.lit .m-wave { opacity: 1; }
}