/* 05b — Diensten: per dienst een technische lijntekening (FIG 01–07) op een donkere plaat.
   Richting: Linear-achtige isometrie. Dunne lijnen, geen verlopen of schaduwkaartjes,
   één accent in Juno-blauw dat laat zien wat de dienst doet. Tekeningen komen uit tools/fig.py.
   Lijnen tekenen zichzelf zodra het vak .is-actief wordt. */

.diensten .diensten__dia,
.diensten .dienst__beeld {
  --pl: #0C0D10; --pl-2: #121318;
  --ln: rgba(236, 238, 244, .62); --ln-zacht: rgba(236, 238, 244, .16);
  --acc: #5B9DF5; --acc-vlak: #17243A;
  background:
    radial-gradient(90% 60% at 50% 42%, #16181E 0%, var(--pl) 70%),
    var(--pl);
  color: var(--ln);
}
.diensten .diensten__stapel { box-shadow: 0 0 0 1px rgba(10, 10, 10, .9), 0 40px 80px -40px rgba(0, 0, 0, .45); background: #0C0D10; }
.diensten .diensten__dia::before, .diensten .dienst__beeld::before { opacity: .06; }
.diensten .diensten__dia::after, .diensten .dienst__beeld::after { content: none; }
.diensten .diensten__dia { transform: none; transition: opacity .5s var(--ease); }

/* raster op de achtergrond, vervaagt naar de randen */
.diensten .plaat-raster {
  position: absolute; inset: 0; pointer-events: none;
  background-image: linear-gradient(var(--ln-zacht) 1px, transparent 1px), linear-gradient(90deg, var(--ln-zacht) 1px, transparent 1px);
  background-size: 32px 32px; background-position: -1px -1px; opacity: .22;
  -webkit-mask-image: radial-gradient(70% 60% at 50% 45%, #000 20%, transparent 80%); mask-image: radial-gradient(70% 60% at 50% 45%, #000 20%, transparent 80%);
}

/* bijschriften: mono, zoals een bouwtekening */
.diensten .plaat-kop, .diensten .plaat-voet {
  position: absolute; left: 22px; right: 22px; z-index: 2; margin: 0; display: flex; justify-content: space-between; gap: 12px;
  font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: rgba(236, 238, 244, .42);
}
.diensten .plaat-kop { top: 20px; }
.diensten .plaat-voet { bottom: 20px; align-items: flex-end; }
.diensten .plaat-voet b { font-weight: 500; color: rgba(236, 238, 244, .82); text-transform: none; letter-spacing: 0; font-family: var(--font-tekst); font-size: 13px; max-width: 70%; line-height: 1.4; }
.diensten .plaat-voet span { white-space: nowrap; }
.diensten .plaat-voet span i { font-style: normal; color: var(--acc); }

/* de tekening */
.diensten .fig { position: absolute; left: 50%; top: 47%; width: 76%; height: 60%; translate: -50% -50%; overflow: visible; }
.diensten .fig polygon, .diensten .fig path, .diensten .fig ellipse, .diensten .fig line {
  stroke: var(--ln); stroke-width: 1; vector-effect: non-scaling-stroke; stroke-linejoin: round;
}
.diensten .fig .f-top { fill: var(--pl-2); }
.diensten .fig .f-x { fill: #0E0F13; }
.diensten .fig .f-y { fill: #0A0B0D; }
.diensten .fig .is-acc-top { fill: var(--acc-vlak); stroke: var(--acc); }
.diensten .fig .is-acc .f-x, .diensten .fig .is-acc .f-y { stroke: color-mix(in srgb, var(--acc) 70%, var(--ln)); }
.diensten .fig .is-acc-vol .f-top { fill: var(--acc); stroke: var(--acc); }
.diensten .fig .is-acc-vol .f-x { fill: color-mix(in srgb, var(--acc) 60%, #0A0B0D); stroke: var(--acc); }
.diensten .fig .is-acc-vol .f-y { fill: color-mix(in srgb, var(--acc) 38%, #0A0B0D); stroke: var(--acc); }
.diensten .fig .f-schijf.is-acc .f-x { stroke: var(--acc); fill: color-mix(in srgb, var(--acc) 22%, #0A0B0D); }
.diensten .fig .f-gids { fill: none; stroke: var(--ln-zacht); stroke-dasharray: 3 4; }
.diensten .fig .f-draad { stroke: rgba(236, 238, 244, .34); stroke-dasharray: 3 4; }
.diensten .fig .f-arcering { fill: none; stroke: var(--ln-zacht); }
.diensten .fig .f-tekst { fill: none; stroke: rgba(236, 238, 244, .3); stroke-width: 2.4; stroke-linecap: round; }
.diensten .fig .f-stroom { fill: none; stroke: var(--acc); stroke-width: 2; stroke-linecap: round; stroke-dasharray: .12 .88; stroke-dashoffset: 1; opacity: 0; }
.diensten .fig .f-label line { stroke: var(--acc); }
.diensten .fig .f-label text { fill: var(--acc); font-family: var(--font-mono); font-size: 11px; letter-spacing: .06em; text-transform: uppercase; stroke: none; }

/* ============ animaties ============ */
/* elk vlak tekent zich: eerst de lijn, dan de vulling */
.diensten .is-actief > .fig polygon,
.diensten .is-actief > .fig ellipse,
.diensten .is-actief > .fig .f-schijf path { animation: f-teken 1.1s var(--ease) both; stroke-dasharray: 1400; }
@keyframes f-teken { from { stroke-dashoffset: 1400; fill-opacity: 0; } 60% { fill-opacity: 0; } }
.diensten .is-actief > .fig .f-gids,
.diensten .is-actief > .fig .f-draad,
.diensten .is-actief > .fig .f-arcering,
.diensten .is-actief > .fig .f-tekst { animation: f-vervaag .6s ease .15s both; }
@keyframes f-vervaag { from { opacity: 0; } }

/* per figuur het accent dat laat zien wat de dienst doet */
.diensten .is-actief > .fig .f-taak { animation: f-taak 5.2s cubic-bezier(.65, 0, .35, 1) .5s infinite; }
@keyframes f-taak {
  0%, 12%   { transform: translate(0, 0); opacity: 1; }
  38%, 56%  { transform: translate(77.9px, 45px) translateY(-70px); }
  82%, 92%  { transform: translate(155.9px, 90px); opacity: 1; }
  100%      { transform: translate(155.9px, 90px); opacity: 0; }
}
.diensten .is-actief > .fig .f-bericht { animation: f-op .7s var(--ease) both; animation-delay: calc(var(--i) * 110ms + 60ms); }
@keyframes f-op { from { opacity: 0; transform: translateY(18px); } }
.diensten .is-actief > .fig .f-staaf { transform-box: fill-box; transform-origin: 50% 100%; animation: f-groei .9s var(--ease) both; animation-delay: calc(var(--i) * 70ms + 150ms); }
@keyframes f-groei { from { transform: scaleY(.1); } }
.diensten .is-actief > .fig .f-schijf { animation: f-op .7s var(--ease) both; animation-delay: calc(var(--i) * 100ms + 60ms); }
.diensten .is-actief > .fig .f-schijf.is-acc { animation: f-op .7s var(--ease) .46s both, f-puls 2.4s ease-in-out 1.4s infinite; }
@keyframes f-puls { 50% { filter: drop-shadow(0 0 10px rgba(91, 157, 245, .55)); } }
.diensten .is-actief > .fig .f-label { animation: f-vervaag .6s ease 1.4s both; }
.diensten .is-actief > .fig .f-laag { animation: f-uit 1.1s var(--ease) both; animation-delay: calc((3 - var(--i)) * 70ms + 80ms); }
@keyframes f-uit { from { transform: translateY(calc(var(--i) * 26px)); } }
.diensten .is-actief > .fig .f-stroom { animation: f-stroom 2.2s linear infinite; animation-delay: calc(var(--i) * 370ms + .6s); }
@keyframes f-stroom { 0% { stroke-dashoffset: 1; opacity: 1; } 100% { stroke-dashoffset: -.12; opacity: 1; } }
.diensten .is-actief > .fig .f-tool { animation: f-op .6s var(--ease) both; animation-delay: calc(var(--i) * 70ms + 80ms); }
.diensten .is-actief > .fig .f-blok { animation: f-val .7s cubic-bezier(.3, 1.3, .5, 1) both; animation-delay: calc(var(--i) * 170ms + 100ms); }
@keyframes f-val { from { opacity: 0; transform: translateY(-40px); } }

/* rustige beweging en schermafdruk: eindtoestand */
@media (prefers-reduced-motion: reduce) { .diensten .fig * { animation: none !important; } }
.is-shot .diensten .fig * { animation: none !important; }
.is-shot .diensten .fig .f-stroom { opacity: 1; stroke-dashoffset: .5; }

/* mobiel: beeldvak per dienst */
@media (max-width: 820px) {
  .diensten .dienst__beeld { position: relative; aspect-ratio: 4 / 5; overflow: hidden; }
}