/******* Do not edit this file *******
Simple Custom CSS and JS - by Silkypress.com
Saved: Oct 14 2026 | 22:50:14 */
/* ==========================================================
   BeeldBlinkers – cases op /werk en homepage natuurlijk laten verschijnen
   Plaats in: Weergave → Customizer → Extra CSS
   (moet in de <head> staan, zodat de cases niet eerst even 'opgestapeld' zichtbaar zijn)
   ========================================================== */

/* verborgen tot het grid klaarstaat en de case in beeld scrollt */
.work-overview-content .work-overview-item {
  opacity: 0;
}
/* vangnet: als het script niet laadt, verschijnt alles na 2,5 s alsnog */
.work-overview-content:not([data-bb-reveal]) .work-overview-item {
  animation: bb-case-fallback 0.6s ease 2.5s forwards;
}

.work-overview-content .work-overview-item.bb-in {
  animation: none;
  opacity: 1;
  transition: opacity 0.4s ease;   /* geen beweging: het kleurvlak doet het werk, op de eigen plek */
}

@keyframes bb-case-fallback {
  to { opacity: 1; }
}

/* kleurvlak groeit van boven naar beneden zodra de case verschijnt, daarna komt de foto.
   Met clip-path i.p.v. verschuiven: zo blijft het vlak binnen de eigen kader
   (het hover-effect zet de kader op overflow: visible, anders 'vliegt' het vlak uit de header). */
.work-overview-content .work-overview-item .picture-fadein .color-from-top {
  transform: none;
  clip-path: inset(0 0 100% 0);
  transition: clip-path 0.45s cubic-bezier(0.79, 0, 0.58, 0.95);
}
.work-overview-content .work-overview-item.bb-in .picture-fadein .color-from-top {
  clip-path: inset(0 0 0 0);
}
.work-overview-content .work-overview-item .picture-fadein img {
  opacity: 0;
  transition: opacity 0.45s ease, transform 0.5s;
}
/* vangnet zonder script: kleurvlak en foto alsnog tonen */
.work-overview-content:not([data-bb-reveal]) .work-overview-item .picture-fadein .color-from-top {
  animation: bb-color-fallback 0.6s ease 2.6s forwards;
}
.work-overview-content:not([data-bb-reveal]) .work-overview-item .picture-fadein img {
  animation: bb-case-fallback 0.6s ease 3.3s forwards;
}
/* foto pas als het kleurvlak staat én de foto geladen is */
.work-overview-content .work-overview-item.bb-color-done .picture-fadein.loaded img {
  opacity: 1;
}
@keyframes bb-color-fallback {
  to { clip-path: inset(0 0 0 0); }
}

@media (prefers-reduced-motion: reduce) {
  .work-overview-content .work-overview-item,
  .work-overview-content .work-overview-item.bb-in {
    opacity: 1; transform: none; animation: none; transition: none;
  }
  .work-overview-content .work-overview-item .picture-fadein .color-from-top { clip-path: none; transition: none; animation: none; }
  .work-overview-content .work-overview-item .picture-fadein.loaded img { opacity: 1; transition: none; animation: none; }
}