/*
 * Story — het scroll-verhaal op de homepage
 * ----------------------------------------
 * De homepage is één doorlopende reis. Hoofdstukken (.chapter) zijn hoge
 * blokken waarin een scène (.scene) blijft plakken; de scroll-afstand binnen
 * het hoofdstuk stuurt de animatie aan (assets/js/story.js).
 *
 * Beelden zijn <img> in plaats van background-image, zodat WordPress
 * srcset, lazy loading en alt-teksten kan leveren.
 */

/* ----------------------------------------
 * PODIUM + DRAAD
 * ---------------------------------------- */

.story {
  position: relative;
  overflow: clip;
}

.story__thread {
  position:       fixed;
  top:            0;
  left:           0;
  width:          100%;
  height:         100%;
  z-index:        4;
  pointer-events: none;
  opacity:        0.34;
}

.story__thread-path {
  fill:             none;
  stroke:           var(--color-sun);
  stroke-width:     1.6;
  stroke-linecap:   round;
  filter:           drop-shadow(0 0 4px rgba(244, 179, 36, 0.25));
}

.story__knot {
  position:       fixed;
  width:          11px;
  height:         11px;
  border-radius:  var(--radius-full);
  background:     var(--color-sun);
  z-index:        5;
  opacity:        0;
  transform:      translate(-50%, -50%) scale(0);
  transition:     transform 0.5s var(--ease-pop);
}

.story__knot.is-on {
  transform:  translate(-50%, -50%) scale(1);
  box-shadow: 0 0 0 0 rgba(244, 179, 36, 0.25);
  animation:  knot-pulse 3s ease-out infinite;
}

@keyframes knot-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(244, 179, 36, 0.25); }
  100% { box-shadow: 0 0 0 16px rgba(244, 179, 36, 0); }
}

/* ----------------------------------------
 * HOOFDSTUKKEN — scrollhoogte per hoofdstuk
 * ---------------------------------------- */

.chapter {
  position: relative;
}

.chapter--opening  { height: 220vh; }
.chapter--projects { height: 760vh; }
.chapter--donation { height: 300vh; }
.chapter--trust    { height: 210vh; }
.chapter--support  { height: 240vh; }

/* ----------------------------------------
 * SCÈNE
 * ---------------------------------------- */

.scene {
  position:     relative;
  display:      flex;
  align-items:  center;
  min-height:   100vh;
  overflow:     visible;
}

.scene--sticky {
  position:   sticky;
  top:        0;
  height:     100vh;
  min-height: 100vh;
  overflow:   hidden;
}

.scene--center {
  justify-content: center;
  text-align:      center;
}

.scene--left {
  justify-content: flex-start;
  text-align:      left;
}

/* ----------------------------------------
 * BEELD
 * ---------------------------------------- */

