/* Diepte — gedeelde vormtaal voor Luminis HQ, Luminis OS en Quadalis (2 nov 2026, Ruben: "alles geavanceerder").
   Bron: _Systeem/Diepte/diepte.css; elk platform krijgt een kopie bij het bouwen. Niet per platform aanpassen.
   Regels: kaarten in lagen met zachte, echte schaduw; licht kantelen bij hover (diepte.js); vloeiende overgangen
   tussen pagina's. Formulieren, tabellen en invoervelden blijven plat en snel. Respecteert prefers-reduced-motion. */
:root {
  --d-schaduw-1: 0 1px 1px rgba(20,18,16,.04), 0 2px 4px rgba(20,18,16,.04), 0 6px 14px rgba(20,18,16,.05);
  --d-schaduw-2: 0 1px 2px rgba(20,18,16,.05), 0 6px 14px rgba(20,18,16,.06), 0 18px 40px rgba(20,18,16,.08);
  --d-schaduw-3: 0 2px 4px rgba(20,18,16,.06), 0 12px 28px rgba(20,18,16,.10), 0 34px 70px rgba(20,18,16,.12);
  --d-glans: inset 0 1px 0 rgba(255,255,255,.65);
  --d-tijd: 260ms;
  --d-curve: cubic-bezier(.2,.7,.2,1);
}
.d-kaart {
  box-shadow: var(--d-schaduw-1), var(--d-glans);
  transition: transform var(--d-tijd) var(--d-curve), box-shadow var(--d-tijd) var(--d-curve);
  transform-style: preserve-3d;
  will-change: transform;
}
.d-kaart:hover { box-shadow: var(--d-schaduw-3), var(--d-glans); }
.d-glas {
  background: linear-gradient(160deg, rgba(255,255,255,.82), rgba(255,255,255,.62)) !important;
  -webkit-backdrop-filter: blur(14px) saturate(1.15); backdrop-filter: blur(14px) saturate(1.15);
  border: 1px solid rgba(255,255,255,.7) !important;
}
/* Een lichtvlek die met de muis meebeweegt (gezet door diepte.js via --d-x/--d-y). */
.d-kaart::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0;
  background: radial-gradient(420px circle at var(--d-x, 50%) var(--d-y, 50%), rgba(255,255,255,.35), transparent 45%);
  transition: opacity var(--d-tijd) var(--d-curve);
}
.d-kaart:hover::after { opacity: 1; }
/* Plat en snel: binnen formulieren en tabellen nooit kantelen of glas. */
form .d-kaart, table .d-kaart, .d-plat, .d-plat .d-kaart { transform: none !important; }
/* Vloeiende overgangen tussen pagina's (meerdere pagina's: Luminis OS, Quadalis). */
@view-transition { navigation: auto; }
::view-transition-old(root) { animation: d-uit 180ms var(--d-curve) both; }
::view-transition-new(root) { animation: d-in 260ms var(--d-curve) both; }
@keyframes d-uit { to { opacity: 0; transform: translateY(-6px) scale(.995); } }
@keyframes d-in { from { opacity: 0; transform: translateY(8px) scale(.995); } }
/* Binnenkomen van kaarten op een pagina: kort, gelaagd. */
.d-in { animation: d-in 420ms var(--d-curve) both; }
@media (prefers-reduced-motion: reduce) {
  .d-kaart, .d-kaart::after, .d-in { transition: none !important; animation: none !important; transform: none !important; }
  ::view-transition-old(root), ::view-transition-new(root) { animation: none !important; }
}