/* motor.css: de huid van de motor (motor.js), voorvoegsel mt-. 21 oktober 2026.
   Vijf lagen in de container: het licht van de zon op het papier, de zon van tekens, de lijnen (svg), de pakketjes met
   stations, ringen en gloed, en de schijn van de zon over het product. De volgorde zet je per kaart met de variabelen
   hieronder (bijvoorbeeld de zon deels achter het apparaat: --mt-z-zon lager dan het apparaat). Alles beweegt via
   transform en opacity; geen cursief, geen kapitalen, tekst in Hanken Grotesk, kleinste tekst 11,5 px. */

.mt-motor {
  --mt-z-licht: 0;
  --mt-z-zon: 2;
  --mt-z-lijnen: 3;
  --mt-z-schijn: 4;
  --mt-z-pakket: 6;
  --mt-blauw: #2563eb;
  --mt-helder: #3b82f6;
  --mt-hemel: #60a5fa;
}
.mt-laag { position: absolute; left: 0; top: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; }
.mt-lichtlaag { z-index: var(--mt-z-licht); }
.mt-zonlaag { z-index: var(--mt-z-zon); }
svg.mt-lijnen { z-index: var(--mt-z-lijnen); max-width: none; }
.mt-schijnlaag { z-index: var(--mt-z-schijn); }
.mt-pakketlaag { z-index: var(--mt-z-pakket); }

