/*
      ___                         ___     
     /  /\         _____         /__/\    
    /  /:/_       /  /::\       |  |::\   
   /  /:/ /\     /  /:/\:\      |  |:|:\  
  /  /:/ /::\   /  /:/~/::\   __|__|:|\:\ 
 /__/:/ /:/\:\ /__/:/ /:/\:| /__/::::| \:\
 \  \:\/:/~/:/ \  \:\/:/~/:/ \  \:\~~\__\/
  \  \::/ /:/   \  \::/ /:/   \  \:\      
   \__\/ /:/     \  \:\/:/     \  \:\     
     /__/:/       \  \::/       \  \:\    
     \__\/         \__\/         \__\/    

 Theme Name:   	S.B.M. - De gezelligste club van Tilburg -
 Description:  	This is a child theme for S.B.M.
 Author:       	Squido Concept & Design
 Author URI:   	https://www.squido.nl

*/

/* ==========================================================
   SBM Parallax Overlay (pure CSS, class-gestuurd)
   ----------------------------------------------------------
   Gebruik (variant A – via body/pagina-veld):
     Body classes:  sbm-parallax-page sbm-parallax-img-batje
     Sectie:        class "sbm-parallax-zone"
     Binnen die sectie: leeg element met class "sbm-parallax-layer"

   Gebruik (variant B – per sectie):
     Body classes:  sbm-parallax-page
     Parallax-sectie: class "sbm-parallax-zone sbm-parallax-img-batje"
     Binnen die sectie: leeg element met class "sbm-parallax-layer"

   Afbeelding voor deze case:
     /wp-content/uploads/2025/09/batje-klein.png
   ========================================================== */

/* ---------- Basis-variabelen (optioneel) ---------- */
.sbm-parallax-page {
  /* Hoogte van de scroll-zone (vergroten = langzamer/parallax over grotere afstand) */
  --parallax-zone-height: 200vh;

  /* Visuele finetuning */
  --parallax-opacity: 1;
  --parallax-blend: normal; /* bv. multiply, screen, overlay */
  --parallax-z: 0;          /* pas aan als je over/onder iets heen wilt stacken */
}

/* ---------- Parallax zone/container ---------- */
.sbm-parallax-page .sbm-parallax-zone {
  position: relative;
  min-height: var(--parallax-zone-height, 200vh);
  /* Fallback + modern clip om "lekken" te voorkomen */
  overflow: hidden;
  overflow: clip;
}

/* ---------- Parallax overlay-laag ---------- */
.sbm-parallax-page .sbm-parallax-zone .sbm-parallax-layer {
  position: sticky;
  top: 0;
  height: 100vh;                 /* vult viewport tijdens scroll */
  z-index: var(--parallax-z, 0);
  pointer-events: none;          /* blokkeert geen interactie met content eronder */

  /* Achtergrondafbeelding (wordt gezet via CSS-variabele door class) */
  background-image: var(--parallax-image);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: 50% 120%; /* start net onderin beeld */

  mix-blend-mode: var(--parallax-blend, normal);
  opacity: var(--parallax-opacity, 1);
  will-change: background-position;
}

/* ---------- Scroll-gestuurde animatie (moderne browsers) ---------- */
@supports (animation-timeline: view()) {
  @keyframes sbm-parallax-rise {
    from { background-position: 50% 120%; }  /* van onder */
    to   { background-position: 50% -20%;  } /* naar boven uit beeld */
  }
  .sbm-parallax-page .sbm-parallax-zone .sbm-parallax-layer {
    animation: sbm-parallax-rise linear both;
    /* koppel animatie aan de zichtbaarheid van de zone */
    animation-timeline: view(block);
    animation-range: contain 0% 100%;
  }
}

/* ---------- Fallback (oudere browsers / iOS) ---------- */
@supports not (animation-timeline: view()) {
  .sbm-parallax-page .sbm-parallax-zone .sbm-parallax-layer {
    background-attachment: fixed;   /* eenvoudige parallax */
    background-position: 50% 100%;
  }
}

/* ---------- Optionele diepe schaduw aan de onderrand ---------- */
.sbm-parallax-page .sbm-parallax-zone .sbm-parallax-layer::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 30vh;
  background: linear-gradient(to bottom, transparent, rgba(0,0,0,0.65));
  pointer-events: none;
}

/* ---------- Toegankelijkheid: respecteer "reduce motion" ---------- */
@media (prefers-reduced-motion: reduce) {
  .sbm-parallax-page .sbm-parallax-zone .sbm-parallax-layer {
    animation: none !important;
    background-attachment: scroll !important;
    background-position: 50% 50% !important;
  }
}

/* ==========================================================
   KOPPEL DE AFBEELDING AAN EEN CLASS
   ----------------------------------------------------------
   1) Via BODY class (alle zones op de pagina gebruiken dezelfde image)
   2) Of per sectie (alleen die sectie krijgt deze image)
   ========================================================== */

/* 1) Via BODY class: voeg 'sbm-parallax-img-batje' toe aan Body Classes */
.sbm-parallax-page.sbm-parallax-img-batje .sbm-parallax-layer {
  --parallax-image: url('/wp-content/uploads/2025/09/batje-klein.png');
}

/* 2) Via SECTIE: zet 'sbm-parallax-img-batje' op de parallax-sectie */
.sbm-parallax-page .sbm-parallax-zone.sbm-parallax-img-batje .sbm-parallax-layer {
  --parallax-image: url('/wp-content/uploads/2025/09/batje-klein.png');
}

/* ==========================================================
   HANDIGE VARIANT-CLASSES (optioneel)
   ----------------------------------------------------------
   Voeg deze extra classes toe aan .sbm-parallax-zone om gedrag te tunen.
   ========================================================== */

/* Iets langere scroll (trager effect) */
.sbm-parallax-page .sbm-parallax-zone.sbm-parallax-loose {
  --parallax-zone-height: 260vh;
}

/* Kortere scroll (sneller effect) */
.sbm-parallax-page .sbm-parallax-zone.sbm-parallax-tight {
  --parallax-zone-height: 150vh;
}

/* Subtielere overlay (iets transparanter) */
.sbm-parallax-page .sbm-parallax-zone.sbm-parallax-soft .sbm-parallax-layer {
  --parallax-opacity: 0.9;
}

/* Sterke blend voor donkere foto’s */
.sbm-parallax-page .sbm-parallax-zone.sbm-parallax-multiply .sbm-parallax-layer {
  --parallax-blend: multiply;
}

/* Iets later starten/eerder stoppen (alleen moderne browsers) */
@supports (animation-timeline: view()) {
  .sbm-parallax-page .sbm-parallax-zone.sbm-parallax-late .sbm-parallax-layer {
    animation-range: contain 10% 90%;
  }
}