/* Het verhaal: één vast beeld, vijf hoofdstukken. De scroll bepaalt welk schilderij en welke mist zichtbaar is. */
.story { position: relative; }
.story-track { height: 520vh; }
.story-stage { position: sticky; top: 0; height: 100vh; height: 100dvh; overflow: hidden; background: #efe6d2; }
.story-layer { position: absolute; inset: 0; opacity: 0; will-change: transform, opacity; transform-origin: 50% 40%; }
.story-layer img { width: 100%; height: 100%; object-fit: cover; display: block; }
.story-layer.eind img { object-fit: contain; background: #efe6d2; }
.story-mist { position: absolute; inset: -10%; pointer-events: none; opacity: 0;
  background: radial-gradient(ellipse at 50% 60%, rgba(239,230,210,0.95) 0%, rgba(239,230,210,0.5) 45%, rgba(239,230,210,0) 75%); }
.story-vignette { position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(ellipse at 50% 45%, rgba(0,0,0,0) 55%, rgba(40,28,14,0.35) 100%); }
.story-text { position: absolute; left: 16px; right: 16px; bottom: calc(env(safe-area-inset-bottom) + 28px); max-width: 640px; margin: 0 auto;
  padding: 18px 20px; border-radius: 14px; background: rgba(251,246,234,0.86); color: #2a2420; box-shadow: 0 6px 24px rgba(40,28,14,0.18);
  opacity: 0; transform: translateY(12px); transition: opacity 0.6s ease, transform 0.6s ease; }
.story-text.on { opacity: 1; transform: translateY(0); }
.story-text h2 { font-family: var(--display-font, Georgia, serif); font-size: 1.5rem; margin: 0 0 6px; }
.story-text p { margin: 0; font-size: 1rem; line-height: 1.5; }
.story-seal { display: inline-block; width: 22px; height: 22px; margin-right: 8px; vertical-align: -4px; border-radius: 4px;
  background: #b5322a; color: #fbf6ea; font: 700 13px/22px Georgia, serif; text-align: center; }
.story-progress { position: absolute; top: calc(env(safe-area-inset-top) + 14px); left: 16px; right: 16px; height: 3px; background: rgba(42,36,32,0.15); border-radius: 2px; }
.story-progress span { display: block; height: 100%; width: 0; background: #b5322a; border-radius: 2px; }
.story-skip { position: absolute; top: calc(env(safe-area-inset-top) + 22px); right: 16px; font: 600 14px/1 system-ui, sans-serif; color: #2a2420; text-decoration: underline; }
@media (prefers-reduced-motion: reduce) {
  .story-text { transition: none; }
}