/* ===== De zon van tekens ===== */
.mt-zon { position: absolute; left: 0; top: 0; will-change: transform; }
.mt-zon-adem { position: absolute; left: 0; top: 0; width: 100%; height: 100%; animation: mt-adem 5.6s ease-in-out infinite; }
.mt-stil .mt-zon-adem, .mt-zonder-adem .mt-zon-adem { animation: none; }
@keyframes mt-adem { 0%, 100% { transform: scale(0.988); opacity: 0.93; } 50% { transform: scale(1.012); opacity: 1; } }
/* De gloed: zonlicht (het enige goud) dat naar buiten in hemelsblauw overgaat. */
.mt-zon-gloed {
  position: absolute; left: 50%; top: 50%; width: calc(var(--mt-r) * 3.7); height: calc(var(--mt-r) * 3.7); border-radius: 50%;
  background: radial-gradient(closest-side, rgba(255, 248, 232, 1) 0%, rgba(255, 228, 176, 0.86) 24%, rgba(251, 191, 36, 0.34) 44%, rgba(191, 219, 254, 0.26) 64%, rgba(191, 219, 254, 0) 100%);
  will-change: transform, opacity;
}
/* De bol onder de tekens: een lichtende schijf, wit in het hart, blauw naar de rand, met een glanspunt en een warme rand. */
.mt-zon-bol {
  position: absolute; left: 50%; top: 50%; width: calc(var(--mt-r) * 2); height: calc(var(--mt-r) * 2); border-radius: 50%;
  background:
    radial-gradient(circle at 34% 28%, rgba(255, 253, 248, 0.95) 0%, rgba(255, 253, 248, 0) 34%),
    radial-gradient(circle at 50% 50%, #f6f9ff 0%, #e8f0ff 50%, #d3e2fd 80%, #bcd2fb 96%, #b3cbfa 100%);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.55) inset, 0 0 calc(var(--mt-r) * 0.42) rgba(255, 184, 88, 0.55),
    0 calc(var(--mt-r) * 0.3) calc(var(--mt-r) * 0.7) calc(var(--mt-r) * -0.3) rgba(30, 22, 10, 0.28);
}
.mt-zon-zonderbol .mt-zon-bol {
  width: calc(var(--mt-r) * 2.1); height: calc(var(--mt-r) * 2.1);
  background: radial-gradient(closest-side, rgba(255, 250, 240, 0.96) 0%, rgba(255, 241, 214, 0.82) 52%, rgba(255, 226, 170, 0.32) 82%, rgba(255, 226, 170, 0) 100%);
  box-shadow: 0 0 calc(var(--mt-r) * 0.7) calc(var(--mt-r) * 0.06) rgba(251, 191, 36, 0.42);
}
.mt-donker .mt-zon-zonderbol .mt-zon-bol {
  background: radial-gradient(closest-side, rgba(219, 234, 254, 0.42) 0%, rgba(147, 197, 253, 0.22) 60%, rgba(96, 165, 250, 0) 100%);
  box-shadow: 0 0 calc(var(--mt-r) * 0.8) rgba(251, 191, 36, 0.28);
}
.mt-donker .mt-zon-bol {
  background:
    radial-gradient(circle at 34% 28%, rgba(255, 253, 248, 0.85) 0%, rgba(255, 253, 248, 0) 34%),
    radial-gradient(circle at 50% 50%, #e6f0ff 0%, #cfe0fd 48%, #a9c6fb 78%, #86acf6 95%, #7aa2f2 100%);
}
.mt-zon-tekens { position: absolute; left: 0; top: 0; max-width: none; }
/* Het licht van de zon op het papier (onder het product) en de schijn op het apparaat (erover). */
.mt-zon-licht {
  position: absolute; left: 0; top: 0; width: calc(var(--mt-r) * 11); height: calc(var(--mt-r) * 11);
  margin: calc(var(--mt-r) * -5.5) 0 0 calc(var(--mt-r) * -5.5); border-radius: 50%;
  background: radial-gradient(closest-side, rgba(255, 226, 170, 0.55) 0%, rgba(255, 226, 170, 0.22) 34%, rgba(191, 219, 254, 0.16) 60%, rgba(191, 219, 254, 0) 100%);
}
.mt-zon-schijn {
  position: absolute; left: 0; top: 0; width: calc(var(--mt-r) * 9); height: calc(var(--mt-r) * 9);
  margin: calc(var(--mt-r) * -4.5) 0 0 calc(var(--mt-r) * -4.5); border-radius: 50%;
  background: radial-gradient(closest-side, rgba(255, 214, 150, 0.7), rgba(255, 214, 150, 0.2) 45%, rgba(255, 214, 150, 0) 100%);
  mix-blend-mode: soft-light;
}
.mt-donker .mt-zon-gloed { background: radial-gradient(closest-side, rgba(255, 236, 200, 0.9) 0%, rgba(255, 200, 120, 0.5) 28%, rgba(96, 165, 250, 0.36) 56%, rgba(96, 165, 250, 0) 100%); }
.mt-donker .mt-zon-licht { background: radial-gradient(closest-side, rgba(147, 197, 253, 0.34), rgba(96, 165, 250, 0.14) 45%, rgba(96, 165, 250, 0) 100%); mix-blend-mode: screen; }
.mt-donker .mt-zon-schijn { background: radial-gradient(closest-side, rgba(191, 219, 254, 0.32), rgba(96, 165, 250, 0.1) 50%, rgba(96, 165, 250, 0) 100%); mix-blend-mode: screen; }

/* ===== Lijnen van licht ===== */
.mt-pad-lijn, .mt-pad-gloed, .mt-komeet, .mt-komeet-gloed, .mt-bundel { opacity: 0; }
.mt-vonk, .mt-vonk-gloed { opacity: 0; }
.mt-donker .mt-komeet, .mt-donker .mt-komeet-gloed, .mt-donker .mt-vonk-gloed, .mt-donker .mt-pad-gloed, .mt-donker .mt-bundel { mix-blend-mode: screen; }

/* ===== Pakketjes: een glanzende chip met een teken en een woord ===== */
.mt-pakket { position: absolute; left: 0; top: 0; opacity: 0; will-change: transform, opacity; }
.mt-chip {
  position: absolute; left: 0; top: 0; display: inline-flex; align-items: center; gap: 6px; white-space: nowrap;
  padding: 4px 11px 4px 4px; border-radius: 999px; overflow: hidden;
  font-family: var(--tekst, "Hanken Grotesk", ui-sans-serif, system-ui, sans-serif); font-size: 12.5px; font-weight: 500; line-height: 16px; letter-spacing: 0.01em;
  color: #0b1220;
  background: linear-gradient(180deg, #ffffff 0%, #f4f8ff 52%, #e2ecff 100%);
  box-shadow:
    inset 0 1px 0 #ffffff, inset 0 -1px 0 rgba(37, 99, 235, 0.16),
    0 0 0 1px rgba(37, 99, 235, 0.24),
    0 10px 20px -10px rgba(11, 18, 32, 0.55), 0 2px 5px -2px rgba(11, 18, 32, 0.3),
    0 0 24px rgba(96, 165, 250, 0.5);
  will-change: transform;
}
.mt-chip-rond { padding: 4px; }
.mt-chip-teken {
  flex: none; width: 16px; height: 16px; border-radius: 50%; display: grid; place-items: center;
  font-size: 11.5px; font-weight: 600; line-height: 1; color: #ffffff;
  background: radial-gradient(circle at 34% 30%, #bfdbfe 0%, #3b82f6 46%, #1d4ed8 100%);
  box-shadow: 0 0 9px rgba(59, 130, 246, 0.85), inset 0 1px 0 rgba(255, 255, 255, 0.5);
}
.mt-chip-woord { position: relative; }
.mt-chip-extra { flex: none; font-weight: 600; color: #2563eb; margin-left: -2px; }
.mt-chip-glans {
  position: absolute; top: -4px; bottom: -4px; left: 0; width: 46%; opacity: 0;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.95) 50%, rgba(255, 255, 255, 0));
}
.mt-pakket-spoor {
  position: absolute; left: 0; top: 0; width: 76px; height: 9px; margin: -4.5px 0 0 -76px; transform-origin: 100% 50%; opacity: 0;
  border-radius: 9px; background: linear-gradient(90deg, rgba(96, 165, 250, 0), rgba(96, 165, 250, 0.7) 65%, rgba(255, 255, 255, 0.95));
  filter: blur(2.5px);
}
.mt-pakket-echo { position: absolute; left: 0; top: 0; border-radius: 999px; opacity: 0; background: rgba(147, 197, 253, 0.75); filter: blur(4px); }
.mt-rimpel {
  position: absolute; left: 0; top: 0; width: 36px; height: 36px; border-radius: 50%; opacity: 0;
  border: 1.5px solid rgba(59, 130, 246, 0.85); box-shadow: 0 0 14px rgba(96, 165, 250, 0.55), inset 0 0 8px rgba(96, 165, 250, 0.3);
}
.mt-donker .mt-rimpel { border-color: rgba(191, 219, 254, 0.95); }

/* ===== Stations ===== */
.mt-station { position: absolute; left: 0; top: 0; opacity: 0; }
.mt-station-kern {
  position: absolute; left: 0; top: 0; width: 13px; height: 13px; border-radius: 50%;
  background: #ffffff; box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.5), 0 2px 6px -2px rgba(11, 18, 32, 0.35);
}
.mt-station-licht {
  position: absolute; left: 0; top: 0; width: 13px; height: 13px; border-radius: 50%; opacity: 0;
  background: radial-gradient(circle at 40% 35%, #ffffff 0%, #dbeafe 70%);
  box-shadow: 0 0 0 2px #2563eb, 0 0 0 5px rgba(96, 165, 250, 0.35), 0 0 18px rgba(59, 130, 246, 0.95);
}
.mt-station-zonderpunt .mt-station-licht { display: none; }
.mt-station-ring {
  position: absolute; left: 0; top: 0; width: 20px; height: 20px; border-radius: 50%; opacity: 0;
  border: 1.5px solid rgba(59, 130, 246, 0.95); box-shadow: 0 0 12px rgba(96, 165, 250, 0.6);
}
.mt-station-zonderpunt .mt-station-kern { display: none; }
.mt-station-label {
  position: absolute; left: 11px; top: -26px; white-space: nowrap;
  font-family: var(--tekst, "Hanken Grotesk", ui-sans-serif, system-ui, sans-serif); font-size: 11.5px; font-weight: 500; line-height: 1;
  color: #1d4ed8; background: rgba(255, 255, 255, 0.94); padding: 4px 7px; border-radius: 7px;
  box-shadow: 0 0 0 1px rgba(37, 99, 235, 0.22), 0 6px 12px -6px rgba(11, 18, 32, 0.35);
}
.mt-station-label-links { left: auto; right: 11px; }
.mt-station-label-onder { top: 12px; }
.mt-donker .mt-station-label { color: #dbeafe; background: rgba(15, 24, 48, 0.92); box-shadow: 0 0 0 1px rgba(147, 197, 253, 0.32), 0 6px 12px -6px rgba(0, 0, 0, 0.5); }
.mt-donker .mt-station-kern { background: #0f1830; box-shadow: 0 0 0 2px rgba(147, 197, 253, 0.6); }
.mt-donker .mt-station-licht { background: radial-gradient(circle at 40% 35%, #ffffff 0%, #bfdbfe 75%); box-shadow: 0 0 0 2px #dbeafe, 0 0 0 5px rgba(147, 197, 253, 0.35), 0 0 20px rgba(147, 197, 253, 0.95); }
.mt-station-rand {
  position: absolute; left: 0; top: 0; border-radius: 10px; opacity: 0;
  box-shadow: 0 0 0 1.5px rgba(59, 130, 246, 0.95), 0 0 18px rgba(96, 165, 250, 0.6), inset 0 0 12px rgba(96, 165, 250, 0.22);
}
.mt-donker .mt-station-rand { box-shadow: 0 0 0 1.5px rgba(191, 219, 254, 0.95), 0 0 20px rgba(96, 165, 250, 0.7), inset 0 0 12px rgba(96, 165, 250, 0.3); }

/* ===== Lezen: de leesregel en de tekens eronder ===== */
.mt-leesregel {
  position: absolute; left: 0; top: 0; height: 2px; margin-top: -1px; opacity: 0;
  background: linear-gradient(90deg, rgba(96, 165, 250, 0), #3b82f6 18%, #ffffff 50%, #3b82f6 82%, rgba(96, 165, 250, 0));
  box-shadow: 0 0 14px rgba(59, 130, 246, 0.75);
}
.mt-leestekens {
  position: absolute; left: 0; top: 0; height: 18px; overflow: hidden; white-space: nowrap; opacity: 0;
  font-family: var(--tekst, "Hanken Grotesk", ui-sans-serif, system-ui, sans-serif); font-size: 11.5px; font-weight: 600; line-height: 18px; letter-spacing: 2.2px;
  color: rgba(37, 99, 235, 0.9);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent); mask-image: linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent);
}
.mt-donker .mt-leestekens { color: rgba(191, 219, 254, 0.95); }

/* ===== Ontvouwen: een lichtstreep over het antwoord ===== */
.mt-glanslaag { position: absolute; left: 0; top: 0; overflow: hidden; border-radius: 12px; opacity: 0; }
.mt-glansstreep {
  position: absolute; top: -30%; bottom: -30%; left: 0; width: 42%;
  background: linear-gradient(90deg, rgba(191, 219, 254, 0), rgba(191, 219, 254, 0.55) 50%, rgba(191, 219, 254, 0));
}
.mt-donker .mt-glansstreep { background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.22) 50%, rgba(255, 255, 255, 0)); }

/* ===== Wacht op jou en de tik ===== */
.mt-wacht { position: absolute; left: 0; top: 0; border-radius: 12px; opacity: 0; box-shadow: 0 0 0 1.5px rgba(59, 130, 246, 0.9), 0 0 24px rgba(96, 165, 250, 0.55); }
.mt-wacht-ring { position: absolute; left: 0; top: 0; width: 100%; height: 100%; border-radius: 12px; box-shadow: 0 0 0 1.5px rgba(96, 165, 250, 0.85); }
.mt-donker .mt-wacht { box-shadow: 0 0 0 1.5px rgba(191, 219, 254, 0.95), 0 0 26px rgba(96, 165, 250, 0.7); }
.mt-ring {
  position: absolute; left: 0; top: 0; border-radius: 50%; opacity: 0;
  border: 2px solid rgba(59, 130, 246, 0.95); box-shadow: 0 0 20px rgba(96, 165, 250, 0.6), inset 0 0 16px rgba(96, 165, 250, 0.35);
}
.mt-ring-zacht { border-width: 1px; }
.mt-donker .mt-ring { border-color: rgba(219, 234, 254, 0.95); box-shadow: 0 0 22px rgba(147, 197, 253, 0.7), inset 0 0 16px rgba(147, 197, 253, 0.35); }

/* ===== Het vinkje ===== */
.mt-vink { position: absolute; left: 0; top: 0; opacity: 0; }
.mt-vink-ring {
  position: absolute; left: 0; top: 0; width: 18px; height: 18px; border-radius: 50%; display: grid; place-items: center;
  background: #2563eb; box-shadow: 0 0 0 2px #ffffff, 0 4px 10px -3px rgba(29, 78, 216, 0.7), 0 0 14px rgba(59, 130, 246, 0.55);
}
.mt-vink-teken { width: 14px; height: 14px; stroke: #ffffff; }
.mt-vink-puls { position: absolute; left: 0; top: 0; width: 18px; height: 18px; border-radius: 50%; opacity: 0; border: 1.5px solid rgba(59, 130, 246, 0.9); box-shadow: 0 0 12px rgba(96, 165, 250, 0.6); }
.mt-donker .mt-vink-ring { box-shadow: 0 0 0 2px rgba(15, 24, 48, 0.9), 0 0 16px rgba(96, 165, 250, 0.8); }
.mt-donker .mt-vink-puls { border-color: rgba(191, 219, 254, 0.95); }

/* ===== Het gesprek: grote bellen in General Sans, mens lichtblauw rechts, systeem papierwit links ===== */
.mt-gesprek { position: absolute; left: 0; top: 0; right: 0; bottom: 0; pointer-events: none; }
.mt-bel {
  position: absolute; bottom: 0; max-width: 92%; padding: 11px 16px 10px; border-radius: 22px; opacity: 0;
  font-family: var(--kop, "General Sans", "Hanken Grotesk", ui-sans-serif, system-ui, sans-serif); font-size: var(--mt-bel-letter, 19px); font-weight: 450; line-height: 1.28; letter-spacing: -0.01em;
  color: #0b1220; will-change: transform, opacity;
}
.mt-bel-tekst { margin: 0; }
.mt-w { white-space: nowrap; }
.mt-l { opacity: 0; }
.mt-bel-systeem {
  left: 0; transform-origin: 0 100%; border-bottom-left-radius: 7px;
  background: #fbfcfe; box-shadow: 0 16px 34px -18px rgba(30, 22, 10, 0.38), 0 2px 6px -3px rgba(30, 22, 10, 0.12), inset 0 0 0 1px rgba(11, 18, 32, 0.05);
}
.mt-bel-mens {
  right: 0; transform-origin: 100% 100%; border-bottom-right-radius: 7px;
  background: linear-gradient(180deg, #e6efff 0%, #d7e6ff 100%); box-shadow: 0 14px 30px -18px rgba(29, 78, 216, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.75);
}
.mt-bel-tijd { display: block; margin-top: 3px; text-align: right; font-family: var(--tekst, "Hanken Grotesk", ui-sans-serif, system-ui, sans-serif); font-size: 11.5px; font-weight: 500; letter-spacing: 0.01em; color: #64748b; }
.mt-bel-caret { position: absolute; left: 0; top: 0; width: 2px; height: 1.15em; margin-top: 0.05em; border-radius: 1px; background: #2563eb; opacity: 0; }
.mt-puntjes { position: absolute; bottom: 0; display: flex; gap: 5px; padding: 14px 15px; border-radius: 20px; opacity: 0; }
.mt-puntjes i { width: 7px; height: 7px; border-radius: 50%; background: rgba(11, 18, 32, 0.38); }
.mt-puntjes.mt-bel-systeem { border-bottom-left-radius: 7px; }
.mt-puntjes.mt-bel-mens { border-bottom-right-radius: 7px; }
.mt-puntjes.mt-bel-mens i { background: rgba(29, 78, 216, 0.5); }