/* Filmi — a real horizontal scroll container, not hijacked scroll.
   Keyboard, trackpad and drag all move it natively; the motion on top is
   pure CSS scroll-driven animation, so this page ships no JS of its own. */

.filmi-wrap { --film: #1E3330; margin: 4vh 0 10vh; }

.sprockets {
  height: 1.5rem;
  background-color: var(--film);
  background-image: repeating-linear-gradient(
    90deg,
    transparent 0 14px,
    var(--ground) 14px 28px,
    transparent 28px 44px);
  background-size: 44px 100%;
}

.strip-scroller {
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  background: var(--film);
  perspective: 950px;
  scrollbar-width: thin;
}
.strip-scroller:focus-visible { outline-offset: -3px; }

.strip {
  list-style: none; margin: 0;
  padding: 1.6rem var(--gut);
  display: flex; gap: 1.6rem;
  transform-style: preserve-3d;
}

.frame {
  /* Viewport-relative so four frames always exceed the viewport — a fixed
     rem basis let the strip fit on wide screens, leaving nothing to scroll. */
  flex: 0 0 clamp(16rem, 34vw, 46rem);
  scroll-snap-align: center;
  position: relative;
  padding: .9rem .9rem 1.1rem;
  border: 1px solid color-mix(in srgb, var(--ground) 22%, transparent);
  background: color-mix(in srgb, var(--ground) 7%, transparent);
}

.frame-no {
  display: block; margin-bottom: .7rem;
  font: 600 .6875rem/1 var(--mono);
  letter-spacing: .18em;
  color: var(--brass-fill);
}

.frame-art {
  aspect-ratio: 4 / 3;
  background: var(--plane);
  display: grid; place-items: center;
  overflow: hidden;
}
.frame-art > span { width: 54%; aspect-ratio: 1; position: relative; }

.fa-1 { border-radius: 50%; background: color-mix(in srgb, var(--brass-fill) 55%, transparent); }
.fa-2 { background: repeating-linear-gradient(90deg,
          color-mix(in srgb, var(--glass) 55%, transparent) 0 3px, transparent 3px 12px); }
.fa-3 { border: 3px solid color-mix(in srgb, var(--glass) 62%, transparent);
        border-radius: 4px; transform: rotate(12deg); }
.fa-4 { background: conic-gradient(from 210deg,
          color-mix(in srgb, var(--glass) 50%, transparent),
          color-mix(in srgb, var(--brass-fill) 60%, transparent),
          color-mix(in srgb, var(--glass) 50%, transparent));
        border-radius: 50%; }

.frame-cap {
  margin: .9rem 0 0;
  font: 400 .95rem/1.5 var(--body);
  color: color-mix(in srgb, var(--ground) 80%, var(--film));
}

.filmi-hint { padding: 0 var(--gut) 2vh; color: var(--dim); }

/* ── the fancy part, gated so unsupported browsers keep the good state ── */

@supports (animation-timeline: view()) {
  :root:not(.calm) .frame {
    animation-name: gate;
    animation-duration: auto;
    animation-timing-function: linear;
    animation-fill-mode: both;
    animation-timeline: view(inline);
    animation-range: entry 0% exit 100%;
  }
  @keyframes gate {
    0%   { opacity: .3; transform: rotateY(30deg) scale(.85); }
    50%  { opacity: 1;  transform: none; }
    100% { opacity: .3; transform: rotateY(-30deg) scale(.85); }
  }

  /* Sprockets run as the strip travels. */
  :root:not(.calm) .sprockets {
    animation-name: run;
    animation-duration: auto;
    animation-timing-function: linear;
    animation-fill-mode: both;
    animation-timeline: scroll(nearest inline);
  }
  @keyframes run { to { background-position-x: -440px; } }
}

@media (max-width: 560px) {
  .frame { flex-basis: 82vw; }
}