.hero-scenes{position:absolute;top:0;bottom:0;left:calc((100% - 100vw)/2);width:100vw;z-index:0;pointer-events:none;overflow:visible;-webkit-mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent);mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent)}
.hero-scenes svg{display:block;width:100%;height:100%}
.landscape-scene,.coder-scene{position:absolute;inset:0;opacity:0;transition:opacity .65s ease}
.is-design .landscape-scene,.is-coder .coder-scene{opacity:1}
.hero-inner.scene-fading .landscape-scene,.hero-inner.scene-fading .coder-scene{opacity:0}
.hero-inner.scene-fading .code-background{opacity:.82;transition:opacity .65s ease}
.hero-label:focus,.hero-label:focus-visible{outline:none}
.hero-label:focus-visible h1:after,.hero-label:focus-visible h2:after{transform:scaleX(1)}
.hero-inner.scene-fading .hero-label h1,.hero-inner.scene-fading .hero-label h2{color:#303030}
.hero-inner.is-design .code-background,.hero-inner.is-coder .code-background{opacity:0;transition:opacity .4s}
.paint-reveal path{stroke-dasharray:1;stroke-dashoffset:1}
.is-design .paint-reveal path{animation:paint-landscape 1.15s ease-in-out forwards}
.is-design .paint-reveal path:nth-child(2){animation-delay:.8s}
.is-design .paint-reveal path:nth-child(3){animation-delay:1.6s}
@keyframes paint-landscape{to{stroke-dashoffset:0}}
.painting-brush{opacity:0;transform:translate(0,265px)}
.is-design .painting-brush{animation:paint-with-brush 2.8s ease-in-out forwards}
@keyframes paint-with-brush{0%{opacity:0;transform:translate(10px,265px)}5%{opacity:1}33%{transform:translate(1040px,265px)}38%{transform:translate(1040px,370px)}64%{transform:translate(20px,370px)}70%{transform:translate(20px,465px)}94%{opacity:1;transform:translate(1040px,465px)}100%{opacity:0;transform:translate(1060px,465px)}}
.coder-scene{background:linear-gradient(0deg,#e9f3f780,transparent 55%)}
.circuit-scene{position:absolute;inset:0}
.circuit-lines path{stroke-dasharray:1;stroke-dashoffset:1}
.is-coder .circuit-lines path{animation:paint-landscape 2s .1s ease forwards}
.is-coder .circuit-lines path:nth-child(2){animation-delay:.35s}
.is-coder .circuit-lines path:nth-child(3){animation-delay:.7s}
.circuit-nodes{opacity:0}.is-coder .circuit-nodes{animation:nodes-light 2s .8s ease-in-out infinite alternate}
@keyframes nodes-light{from{opacity:.25}to{opacity:.85}}
.is-coder .data-pixels rect{animation:data-float 3s ease-in-out infinite alternate}
.is-coder .data-pixels rect:nth-child(2n){animation-delay:-1.2s}.is-coder .data-pixels rect:nth-child(3n){animation-delay:-2s}
@keyframes data-float{from{transform:translateY(0);opacity:.25}to{transform:translateY(-15px);opacity:.9}}
.floating-editor{position:absolute;right:max(32px,calc((100vw - 1060px)/2));bottom:24px;width:277px;background:#233238f2;border:1px solid #547d8860;border-radius:6px;box-shadow:0 12px 25px #314c5420;transform:translateY(15px);opacity:0}
.floating-editor-bar{height:27px;display:flex;align-items:center;gap:4px;border-bottom:1px solid #ffffff14;padding:0 11px;color:#9cbdc5;font:9px Consolas,monospace}
.floating-editor-bar i{display:block;border-radius:50%;height:5px;width:5px;background:#759ba4}.floating-editor-bar i:first-child{background:#cd907e}.floating-editor-bar i:nth-child(2){background:#d6bb83}.floating-editor-bar span{margin-left:auto}
.floating-editor code{display:block;padding:15px 17px;font:11px/1.85 Consolas,monospace;color:#dae7e8;white-space:pre}
.terminal-line{display:block;clip-path:inset(0 100% 0 0)}.terminal-line b{font-weight:400;color:#9cc6e0}.terminal-line em{font-style:normal;color:#e0c997}.terminal-cursor{color:#8fcdbe}
.is-coder .floating-editor{animation:editor-appear .6s .1s ease forwards}
@keyframes editor-appear{to{opacity:1;transform:translateY(0)}}
.is-coder .terminal-line{animation:terminal-type .7s steps(23,end) forwards;animation-delay:.5s}.is-coder .terminal-line:nth-child(2){animation-delay:1s}.is-coder .terminal-line:nth-child(3){animation-delay:1.5s}.is-coder .terminal-line:nth-child(4){animation-delay:1.9s}.is-coder .terminal-line:nth-child(5){animation-delay:2s}.is-coder .terminal-line:nth-child(6){animation-delay:2.2s}
@keyframes terminal-type{to{clip-path:inset(0 0 0 0)}}
.build-result{position:absolute;left:27px;bottom:35px;display:flex;gap:11px;align-items:center;padding:13px 17px;background:#fff;border:1px solid #b7cfcc;box-shadow:0 8px 23px #365c5020;border-radius:5px;font:10px Consolas,monospace;color:#426b61;opacity:0;transform:translateY(12px)}
.build-result small{display:block;color:#9ba8a5;font-size:8px;margin-top:4px}.build-check{width:22px;height:22px;border-radius:50%;background:#e3f1e9;display:grid;place-items:center;color:#52836c;font-size:14px}.is-coder .build-result{animation:editor-appear .6s 2.65s ease forwards}
.hero-label h1,.hero-label h2{transition:color .3s,letter-spacing .5s,text-shadow .5s}.is-design .designer h1{color:#387a6b}.is-coder .coder h2{color:#356b7b}
@media(max-width:950px){.floating-editor{width:235px;bottom:17px;right:10px}.floating-editor code{font-size:9px;padding:11px}.build-result{left:17px;font-size:8px;padding:10px}}
@media(max-width:650px){.hero-scenes .landscape-scene,.hero-scenes .circuit-scene{width:180%;left:-40%}.floating-editor{width:172px;right:5px;bottom:10px}.floating-editor code{font-size:7px;padding:8px}.floating-editor-bar{height:20px;font-size:7px}.build-result{left:7px;bottom:18px;font-size:7px;padding:8px;gap:5px}.build-result small{font-size:6px}.build-check{height:16px;width:16px;font-size:11px}}
.motion-disabled .paint-reveal path{stroke-dashoffset:0}.motion-disabled .painting-brush{display:none}.motion-disabled .floating-editor,.motion-disabled .build-result{opacity:1;transform:none}.motion-disabled .terminal-line{clip-path:none}.motion-disabled .circuit-lines path{stroke-dashoffset:0}.motion-disabled .circuit-nodes{opacity:1}
@media(prefers-reduced-motion:reduce){.hero-scenes *{animation:none!important;transition:none!important}.paint-reveal path,.circuit-lines path{stroke-dashoffset:0}.painting-brush{display:none}.floating-editor,.build-result{opacity:1;transform:none}.terminal-line{clip-path:none}.circuit-nodes{opacity:1}}
/* Houd de zwevende elementen binnen de inhoud; alleen het landschap en netwerk lopen door. */
.build-result{left:max(32px,calc((100vw - 1060px)/2 + 27px))}
@media(max-width:950px){.floating-editor{right:28px}.build-result{left:28px}}
@media(max-width:650px){.hero-scenes{-webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}.floating-editor{right:16px}.build-result{left:16px}}
.hero-inner.scene-fading .code-background{opacity:.82;transition:opacity .65s ease}
/* Verberg de gewone code ook wanneer de hoverstijl of intro actief is. */
.hero-inner:is(.is-coder,.is-design):not(.scene-fading) .code-background{opacity:0!important;transition:opacity .65s ease}
.hero-inner.scene-fading .code-background{opacity:.82!important;transition:opacity .65s ease}
.floating-editor code{font-size:10px;line-height:1.55;padding:12px 16px}
.floating-editor .terminal-line{width:max-content;max-width:100%;min-height:1.55em;position:relative}
.is-coder .floating-editor .terminal-line{animation:terminal-type var(--typing-duration) steps(var(--typing-steps),end) var(--typing-delay) forwards}
.floating-editor .terminal-line:after{content:'▌';color:#9ed4c3;opacity:0}
.is-coder .floating-editor .terminal-line:after{animation:typing-caret var(--typing-duration) linear var(--typing-delay) both}
@keyframes typing-caret{0%,95%{opacity:1}100%{opacity:0}}
.is-coder .floating-editor .terminal-line:last-child:after{animation:terminal-caret-blink 1s step-end 4.6s infinite}
@keyframes terminal-caret-blink{0%,49%{opacity:1}50%,100%{opacity:0}}
.is-coder .build-result{animation-delay:4.95s}
@media(max-width:950px){.floating-editor code{font-size:9px;padding:10px 12px}}
@media(max-width:650px){.floating-editor code{font-size:7px;line-height:1.6;padding:8px}.floating-editor .terminal-line{min-height:1.6em}}
.motion-disabled .floating-editor .terminal-line:after{display:none}
@media(prefers-reduced-motion:reduce){.floating-editor .terminal-line:after{display:none}}
.floating-editor{bottom:12px}@media(max-width:650px){.floating-editor{bottom:10px}}