/* MC-Node — VPS-serveranimatie (v2.2, 08-10-2026; ronde v2c: bovenrand van de hero minder vervaagd, zodat de switch met
   de netwerkkabels in beeld blijft; v2c-fix: zijranden 5% (hero) en 4% (dicht), bovenrand dicht 10%, zodat poorten,
   kabels en "10G" niet in de vervaging vallen; v2e: bovenrand hero 9% en dicht 8%, zodat het patchpaneel met de
   PletX-uplinks boven de switch scherp in beeld blijft). Hoort bij js/vps-server.js.
   Markup: <div class="mcsrv" data-mcserver="premium" [data-mcserver-framing="dicht|auto"] [data-mcserver-intro="boot"]>
           [<picture>…<img class="mcsrv-poster" ...></picture> (hero, SEO-ronde 3) | <noscript><img class="mcsrv-poster" ...></noscript>]</div>
   Het blok heeft een vaste verhouding (geen layout shift); de randen lopen zacht weg in de pagina-achtergrond.
   hero = 4:3 (rack met vloer), .is-dicht = 16:9 (alleen de server, voor het keuzepaneel en de AI-bouwlog),
   .is-solo = 16:9 (ai-v3: de server los, zonder rack, voor de AI-adviseur). */
.mcsrv{position:relative;display:block;width:100%;aspect-ratio:4/3;overflow:hidden;isolation:isolate;
  -webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 9%,#000 86%,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 9%,#000 86%,transparent 100%),linear-gradient(to right,transparent 0,#000 5%,#000 95%,transparent 100%);
          mask-composite:intersect}
.mcsrv.is-dicht{aspect-ratio:16/9;
  -webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 8%,#000 86%,transparent 100%),linear-gradient(to right,transparent 0,#000 4%,#000 96%,transparent 100%);
          mask-image:linear-gradient(to bottom,transparent 0,#000 8%,#000 86%,transparent 100%),linear-gradient(to right,transparent 0,#000 4%,#000 96%,transparent 100%)}
/* ai-v3 (09-10): .is-solo = alleen de server, los boven het raster (AI-adviseur); 16:9, randen zacht weg, onderrand ruimer */
.mcsrv.is-solo{aspect-ratio:16/9;
  -webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 24%,#000 74%,transparent 100%),linear-gradient(to right,transparent 0,#000 7%,#000 93%,transparent 100%);
  -webkit-mask-composite:source-in;
          mask-image:linear-gradient(to bottom,transparent 0,#000 24%,#000 74%,transparent 100%),linear-gradient(to right,transparent 0,#000 7%,#000 93%,transparent 100%);
          mask-composite:intersect}
.mcsrv.is-solo.is-wait::before{inset:20% 14% 18%;background:radial-gradient(ellipse at 50% 55%,rgba(46,155,255,.12),rgba(46,155,255,0) 70%)}
.mcsrv-canvas{position:absolute;inset:0;width:100%!important;height:100%!important;display:block;opacity:0;transition:opacity .7s ease}
.mcsrv.is-live .mcsrv-canvas{opacity:1}
/* SEO-ronde 3 (09-10): 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 */
.mcsrv-poster{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;transition:opacity .7s ease,visibility 0s linear 0s}
.mcsrv.is-live .mcsrv-poster{opacity:0;visibility:hidden;transition:opacity .7s ease,visibility 0s linear .7s}
/* tijdens het laden: alleen een zachte gloed op de plek van de server, zodat het blok niet leeg oogt */
.mcsrv.is-wait::before{content:"";position:absolute;inset:16% 18% 20%;pointer-events:none;
  background:radial-gradient(ellipse at 50% 62%,rgba(46,155,255,.10),rgba(46,155,255,0) 70%)}
.mcsrv.is-dicht.is-wait::before{inset:22% 8%;background:radial-gradient(ellipse at 50% 50%,rgba(46,155,255,.12),rgba(46,155,255,0) 70%)}
@media (prefers-reduced-motion: reduce){.mcsrv-canvas,.mcsrv-poster{transition:none}}