/* niets mag breder zijn dan het scherm: voorkomt zijwaarts schuiven op iPhone (ook bij de 3D-ring) */
html, body { overflow-x: clip; }

/* IBE MOTION · gedeelde effecten (zelfde bestand in beide mappen). Gebruikt de kleuren en fonts van de site. */

/* logo-morph */
.ibe-morph { position: relative; aspect-ratio: 1; width: 100%; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.ibe-morph canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.ibe-morph::before { content: ""; position: absolute; inset: 12%; border-radius: 50%; background: radial-gradient(closest-side, rgba(var(--accent-rgb), .16), transparent); pointer-events: none; }
.ibe-morph-word { position: absolute; left: 50%; bottom: -6px; transform: translate(-50%, 6px); font: 500 11px var(--font-mono); letter-spacing: .2em; text-transform: uppercase; color: var(--accent); white-space: nowrap; opacity: 0; transition: opacity .35s ease, transform .45s cubic-bezier(.2,.7,.2,1); pointer-events: none; }
.ibe-morph-word.on { opacity: .9; transform: translate(-50%, 0); }
.ibe-morph-word::before, .ibe-morph-word::after { content: "·"; margin: 0 .7em; opacity: .5; }

/* loader */
.ibe-loader { display: block; flex: none; }
.fx-load { display: flex; align-items: center; justify-content: center; gap: 12px; min-height: 220px; color: var(--muted); font: 500 12px var(--font-mono); letter-spacing: .12em; text-transform: uppercase; }

/* dither-overgang */
.fx-dither { display: block; width: 100%; height: 220px; margin: 0; }
.fx-dither.rise { height: 380px; }
@media (max-width: 820px) { .fx-dither { height: 150px; } .fx-dither.rise { height: 260px; } }
.end-band { padding-bottom: 10px; }
.end-band > section:first-child { padding-top: 10px; }

/* koppen die woord voor woord binnenkomen */
.fx-words .fx-w { display: inline-block; opacity: 0; transform: translateY(.45em); filter: blur(6px); transition: opacity .6s ease, transform .7s cubic-bezier(.2,.7,.2,1), filter .6s ease; transition-delay: calc(var(--i) * 45ms); }
.fx-words.on .fx-w { opacity: 1; transform: none; filter: none; }

/* vaste knop op mobiel */
.fx-sticky { position: fixed; left: 16px; right: 16px; bottom: 14px; z-index: 60; display: none; align-items: center; justify-content: space-between; gap: 12px; padding: 15px 20px; border-radius: 14px; background: var(--accent); color: #fff; text-decoration: none; font: 600 15px var(--font); box-shadow: 0 18px 40px -14px rgba(var(--accent-rgb), .7); transform: translateY(140%); transition: transform .35s cubic-bezier(.2,.7,.2,1); }
.fx-sticky.on { transform: none; }
@media (max-width: 820px) { .fx-sticky { display: flex; } }

/* highlight van belangrijke woorden: canvas met dots achter de tekst */
.hl { position: relative; display: inline-block; isolation: isolate; white-space: nowrap; }
.hl > .hl-canvas { position: absolute; z-index: -1; pointer-events: none; opacity: 0; transition: opacity .9s ease; }
.hl > .hl-canvas.on { opacity: 1; }
.hl.wrap { white-space: normal; }

/* bronlabel bij een feit */
.src-tag { display: inline-flex; align-items: center; gap: 6px; font: 500 10.5px var(--font-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); text-decoration: none; border: 1px solid var(--line-2); border-radius: 99px; padding: 4px 10px; transition: color .2s, border-color .2s; }
.src-tag:hover { color: var(--accent); border-color: var(--accent); }
.src-tag::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }

/* boom die een QR-code wordt */
.qr-tree { position: relative; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.qr-tree canvas { width: 100%; max-width: 280px; aspect-ratio: 1; cursor: pointer; display: block; }
.qr-tree .qr-hint { font: 500 10.5px var(--font-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); text-align: center; }
.qr-tree .qr-hint b { color: var(--accent); font-weight: 500; }
.qr-note { position: absolute; top: -6px; right: 0; display: flex; flex-direction: column; align-items: flex-end; color: var(--accent); pointer-events: none; transition: opacity .5s, transform .5s; }
.qr-note span { font: 800 15px/1.2 var(--font-num); white-space: nowrap; }
.qr-note svg { width: 78px; height: 60px; margin-right: 18px; }
.qr-tree.is-qr .qr-note { opacity: 0; transform: translateY(-6px); }
@media (max-width: 820px) { .qr-note { right: 4%; } }

@media (prefers-reduced-motion: reduce) {
  .fx-words .fx-w { opacity: 1; transform: none; filter: none; transition: none; }
}