/*
 * Filmstreifen (Hero)
 *
 * Ziel: Ein durchgehender Filmnegativ‑Streifen, der „kein Ende“ hat.
 * Die Bilder laufen endlos durch, während Rand + Perforation über
 * die komplette sichtbare Breite laufen.
 *
 * Steuerung über CSS‑Variablen (kommen aus dem Customizer):
 *  --film-angle   (z.B. 22deg)
 *  --film-size    (z.B. 110px)
 *  --film-border  (z.B. 3px)
 */

.film-strip-container{
  position:relative;
  overflow:hidden;
  width:100%;
  padding:2rem 0;
  transform:rotate(var(--film-angle, 22deg));
  transform-origin:center center;
}

/*
 * Sichtfenster des Filmstreifens (Rand + Perforation).
 * Wichtig: Rand/Perforation sind „durchgehend“, damit der Streifen
 * wie ein einzelnes langes Negativ wirkt.
 */
.film-strip-shell{
  position:relative;
  overflow:hidden;
  background:var(--kl-surface2);
  /* The film strip color is configurable via the customizer.
   * It affects the top/bottom borders of the strip. */
  border-top:var(--film-border, 3px) solid var(--film-color, var(--kl-primary));
  border-bottom:var(--film-border, 3px) solid var(--film-color, var(--kl-primary));
  /* Platz zwischen Rand/Perforation und Bildern */
  padding-block:calc(var(--film-border, 3px) * 2 + 14px);
  box-shadow:0 4px 20px rgba(0,0,0,.25);

  /* Kanten weich ausblenden, damit kein „Anfang/Ende“ sichtbar wirkt */
  -webkit-mask-image:linear-gradient(to right, transparent 0%, #000 8%, #000 92%, transparent 100%);
  mask-image:linear-gradient(to right, transparent 0%, #000 8%, #000 92%, transparent 100%);
}

/* Perforation oben/unten (durchgehend) */
.film-strip-shell::before,
.film-strip-shell::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  height:var(--film-border, 3px);
  background-image:repeating-linear-gradient(
    90deg,
    var(--film-perf, var(--kl-accent)) 0 6px,
    transparent 6px 12px
  );
  pointer-events:none;
  z-index:2;
}
.film-strip-shell::before{ top:0; }
.film-strip-shell::after{ bottom:0; }

/* Track = bewegte Ebene. Enthält 2 identische Sets -> nahtloses Loop */
.film-strip-track{
  display:flex;
  width:max-content;
  will-change:transform;
  animation:film-scroll var(--film-speed, 90s) linear infinite;
}

.film-strip-set{
  display:flex;
  align-items:center;
  flex-wrap:nowrap;
  /* Ensure identical spacing between frames (including between the two duplicated sets) */
  --film-gap:12px;
  gap:var(--film-gap);
  padding-right:var(--film-gap);
}

/*
 * Gleichmäßige Frames: Alle Bilder bekommen die gleiche Größe und den gleichen
 * Abstand. Das Bild wird in ein festes Seitenverhältnis gecroppt.
 */
.film-strip-frame{
  width:var(--film-size, 110px);
  aspect-ratio: 3 / 2;
  border-radius:4px;
  overflow:hidden;
  flex:0 0 auto;
  box-shadow:0 4px 12px rgba(0,0,0,.25);
  background:rgba(0,0,0,.18);
}

.film-strip-frame img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
}

@keyframes film-scroll{
  from{ transform:translateX(0); }
  to{ transform:translateX(-50%); }
}

@media (prefers-reduced-motion: reduce){
  .film-strip-track{ animation:none; }
}

@media (max-width: 768px){
  .film-strip-container{ padding:1rem 0; }
  .film-strip-shell{ padding-block:calc(var(--film-border, 3px) * 2 + 10px); }
  .film-strip-set{ --film-gap:10px; }
}