/* Scroll-driven atmosphere; the page stays readable without scripts. */
body{isolation:isolate;--glow-strength:4%;--glow-soft:2%;--haze-strength:3%;--section-strength:2%}
:root[data-theme="dark"] body{--glow-strength:17%;--glow-soft:7%;--haze-strength:19%;--section-strength:9%}
.scroll-atmosphere{position:fixed;inset:0;z-index:-1;overflow:hidden;pointer-events:none;opacity:0;transition:opacity .6s ease}
.motion-active .scroll-atmosphere{opacity:1}
.atmosphere-glow{position:absolute;width:100vmax;height:100vmax;left:-45vmax;top:-35vmax;border-radius:50%;background:radial-gradient(circle,color-mix(in srgb,var(--accent) var(--glow-strength),transparent) 0%,color-mix(in srgb,var(--accent) var(--glow-soft),transparent) 35%,transparent 67%);transform:translate3d(var(--glow-x,0px),var(--glow-y,0px),0);will-change:transform}
.atmosphere-glow.secondary{left:auto;right:-50vmax;top:20vh;width:85vmax;height:85vmax;background:radial-gradient(circle,color-mix(in srgb,var(--line) var(--haze-strength),transparent),transparent 66%);transform:translate3d(calc(var(--glow-x,0px) * -.6),calc(var(--glow-y,0px) * -.7),0)}
.atmosphere-orbit{position:absolute;width:80vmin;height:80vmin;right:-42vmin;top:20vh;border:1px solid color-mix(in srgb,var(--accent) 19%,transparent);border-radius:50%;transform:translateY(var(--orbit-y,0px)) rotate(var(--orbit-turn,0deg));will-change:transform}
.atmosphere-orbit:before{content:"";position:absolute;inset:9%;border:1px solid color-mix(in srgb,var(--line) 22%,transparent);border-radius:50%;transform:translateX(-20%)}
.reading-progress{position:absolute;bottom:-1px;left:0;right:0;height:2px;background:var(--accent);transform:scaleX(var(--reading-progress,0));transform-origin:left;pointer-events:none}
.motion-active .header{background:color-mix(in srgb,var(--paper) 94%,transparent);backdrop-filter:blur(14px)}
.motion-active .hero-portrait>img,.motion-active .about-photo>img{transform:translate3d(0,var(--photo-shift,0px),0) scale(1.07);will-change:transform}
.motion-active .case-photo>img{transition:transform .75s cubic-bezier(.2,.65,.3,1)}
.case:hover .case-photo>img{transform:scale(1.045)}
.motion-active .product-preview{transform:translate3d(0,var(--preview-shift,0px),0);will-change:transform}
.contact-option{position:relative;overflow:hidden}
.contact-option:after{content:"";position:absolute;top:-70%;left:-50%;width:28%;height:230%;background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--chalk) 8%,transparent),transparent);transform:rotate(24deg) translateX(-250%);pointer-events:none;transition:transform .7s ease}
.contact-option:hover:after,.contact-option:focus-visible:after{transform:rotate(24deg) translateX(750%)}
.contact-option .contact-arrow{transition:transform .25s ease}
.contact-option:hover .contact-arrow{transform:translate(3px,-3px)}
.services,.context,.product-section,.process,.examples,.contact{position:relative}
.motion-active .services:before,.motion-active .product-section:before{content:"";position:absolute;inset:0;pointer-events:none;z-index:-1;background:linear-gradient(125deg,transparent,color-mix(in srgb,var(--accent) var(--section-strength),transparent),transparent);opacity:var(--section-glow,0)}
@media(max-width:679px){.atmosphere-orbit{right:-58vmin}.atmosphere-glow{width:130vmax;height:130vmax;left:-60vmax;top:-40vmax}.motion-active .product-preview{transform:none}}
@media(prefers-reduced-motion:reduce){.scroll-atmosphere,.reading-progress{display:none}.motion-active .hero-portrait>img,.motion-active .about-photo>img,.motion-active .product-preview,.case:hover .case-photo>img{transform:none}.motion-active .services:before,.motion-active .product-section:before{display:none}.contact-option:after{display:none}.contact-option:hover .contact-arrow{transform:none}}

/* Gelaagde systeemarchitectuur: vervaagd, zonder tekst of neonkleuren. */
.motion-network{display:block;overflow:visible;pointer-events:none;--network-play:paused}
.motion-network path,.motion-network circle{vector-effect:non-scaling-stroke;stroke-linejoin:round;stroke-linecap:round}
.scene-scroll{transform:translateY(var(--structure-lift,0px)) rotate(var(--structure-turn,0deg));transform-origin:300px 250px}
.architecture-grid,.architecture-circuits,.architecture-columns,.stack-spine{fill:none;stroke:var(--line);stroke-width:.75}
.architecture-grid{opacity:.26}
.architecture-circuits{opacity:.7}
.architecture-columns{stroke-dasharray:3 7;opacity:.55}
.architecture-base,.architecture-satellites{fill:color-mix(in srgb,var(--paper) 28%,transparent);stroke:var(--line);stroke-width:1}
.architecture-base{fill:color-mix(in srgb,var(--accent) 5%,transparent)}
.architecture-nodes{fill:var(--accent);stroke:none;opacity:.7}
.core-side{fill:color-mix(in srgb,var(--line) 18%,transparent);stroke:var(--line);stroke-width:1}
.core-top,.stack-layer{fill:color-mix(in srgb,var(--paper) 45%,transparent);stroke:var(--line);stroke-width:1}
.core-seam{fill:none;stroke:var(--line);stroke-width:.8}
.core-light{fill:color-mix(in srgb,var(--accent) 32%,var(--paper));stroke:var(--accent);stroke-width:.8}
.stack-layer.upper{fill:color-mix(in srgb,var(--accent) 7%,transparent)}
.stack-spine{opacity:.4}
.atmosphere-orbit{width:88vmin;height:65vmin;right:-22vmin;top:22vh;border:0;border-radius:0;opacity:.16;filter:blur(.8px)}
.atmosphere-orbit:before{display:none}
.orbit-network{width:100%;height:100%;mask-image:radial-gradient(ellipse,#000 32%,transparent 73%)}
:root[data-theme="dark"] .atmosphere-orbit{opacity:.23}
.floating-stack{animation:structure-float 7s ease-in-out infinite;animation-play-state:var(--network-play)}
.core-breathe{animation:core-breathe 6s ease-in-out infinite;animation-play-state:var(--network-play)}
.architecture-circuits .signal-flow{stroke:var(--accent);stroke-width:1.2;stroke-dasharray:4 86;animation:signal-flow 12s linear infinite;animation-play-state:var(--network-play)}
.stack-layer.upper{transform:translateY(var(--stack-spread,0px))}
.stack-layer.middle{transform:translateY(calc(var(--stack-spread,0px) * .5))}
@keyframes structure-float{0%,100%{transform:translateY(4px)}50%{transform:translateY(-12px)}}
@keyframes core-breathe{0%,100%{opacity:.65}50%{opacity:1}}
@keyframes signal-flow{to{stroke-dashoffset:-180}}
@media(max-width:679px){.atmosphere-orbit{right:-34vmin;opacity:.13}}
@media(prefers-reduced-motion:reduce){.motion-network *{animation:none!important}.scene-scroll,.stack-layer.upper,.stack-layer.middle{transform:none}}