/* ============================================================
   KRAUTH+WERNET — film.css
   Nur Film-Übersichts-Seite-spezifische Styles.
   ============================================================ */

/* ---------- FILM SECTION TITLE ---------- */
/* ---------- STREAM TITLE (desktop only) ---------- */
/* Project title overlay that appears on thumb hover.
   Position matches .stream-title on the photo page. */
@media (min-width: 769px) {
  .stream-title {
    position: fixed;
    left: var(--margin-x);
    bottom: min(160px, 15vh);
    z-index: 5;
    width: calc((100vw - 2 * var(--margin-x) - 2 * var(--gutter)) / 3);
    display: flex;
    flex-direction: column;
    gap: 8px;
    pointer-events: none;
    transition: transform 3s cubic-bezier(0.05, 0.95, 0.15, 1);
  }

  .stream-title__label {
    display: inline-block;
    align-self: flex-start;
    padding: 5px 7px 2px 7px;
    background: var(--accent);
    color: var(--bg);
    border-radius: 999px;
    font-family: var(--font-body);
    font-weight: 500;
    font-size: 12px;
    line-height: 1;
    letter-spacing: -0.02em;
    opacity: 0;
    transition: opacity 1.5s cubic-bezier(0.16, 1, 0.3, 1);
  }

  .stream-title__heading {
    margin: 0;
    font-family: var(--font-head);
    font-weight: 300;
    font-size: 36px;
    line-height: 39px;
    letter-spacing: -0.055em;
    color: var(--ink);
    transition: line-height 3s cubic-bezier(0.05, 0.95, 0.15, 1);
  }
  .stream-title__heading .line {
    display: inline;
    opacity: 0;
    transition: opacity 1.5s cubic-bezier(0.16, 1, 0.3, 1);
  }

  /* Visible state */
  .stream-title:not(.is-hidden) .stream-title__label {
    opacity: 1;
  }
  .stream-title:not(.is-hidden) .stream-title__heading .line {
    opacity: 1;
  }

  /* Hidden state */
  .stream-title.is-hidden {
    transform: translateY(15px);
    pointer-events: none;
    transition: transform 1.8s cubic-bezier(0.4, 0, 0.6, 1);
  }
  .stream-title.is-hidden .stream-title__label {
    opacity: 0;
    transition: opacity .8s cubic-bezier(0.4, 0, 0.6, 1);
  }
  .stream-title.is-hidden .stream-title__heading {
    line-height: 50px;
    transition: line-height 1.8s cubic-bezier(0.4, 0, 0.6, 1);
  }
  .stream-title.is-hidden .stream-title__heading .line {
    opacity: 0;
    transition: opacity .8s cubic-bezier(0.4, 0, 0.6, 1);
  }
}

/* Hide completely on mobile */
@media (max-width: 768px) {
  .stream-title { display: none; }
}

/* ---------- FILM SLIDER ---------- */
.film-slider-wrapper {
  position: fixed;
  left: 0;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0;
  pointer-events: none;
  overflow: visible;
}

.film-slider-row {
  display: flex;
  align-items: center;
  gap: 4px;
  pointer-events: auto;
  will-change: transform;
  flex-shrink: 0;
}

/* Lazy load: per-thumb stagger from right to left, delay set via JS */
.film-thumb {
  flex-shrink: 0;
  overflow: hidden;
  position: relative;
  opacity: 1;
  transform: translateY(0);
  transition: opacity .35s ease-out, transform .9s cubic-bezier(0.16, 1, 0.3, 1);
}
.is-loading .film-thumb {
  opacity: 0;
  transform: translateY(18px);
  transition: none;
}

.film-thumb a {
  display: block;
  width: 100%;
  height: 100%;
}
.film-thumb .placeholder,
.film-thumb video,
.film-thumb img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  transition: transform .5s cubic-bezier(0.22, 1, 0.36, 1);
}
.film-thumb:hover .placeholder,
.film-thumb:hover video,
.film-thumb:hover img {
  transform: scale(1.04);
}
.film-thumb .placeholder.grey-light { background: #C8CACC; }
.film-thumb .placeholder.grey-dark  { background: #B0B2B5; }

/* ---------- FILM — MOBILE OVERRIDES ---------- */
@media (max-width: 768px) {
  .film-slider-wrapper {
    gap: 4px;
  }
}