/* Real-time geometry and scroll choreography; content stays readable without WebGL. */
.brand-mark { background:transparent!important; border:0!important; box-shadow:none!important; overflow:visible; }
.brand-mark img { display:block; width:46px; height:46px; max-width:none; }
.system-canvas,.delivery-webgl { position:absolute; inset:0; width:100%; height:100%; display:block; pointer-events:none; }
.system-canvas { z-index:1; opacity:0; transition:opacity .7s ease; }
.webgl-active .system-canvas { opacity:1; }
.webgl-active .orbital-sphere { opacity:0; }
.orbital-stage .orbit-node,.orbital-stage .orbital-coordinate { z-index:2; }
.orbital-stage { isolation:isolate; }
.orbital-stage::after { position:absolute; content:""; inset:14%; z-index:-1; background:radial-gradient(ellipse,color-mix(in srgb,var(--system-color) 13%,transparent),transparent 65%); filter:blur(35px); }
.hero-primary { transform:translate3d(0,calc(var(--hero-depth,0) * -35px),0); }
.system-visual { transform:perspective(900px) rotateX(calc(var(--hero-depth,0) * 7deg)) translate3d(0,calc(var(--hero-depth,0) * 24px),0); transform-origin:center; }
.visual-heading { margin-bottom:10px; }
.visual-heading span:first-child { color:var(--text); }
.motion-controls { display:flex; justify-content:center; gap:10px; margin-top:14px; }
.motion-toggle { border:1px solid var(--line); border-radius:100px; padding:8px 13px; background:transparent; color:var(--muted); font:9px var(--mono-font); cursor:pointer; }
.motion-toggle:hover,.motion-toggle:focus-visible { border-color:var(--accent); color:var(--text); }
.page-scroll-meter { position:fixed; top:0; left:0; right:0; height:2px; z-index:100; pointer-events:none; }
.page-scroll-meter i { display:block; width:100%; height:100%; transform:scaleX(var(--page-progress,0)); transform-origin:left; background:linear-gradient(90deg,var(--accent),#91c5f9,#c2abfa); box-shadow:0 0 14px var(--accent); }
.scroll-readout { position:fixed; right:25px; bottom:22px; z-index:50; color:var(--muted); font:8px var(--mono-font); letter-spacing:.08em; pointer-events:none; padding:8px 10px; border:1px solid var(--line); border-radius:5px; background:var(--header); backdrop-filter:blur(12px); }
.delivery-canvas { isolation:isolate; overflow:hidden; }
.delivery-webgl { z-index:0; opacity:.62; }
.delivery-grid { opacity:.25; }
.delivery-terminal,.delivery-checks,.delivery-image,.delivery-cluster,.delivery-cloud,.delivery-metrics,.delivery-status,.delivery-progress { z-index:2; }
.delivery-visual { perspective:1200px; }
.delivery-depth { transform:rotateX(65deg) rotateZ(calc(var(--story-ratio,0) * 45deg)); }
.delivery-terminal { backdrop-filter:blur(12px); }
.project-card { position:relative; min-height:420px; transform:perspective(1200px) rotateX(var(--tilt-x,0deg)) rotateY(var(--tilt-y,0deg)); transition:transform .35s ease,border-color .35s ease,box-shadow .35s ease; }
.project-card:hover { border-color:var(--line-strong); box-shadow:0 24px 70px #0002; }
.project-card::after { content:""; position:absolute; inset:0; border-radius:inherit; background:radial-gradient(300px circle at var(--spot-x,50%) var(--spot-y,0%),color-mix(in srgb,var(--accent) 5%,transparent),transparent 75%); opacity:0; pointer-events:none; transition:opacity .35s; }
.project-card:hover::after { opacity:1; }
.reveal-ready .project-card.is-visible { transform:perspective(1200px) rotateX(var(--tilt-x,0deg)) rotateY(var(--tilt-y,0deg)); }
.reveal-ready .hero-primary.is-visible { transform:translate3d(0,calc(var(--hero-depth,0) * -35px),0); }
.reveal-ready .system-visual.is-visible { transform:perspective(900px) rotateX(calc(var(--hero-depth,0) * 7deg)) translate3d(0,calc(var(--hero-depth,0) * 24px),0); }
.project-card .project-description { font-size:13px; line-height:1.9; color:var(--muted); }
.project-card h3 { font-size:28px; }
.project-links a:first-child { color:var(--accent-strong); }
.project-links { padding-top:28px; }
body[data-motion="paused"] *,body[data-motion="paused"] *::before,body[data-motion="paused"] *::after { animation-play-state:paused!important; }
body[data-motion="paused"] .hero-primary,body[data-motion="paused"] .system-visual,body[data-motion="paused"] .project-card { transform:none!important; }
@media(max-width:760px){.project-card{min-height:0}.project-card .project-description{font-size:13px}.scroll-readout{display:none}.motion-toggle{min-height:36px}.delivery-webgl{opacity:.45}.brand-mark img{width:40px;height:40px}}
@media(prefers-reduced-motion:reduce){.hero-primary,.system-visual,.project-card{transform:none!important}.system-canvas{transition:none}.project-card{transition:none}.page-scroll-meter i{box-shadow:none}}
@media print{.system-canvas,.delivery-webgl,.page-scroll-meter,.scroll-readout,.motion-controls{display:none!important}}