/* ==========================================================================
   Filmstrip Gallery (WordPress) — perforaties + frames + infinite roll
   Class: filmstrip-gallery
   ========================================================================== */

/* === Wrapper: filmstrip body === */
.filmstrip-gallery{
  position:relative;
  padding:26px 18px;
  margin:40px auto;
  border-radius:16px;

  background:linear-gradient(180deg,#151515,#0b0b0b);
  border:1px solid rgba(255,255,255,.08);

  box-shadow:
    inset 0 0 45px rgba(0,0,0,.82),
    0 0 26px rgba(226,0,223,.22);

  overflow:hidden;
  opacity:.92;

  transform:rotate(-2deg);
  animation: stripSway 7.2s ease-in-out infinite;

  width: min(980px, 100%) !important;
  max-width: 980px !important;
  margin-left: auto !important;
  margin-right: auto !important;

  /* ruimte voor perforaties */
  padding-top:34px;
  padding-bottom:34px;
}

@keyframes stripSway{
  0%,100%{ transform:rotate(-2deg) translateY(0); }
  50%{ transform:rotate(-2.3deg) translateY(-2px); }
}

/* === Kill theme gallery grid/columns === */
.filmstrip-gallery.wp-block-gallery,
.gallery.filmstrip-gallery{
  display:block !important;
  overflow:hidden !important;
}

/* ==========================================================================
   Frames (fallback look, als JS-track niet draait)
   ========================================================================== */
.filmstrip-gallery > figure,
.filmstrip-gallery > li,
.filmstrip-gallery > div,
.filmstrip-gallery .wp-block-gallery__item,
.filmstrip-gallery .blocks-gallery-item,
.filmstrip-gallery figure.wp-block-image,
.filmstrip-gallery .wp-block-image,
.gallery.filmstrip-gallery .gallery-item{
  flex:0 0 auto;
  width: clamp(360px, 42vw, 620px);
  max-width:none !important;
  min-width:0;

  padding:10px;
  border-radius:12px;

  background:linear-gradient(180deg,#0f0f0f,#1a1a1a);
  border:1px solid rgba(255,255,255,.08);
  box-shadow: inset 0 0 18px rgba(0,0,0,.78);
}

.filmstrip-gallery img{
  display:block !important;
  width:100% !important;
  max-width:none !important;

  height:260px;
  object-fit:cover;

  border-radius:8px;
  border:2px solid rgba(255,255,255,.14);
  box-shadow: 0 0 0 6px rgba(0,0,0,.48) inset;
  filter:contrast(1.08) saturate(1.08);
}

/* ==========================================================================
   INFINITE ROLL (JS maakt .filmstrip-track)
   ========================================================================== */
.filmstrip-gallery .filmstrip-track{
  display:flex !important;
  align-items:center;
  gap:14px;
  flex-wrap:nowrap !important;

  position:relative;
  z-index:1;

  will-change: transform;
  transform: translate3d(0,0,0);
  animation: filmScroll var(--roll-duration, 28s) linear infinite;

  /* zodat perforaties netjes in beeld liggen */
  padding-top: 0;
  padding-bottom: 0;
}

/* ✅ Perforaties verplaatsen naar de track (dan rollen ze mee) */
.filmstrip-gallery .filmstrip-track::before,
.filmstrip-gallery .filmstrip-track::after{
  content:"";
  position:absolute;
  left:-2000px;
  right:-2000px;  /* extra breed zodat je geen “einde” ziet */
  height:22px;
  pointer-events:none;
  z-index:3;

  background:
    repeating-linear-gradient(90deg,
      rgba(0,0,0,0) 0 10px,
      rgba(255,255,255,.22) 10px 14px,
      rgba(0,0,0,.60) 14px 18px,
      rgba(0,0,0,0) 18px 30px
    );

  opacity:.85;
  filter:blur(.15px);
}

.filmstrip-gallery .filmstrip-track::before{
  top: -28px; /* boven in wrapper-padding */
}

.filmstrip-gallery .filmstrip-track::after{
  bottom: -28px; /* onder in wrapper-padding */
  transform:scaleY(-1);
}

/* frames in track breed genoeg (fix smalle lijn) */
.filmstrip-gallery .filmstrip-track > *{
  flex: 0 0 clamp(360px, 42vw, 620px) !important;
  width: clamp(360px, 42vw, 620px) !important;
  min-width: clamp(360px, 42vw, 620px) !important;
  max-width:none !important;

  padding:10px;
  border-radius:12px;

  background:linear-gradient(180deg,#0f0f0f,#1a1a1a);
  border:1px solid rgba(255,255,255,.08);
  box-shadow: inset 0 0 18px rgba(0,0,0,.78);
}

.filmstrip-gallery .filmstrip-track img{
  display:block !important;
  width:100% !important;
  max-width:none !important;

  height:260px;
  object-fit:cover;

  border-radius:8px;
  border:2px solid rgba(255,255,255,.14);
  box-shadow: 0 0 0 6px rgba(0,0,0,.48) inset;
  filter:contrast(1.08) saturate(1.08);
}

/* animatie: schuif exact 1 set breedte door (JS zet --roll-distance) */
@keyframes filmScroll{
  to{
    transform: translate3d(calc(-1 * var(--roll-distance, 1200px)), 0, 0);
  }
}

/* optioneel: verberg scrollbars */
.filmstrip-gallery{
  scrollbar-width:none;
}
.filmstrip-gallery::-webkit-scrollbar{
  width:0;
  height:0;
}