/* ============================================================
   lss-parallax-block.css — frontend-stijl voor het lss-editor parallax-beeld-blok.
   Hoort bij lss-parallax-block.js. Eigen class .lss-parallax-block (geen conflict
   met de bestaande sectie-parallax). Geeft het beeld een NET VENSTER met vaste
   verhouding (geen mega-plaatje meer) + effect.
   ============================================================ */

.lss-parallax-block{
  position: relative;
  margin: 1.5rem 0;
  border-radius: 12px;
  overflow: hidden;
  /* nette vaste verhouding ipv volle beeldgrootte */
  aspect-ratio: 16 / 7;
  min-height: 220px;
  background: #f0f2f5 center / cover no-repeat;
}
/* fallback voor browsers zonder aspect-ratio */
@supports not (aspect-ratio: 16 / 7){
  .lss-parallax-block{ height: 340px; }
}
.lss-parallax-block img{ display: none; } /* bron-img is alleen de bron, niet getoond */

/* ── pinned (klassieke parallax): groter beeldvlak dat verschuift ── */
.lss-parallax-block.lssp-pinned{
  background-attachment: scroll;       /* JS verschuift background-position */
  background-size: cover;
}

/* ── scroll-reveal: start verborgen, komt in beeld ── */
.lss-parallax-block.lssp-reveal{
  opacity: 0;
  transition: opacity .7s ease, transform .7s cubic-bezier(.2,.7,.2,1);
}
.lss-parallax-block.lssp-reveal.lssp-fx-entrance-fade-in{ transform: none; }
.lss-parallax-block.lssp-reveal.lssp-fx-entrance-slide-up{ transform: translateY(28px); }
.lss-parallax-block.lssp-reveal.lssp-fx-entrance-slide-left{ transform: translateX(-28px); }
.lss-parallax-block.lssp-reveal.lssp-fx-entrance-slide-right{ transform: translateX(28px); }
.lss-parallax-block.lssp-reveal.lssp-fx-entrance-zoom-in{ transform: scale(1.06); }
.lss-parallax-block.lssp-reveal.lssp-fx-entrance-stagger{ transform: translateY(28px); }
/* in beeld → naar rust */
.lss-parallax-block.lssp-reveal.lssp-in{ opacity: 1; transform: none; }