/* An isolated, scroll-driven prologue. The portfolio below retains its layout. */
html,body{overflow-x:clip}
.machine-story{height:300svh;position:relative;background:transparent;color:#f7f5ef;--blueprint:0;margin-bottom:calc(-1 * var(--machine-stage-height,100svh) + var(--machine-landing-space,96px))}
.machine-stage{height:100svh;min-height:580px;position:sticky;top:0;overflow:hidden;isolation:isolate;background:#ff5a1f;z-index:6;pointer-events:none}
.machine-stage::before{content:'';position:absolute;inset:0;z-index:-1;background-image:linear-gradient(#50665f18 1px,transparent 1px),linear-gradient(90deg,#50665f18 1px,transparent 1px);background-size:44px 44px;opacity:calc(.15 + var(--blueprint)*.7);mask-image:radial-gradient(ellipse at 65% 50%,#000,transparent 75%)}
.machine-top{position:absolute;top:38px;left:4.5%;right:4.5%;display:flex;align-items:center;justify-content:space-between;z-index:3;font:11px 'JetBrains Mono',monospace;letter-spacing:.1em}
.machine-brand{font-weight:600;display:flex;gap:12px;align-items:center}.machine-brand::before{content:'';width:8px;height:8px;background:#ff5a1f;border-radius:50%;box-shadow:0 0 18px #ff5a1f66}
.machine-tools{display:flex;gap:24px;align-items:center}.machine-tools a,.machine-tools button{cursor:pointer;border-bottom:1px solid #17191740;padding:8px 0;font:inherit}
.machine-tools :focus-visible,.machine-chapters button:focus-visible,.machine-enter:focus-visible{outline:2px solid #ff5a1f;outline-offset:6px}
.machine-canvas{position:absolute;inset:12% 0 16% 38%;z-index:0}.machine-canvas canvas{display:block;width:100%;height:100%}
.machine-copy{position:absolute;left:8%;top:29%;width:32%;z-index:2;pointer-events:none}
.machine-kicker{font:10px 'JetBrains Mono',monospace;letter-spacing:.17em;text-transform:uppercase;display:flex;gap:16px;align-items:center}.machine-kicker::before{content:'';height:1px;width:26px;background:#ff5a1f}
.machine-copy h2{font-size:clamp(44px,5.8vw,92px);line-height:.96;letter-spacing:-.065em;font-weight:800;margin:24px 0}.machine-copy h2 em{color:#df4815;font-style:normal}
.machine-copy p{font-size:14px;line-height:1.65;max-width:290px;color:#555b57;margin:0}
.machine-enter{display:inline-flex;align-items:center;gap:30px;font:11px 'JetBrains Mono',monospace;letter-spacing:.06em;margin-top:26px;padding:14px 0;border-bottom:1px solid currentColor;pointer-events:auto;cursor:pointer}
.machine-enter[hidden]{display:none}
.machine-index{position:absolute;right:5%;top:24%;font:10px 'JetBrains Mono',monospace;letter-spacing:.08em;color:#616761;line-height:1.8;text-align:right;pointer-events:none}
.machine-index strong{display:block;color:#191e1b;font-weight:500}
.machine-caption{position:absolute;bottom:140px;right:7%;font:9px 'JetBrains Mono',monospace;letter-spacing:.13em;text-transform:uppercase;color:#64716a;display:flex;align-items:center;gap:10px}.machine-caption::before{content:'+';font-size:24px;color:#ff5a1f}
.machine-bottom{position:absolute;bottom:36px;left:4.5%;right:4.5%;z-index:3}.machine-progress{height:1px;background:#17191724;position:relative;margin-bottom:23px}.machine-progress span{position:absolute;inset:0;background:#ff5a1f;transform:scaleX(0);transform-origin:left}
.machine-chapters{display:flex;justify-content:space-between;gap:10px}.machine-chapters button{font:10px 'JetBrains Mono',monospace;letter-spacing:.08em;color:#757a75;cursor:pointer;display:flex;gap:14px;align-items:center;padding:8px 0}.machine-chapters button span{font-size:9px;opacity:.6}.machine-chapters button[aria-current="step"]{color:#141b16}.machine-chapters button[aria-current="step"] span{color:#e84e1a;opacity:1}
.machine-scroll{font:9px 'JetBrains Mono',monospace;letter-spacing:.14em;margin-top:16px;color:#686d68;text-align:center}
.machine-labels{position:absolute;inset:0;pointer-events:none;z-index:1}.machine-label{position:absolute;max-width:170px;opacity:0;transform:translateY(8px);font:10px 'JetBrains Mono',monospace;border-top:1px solid #6b8175;padding-top:10px;line-height:1.8;color:#35483c}.machine-label b{display:block;font-weight:500;font-size:11px}.machine-label small{font:9px 'JetBrains Mono',monospace;color:#6f7e73}.machine-label::before{content:'';position:absolute;right:100%;top:-1px;width:30px;border-top:1px solid #6b8175;transform:rotate(30deg);transform-origin:right}
.machine-label:nth-child(1){left:52%;top:23%}.machine-label:nth-child(2){right:5%;top:47%}.machine-label:nth-child(3){left:55%;bottom:23%}
.machine-fallback{position:absolute;left:55%;top:38%;width:28%;font:14px/1.7 'JetBrains Mono',monospace;color:#6b7069}.machine-ready .machine-fallback{display:none}
.machine-static{height:100svh;min-height:640px}.machine-static .machine-stage{position:relative}.machine-static .machine-chapters,.machine-static .machine-scroll{display:none}
.machine-story:not(.machine-ready){height:100svh;min-height:640px}.machine-story:not(.machine-ready) .machine-chapters,.machine-story:not(.machine-ready) #machine-pause{display:none}
@media(max-width:700px){
 .machine-story{height:280svh}.machine-stage{min-height:620px}.machine-top{top:24px;left:7%;right:7%;font-size:9px}.machine-tools{gap:14px}.machine-brand{gap:7px}
 .machine-canvas{inset:34% 0 16% 0}
 .machine-copy{left:8%;top:15%;width:84%;pointer-events:none}.machine-copy h2{font-size:46px;max-width:300px;margin:15px 0;letter-spacing:-.055em}.machine-copy p{font-size:12px;max-width:280px;line-height:1.55}.machine-kicker{font-size:8px}.machine-index{top:43%;right:8%;font-size:8px}.machine-caption{bottom:119px;right:8%;font-size:7px}.machine-bottom{bottom:22px;left:8%;right:8%}.machine-chapters button{font-size:8px;gap:5px;flex-direction:column}.machine-progress{margin-bottom:12px}.machine-scroll{font-size:8px;margin-top:10px}.machine-label{max-width:120px;font-size:8px}.machine-label b{font-size:9px}.machine-label small{font-size:7px}.machine-label:nth-child(1){left:9%;top:48%}.machine-label:nth-child(2){right:7%;top:64%}.machine-label:nth-child(3){left:12%;bottom:22%}.machine-enter{margin-top:12px;padding:9px 0;font-size:10px}.machine-fallback{left:15%;top:55%;width:70%}.machine-static{height:100svh;min-height:640px}
}
@media(prefers-reduced-motion:reduce){.machine-story{height:100svh;min-height:640px}.machine-stage{position:relative}.machine-chapters,.machine-scroll{display:none}}

/* Orange prologue dissolves over the original hero at the end of the scroll. */
.machine-top a,.machine-top button,.machine-chapters button{pointer-events:auto}
.machine-brand::before{background:#f7f5ef;box-shadow:0 0 18px #fff5}
.machine-tools a,.machine-tools button{border-color:#f7f5ef70}
.machine-tools :focus-visible,.machine-chapters button:focus-visible,.machine-enter:focus-visible{outline-color:#fff}
.machine-copy h2 em{color:#e0e0e0}
.machine-copy p,.machine-index,.machine-caption,.machine-scroll,.machine-fallback{color:#f3ede8}
.machine-index strong,.machine-chapters button[aria-current="step"],.machine-chapters button[aria-current="step"] span{color:#fff}
.machine-kicker::before,.machine-progress span{background:#fff}
.machine-caption::before{color:#fff}
.machine-progress{background:#fff5}.machine-chapters button{color:#f1e5de}
.machine-stage::before{background-image:linear-gradient(#f6f4e938 1px,transparent 1px),linear-gradient(90deg,#f6f4e938 1px,transparent 1px)}
.machine-label{color:#fff;border-color:#fff9}.machine-label small{color:#f4e8df}.machine-label::before{border-color:#fff9}
.machine-canvas{transform-origin:55% 50%;will-change:transform,opacity}
.machine-static,.machine-story:not(.machine-ready){margin-bottom:0}
@media(prefers-reduced-motion:reduce){.machine-story{margin-bottom:0}}

/* Contrast anchors; retain white headings and grey emphasis. */
.machine-brand,.machine-tools,.machine-kicker,.machine-copy p,.machine-index,
.machine-index strong,.machine-caption,.machine-scroll,.machine-label small{color:var(--ink)}
.machine-tools a,.machine-tools button{border-color:rgba(14,14,12,.44)}
.machine-chapters button[aria-current="step"],.machine-chapters button[aria-current="step"] span{color:var(--ink)}


/* Mouse-only spark overlay; never intercepts navigation or touch gestures. */
.machine-pointer-orb{position:absolute;left:0;top:0;width:18px;height:18px;margin:-9px 0 0 -9px;border-radius:50%;background:radial-gradient(circle at 32% 28%,#f3fffd 0%,#99fff5 22%,#63fff2 50%,#21c7c4 100%);box-shadow:0 0 12px #63fff2b0,0 0 32px #63fff266;pointer-events:none;z-index:4;opacity:0;will-change:transform}
.machine-pointer-orb::before,.machine-pointer-orb::after{content:'';position:absolute;inset:-17px;border:1px solid #63fff2b3;border-radius:50%;opacity:0}
.machine-pointer-orb::after{inset:-27px;border-color:#63fff277}
.machine-pointer-orb.has-rings::before,.machine-pointer-orb.has-rings::after{opacity:1}
@media(prefers-reduced-motion:reduce){.machine-pointer-orb{display:none}}

.machine-orb-spark{position:absolute;left:0;top:0;width:5px;height:5px;margin:-2.5px;border-radius:50%;background:#bafff8;box-shadow:0 0 7px 2px #63fff2a6,0 0 15px #63fff266;opacity:0;pointer-events:none;z-index:3;will-change:transform,opacity}
@media(prefers-reduced-motion:reduce){.machine-orb-spark{display:none}}

/* Mobile browser chrome can retract after load: cover the live viewport. */
@supports(height:100dvh){.machine-stage{height:100dvh}}

.machine-label[hidden]{display:none}