/* ═════════════════════════════════════════════════════════════════════════
   OPBOUW BIJ HET OPENEN (15-10-2026) — PROEF

   Zijn wens: "kan het klantenportaal bij openen een soort opgebouwd worden,
   ziet er mooi uit … ik wil graag iets exclusiefs". Afgesproken: kort (± 1 s),
   alleen bij het openen, alles meteen bruikbaar, daarna staat alles stil —
   het portaal blijft rustig (klanten kijken in een loods op een trage telefoon).
   Niet op de scanpagina; niet bij "minder beweging" op het toestel.

   Werkt alleen zolang <body> de klasse xt-opbouw heeft. script.js (prOpbouw)
   zet die bij het openen en haalt hem na ± 2 s weer weg. Proef: alleen op een
   toestel waar het portaal één keer met ?opbouw=1 is geopend (?opbouw=0 = uit).
   topklasse.css zet alle beweging uit met !important; deze regels zijn
   specifieker (body.xt-opbouw …) en winnen dus alleen tijdens de opbouw.
   ═════════════════════════════════════════════════════════════════════════ */
@keyframes xoIn{from{opacity:0;transform:translateY(16px);}to{opacity:1;transform:none;}}
@keyframes xoLogo{from{opacity:0;transform:scale(.9);}to{opacity:1;transform:none;}}
@keyframes xoGlans{from{transform:translateX(-110%);}to{transform:translateX(110%);}}
@keyframes xoBalk{from{transform:scaleX(0);}to{transform:scaleX(1);}}
@keyframes xoLijn{from{transform:scaleX(0);opacity:0;}to{transform:scaleX(1);opacity:1;}}

/* De kop: logo verschijnt, één gouden glans strijkt eroverheen. */
body.xt-opbouw .hdr{position:relative;overflow:hidden;}
body.xt-opbouw .hdr::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:3;
  background:linear-gradient(100deg,transparent 30%,rgba(196,160,98,.10) 42%,rgba(244,226,168,.42) 50%,rgba(196,160,98,.10) 58%,transparent 70%);
  animation:xoGlans 1.15s .2s cubic-bezier(.4,0,.2,1) both;}
body.xt-opbouw .hdr::before{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;z-index:3;pointer-events:none;transform-origin:left;
  background:linear-gradient(90deg,transparent,#b0853a 15%,#e8cd88 45%,#f4e2a8 55%,#b0853a 85%,transparent);
  animation:xoLijn .9s .1s cubic-bezier(.2,.7,.3,1) both;}
body.xt-opbouw .hdr-in img{animation:xoLogo .55s cubic-bezier(.2,.7,.3,1) both!important;}
body.xt-opbouw .hdr-title,body.xt-opbouw .hdr-meta{animation:xoIn .45s .15s cubic-bezier(.2,.7,.3,1) both!important;}

/* De titel en de tegels, kort na elkaar (de getallen tellen al op: xtCountUp). */
body.xt-opbouw .hero h2{animation:xoIn .45s .2s cubic-bezier(.2,.7,.3,1) both!important;}
body.xt-opbouw .stats .stat{animation:xoIn .5s cubic-bezier(.2,.7,.3,1) both!important;}
body.xt-opbouw .stats .stat:nth-child(1){animation-delay:.28s!important;}
body.xt-opbouw .stats .stat:nth-child(2){animation-delay:.34s!important;}
body.xt-opbouw .stats .stat:nth-child(3){animation-delay:.40s!important;}
body.xt-opbouw .stats .stat:nth-child(4){animation-delay:.46s!important;}
body.xt-opbouw .stats .stat:nth-child(5){animation-delay:.52s!important;}
body.xt-opbouw .stats .stat:nth-child(n+6){animation-delay:.58s!important;}

/* De statusbalk loopt vol, van links naar rechts. */
body.xt-opbouw .health{animation:xoIn .45s .5s cubic-bezier(.2,.7,.3,1) both!important;}
body.xt-opbouw .hb-track{transform-origin:left center;animation:xoBalk .75s .62s cubic-bezier(.2,.7,.3,1) both!important;}

/* Daarna de knoppen, tabbladen en de lijst. */
body.xt-opbouw .invbar,body.xt-opbouw .tabs,body.xt-opbouw .ptabs{animation:xoIn .45s .7s cubic-bezier(.2,.7,.3,1) both!important;}
body.xt-opbouw .rtable tbody tr{animation:xoIn .4s .8s cubic-bezier(.2,.7,.3,1) both!important;}

@media (prefers-reduced-motion: reduce){
  body.xt-opbouw *,body.xt-opbouw *::before,body.xt-opbouw *::after{animation:none!important;}
  body.xt-opbouw .hdr::after,body.xt-opbouw .hdr::before{display:none;}
}