/* Jottem-huisstijl voor reveal.js-presentaties.
   Tokens uit brand.iotm.nl (jottem-tokens.css), fonts lokaal (nooit CDN). */

@font-face { font-family: 'Fraunces'; font-style: normal; font-weight: 400;
  src: url('fonts/fraunces-v38-latin-regular.woff2') format('woff2'); }
@font-face { font-family: 'Fraunces'; font-style: normal; font-weight: 600;
  src: url('fonts/fraunces-v38-latin-600.woff2') format('woff2'); }
@font-face { font-family: 'Fraunces'; font-style: normal; font-weight: 700;
  src: url('fonts/fraunces-v38-latin-700.woff2') format('woff2'); }
@font-face { font-family: 'Fraunces'; font-style: italic; font-weight: 400;
  src: url('fonts/fraunces-v38-latin-italic.woff2') format('woff2'); }
@font-face { font-family: 'Albert Sans'; font-style: normal; font-weight: 400;
  src: url('fonts/albert-sans-v4-latin-regular.woff2') format('woff2'); }
@font-face { font-family: 'Albert Sans'; font-style: normal; font-weight: 500;
  src: url('fonts/albert-sans-v4-latin-500.woff2') format('woff2'); }
@font-face { font-family: 'Albert Sans'; font-style: normal; font-weight: 600;
  src: url('fonts/albert-sans-v4-latin-600.woff2') format('woff2'); }
@font-face { font-family: 'Albert Sans'; font-style: normal; font-weight: 700;
  src: url('fonts/albert-sans-v4-latin-700.woff2') format('woff2'); }

:root {
  accent-color: #a2401f;
  --oranje: #d85a30;
  --oranje-donker: #c04e28;
  --roest: #a2401f;
  --inkt: #1f1e1c;
  --grijs: #6b625c;
  --papier: #faf6f1;
  --karton: #e8d9c4;
  --kartonrand: #d3bfa3;
  --geel: #fdf3c0;
  --geelrand: #e5d489;
  --wit: #ffffff;
  --onderkant: #665245;
  --kop: 'Fraunces', Georgia, 'Times New Roman', serif;
  --body: 'Albert Sans', 'Segoe UI', system-ui, Helvetica, Arial, sans-serif;
  --schaduw: 0 3px 10px rgba(31, 30, 28, .14);

  --r-background-color: var(--papier);
  --r-main-font: var(--body);
  --r-main-font-size: 30px;
  --r-main-color: var(--inkt);
  --r-heading-font: var(--kop);
  --r-heading-color: var(--inkt);
  --r-heading-text-transform: none;
  --r-heading-font-weight: 700;
  --r-heading-line-height: 1.08;
  --r-heading1-size: 1.9em;
  --r-heading2-size: 1.5em;
  --r-heading3-size: 1.05em;
  --r-link-color: var(--roest);
  --r-link-color-hover: var(--oranje-donker);
  --r-selection-background-color: var(--karton);
  --r-selection-color: var(--inkt);
}

.reveal-viewport { background: var(--papier); }
.reveal { font-family: var(--r-main-font); font-size: var(--r-main-font-size);
  color: var(--r-main-color); line-height: 1.5; }
.reveal .slides section { text-align: left; }
.reveal h1, .reveal h2, .reveal h3 {
  font-family: var(--r-heading-font); color: var(--r-heading-color);
  font-weight: var(--r-heading-font-weight); line-height: var(--r-heading-line-height);
  margin: 0 0 .5em; }
.reveal h1 { font-size: var(--r-heading1-size); }
.reveal h2 { font-size: var(--r-heading2-size); }
.reveal h3 { font-size: var(--r-heading3-size); font-weight: 600; }
.reveal p { margin: 0 0 .7em; }
.reveal a { color: var(--r-link-color); text-decoration: underline; text-underline-offset: .15em; }
.reveal a:hover { color: var(--r-link-color-hover); }
.reveal strong { font-weight: 700; }
.reveal .progress { color: var(--oranje); height: 4px; }
.reveal .controls { color: var(--oranje); }
.reveal .slide-number { background: none; color: var(--grijs); font-family: var(--body); }

/* Donkere vlakken (inkt, roest, oranje): reveal zet has-dark-background op de sectie */
.reveal .slides section.has-dark-background,
.reveal .slides section.has-dark-background h1,
.reveal .slides section.has-dark-background h2,
.reveal .slides section.has-dark-background h3 { color: var(--papier); }
.reveal .slides section.has-dark-background a { color: var(--papier); text-decoration-color: var(--geel); }

