/* ════════════════════════════════════════════════════════════════════
   Beweging — "Van chaos naar overzicht" (Slimmer Werken)
   Prototype 3-10-2026. Losse briefjes, mails en Excel-lijstjes schuiven
   bij het in beeld komen in één rustig overzicht.

   Werking: elk briefje heeft twee posities als CSS-variabelen
   (--cx/--cy/--cr = chaos, --ox/--oy = overzicht). js/beweging.js zet de
   eerst .beweegt (= begin in de chaos-stand) en .geordend zodra het
   podium in beeld komt; de overgang doet de rest. Zonder JavaScript of met
   "minder beweging" aan komt .beweegt er nooit op: meteen het eindbeeld.
   ════════════════════════════════════════════════════════════════════ */

.chaos-sectie { padding-top: 4.5rem; padding-bottom: 4.5rem; }
.chaos-sectie .section-sub { margin-bottom: 2rem; }

.chaos-podium {
  position: relative;
  aspect-ratio: 16 / 9;
  max-width: 900px; margin: 0 auto;
  background: var(--warm);
  border: 1px solid var(--border); border-radius: 6px;
  overflow: hidden;
}

/* Het dashboardkader verschijnt pas in de geordende stand */
.chaos-kader {
  position: absolute; inset: 6% 5%;
  background: var(--white);
  border: 1px solid var(--border); border-radius: 4px;
  opacity: 0; transform: scale(0.97);
  transition: opacity 0.6s ease 0.9s, transform 0.6s ease 0.9s;
}
.chaos-kader-kop {
  display: flex; justify-content: space-between; align-items: center;
  height: 15%; padding: 0 3%;
  border-bottom: 1px solid var(--border);
  font-size: clamp(0.6rem, 1.4vw, 0.85rem); font-weight: 600; color: var(--ink);
}
.chaos-kader-kop span { color: var(--orange); }
.chaos-staafjes { display: flex; align-items: flex-end; gap: 4px; height: 55%; }
.chaos-staafjes i {
  display: block; width: clamp(4px, 0.9vw, 8px);
  background: var(--orange); border-radius: 1px;
  transform: scaleY(0); transform-origin: bottom;
  transition: transform 0.5s ease;
}

/* ── Een briefje ─────────────────────────────────────────────────── */
.briefje {
  position: absolute;
  left: var(--cx); top: var(--cy);
  width: 22%; height: 17%;
  transform: rotate(var(--cr));
  padding: 1.2% 1.6%;
  border-radius: 2px;
  box-shadow: 0 3px 10px rgba(44,35,24,0.13);
  font-size: clamp(0.55rem, 1.35vw, 0.82rem); line-height: 1.3;
  transition:
    left 0.9s cubic-bezier(.6,.05,.25,1) calc(var(--i) * 70ms),
    top 0.9s cubic-bezier(.6,.05,.25,1) calc(var(--i) * 70ms),
    transform 0.9s cubic-bezier(.6,.05,.25,1) calc(var(--i) * 70ms),
    width 0.9s cubic-bezier(.6,.05,.25,1) calc(var(--i) * 70ms),
    height 0.9s cubic-bezier(.6,.05,.25,1) calc(var(--i) * 70ms),
    background-color 0.5s ease calc(var(--i) * 70ms + 500ms),
    box-shadow 0.5s ease calc(var(--i) * 70ms + 500ms);
  overflow: hidden;
}
.briefje .rommel, .briefje .netjes {
  position: absolute; inset: 0; padding: inherit;
  transition: opacity 0.4s ease calc(var(--i) * 70ms + 600ms);
}
.briefje .netjes {
  opacity: 0;
  /* In het overzicht is alles gelijk: huisletter, niet het handschrift of de typemachine van het briefje */
  font-family: 'Inter', sans-serif; font-style: normal;
  font-size: clamp(0.55rem, 1.35vw, 0.82rem); color: var(--ink);
  padding: 4% 6% 4% 8%;
}
.briefje .netjes b { display: block; font-size: 0.8em; font-weight: 500; color: var(--muted); }
.briefje .netjes strong { display: block; font-size: 1.15em; color: var(--ink); }

/* Soorten rommel */
.briefje.post   { background: #F6E27A; color: #4A3B10; font-family: 'Cormorant Garamond', serif; font-style: italic; font-size: clamp(0.7rem, 1.7vw, 1.05rem); }
.briefje.mail   { background: var(--white); color: var(--ink); border-top: 3px solid #8AA4C8; }
.briefje.excel  { background: #E3F0E1; color: #24502A; font-family: ui-monospace, Menlo, monospace; }
.briefje.app    { background: #DCF3D8; color: #1F3B1C; border-radius: 10px; }
.briefje.bon    { background: #FFFDF8; color: var(--muted); font-family: ui-monospace, Menlo, monospace; border: 1px dashed var(--border); }

/* ── Geordende stand ─────────────────────────────────────────────── */
.chaos-podium:is(.geordend, :not(.beweegt)) .chaos-kader { opacity: 1; transform: none; }
.chaos-podium:is(.geordend, :not(.beweegt)) .chaos-staafjes i { transform: scaleY(1); transition-delay: calc(1.3s + var(--j) * 90ms); }
.chaos-podium:is(.geordend, :not(.beweegt)) .briefje {
  left: var(--ox); top: var(--oy);
  width: 20%; height: 22%;
  transform: rotate(0deg);
  background-color: var(--white);
  box-shadow: inset 3px 0 0 var(--orange), 0 1px 2px rgba(44,35,24,0.06);
  border-color: transparent;
}
.chaos-podium:is(.geordend, :not(.beweegt)) .briefje .rommel { opacity: 0; }
.chaos-podium:is(.geordend, :not(.beweegt)) .briefje .netjes { opacity: 1; }

.chaos-onderschrift {
  display: flex; justify-content: space-between; align-items: center; gap: 1rem;
  max-width: 900px; margin: 0.9rem auto 0;
  font-size: 0.85rem; color: var(--muted);
}
.chaos-opnieuw {
  background: none; border: 1px solid var(--border); border-radius: 2px;
  color: var(--muted); font: inherit; font-size: 0.8rem;
  padding: 0.35rem 0.8rem; cursor: pointer; white-space: nowrap;
}
.chaos-opnieuw:hover, .chaos-opnieuw:focus-visible { color: var(--orange); border-color: var(--orange); }

/* Telefoon: hoger podium, briefjes iets groter */
@media (max-width: 640px) {
  .chaos-podium { aspect-ratio: 4 / 5; }
  .briefje { width: 40%; height: 13%; left: var(--mcx); top: var(--mcy); }
  .chaos-podium:is(.geordend, :not(.beweegt)) .briefje { left: var(--mox); top: var(--moy); width: 40%; height: 14%; }
  .chaos-sectie { padding-left: 1.2rem; padding-right: 1.2rem; }
  .briefje, .briefje .netjes { font-size: 0.7rem; }
}

/* Minder beweging: meteen het eindbeeld, geen overgangen, geen knop */
@media (prefers-reduced-motion: reduce) {
  .chaos-podium *, .chaos-podium { transition: none !important; }
  .chaos-opnieuw { display: none; }
}