/* Stak Maker process loops (assets/motion/motion.js). Brand colours come from app.css tokens;
   the --mx-* values are illustration materials (machine plastics, metal, mat), used only here. */
.sm-motion {
  --mo-or: var(--laser, #ff7a2f); --mo-logo: #ff904d; --mo-ink: var(--ink, #0c1f3d); --mo-deep: var(--laser-deep, #c2410c);
  --mo-acc: var(--mint, #7fd8be);
  --mx-red: #b3292b; --mx-grey: #8b94a1; --mx-grey-2: #6a7380; --mx-black: #0f131a; --mx-brass: #c9a063;
  --mx-champ: #ece7df; --mx-champ-2: #d8d1c5; --mx-mat: #a9cbf6; --mx-mat-2: #d4e6fd;
  position: relative; display: block; width: 100%; aspect-ratio: 16 / 10; overflow: hidden; isolation: isolate;
  border-radius: var(--r, 12px); background: var(--mo-ink); contain: layout paint;
}
.sm-motion--laser { --mo-acc: var(--butter, #ffd166); background: #141a24; }
.sm-motion--vinyl { --mo-acc: var(--sky, #7cb8ff); background: var(--frost-2, #e2e7ee); }
.sm-motion__stage { position: absolute; inset: 0; }
.sm-motion__stage > svg { display: block; width: 100%; height: 100%; }
/* modes: --bare drops the machine body (for drawing over a darkened photo), --over fills a positioned parent, --chip is the 96px product-page badge */
.sm-motion--bare, .sm-motion--chip { background: transparent; }
.sm-motion--bare .mc, .sm-motion--chip .mc { display: none; }
.sm-motion--over { position: absolute; inset: 0; aspect-ratio: auto; border-radius: inherit; }
.sm-motion--chip { border-radius: var(--r-sm, 8px); }
.sm-motion--chip .smm-hud { display: none; }

/* step caption (decorative; the screen-reader caption sits beside the stage) */
.smm-hud {
  position: absolute; left: 12px; top: 12px; display: inline-flex; align-items: center; gap: 7px; max-width: calc(100% - 24px);
  padding: 6px 11px 6px 9px; border-radius: var(--r-xs, 6px); background: rgba(10, 19, 34, .66); color: #fff;
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1);
  font: 600 var(--fs-xs, 12px)/1.1 var(--f, system-ui, sans-serif); letter-spacing: .01em; font-variant-numeric: tabular-nums; white-space: nowrap;
  visibility: hidden;
}
.is-on .smm-hud { visibility: visible; }
.smm-pp-box .smm-hud { max-width: calc(100% - 64px); } /* clear of the pause button */
.smm-hud b { font-weight: 600; overflow: hidden; text-overflow: ellipsis; }
/* live dot: the halo pulses only while the loop runs (motion.js sets .is-live; paused or off screen it rests) */
.smm-hud i { position: relative; flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--mo-acc); }
.smm-hud i::after { content: ''; position: absolute; inset: -3px; border-radius: 50%; background: color-mix(in srgb, var(--mo-acc) 28%, transparent); animation: smm-pulse 1.6s var(--ease-out) infinite paused; }
[data-sm-motion].is-live .smm-hud i::after { animation-play-state: running; }
@keyframes smm-pulse { 50% { transform: scale(1.4); opacity: 0; } }
/* pause/play (motion.js): on the card link's parent or the loop box, never inside a link. Zero specificity, so a positioned box keeps its position.
   It mirrors the HUD's inset; --pp-pad is the card padding around the loop when the button sits on the card's <li>. */
:where(.smm-pp-box) { position: relative; }
.smm-pp { position: absolute; top: calc(var(--pp-pad, 0px) + 12px); right: calc(var(--pp-pad, 0px) + 12px); z-index: 4; width: 32px; height: 32px; padding: 0; border: 0; border-radius: 50%; background: rgba(10,19,34,.66); color: #fff; -webkit-tap-highlight-color: transparent; transition: scale var(--dur-press) var(--ease-out); }
@media (max-width: 420px) { .smm-hud { left: 8px; top: 8px; padding: 5px 9px 5px 7px; } .smm-pp { top: calc(var(--pp-pad, 0px) + 8px); right: calc(var(--pp-pad, 0px) + 8px); } }
.smm-pp::after { content: ''; position: absolute; inset: -6px; } /* 44px tap target */
.smm-pp::before { content: ''; display: block; width: 10px; height: 12px; margin: auto; background: linear-gradient(90deg, currentColor 0 35%, transparent 35% 65%, currentColor 65%); }
.smm-pp[aria-pressed='true']::before { width: 0; height: 0; margin-left: 12px; background: none; border-style: solid; border-width: 6px 0 6px 10px; border-color: transparent transparent transparent currentColor; }
.smm-pp:active { scale: .92; }
.smm-pp:focus-visible { outline-color: var(--laser-2); }
.sm-about-mach { --pp-pad: 10px; } /* /about/ machine cards */
@media (prefers-reduced-motion: reduce) { .smm-pp { display: none; } }

/* ---- 3D print ---- */
.p-wall { fill: var(--mo-ink); }
.p-ams { fill: #1b2029; } .p-lid { fill: rgba(28, 34, 46, .42); stroke: rgba(255, 255, 255, .1); }
.p-amsf { fill: #12161d; } .p-led { fill: #fff; opacity: .8; rx: 1.5; }
.p-f1 { fill: #22262e; } .p-f2 { fill: var(--frost, #eef1f4); } .p-f3 { fill: var(--mo-or); } .p-f4 { fill: var(--sky, #7cb8ff); }
.p-wind { fill: none; stroke: rgba(0, 0, 0, .14); stroke-width: 1.2; }
.p-hub { fill: #2a303b; stroke: rgba(255, 255, 255, .12); } .p-spk { fill: #464e5c; }
.p-body { fill: var(--mx-black); } .p-bhl { fill: rgba(255, 255, 255, .14); }
.p-ch { fill: #121925; } .p-lbar { fill: #fff; opacity: .55; } .p-z { fill: #0b0f15; } .p-door { fill: none; stroke: rgba(255, 255, 255, .1); stroke-width: 2; }
.p-tube { fill: none; stroke: rgba(236, 241, 248, .3); stroke-width: 4; stroke-linecap: round; }
.p-rod { fill: #0a0d12; } .p-rhl { fill: rgba(255, 255, 255, .2); }
.p-hb { fill: #2a2f38; } .p-pl { fill: #2b261a; } .p-spd { fill: rgba(214, 176, 98, .42); } .p-ple { fill: #1b1914; }
.p-plq { fill: #161b24; } .p-side { fill: #0b0e13; } .p-cap { fill: #313a49; }
.p-fr { fill: none; stroke: var(--mo-logo); stroke-width: 7.5; stroke-linecap: square; }
.p-wd { fill: #f3f5f8; } .p-hot { fill: #fff; fill-opacity: .16; }
.p-th { fill: #1b212c; } .p-thf { fill: #242b37; } .p-thl { fill: rgba(255, 255, 255, .2); } .p-thk { fill: #333b48; }
.p-blk { fill: #4a515e; } .p-noz { fill: var(--mx-brass); } .p-gw { mix-blend-mode: screen; }

/* ---- laser ---- */
.l-lid { fill: var(--mx-red); } .l-bed { fill: #0d131c; }
.l-hex { fill: none; stroke: rgba(160, 190, 230, .16); stroke-width: 1; }
.l-tick { fill: none; stroke: var(--butter, #ffd166); stroke-width: 1.2; opacity: .5; }
.l-sheet { fill: #141a24; } .l-sedge { fill: none; stroke: rgba(255, 255, 255, .09); }
.l-eng { fill: rgba(228, 234, 243, .84); }
.l-vec { fill: none; stroke: rgba(236, 241, 248, .88); stroke-width: 7.5; stroke-linecap: square; }
.l-nil { fill: none; stroke: none; }
.l-w { fill: #aab3c0; }
.l-rail { fill: var(--mx-grey-2); } .l-beam { fill: var(--mx-grey); } .l-belt { fill: #1a1f27; } .l-car { fill: var(--mx-red); }
.l-hd { fill: #9aa3ae; } .l-air { fill: none; stroke: rgba(255, 255, 255, .55); stroke-width: 3; stroke-linecap: round; }
.l-noz { fill: #1f252e; } .l-noz2 { fill: #06080c; } .l-dot { fill: #fff; } .l-halo { mix-blend-mode: screen; }
.l-win { fill: none; stroke: rgba(255, 255, 255, .14); stroke-width: 2; } .l-hdl { fill: var(--mx-grey-2); }

/* ---- vinyl ---- */
.v-tray { fill: var(--frost-2, #e2e7ee); }
.v-mat { fill: var(--mx-mat); } .v-matb { fill: var(--mx-mat-2); }
.v-grid { fill: none; stroke: rgba(40, 100, 180, .2); stroke-width: 1; }
.v-vin { fill: var(--mo-or); } .v-shd { fill: var(--mo-ink); opacity: 0; }
.v-cut { fill: none; stroke: var(--mo-deep); stroke-width: 1.3; vector-effect: non-scaling-stroke; stroke-linejoin: round; }
.v-tape { fill: rgba(255, 255, 255, .42); stroke: rgba(255, 255, 255, .9); stroke-width: 1; vector-effect: non-scaling-stroke; }
.v-tg { fill: none; stroke: rgba(12, 31, 61, .09); stroke-width: 1; vector-effect: non-scaling-stroke; }
.v-hs { fill: var(--mx-champ); } .v-hse { fill: var(--mx-champ-2); }
.v-tw { fill: #f1ede7; } .v-twe { fill: rgba(12, 31, 61, .08); }
.v-rail { fill: #2e3542; } .v-railh { fill: rgba(255, 255, 255, .16); }
.v-crs { fill: rgba(12, 31, 61, .28); } .v-cr { fill: #f8f6f2; }
.v-cla { fill: var(--mx-champ-2); } .v-clai { fill: #b7afa2; } .v-clb { fill: var(--mo-ink); } .v-bl { fill: #fff; }

/* ---- seasonal filament: inc/seasonal.php flags <html> by the visitor's Manila date; hexes from SM_FILAMENT_DEFAULT (inc/filaments.php).
   Print scene only, colour only (no timing). The sign prints from the first three AMS spools: plate = spool 1, lettering = spool 2,
   frame = spool 3 (spool 4 idles). The plate's edge and top face are shades of spool 1. The product-page chip keeps the shop colours. ---- */
.sm-season-october .sm-motion:not(.sm-motion--chip) { --sf1: #1b1f27; --sf2: #f08a24; --sf3: #f4f4f1; --sf4: #34a36a; } /* Black, Orange, White, Green */
.sm-season-xmas .sm-motion:not(.sm-motion--chip) { --sf1: #d23a30; --sf2: #f4f4f1; --sf3: #34a36a; --sf4: #f5c842; } /* Red, White, Green, Yellow */
:is(.sm-season-october, .sm-season-xmas) .sm-motion:not(.sm-motion--chip) .p-f1,
:is(.sm-season-october, .sm-season-xmas) .sm-motion:not(.sm-motion--chip) .p-plq { fill: var(--sf1); }
:is(.sm-season-october, .sm-season-xmas) .sm-motion:not(.sm-motion--chip) .p-f2,
:is(.sm-season-october, .sm-season-xmas) .sm-motion:not(.sm-motion--chip) .p-wd { fill: var(--sf2); }
:is(.sm-season-october, .sm-season-xmas) .sm-motion:not(.sm-motion--chip) .p-f3 { fill: var(--sf3); }
:is(.sm-season-october, .sm-season-xmas) .sm-motion:not(.sm-motion--chip) .p-fr { stroke: var(--sf3); }
:is(.sm-season-october, .sm-season-xmas) .sm-motion:not(.sm-motion--chip) .p-f4 { fill: var(--sf4); }
:is(.sm-season-october, .sm-season-xmas) .sm-motion:not(.sm-motion--chip) .p-side { fill: color-mix(in srgb, var(--sf1) 55%, #000); }
:is(.sm-season-october, .sm-season-xmas) .sm-motion:not(.sm-motion--chip) .p-cap { fill: color-mix(in srgb, var(--sf1) 82%, #fff); }