/* ServerSpark animaties: bliksem-overgang, serverkasten in de hero, inschuiven bij scrollen. */

/* ================= bliksem-overgang tussen pagina's ================= */
#strike{position:fixed;inset:0;z-index:100;pointer-events:none;opacity:0;will-change:opacity;display:grid;place-items:center;background:#070a0f}
#strike .halo{position:absolute;width:520px;height:520px;left:50%;top:45%;margin:-260px 0 0 -260px;border-radius:50%;
  background:radial-gradient(closest-side,rgba(255,176,32,.35),rgba(46,155,255,.14) 55%,transparent);opacity:0;will-change:opacity,transform}
#strike svg{position:relative;width:min(30vw,170px);height:auto;overflow:visible;will-change:transform,opacity}
#strike .bolt{fill:#ffb020;fill-opacity:0;stroke:#fff3d6;stroke-width:.8;stroke-linejoin:round;stroke-dasharray:110;stroke-dashoffset:110}
#strike .flash{position:absolute;inset:0;background:#cfe6ff;opacity:0;will-change:opacity}
html.leaving #strike{opacity:.96;transition:opacity .12s ease-out}
html.leaving #strike .bolt{animation:bolt-draw .24s cubic-bezier(.7,0,.3,1) forwards}
html.leaving #strike svg{animation:bolt-drop .24s cubic-bezier(.7,0,.3,1) forwards}
html.leaving #strike .halo{animation:halo .3s ease-out .14s forwards}
html.leaving #strike .flash{animation:flash .3s ease-out .18s}
html.arriving #strike{opacity:.96}
html.arriving #strike .bolt{stroke-dashoffset:0;fill-opacity:1}
html.arriving #strike .halo{opacity:1}
html.arrived #strike{opacity:0;transition:opacity .35s ease-out}
@keyframes bolt-draw{0%{stroke-dashoffset:110;fill-opacity:0}70%{fill-opacity:.25}100%{stroke-dashoffset:0;fill-opacity:1}}
@keyframes bolt-drop{from{transform:translateY(-24px);opacity:.6}to{transform:none;opacity:1}}
@keyframes halo{from{opacity:0;transform:scale(.6)}to{opacity:1;transform:none}}
@keyframes flash{0%{opacity:0}25%{opacity:.55}100%{opacity:0}}

/* ================= serverkasten + bliksem in de hero ================= */
.rackscape{position:relative;z-index:1;margin:60px auto 0;max-width:900px;height:210px}
.rackscape svg.racks{position:absolute;left:0;right:0;bottom:0;width:100%;height:170px}
.rack-body{fill:#0d1420;stroke:rgba(255,255,255,.12);stroke-width:1.5}
.rack-slot{fill:#111c2b;stroke:rgba(255,255,255,.05)}
.ground{position:absolute;left:5%;right:5%;bottom:-2px;height:2px;background:linear-gradient(90deg,transparent,rgba(46,155,255,.5),transparent)}
.sky-bolt{position:absolute;top:-70px;width:70px;height:240px;opacity:0;pointer-events:none;overflow:visible;will-change:opacity;
  filter:drop-shadow(0 0 7px rgba(255,176,32,.9))}
.sky-bolt path{fill:none;stroke:#fff1c9;stroke-width:3;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:420;stroke-dashoffset:420}
.sky-bolt.go{animation:sky .6s ease-out forwards}
.sky-bolt.go path{animation:sky-draw .18s cubic-bezier(.7,0,.3,1) forwards}
@keyframes sky{0%,55%{opacity:1}100%{opacity:0}}
@keyframes sky-draw{to{stroke-dashoffset:0}}
.hero-flash{position:absolute;left:0;bottom:-120px;width:700px;height:420px;margin-left:-350px;background:radial-gradient(closest-side,rgba(255,220,150,.22),transparent);opacity:0;pointer-events:none;z-index:0;will-change:opacity,transform;transform:translateX(var(--fx,50vw))}
.hero-flash.go{animation:flash .5s ease-out}
.spark{position:absolute;width:3px;height:3px;border-radius:50%;background:#ffd27a;will-change:transform,opacity;pointer-events:none;animation:spark .7s ease-out forwards}
@keyframes spark{to{transform:translate(var(--dx),var(--dy));opacity:0}}

/* ================= zacht inschuiven bij scrollen ================= */
.reveal{opacity:0;transform:translateY(18px);transition:opacity .6s ease-out,transform .7s cubic-bezier(.2,.7,.2,1)}
.reveal.in{opacity:1;transform:none}

@media (max-width:700px){.rackscape{height:140px;margin-top:40px}.rackscape svg.racks{height:110px}}
@media (prefers-reduced-motion:reduce){
  #strike{display:none}
    .reveal{opacity:1;transform:none;transition:none}

  .sky-bolt,.spark,.hero-flash{display:none}
}
.hero{padding-top:96px;padding-bottom:0}
.hero h1{font-size:clamp(38px,6.2vw,62px)}
.hero p.lead{margin:22px auto 30px}
.facts{margin-top:34px}
.rackscape{margin-top:40px;height:190px}
.hero + section{border-top:1px solid var(--line)}

#strike{top:72px}

/* lampjes: 3 lagen die alleen in doorzichtigheid knipperen (goedkoop, via de GPU) */
.leds{will-change:opacity;animation:blink 2.2s steps(1,end) infinite}
.leds.l1{animation-duration:3.1s;animation-delay:-.7s}.leds.l2{animation-duration:1.7s;animation-delay:-1.1s}
@keyframes blink{0%{opacity:.9}50%{opacity:.15}}
.rackscape.paused .leds,.rackscape.paused .sky-bolt{animation-play-state:paused}
.rack-glow{position:absolute;bottom:0;border-radius:8px;opacity:0;pointer-events:none;will-change:opacity;
  box-shadow:0 0 0 1.5px rgba(255,176,32,.95),0 0 26px 2px rgba(255,176,32,.55),inset 0 0 24px rgba(255,176,32,.18)}
.rack-glow.go{animation:glow 1.6s ease-out}
@keyframes glow{0%{opacity:0}8%{opacity:1}100%{opacity:0}}
/* header zonder zware blur-filter */
header{backdrop-filter:none;-webkit-backdrop-filter:none;background:rgba(10,14,20,.93)}
@media (prefers-reduced-motion:reduce){.leds{animation:none;opacity:.6}.rack-glow{display:none}}
/* lichtere hero-achtergrond: stippen zonder mask, vervaging via een kleurverloop erboven */
.hero{contain:paint}
.hero::before{inset:0;height:auto}
.hero::after{-webkit-mask-image:none;mask-image:none;
  background-image:radial-gradient(ellipse at center,transparent 30%,var(--bg) 75%),radial-gradient(rgba(255,255,255,.07) 1px,transparent 1px);
  background-size:100% 100%,34px 34px}