/* Dashboard-mockup voor de hero: pure HTML en CSS in plaats van een
   screenshot van ~80 kB base64. Schaalt mee via container queries (cqw),
   dus scherp op elk scherm en op retina. Bron: bin/heromock.html.
   Aangepast op de huisstijl: JetBrains Mono en het gedempte groen. */
.e2a-heromock{
    --hm-ink:#021019;--hm-navy:#112532;--hm-navy-mid:#2c536c;--hm-navy-soft:#5a839d;
    --hm-border:rgba(44,83,108,.18);--hm-border-soft:rgba(44,83,108,.1);
    --hm-mist:#e0e7ea;--hm-paper:#f6f8f9;
    --hm-coral:#e78795;--hm-coral-tint:rgba(231,135,149,.14);--hm-fail-text:#ce6c7a;
    --hm-ok:#2e7d5c;--hm-ok-tint:rgba(46,125,92,.1);
    --hm-mono:'JetBrains Mono',ui-monospace,monospace;
    container-type:inline-size;
    aspect-ratio:16/10;
    background:var(--hm-paper);border:1px solid var(--hm-border-soft);border-radius:1.5cqw;
    font-family:'Public Sans',system-ui,sans-serif;color:var(--hm-navy);
    overflow:hidden;display:flex;flex-direction:column;user-select:none;
  }
  .e2a-heromock *{box-sizing:border-box;margin:0;padding:0}
  .hm-chrome{
    display:flex;align-items:center;gap:3cqw;flex:none;
    background:#fff;border-bottom:1px solid var(--hm-border-soft);
    padding:0 3cqw;height:8.2cqw;
  }
  .hm-chrome > svg{height:2.7cqw;width:auto;flex:none;color:var(--hm-navy)}
  .hm-tabs{display:flex;gap:2.6cqw;font-size:1.7cqw}
  .hm-tabs span{color:var(--hm-navy-soft);padding:2.8cqw 0}
  .hm-tabs .on{color:var(--hm-navy);font-weight:600;box-shadow:inset 0 -0.3cqw 0 var(--hm-navy)}
  .hm-stamp{margin-left:auto;font-family:var(--hm-mono);font-size:1.4cqw;color:var(--hm-navy-soft)}
  .hm-chip{font-size:1.55cqw;font-weight:500;color:#fff;background:var(--hm-navy);border-radius:.6cqw;padding:.7cqw 1.5cqw}
  .hm-body{flex:1;display:grid;grid-template-rows:auto 1fr;gap:1.8cqw;padding:2.2cqw 3cqw 2.8cqw;min-height:0}
  /* minmax(0,…) in plaats van 1fr: anders kan een kolom niet krimpen onder de
   breedte van de nowrap-regel "on target", en liep de tegelrij rechts
   buiten de kaart terwijl links wel marge overbleef. */
.hm-tiles{display:grid;grid-template-columns:minmax(0,1.85fr) repeat(4,minmax(0,1fr));gap:1.8cqw}
  .hm-tile{
    background:#fff;border:1px solid var(--hm-border-soft);border-radius:1.2cqw;
    padding:1.7cqw 1.4cqw 1.6cqw;display:flex;flex-direction:column;align-items:center;overflow:hidden;min-width:0;
  }
  .hm-mt{
    width:100%;font-size:1.4cqw;font-weight:600;letter-spacing:.1em;text-transform:uppercase;
    color:var(--hm-navy-soft);
  }
  .hm-donut{position:relative;width:12.6cqw;height:12.6cqw;margin:auto 0 .8cqw}
  .hm-tile-big .hm-donut{width:16.8cqw;height:16.8cqw}
  .hm-donut svg{width:100%;height:100%;transform:rotate(-90deg)}
  .hm-donut circle{fill:none;stroke-width:10.5}
  .hm-track{stroke:var(--hm-mist)}
  .hm-fill{stroke-linecap:round}
  .hm-ok{stroke:var(--hm-ok)}
  .hm-navy{stroke:var(--hm-navy-mid)}
  .hm-center{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center}
  .hm-num{color:var(--hm-ink);font-size:2.7cqw;font-weight:600;line-height:1;font-variant-numeric:tabular-nums}
  .hm-tile-big .hm-num{font-size:4.1cqw}
/* de regel "on target · +2.1 vs baseline" is de langste in de rij; iets
   kleiner zodat hij binnen de tegel past zonder afkappen */
.hm-tile-big .hm-status{font-size:1.2cqw}
  .hm-status{display:flex;align-items:center;gap:.8cqw;font-family:var(--hm-mono);font-size:1.3cqw;color:var(--hm-navy-soft);margin-bottom:auto;white-space:nowrap;max-width:100%;overflow:hidden}
  .hm-dot{width:1cqw;height:1cqw;border-radius:999px;flex:none;background:var(--hm-ok)}
  .hm-bottom{display:grid;grid-template-columns:1.45fr 1fr;gap:1.8cqw;align-items:stretch;min-height:0}
  .hm-card{background:#fff;border:1px solid var(--hm-border-soft);border-radius:1.2cqw;padding:1.7cqw 2cqw;display:flex;flex-direction:column}
  .hm-note{font-family:var(--hm-mono);font-size:1.25cqw;font-weight:400;letter-spacing:0;text-transform:none;color:var(--hm-navy-soft);margin-left:1cqw}
  .hm-bars{flex:1;display:flex;flex-direction:column;justify-content:space-evenly}
  .hm-bar-top{display:flex;align-items:baseline;gap:1.4cqw;margin-bottom:.55cqw}
  .hm-bar-top .n{font-size:1.6cqw;font-weight:500;color:var(--hm-navy)}
  .hm-bar-top .p{margin-left:auto;font-family:var(--hm-mono);font-size:1.5cqw;color:var(--hm-ink);font-variant-numeric:tabular-nums}
  .hm-bar{height:1.1cqw;background:var(--hm-mist);border-radius:999px;position:relative}
  .hm-bar b{display:block;height:100%;background:var(--hm-navy-mid);border-radius:999px}
  .hm-stack{display:flex;flex-direction:column;gap:1.6cqw;min-height:0}
  .hm-stack .hm-card{flex:1;min-height:0;overflow:hidden;justify-content:center;padding:1.4cqw 2cqw}
  .hm-attn{background:var(--hm-coral-tint);border-color:rgba(231,135,149,.35)}
  .hm-ready{background:var(--hm-ok-tint);border-color:rgba(46,125,92,.3)}
  .hm-card .hm-mt{display:flex;align-items:center;gap:.9cqw;color:var(--hm-navy)}
  .hm-attn .hm-mt,.hm-ready .hm-mt{margin-bottom:.7cqw}
  .hm-cardicon{width:1.9cqw;height:1.9cqw;flex:none}
  .hm-i-coral{color:var(--hm-fail-text)}
  .hm-i-green{color:var(--hm-ok)}
  .hm-find{font-size:1.8cqw;font-weight:600;color:var(--hm-navy);line-height:1.25;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .hm-find em{font-style:normal;color:var(--hm-fail-text);font-variant-numeric:tabular-nums}
  .hm-find-sub{font-family:var(--hm-mono);font-size:1.35cqw;color:var(--hm-navy-soft);margin-top:.35cqw;white-space:nowrap}

/* ── opbouw: de mockup bouwt zichzelf op zodra hij in beeld staat ───────────
   Bewust keyframe-animaties en geen transities. Een transitie heeft twee
   toestanden nodig die de browser allebei geschilderd heeft; staat de mockup
   al in beeld bij het laden, dan komen de start- en eindklasse in dezelfde
   rendercyclus en springt alles direct op de eindstand. Precies dat gebeurde:
   de cijfers liepen wel op (die telt het script zelf) maar de balken en ringen
   stonden meteen vol. Een animatie speelt altijd vanaf haar eigen beginwaarde,
   ongeacht wanneer de klasse erop komt, en animation-fill-mode:both houdt die
   beginwaarde vast tijdens de vertraging.
   Zonder de klasse .hm-aan draait er niets en staat alles op zijn eindwaarde,
   dus zonder JS of met prefers-reduced-motion mist een bezoeker niets. */
@keyframes hm-in   { from { opacity:0; transform:translateY(14px) } to { opacity:1; transform:none } }
@keyframes hm-ring { from { stroke-dashoffset:327 } to { stroke-dashoffset:0 } }
@keyframes hm-balk { from { transform:scaleX(0) } to { transform:scaleX(1) } }
@keyframes hm-stip { from { transform:scale(0) } to { transform:scale(1) } }

/* tegels en de twee kaarten eronder schuiven los in */
.hm-aan .hm-tile,
.hm-aan .hm-bottom > *{ animation:hm-in .7s cubic-bezier(.22,1.12,.36,1) both; }
.hm-aan .hm-tile:nth-child(1){ animation-delay:.05s }
.hm-aan .hm-tile:nth-child(2){ animation-delay:.13s }
.hm-aan .hm-tile:nth-child(3){ animation-delay:.21s }
.hm-aan .hm-tile:nth-child(4){ animation-delay:.29s }
.hm-aan .hm-tile:nth-child(5){ animation-delay:.37s }
.hm-aan .hm-bottom > *:nth-child(1){ animation-delay:.46s }
.hm-aan .hm-bottom > *:nth-child(2){ animation-delay:.54s }

/* de ringen lopen vol */
.hm-aan .hm-fill{ animation:hm-ring 1.25s cubic-bezier(.16,1,.3,1) both; }
.hm-aan .hm-tile:nth-child(1) .hm-fill{ animation-delay:.25s }
.hm-aan .hm-tile:nth-child(2) .hm-fill{ animation-delay:.33s }
.hm-aan .hm-tile:nth-child(3) .hm-fill{ animation-delay:.41s }
.hm-aan .hm-tile:nth-child(4) .hm-fill{ animation-delay:.49s }
.hm-aan .hm-tile:nth-child(5) .hm-fill{ animation-delay:.57s }

/* de balken schuiven vanaf links vol */
.hm-aan .hm-bar b{ transform-origin:left center;
  animation:hm-balk 1s cubic-bezier(.16,1,.3,1) both; }
.hm-aan .hm-bars > div:nth-child(1) b{ animation-delay:.62s }
.hm-aan .hm-bars > div:nth-child(2) b{ animation-delay:.70s }
.hm-aan .hm-bars > div:nth-child(3) b{ animation-delay:.78s }

/* het groene bolletje bij "on target" komt als laatste */
.hm-aan .hm-dot{ animation:hm-stip .5s cubic-bezier(.34,1.56,.64,1) both; }
.hm-aan .hm-tile:nth-child(1) .hm-dot{ animation-delay:.9s }
.hm-aan .hm-tile:nth-child(2) .hm-dot{ animation-delay:.98s }
.hm-aan .hm-tile:nth-child(3) .hm-dot{ animation-delay:1.06s }
.hm-aan .hm-tile:nth-child(4) .hm-dot{ animation-delay:1.14s }
.hm-aan .hm-tile:nth-child(5) .hm-dot{ animation-delay:1.22s }

@media (prefers-reduced-motion: reduce){
  .hm-aan .hm-tile, .hm-aan .hm-bottom > *, .hm-aan .hm-fill,
  .hm-aan .hm-bar b, .hm-aan .hm-dot{ animation:none !important; }
}

/* ── hover: de tegel onder de muis zet zijn rand aan ─────────────────────
   Het enige productbeeld op zes pagina's, en het is een nagebouwde
   interface: een dashboardtegel die reageert is wat echte software doet.
   Bewust geen transform: heromock.js zet elke frame een transform op de
   ouder voor de kanteling, en een transform op de tegel werkt daar tegenin. */
.e2a-heromock .hm-tile{transition:border-color .18s cubic-bezier(.2,.7,.3,1);}
@media (hover: hover) and (pointer: fine){
  .e2a-heromock .hm-tile:hover{border-color:rgba(44,83,108,.32);}
}
@media (prefers-reduced-motion: reduce){
  .e2a-heromock .hm-tile{transition:none;}
}