/* ============================================================
   werkstroom3d.css - ModernizeNow, homepage
   ------------------------------------------------------------
   Een 3D-scene (alleen CSS, geen WebGL, geen bibliotheek) die laat
   zien wat een automatisering doet: een offerteaanvraag schuift over
   een band langs vier stations en eindigt bij jouw controle.

   Eisen waar dit aan houdt:
   - De scene is decoratief (aria-hidden). Precies dezelfde vier
     stappen staan als gewone tekst in de lijst ernaast.
   - Zonder JavaScript of met prefers-reduced-motion: een stilstaand,
     compleet beeld (offerte klaar, vinkje). Geen animatie.
   - De animatie start pas als de scene in beeld komt en pauzeert
     als hij uit beeld is (werkstroom3d.js).
   - Schaalt mee met de kolombreedte via container-eenheden, zodat
     er op 375px niets buiten beeld valt.
   - Een cyclus duurt 12s. Elk station is 3s aan de beurt; de
     tijdvakken van de lijst, de stations en het document lopen
     via dezelfde vertraging gelijk.
   ============================================================ */

.w3-grid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:clamp(28px,4vw,64px);align-items:center;}
@media(max-width:900px){.w3-grid{grid-template-columns:minmax(0,1fr);}}

/* ---- het paneel met de scene ---- */
.w3-scene{
  container-type:inline-size;
  position:relative;
  border-radius:var(--radius-l,24px);
  background:
    radial-gradient(ellipse 80% 70% at 50% 45%,rgba(58,185,228,.16),transparent 70%),
    linear-gradient(160deg,var(--navy-3,#132A4A),var(--navy,#0B1D33));
  box-shadow:var(--schaduw-l);
  overflow:hidden;
}
.w3-podium{
  font-size:clamp(6px,2.15cqw,13px);
  position:relative;
  width:44em;height:28em;
  margin:0 auto;
  perspective:140em;
  perspective-origin:50% 30%;
}
.w3-vloer{
  position:absolute;
  left:47%;top:60%;
  width:42em;height:13em;
  margin:-6.5em 0 0 -21em;
  transform-style:preserve-3d;
  transform:rotateX(58deg) rotateZ(32deg);
  border-radius:1.2em;
  background-color:rgba(234,246,252,.035);
  background-image:
    linear-gradient(rgba(234,246,252,.07) 1px,transparent 1px),
    linear-gradient(90deg,rgba(234,246,252,.07) 1px,transparent 1px);
  background-size:3em 3em;
  box-shadow:inset 0 0 0 1px rgba(234,246,252,.1);
}

/* ---- de band tussen de stations ---- */
.w3-band{
  position:absolute;
  left:1.6em;right:1.6em;top:10.6em;height:1.3em;
  border-radius:.6em;
  background:
    repeating-linear-gradient(90deg,rgba(138,214,239,.55) 0 .9em,transparent .9em 1.8em) 0 50%/100% .22em no-repeat,
    rgba(58,185,228,.14);
  box-shadow:0 0 0 1px rgba(58,185,228,.3);
}

/* ---- een station: een blok met bovenkant, voorkant en zijkant ---- */
.w3-blok{
  position:absolute;
  top:.9em;
  width:7em;height:7em;
  transform-style:preserve-3d;
}
.w3-blok--1{left:1em;}
.w3-blok--2{left:12.33em;}
.w3-blok--3{left:23.67em;}
.w3-blok--4{left:35em;}
.w3-blok > span{position:absolute;display:block;}
.w3-boven{
  inset:0;
  transform:translateZ(2.4em);
  border-radius:.5em;
  background:#1F4A76;
  box-shadow:inset 0 0 0 1px rgba(138,214,239,.35);
}
.w3-voor{
  left:0;top:7em;width:7em;height:2.4em;
  transform-origin:top;
  transform:rotateX(90deg);
  background:#123457;
}
.w3-zij{
  left:7em;top:0;width:2.4em;height:7em;
  transform-origin:left;
  transform:rotateY(-90deg);
  background:#0E2A48;
}

/* ---- bordje boven elk station, altijd recht naar de kijker ---- */
.w3-bord{
  left:50%;top:50%;
  width:6.4em;margin-left:-3.2em;
  transform-origin:50% 100%;
  transform:translate3d(0,-100%,5.2em) rotateZ(-32deg) rotateX(-58deg);
  display:flex !important;flex-direction:column;align-items:center;gap:.45em;
  font-family:var(--font-mono,ui-monospace,monospace);
  font-size:1em;letter-spacing:.06em;text-transform:uppercase;
  color:rgba(234,246,252,.78);
  white-space:nowrap;
}
.w3-icoon{
  width:3.2em;height:3.2em;border-radius:50%;
  display:grid;place-items:center;
  background:rgba(11,29,51,.85);
  box-shadow:0 0 0 1px rgba(138,214,239,.35);
  color:var(--blue-2,#8AD6EF);
}
.w3-icoon svg{width:1.6em;height:1.6em;}
.w3-bord b{font-weight:500;font-size:1.05em;}

/* ---- het document dat over de band reist ---- */
.w3-doc{
  position:absolute;
  left:2.1em;top:5.05em;
  width:4.8em;height:6.2em;
  transform-style:preserve-3d;
  transform-origin:50% 100%;
  /* stilstaand beeld: klaar bij het laatste station */
  transform:translate3d(33.4em,0,.5em) rotateZ(-32deg) rotateX(-58deg);
}
.w3-vel{
  position:absolute;inset:0;
  border-radius:.45em;
  background:#F6FAFC;
  box-shadow:0 1.2em 2em -.6em rgba(0,0,0,.55);
  overflow:hidden;
}
.w3-laag{position:absolute;inset:0;padding:.6em .5em;opacity:0;}
.w3-laag i{display:block;height:.38em;border-radius:.2em;background:#C9D6E0;margin-bottom:.4em;}
.w3-laag i.kort{width:55%;}
.w3-laag i.blauw{background:var(--blue,#3AB9E4);}
.w3-laag i.groen{background:var(--groen,#4FBE94);}
.w3-laag em{
  display:block;font-style:normal;font-family:var(--font-mono,ui-monospace,monospace);
  font-size:.8em;font-weight:600;color:#0B1D33;margin-bottom:.45em;letter-spacing:.04em;
}
.w3-laag--offerte{opacity:1;}
.w3-vinkje{
  position:absolute;right:-1.5em;top:-1.5em;
  width:2.4em;height:2.4em;border-radius:50%;
  display:grid;place-items:center;
  background:var(--groen,#4FBE94);color:#0B1D33;
  box-shadow:0 0 0 .3em rgba(79,190,148,.25);
}
.w3-vinkje svg{width:1.4em;height:1.4em;}

/* stilstaand: laatste station aan */
.w3-blok--4 .w3-boven{background:#2A8DB5;box-shadow:inset 0 0 0 1px rgba(138,214,239,.8),0 0 2.4em rgba(58,185,228,.5);}
.w3-blok--4 .w3-icoon{background:var(--blue,#3AB9E4);color:#0B1D33;}

/* ---- de lijst ernaast: de tekstversie van de scene ---- */
.w3-stappen{list-style:none;counter-reset:w3;display:grid;gap:10px;margin:0;padding:0;}
.w3-stap{
  counter-increment:w3;
  position:relative;
  padding:16px 18px 16px 62px;
  border-radius:var(--radius,16px);
  border:1px solid var(--lijn,rgba(11,29,51,.12));
  background:var(--surface,#fff);
  transition:border-color .3s,box-shadow .3s;
}
.w3-stap::before{
  content:counter(w3,decimal-leading-zero);
  position:absolute;left:18px;top:16px;
  display:block;
  font-family:var(--font-mono,ui-monospace,monospace);font-size:.8rem;letter-spacing:.08em;
  color:#0D789B;
}
.w3-stap h3{font-size:1.02rem;margin:0 0 4px;}
.w3-stap p{margin:0;font-size:.95rem;color:var(--inkt-70,rgba(11,29,51,.72));}

.w3-slot{margin-top:clamp(28px,3.5vw,44px);display:flex;flex-wrap:wrap;align-items:center;gap:14px 22px;}
.w3-slot p{margin:0;max-width:52ch;}

/* ============================================================
   ANIMATIE - alleen als werkstroom3d.js .w3--speelt zet, en nooit
   bij prefers-reduced-motion.
   ============================================================ */
@media (prefers-reduced-motion: no-preference){
  .w3--speelt .w3-doc{animation:w3-reis 12s var(--ease-in,ease-in-out) infinite;}
  .w3--speelt .w3-laag--mail{animation:w3-laag-mail 12s linear infinite;}
  .w3--speelt .w3-laag--data{animation:w3-laag-data 12s linear infinite;}
  .w3--speelt .w3-laag--offerte{animation:w3-laag-offerte 12s linear infinite;}
  .w3--speelt .w3-vinkje{animation:w3-vinkje 12s var(--ease,ease) infinite;}
  .w3--speelt .w3-band{animation:w3-band 1.2s linear infinite;}

  .w3--speelt .w3-boven,.w3--speelt .w3-icoon,.w3--speelt .w3-stap{animation-duration:12s;animation-iteration-count:infinite;animation-timing-function:linear;}
  .w3--speelt .w3-boven{animation-name:w3-station;}
  .w3--speelt .w3-icoon{animation-name:w3-icoon;}
  .w3--speelt .w3-stap{animation-name:w3-stap;}
  /* elk station en elke lijstregel is 3s na de vorige aan de beurt */
  .w3--speelt .w3-blok--1 > span,.w3--speelt .w3-stap:nth-child(1){animation-delay:0s;}
  .w3--speelt .w3-blok--2 > span,.w3--speelt .w3-stap:nth-child(2){animation-delay:-9s;}
  .w3--speelt .w3-blok--3 > span,.w3--speelt .w3-stap:nth-child(3){animation-delay:-6s;}
  .w3--speelt .w3-blok--4 > span,.w3--speelt .w3-stap:nth-child(4){animation-delay:-3s;}
  .w3--speelt .w3-blok--2 .w3-bord .w3-icoon{animation-delay:-9s;}
  .w3--speelt .w3-blok--3 .w3-bord .w3-icoon{animation-delay:-6s;}
  .w3--speelt .w3-blok--4 .w3-bord .w3-icoon{animation-delay:-3s;}
  .w3--speelt .w3-blok--1 .w3-bord .w3-icoon{animation-delay:0s;}

  .w3--pauze *,.w3--pauze{animation-play-state:paused !important;}
}

/* Een negatieve vertraging van -9s betekent: de animatie begint alsof er al 9s verstreken zijn.
   Station 2 is dus aan van 3s tot 6s in de cyclus, precies als het document daar staat. */
@keyframes w3-station{
  0%,22%{background:#2A8DB5;box-shadow:inset 0 0 0 1px rgba(138,214,239,.8),0 0 2.4em rgba(58,185,228,.5);}
  26%,100%{background:#1F4A76;box-shadow:inset 0 0 0 1px rgba(138,214,239,.35);}
}
@keyframes w3-icoon{
  0%,22%{background:#3AB9E4;color:#0B1D33;}
  26%,100%{background:rgba(11,29,51,.85);color:#8AD6EF;}
}
@keyframes w3-stap{
  0%,22%{border-color:rgba(58,185,228,.9);box-shadow:0 0 0 3px rgba(58,185,228,.18);}
  26%,100%{border-color:rgba(11,29,51,.12);box-shadow:none;}
}
@keyframes w3-reis{
  0%   {transform:translate3d(0,0,.5em) rotateZ(-32deg) rotateX(-58deg);opacity:0;}
  4%   {transform:translate3d(0,0,.5em) rotateZ(-32deg) rotateX(-58deg);opacity:1;}
  18%  {transform:translate3d(0,0,.5em) rotateZ(-32deg) rotateX(-58deg);}
  22%  {transform:translate3d(5.7em,0,1.6em) rotateZ(-32deg) rotateX(-58deg);}
  25%  {transform:translate3d(11.33em,0,.5em) rotateZ(-32deg) rotateX(-58deg);}
  43%  {transform:translate3d(11.33em,0,.5em) rotateZ(-32deg) rotateX(-58deg);}
  47%  {transform:translate3d(17em,0,1.6em) rotateZ(-32deg) rotateX(-58deg);}
  50%  {transform:translate3d(22.67em,0,.5em) rotateZ(-32deg) rotateX(-58deg);}
  68%  {transform:translate3d(22.67em,0,.5em) rotateZ(-32deg) rotateX(-58deg);}
  72%  {transform:translate3d(28em,0,1.6em) rotateZ(-32deg) rotateX(-58deg);}
  75%  {transform:translate3d(33.4em,0,.5em) rotateZ(-32deg) rotateX(-58deg);opacity:1;}
  95%  {transform:translate3d(33.4em,0,.5em) rotateZ(-32deg) rotateX(-58deg);opacity:1;}
  100% {transform:translate3d(33.4em,0,2.4em) rotateZ(-32deg) rotateX(-58deg);opacity:0;}
}
@keyframes w3-laag-mail{0%,22%{opacity:1;}22.5%,100%{opacity:0;}}
@keyframes w3-laag-data{0%,22.5%{opacity:0;}23%,47%{opacity:1;}47.5%,100%{opacity:0;}}
@keyframes w3-laag-offerte{0%,47.5%{opacity:0;}48%,100%{opacity:1;}}
@keyframes w3-vinkje{0%,76%{transform:scale(0);opacity:0;}80%{transform:scale(1.15);opacity:1;}83%,100%{transform:scale(1);opacity:1;}}
@keyframes w3-band{to{background-position:1.8em 50%,0 0;}}

/* ---- slot-CTA homepage: wat je mag verwachten (staat hier omdat dit bestand alleen op de homepage laadt) ---- */
.verwachting{list-style:none;margin:22px auto 0;padding:0;display:flex;flex-wrap:wrap;justify-content:center;gap:10px 22px;}
.verwachting li{position:relative;padding-left:24px;color:var(--ice-70,rgba(234,246,252,.72));font-size:.95rem;}
.verwachting li::before{content:"";position:absolute;left:0;top:.2em;display:block;width:14px;height:8px;border-left:2px solid var(--groen,#4FBE94);border-bottom:2px solid var(--groen,#4FBE94);transform:rotate(-45deg);}