.scene__media {
  position:             absolute;
  left:                 0;
  right:                0;
  top:                  -32vh;
  height:               164vh;
  z-index:              1;
  overflow:             hidden;
  will-change:          transform;
  -webkit-mask-image:   linear-gradient(to bottom, transparent 0, #000 20%, #000 80%, transparent 100%);
  mask-image:           linear-gradient(to bottom, transparent 0, #000 20%, #000 80%, transparent 100%);
}

/* Vastgezette scènes vullen het scherm zonder vervaagde randen */
.scene__media--fill {
  top:                  0;
  height:               100%;
  -webkit-mask-image:   none;
  mask-image:           none;
}

.scene__media--green {
  background: var(--green-screen);
}

.scene__image {
  position:     absolute;
  inset:        0;
  width:        100%;
  height:       100%;
  object-fit:   cover;
  will-change:  transform, opacity;
}

/* Uitsnede uit het ontwerp: het gezicht blijft rechts in beeld */
.scene--verhaal .scene__image {
  object-position: 75% 30%;
}

.scene__tint {
  position:         absolute;
  inset:            0;
  mix-blend-mode:   multiply;
  background:       var(--tint-media);
}

.scene__scrim {
  position: absolute;
  inset:    0;
}

.scene__media--scrim-center .scene__scrim { background: var(--scrim-center); }
.scene__media--scrim-left   .scene__scrim { background: var(--scrim-left); }

.scene__grain {
  position:         absolute;
  inset:            0;
  opacity:          0.35;
  mix-blend-mode:   overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E");
}

/* Floers dat oploopt zodat de bankgegevens leesbaar blijven */
.scene__veil {
  position:     absolute;
  inset:        0;
  background:   rgba(11, 13, 8, 0.62);
  opacity:      0;
  will-change:  opacity;
}

/* Warme gloed achter het openingsscherm */
.scene__lamp {
  position:       absolute;
  top:            44%;
  left:           50%;
  transform:      translate(-50%, -50%);
  width:          300px;
  height:         300px;
  border-radius:  var(--radius-full);
  background:     radial-gradient(circle, rgba(244, 179, 36, 0.5), transparent 62%);
  filter:         blur(8px);
  z-index:        2;
  opacity:        0;
}

/* ----------------------------------------
 * TEKST IN DE SCÈNE
 * ---------------------------------------- */

.scene__content {
  position:     relative;
  z-index:      10;
  width:        100%;
  padding:      20vh var(--gutter) 14vh;
  will-change:  opacity, transform;
}

.scene__inner {
  max-width:  var(--measure-wide);
  margin:     0 auto;
}

.scene--left .scene__inner {
  max-width:      var(--measure);
  margin:         0;
  margin-right:   auto;
}

.scene__title {
  margin-bottom: var(--space-6);
}

.scene__intro {
  font-size:  var(--text-intro);
  color:      var(--color-cream-90);
  max-width:  var(--measure-intro);
  margin:     0 auto;
}

.scene--left .scene__intro {
  margin: 0;
}

.scene__lead {
  font-family:    var(--font-serif);
  font-style:     italic;
  font-size:      var(--text-lead);
  line-height:    var(--leading-tight);
  color:          var(--color-cream);
  margin-bottom:  var(--space-6);
}

.scene__text {
  font-size:      var(--text-flow);
  color:          var(--color-cream-92);
  max-width:      var(--measure-text);
  margin-bottom:  var(--space-4);
}

.scene--center .scene__text {
  margin-left:  auto;
  margin-right: auto;
}

.scene__actions {
  margin-top: var(--space-8);
}

/* Tekst uit de editor: dezelfde maat en kleur als .scene__text */
.scene__prose p,
.project__prose p {
  font-size:      var(--text-flow);
  color:          var(--color-cream-92);
  max-width:      var(--measure-text);
  margin-bottom:  var(--space-4);
}

.project__prose p {
  font-size:      var(--text-intro);
  max-width:      var(--measure-intro);
  margin-bottom:  var(--space-3);
}

.scene__prose--center p {
  margin-left:  auto;
  margin-right: auto;
}

.scene__prose p:last-child,
.project__prose p:last-child {
  margin-bottom: 0;
}

/* Ondertitel en knop komen pas zodra je begint te scrollen */
.scene__late {
  opacity:      0;
  transform:    translateY(16px);
  will-change:  opacity, transform;
}

/* ----------------------------------------
 * HOOFDSTUK "ONS WERK" — wisselende projecten
 * ---------------------------------------- */

.projects__head {
  position: absolute;
  top:      16vh;
  left:     var(--gutter);
  z-index:  11;
  opacity:  0;
}

.projects__head .eyebrow {
  margin: 0 0 var(--space-2);
}

.projects__title {
  font-size: var(--text-heading-s);
}

.projects__count {
  position:       absolute;
  bottom:         9vh;
  left:           var(--gutter);
  z-index:        11;
  font-family:    var(--font-display);
  font-weight:    var(--font-extrabold);
  font-size:      var(--text-count);
  letter-spacing: -0.01em;
  color:          var(--color-sun);
  opacity:        0;
}

.projects__slides {
  position:     relative;
  z-index:      10;
  width:        100%;
  padding:      0 var(--gutter);
  min-height:   56vh;
  display:      flex;
  align-items:  center;
}

.projects__image {
  opacity: 0;
}

/* Zonder JS blijft het eerste projectbeeld gewoon staan */
.projects__image:first-of-type {
  opacity: 1;
}

.project {
  position:     absolute;
  left:         var(--gutter);
  right:        var(--gutter);
  max-width:    var(--measure-slide);
  opacity:      0;
  will-change:  opacity, transform;
}

.project__title {
  font-family:    var(--font-display);
  font-weight:    var(--font-extrabold);
  font-size:      var(--text-chapter);
  line-height:    var(--leading-none);
  letter-spacing: var(--tracking-tight);
  margin-bottom:  var(--space-5);
}

.project__text {
  font-size:      var(--text-intro);
  color:          var(--color-cream-92);
  max-width:      var(--measure-intro);
  margin-bottom:  var(--space-3);
}

.project__cost {
  font-weight:    var(--font-extrabold);
  color:          var(--color-sun);
  margin-bottom:  var(--space-2);
}

/* ----------------------------------------
 * HOOFDSTUK "WAT UW DONATIE DOET" — de ladder
 * ---------------------------------------- */

.ladder {
  display:    grid;
  gap:        var(--space-3);
  max-width:  760px;
  margin:     var(--space-6) 0 var(--space-8);
}

.ladder__step {
  display:      flex;
  gap:          var(--space-6);
  align-items:  baseline;
  border-top:   1px solid var(--color-cream-22);
  padding-top:  13px;
  opacity:      0;
  transform:    translateY(28px);
  will-change:  opacity, transform;
}

.ladder__amount {
  font-family:  var(--font-display);
  font-weight:  var(--font-extrabold);
  font-size:    var(--text-amount);
  line-height:  var(--leading-none);
  color:        var(--color-sun);
  flex:         none;
  min-width:    2.6em;
  display:      inline-block;
  will-change:  transform;
}

.ladder__text {
  font-size: 1.06rem;
  color:     var(--color-cream-92);
}

.scene__closing {
  font-family:    var(--font-serif);
  font-style:     italic;
  font-size:      var(--text-quote);
  color:          var(--color-cream);
  margin-bottom:  var(--space-6);
  opacity:        0;
  transform:      translateY(20px);
  will-change:    opacity, transform;
}

.scene__cta {
  display:      inline-block;
  opacity:      0;
  transform:    translateY(20px);
  will-change:  opacity, transform;
}

/* ----------------------------------------
 * HOOFDSTUK "STEUN ONS WERK" — bank + nieuwsbrief
 * ---------------------------------------- */

.bank-details {
  font-size:    var(--text-base);
  line-height:  var(--leading-loose);
  color:        var(--color-cream-90);
}

.bank-details b {
  color: var(--color-cream);
}

.newsletter-block {
  margin-top:   var(--space-12);
  padding-top:  30px;
  border-top:   1px solid var(--color-cream-20);
}

.newsletter-block .newsletter {
  margin-left:  auto;
  margin-right: auto;
}

/* ----------------------------------------
 * MOBIEL
 * ---------------------------------------- */

@media (max-width: 760px) {

  .scene__content {
    padding-left:   var(--gutter-mobile);
    padding-right:  var(--gutter-mobile);
  }

  .projects__head {
    left: var(--gutter-mobile);
    top:  13vh;
  }

  .projects__count {
    left:   var(--gutter-mobile);
    bottom: 7vh;
  }

  .projects__slides {
    padding: 0 var(--gutter-mobile);
  }

  .project {
    left:   var(--gutter-mobile);
    right:  var(--gutter-mobile);
  }

  .ladder__step {
    gap: var(--space-4);
  }
}

/* ----------------------------------------
 * BEWEGING BEPERKEN
 * ---------------------------------------- */

@media (prefers-reduced-motion: reduce) {

  .scene__media,
  .scene__image {
    transform: none !important;
  }

  .scene__content,
  .project,
  .projects__head,
  .projects__count,
  .ladder__step,
  .scene__closing,
  .scene__cta,
  .scene__late {
    opacity:    1 !important;
    transform:  none !important;
  }

  .scene__lamp {
    opacity: 0.8 !important;
  }

  .scroll-cue__line,
  .story__knot.is-on {
    animation: none;
  }

  .story__thread-path {
    stroke-dashoffset: 0 !important;
  }
}