/* Eyebrow: klein Albert Sans-label in kapitalen, zoals in de merkgids */
.reveal .eyebrow {
  font-family: var(--body); font-weight: 700; font-size: 1em;
  letter-spacing: .18em; text-transform: uppercase; color: var(--roest);
  margin: 0 0 1.2em; }
.reveal section.has-dark-background .eyebrow { color: var(--geel); }
.reveal section.vlak-inkt .eyebrow { color: var(--oranje); }

/* Kaart: wit met de kenmerkende oranje bovenrand */
.reveal .kaart {
  background: var(--wit); border: 1px solid var(--kartonrand);
  border-top: 4px solid var(--oranje); border-radius: .5rem;
  padding: .55em .8em; box-shadow: var(--schaduw); }
.reveal .kaart h3 { margin-bottom: .25em; }
.reveal section.has-dark-background .kaart h3 { color: var(--inkt); }
.reveal .kaart p { margin: 0; color: var(--grijs); font-size: .72em; line-height: 1.45; }

/* Memo-briefje: geel, Fraunces cursief, licht gedraaid */
.reveal .memo {
  background: var(--geel); border: 1px solid var(--geelrand);
  font-family: var(--kop); font-style: italic; color: var(--inkt);
  padding: .9em 1.1em; box-shadow: var(--schaduw); transform: rotate(2deg);
  border-radius: .15rem; }
.reveal .memo .van { display: block; font-family: var(--body); font-style: normal;
  font-size: .6em; color: var(--grijs); margin-top: .9em; }

/* Polaroid: witte rand, plakband, warme fotobehandeling */
.reveal .polaroid {
  display: inline-block; position: relative; background: var(--wit);
  padding: .75rem .75rem 2rem; box-shadow: var(--schaduw);
  transform: rotate(-2deg); }
.reveal .polaroid.rechtsom { transform: rotate(2deg); }
.reveal .polaroid img { display: block; margin: 0; max-width: 100%;
  filter: sepia(.55) saturate(.9) contrast(.92); }
.reveal .polaroid.zonder-sepia img { filter: none; }
.reveal .polaroid .onderschrift {
  position: absolute; left: 0; right: 0; bottom: .35rem; text-align: center;
  font-family: var(--kop); font-style: italic; font-size: .55em; color: var(--grijs); }
.reveal .plakband {
  position: absolute; top: -0.6rem; left: 50%; width: 5rem; height: 1.3rem;
  transform: translateX(-50%) rotate(-4deg);
  background: rgba(253, 243, 192, .75);
  border-left: 1px dashed rgba(31, 30, 28, .18);
  border-right: 1px dashed rgba(31, 30, 28, .18); }

/* Hulpjes voor lay-out */
.reveal .rij { display: flex; gap: 1em; align-items: center; }
.reveal .rij > * { flex: 1; min-width: 0; }
.reveal .grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: .8em; }
.reveal .centreer { text-align: center; }
.reveal .gedempt { color: var(--grijs); }
.reveal section.has-dark-background .gedempt { color: var(--karton); }
.reveal .klein { font-size: .7em; }

/* SVG-diagrammen erven de huisfonts */
.reveal svg text { font-family: var(--body); }
.reveal svg .svg-kop { font-family: var(--kop); }

/* Motion: rustig, als papier (fade + 14 px omhoog) */
.reveal .slides section .fragment.omhoog {
  opacity: 0; visibility: hidden; transform: translateY(14px);
  transition: all .55s ease; }
.reveal .slides section .fragment.omhoog.visible {
  opacity: 1; visibility: visible; transform: translateY(0); }

/* De tijdmachineklok: wijzers draaien terug. De wijzers scharnieren om het
   middelpunt van de klok; zet transform-origin (in viewBox-coördinaten) inline
   op het SVG-element zelf, samen met transform-box: view-box. */
@keyframes terugdraai { to { transform: rotate(-360deg); } }
.klok .w1 { animation: terugdraai 24s linear infinite; }
.klok .w2 { animation: terugdraai 4s linear infinite; }

@media (prefers-reduced-motion: reduce) {
  .reveal *, .klok .w1, .klok .w2 { animation: none !important; transition: none !important; }
  .reveal .slides section .fragment.omhoog { opacity: 1; visibility: visible; transform: none; }
}