/* machina-splash.css — the 1541 opening (4 Nov 2026, v6: SIXFIVE/OS; Datassette, 1702, C64 and joystick drawn in behind). */
.mxs{position:fixed;inset:0;overflow:hidden}
.mxs a{text-decoration:none}
.mxs-drive{position:absolute;left:50%;top:50%;width:min(900px,94vw);max-height:86vh;transform:translate(-50%,-52%);z-index:0;transition:opacity 1.4s ease,transform 1.6s ease}
.mxs-drive path,.mxs-drive rect,.mxs-drive circle{fill:none;stroke:#7fa6dc;stroke-width:1.4;vector-effect:non-scaling-stroke}
.mxs-drive .mxs-fine{stroke:#4f6f9e;stroke-width:1}
.mxs-drive .mxs-grid path{stroke:#22385f;stroke-width:1}
.mxs-drive .mxs-dims path{stroke:#3d5a8a;stroke-width:1}
.mxs-drive path[pathLength]{stroke-dasharray:1;stroke-dashoffset:1;animation:mxs-draw 1.6s ease forwards}
.mxs-grid path{animation-duration:2.4s!important}
.mxs-body path:nth-child(1){animation-delay:.4s}
.mxs-body path:nth-child(2){animation-delay:.9s}
.mxs-body path:nth-child(3){animation-delay:1.4s}
.mxs-body path:nth-child(n+4){animation-delay:1.9s}
.mxs-front path{animation-delay:2.2s}
.mxs-front .mxs-latch path{animation-delay:2.5s}
.mxs-dims path{animation-delay:2.6s}
.mxs-note,.mxs-badge,.mxs-sub,.mxs-tiny{fill:#7fa6dc;font-family:'Courier New',monospace;opacity:0;animation:mxs-fade .9s ease forwards}
.mxs-note{font-size:10px;letter-spacing:.12em;fill:#4f6f9e;animation-delay:3.1s}
.mxs-badge{font-size:12px;letter-spacing:.22em;animation-delay:2.9s}
.mxs-sub{font-size:7px;letter-spacing:.24em;fill:#4f6f9e;animation-delay:3.1s}
.mxs-tiny{font-size:5px;letter-spacing:.12em;fill:#4f6f9e;animation-delay:3.1s}
.mxs-led{fill:#0c1f12;stroke:none;transition:fill .3s}
.mxs-led--drive{fill:#24100f}
.mxs.is-led .mxs-led--power{fill:#39ff5a;filter:drop-shadow(0 0 4px #39ff5a) drop-shadow(0 0 10px #39ff5a)}
.mxs.is-busy .mxs-led--drive{animation:mxs-flick .35s steps(2) infinite}
.mxs-latch{transform-box:fill-box;transform-origin:50% 50%;transition:transform .5s ease}
.mxs.is-latched .mxs-latch{transform:rotate(90deg)}
.mxs-disk{opacity:0;transform:translate(-92.6px,53.8px)}
.mxs-disk rect,.mxs-disk circle{stroke:#a9c6f0;stroke-width:1.3}
.mxs-disk .mxs-label{fill:rgba(169,198,240,.10)}
.mxs-disk .mxs-notch{fill:#0a1226}
.mxs-hand{fill:#d7e6fa;font-family:'Segoe Print','Bradley Hand','Comic Sans MS',cursive;font-size:15px;stroke:none}
.mxs-disk__face{transform-box:view-box;transform-origin:0 0;transform:matrix(1.3,0,0,1.3,124,305.4);transition:transform 1.1s cubic-bezier(.45,.05,.3,1)}
.mxs.is-disk .mxs-disk{animation:mxs-show .7s ease forwards}
.mxs.is-tilt .mxs-disk__face{transform:matrix(1.3,0,-0.5615,0.3262,124,305.4)}
.mxs.is-insert .mxs-diskclip{clip-path:url(#mxs-out)}
.mxs.is-insert .mxs-disk{opacity:1;animation:mxs-insert 1.5s cubic-bezier(.45,.05,.3,1) forwards}
.mxs-type{fill:#9ec0ee;font-family:'Courier New',monospace;font-size:14px;letter-spacing:.14em;white-space:pre}
.mxs.is-ghost .mxs-drive{opacity:.06;transform:translate(-50%,-60%) scale(1.12)}
.mxs-inner{position:relative;z-index:1}
.mxs .mxs-mark,.mxs .mxs-rule,.mxs .mxs-tag,.mxs .mxs-stripe{opacity:0;animation:none}
.mxs.is-title .mxs-mark{animation:mxs-rise 1.6s ease forwards}
.mxs.is-title .mxs-rule{animation:mxs-fade 1.1s ease .7s forwards}
.mxs.is-title .mxs-tag{animation:mxs-fade 1.2s ease 1.05s forwards}
.mxs.is-title .mxs-stripe{animation:mxs-fade 1.1s ease 1.4s forwards}
.mxs-stripe{display:flex;gap:4px;justify-content:center;margin:22px auto 0}
.mxs-stripe i{display:block;width:34px;height:4px;border-radius:2px}
.mxs-worlds{display:flex;flex-wrap:wrap;gap:14px 40px;justify-content:center;margin-top:26px}
.mxs-world{font-family:var(--serif,Georgia,serif);font-size:clamp(20px,2.4vw,30px);letter-spacing:.06em;color:var(--c);opacity:0;transform:translateY(8px)}
.mxs.is-title .mxs-world{animation:mxs-world 1.1s ease var(--d) forwards}
.mxs-skip{opacity:1!important;animation:none!important;z-index:3}
.mxs-sound{position:absolute;left:28px;bottom:28px;z-index:3;display:flex;align-items:center;gap:8px;background:transparent;border:1px solid #2a3a5e;border-radius:18px;color:#6f86ad;padding:6px 14px;font-size:12px;letter-spacing:.14em;text-transform:uppercase;cursor:pointer}
.mxs-sound svg{width:16px;height:16px}
.mxs-sound .mxs-on{display:none}
.mxs-sound[aria-pressed="true"]{color:#a9c6f0;border-color:#4f6f9e}
.mxs-sound[aria-pressed="true"] .mxs-on{display:inline}
.mxs-sound[aria-pressed="true"] .mxs-off{display:none}
@keyframes mxs-draw{to{stroke-dashoffset:0}}
@keyframes mxs-fade{to{opacity:1}}
@keyframes mxs-show{to{opacity:1}}
@keyframes mxs-rise{from{opacity:0;transform:translateY(14px);letter-spacing:.6em}to{opacity:1;transform:none}}
@keyframes mxs-world{to{opacity:1;transform:none}}
@keyframes mxs-flick{0%{fill:#ff3b30}50%{fill:#3a1210}}
@keyframes mxs-insert{from{transform:translate(-92.6px,53.8px)}to{transform:translate(0,0)}}
@media (prefers-reduced-motion:reduce){
  .mxs *,.mxs-drive path[pathLength]{animation:none!important;transition:none!important}
  .mxs-drive path[pathLength]{stroke-dashoffset:0}
  .mxs-drive{opacity:.06}
  .mxs .mxs-mark,.mxs .mxs-rule,.mxs .mxs-tag,.mxs .mxs-stripe,.mxs-world,.mxs-note,.mxs-badge,.mxs-sub,.mxs-tiny{opacity:1;transform:none}
  .mxs-disk{display:none}
}

/* v6: the other machines, drawn in faintly behind the drive */
.mxs-bg{position:absolute;inset:0;width:100%;height:100%;z-index:0;pointer-events:none;transition:opacity 1.6s ease}
.mxs-bg path{fill:none;stroke:#2c4878;stroke-width:1.2;vector-effect:non-scaling-stroke;stroke-dasharray:1;stroke-dashoffset:1}
.mxs-bg .mxs-bgf{stroke:#23395f;stroke-width:1}
.mxs-bg .mxs-bgd{stroke:#22385f}
.mxs-bgi{opacity:0;animation:mxs-fade 1.4s ease var(--bd) forwards}
.mxs-bgi path{animation:mxs-draw 2.6s ease var(--bd) forwards}
.mxs-bgt,.mxs-bgs{fill:#33507f;font-family:'Courier New',monospace;stroke:none;opacity:0;animation:mxs-fade 1.2s ease calc(var(--bd) + 1.8s) forwards}
.mxs-bgt{font-size:12px;letter-spacing:.22em}
.mxs-bgs{font-size:8px;letter-spacing:.16em;fill:#2c4878}
.mxs-bgscr{font-size:13px;fill:#3a5c92}
.mxs.is-ghost .mxs-bg{opacity:.55}
@media (max-width:900px){.mxs-bg{display:none}}
@media (prefers-reduced-motion:reduce){
  .mxs-bg path{stroke-dashoffset:0}
  .mxs-bgi,.mxs-bgt,.mxs-bgs{opacity:1}
  .mxs-bg{opacity:.55}
}

/* v6: 4-6 catalog words fly in from above and settle in a row at the bottom (from 15.6 s) */
.mxs-fly{position:absolute;left:0;right:0;bottom:84px;z-index:2;display:flex;flex-wrap:wrap;justify-content:center;gap:10px 30px;padding:0 160px;pointer-events:none}
.mxs-flyw{pointer-events:auto;font-family:'Courier New',monospace;font-size:13px;letter-spacing:.18em;text-transform:uppercase;color:#6f8fc0;opacity:0;
  transform:translate(var(--fx),var(--fy)) rotate(var(--fr)) scale(1.8);animation:mxs-fly 1.9s cubic-bezier(.2,.75,.25,1) var(--fd) forwards}
.mxs-flyw:hover{color:#a9c6f0}
@keyframes mxs-fly{0%{opacity:0}35%{opacity:.9}100%{opacity:1;transform:none}}
@media (max-width:900px){.mxs-fly{padding:0 20px;bottom:70px}.mxs-flyw{font-size:11px}}
@media (prefers-reduced-motion:reduce){.mxs-flyw{opacity:1;transform:none;animation:none}}

/* v8: each background machine glows in its own colour (--gc, shuffled per load), like the 1541's haze */
.mxs-bg .mxs-bgglow{fill:var(--gc);stroke:none;opacity:0;filter:blur(46px);animation:mxs-glow 2.4s ease var(--bd) forwards}
.mxs-bgi path{stroke:color-mix(in srgb,var(--gc) 38%,#2c4878)}
.mxs-bgi .mxs-bgf{stroke:color-mix(in srgb,var(--gc) 26%,#23395f)}
.mxs-bgi .mxs-bgt,.mxs-bgi .mxs-bgs{fill:color-mix(in srgb,var(--gc) 40%,#33507f)}
@keyframes mxs-glow{to{opacity:.16}}
@media (prefers-reduced-motion:reduce){.mxs-bg .mxs-bgglow{opacity:.16}}