/* ============================================================
   SCROLLYTELLING — Byggr.nl
   Scroll progress, parallax, enhanced reveals
   ============================================================ */

/* ── Scroll progress bar ──────────────────────────────────── */
#scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--color-accent);
  transform-origin: left center;
  transform: scaleX(0);
  z-index: 9999;
  pointer-events: none;
}

/* ── Reveal-up — groter vertikaal bereik ─────────────────── */
.reveal-up {
  opacity: 0;
  transform: translateY(52px);
  transition: opacity 0.9s var(--ease-out-expo),
              transform 0.9s var(--ease-out-expo);
}
.reveal-up.visible {
  opacity: 1;
  transform: translateY(0);
}

/* Automatische stagger voor opeenvolgende reveal-up elementen */
.over__body .reveal-up:nth-child(2) { transition-delay: 160ms; }

/* ── Reveal-blur — voor omgevingselementen ───────────────── */
.reveal-blur {
  opacity: 0;
  filter: blur(8px);
  transform: translateY(16px);
  transition: opacity 0.8s var(--ease-out-expo),
              transform 0.8s var(--ease-out-expo),
              filter 0.7s var(--ease-out-expo);
}
.reveal-blur.visible {
  opacity: 1;
  filter: blur(0);
  transform: translateY(0);
}

/* ── Section title word-split reveal ─────────────────────── */
.section-title .st-word-wrap {
  display: inline-block;
  overflow: hidden;
  vertical-align: bottom;
  margin-right: 0.15em;
  line-height: 1.1;
}
.section-title .st-word-wrap:last-child { margin-right: 0; }

.section-title .st-word {
  display: inline-block;
  transform: translateY(115%);
  transition: transform 0.8s var(--ease-out-expo);
}

.section-title.visible .st-word {
  transform: translateY(0);
}

/* ── Parallax hint voor hero img ─────────────────────────── */
.project-hero__img {
  will-change: transform;
  transform: scale(1.08) translateY(0);
}

/* ── Reduced motion ──────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  #scroll-progress { display: none; }

  .reveal-up        { transition: none; }
  .reveal-up.visible { opacity: 1; transform: none; }

  .reveal-blur { transition: none; }
  .reveal-blur.visible { opacity: 1; filter: none; transform: none; }

  .section-title .st-word { transform: translateY(0); transition: none; }

  .project-hero__img { transform: none; will-change: auto; }
}