/* ScrollStory — het verhaal in een iframe, als blok of schermvullend. */
.scrollstory { position: relative; display: block; overflow: hidden; background: #0b0b0d; }
.scrollstory--blok { width: 100%; height: var(--scrollstory-hoogte, 80vh); min-height: 240px; }
/* Schermvullend: de volle hoogte en breedte van het venster, ook binnen een smal thema.
   --scrollstory-balk (door scrollstory.js) trekt een eventuele schuifbalk eraf. */
.scrollstory--vol {
  height: 100vh; height: 100dvh;
  width: calc(100vw - var(--scrollstory-balk, 0px)) !important;
  max-width: none !important;
  /* Thema's (blokthema's, Elementor) zetten marges met !important; daarom
     schuift scrollstory.js het vak met "left" precies naar de linkerrand. */
  margin-left: 0 !important; margin-right: 0 !important;
  left: var(--scrollstory-links, 0px);
}
.scrollstory-frame { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block;
                     opacity: 0; transition: opacity .5s ease; }
.scrollstory.is-geladen .scrollstory-frame { opacity: 1; }
/* Een rustige laadring tot het verhaal er is. */
.scrollstory::before { content: ""; position: absolute; left: 50%; top: 50%; width: 28px; height: 28px; margin: -14px;
                       border: 2px solid rgba(255,255,255,.25); border-top-color: rgba(255,255,255,.8); border-radius: 50%;
                       animation: scrollstory-draai .8s linear infinite; }
.scrollstory.is-geladen::before { display: none; }
@keyframes scrollstory-draai { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .scrollstory::before { animation: none; } }
.scrollstory-leeg { padding: 16px; border: 1px dashed #999; color: #555; font: 14px/1.4 system-ui, sans-serif; }
/* Het sjabloon "alleen het verhaal": niets om het verhaal heen. */
body.scrollstory-alleen { margin: 0; padding: 0; background: #000; }
body.scrollstory-alleen .scrollstory--vol { left: 0; width: 100% !important; }
/* In de blokeditor: een doorzichtige laag, zodat klikken het blok kiest. Het
   script draait daar niet, dus het verhaal meteen tonen (geen laadring). */
.scrollstory-editor { position: relative; }
.scrollstory-editor-laag { position: absolute; inset: 0; z-index: 2; }
.scrollstory-editor .scrollstory-frame { opacity: 1; }
.scrollstory-editor .scrollstory::before { display: none; }