/* MC-Node — dedicated-serveranimatie (v2, 09-10-2026). Hoort bij js/ded-server.js (eigen kopie van de VPS-opzet, vps-server.css
   is niet gewijzigd). Markup: <div class="dedsrv" data-ded3d="hero|binnen|solo">[<img class="dedsrv-poster" …> (hero, SEO-ronde 3)]</div>
   Vaste verhouding (geen layout shift): hero 4:3, binnen (configurator) 16:10, solo (AI-adviseur) 16:10. De randen van de
   hero en de solo-server lopen zacht weg. */
.dedsrv{position:relative;display:block;width:100%;aspect-ratio:4/3;overflow:hidden;isolation:isolate;
  -webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 8%,#000 88%,transparent 100%),linear-gradient(to right,transparent 0,#000 5%,#000 95%,transparent 100%);
  -webkit-mask-composite:source-in;
          mask-image:linear-gradient(to bottom,transparent 0,#000 8%,#000 88%,transparent 100%),linear-gradient(to right,transparent 0,#000 5%,#000 95%,transparent 100%);
          mask-composite:intersect}
.dedsrv.is-binnen{aspect-ratio:16/10;-webkit-mask-image:none;mask-image:none;
  background:radial-gradient(70% 80% at 50% 45%,rgba(46,155,255,.10),transparent 70%),#080c12}
.dedsrv.is-solo{aspect-ratio:16/10}
.dedsrv-canvas{position:absolute;inset:0;width:100%!important;height:100%!important;display:block;opacity:0;transition:opacity .7s ease}
/* SEO-ronde 3 (09-10): het canvas vloeit pas in als de scène tekent (.is-live); de regel stond per ongeluk op elk canvas */
.dedsrv.is-live .dedsrv-canvas{opacity:1}
/* SEO-ronde 3: de hero-poster staat in de HTML (LCP) en blijft ook tijdens het laden (.is-wait) staan; pas als de scène tekent
   (.is-live) vloeit hij in .7s over in het canvas (zelfde duur als het canvas) en verdwijnt hij daarna */
.dedsrv-poster{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;transition:opacity .7s ease,visibility 0s linear 0s}
.dedsrv.is-live .dedsrv-poster{opacity:0;visibility:hidden;transition:opacity .7s ease,visibility 0s linear .7s}
.dedsrv.is-wait::before{content:"";position:absolute;inset:16% 18% 20%;pointer-events:none;background:radial-gradient(ellipse at 50% 55%,rgba(46,155,255,.10),rgba(46,155,255,0) 70%)}
@media (prefers-reduced-motion: reduce){.dedsrv-canvas,.dedsrv-poster{transition:none}}