/* ============================================================
   CLIPSCOUT — 70MM DIVIDER FILM

   The five supplied cut silhouettes remain, but the divider stock is now
   narrow, flat, evenly sepia-tinted, and translucent. An even-odd SVG mask punches
   one row of 70mm-proportioned, softly rounded perforations along the surviving
   factory edge. That sprocket edge stays straight and carries enough stock to
   protect the holes; only the opposite long edge is visibly hand-cut. The celestial
   field—not a painted swatch—shows in every hole.
   ============================================================ */

.film-strip {
  position: relative;
}

.film-strip::before {
  position: absolute;
  inset: 0;
  z-index: 0;
  content: "";
  pointer-events: none;
  background-image: var(--cs-raw-field-img, var(--bokeh-img));
  background-attachment: fixed;
  background-size: cover;
  background-position: 50% 50%;
  background-repeat: no-repeat;
  filter: none;
  opacity: 1;
}

.film-strip > .reel-marker {
  position: relative;
  z-index: 1;
}

.reel-marker {
  --divider-film-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 44'%3E%3Cpath d='M0 0H22V44H0ZM8 5H14Q16 5 16 7V10Q16 12 14 12H8Q6 12 6 10V7Q6 5 8 5Z' fill='%23fff' fill-rule='evenodd'/%3E%3C/svg%3E");
  position: relative;
  isolation: isolate;
  height: 44px;
  display: flex;
  align-items: stretch;
  overflow: hidden;
  border: 0;
  border-radius: 0;
  background: rgba(43, 35, 29, 0.52);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  box-shadow: none;
  -webkit-mask-image: var(--divider-film-mask);
  mask-image: var(--divider-film-mask);
  -webkit-mask-size: 22px 44px;
  mask-size: 22px 44px;
  -webkit-mask-repeat: repeat-x;
  mask-repeat: repeat-x;
  -webkit-mask-position: 0 0;
  mask-position: 0 0;
}

.reel-marker.information-strip {
  min-height: 44px;
}

/* The factory sprocket edge is intentionally level in every cut. Variation
   belongs to the hand-cut lower edge and, where present, the exposed ends. */
.reel-marker,
.reel-marker[data-cut="1"] {
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 2px), 84% 100%, 64% calc(100% - 1px), 45% 100%, 25% calc(100% - 2px), 8% 100%, 0 calc(100% - 1px));
}

/* 02 — lower right corner snipped diagonally. */
.reel-marker[data-cut="2"] {
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 80% calc(100% - 1px), 58% 100%, 35% calc(100% - 2px), 12% 100%, 0 calc(100% - 1px));
}

/* 03 — left end snapped beneath the sprocket band. */
.reel-marker[data-cut="3"] {
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 1px), 79% 100%, 57% calc(100% - 2px), 34% 100%, 12% calc(100% - 1px), 6px 100%, 2px 78%, 7px 61%, 1px 44%);
}

/* 04 — lower edge raked at both ends. */
.reel-marker[data-cut="4"] {
  clip-path: polygon(0 0, 100% 0, calc(100% - 7px) calc(100% - 1px), 76% 100%, 52% calc(100% - 2px), 27% 100%, 0 100%);
}

/* 05 — right end torn below the intact sprocket edge. */
.reel-marker[data-cut="5"] {
  clip-path: polygon(0 0, 100% 0, calc(100% - 1px) 19%, calc(100% - 6px) 38%, calc(100% - 2px) 57%, calc(100% - 7px) 76%, calc(100% - 3px) 100%, 80% calc(100% - 1px), 60% 100%, 40% calc(100% - 2px), 20% 100%, 0 calc(100% - 1px));
}

/* Chromium flattens SVG mask holes when a complex clip-path lives on the
   same composited layer. Cut the silhouette on the wrapper and reserve the
   marker layer exclusively for the genuinely transparent perforation mask. */
.film-strip > .reel-marker {
  clip-path: none;
}

.film-strip[data-film-cut="1"] {
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 2px), 84% 100%, 64% calc(100% - 1px), 45% 100%, 25% calc(100% - 2px), 8% 100%, 0 calc(100% - 1px));
}

.film-strip[data-film-cut="2"] {
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 80% calc(100% - 1px), 58% 100%, 35% calc(100% - 2px), 12% 100%, 0 calc(100% - 1px));
}

.film-strip[data-film-cut="3"] {
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 1px), 79% 100%, 57% calc(100% - 2px), 34% 100%, 12% calc(100% - 1px), 6px 100%, 2px 78%, 7px 61%, 1px 44%);
}

.film-strip[data-film-cut="4"] {
  clip-path: polygon(0 0, 100% 0, calc(100% - 7px) calc(100% - 1px), 76% 100%, 52% calc(100% - 2px), 27% 100%, 0 100%);
}

.film-strip[data-film-cut="5"] {
  clip-path: polygon(0 0, 100% 0, calc(100% - 1px) 19%, calc(100% - 6px) 38%, calc(100% - 2px) 57%, calc(100% - 7px) 76%, calc(100% - 3px) 100%, 80% calc(100% - 1px), 60% 100%, 40% calc(100% - 2px), 20% 100%, 0 calc(100% - 1px));
}

.reel-marker::after {
  position: absolute;
  inset: 0;
  z-index: 0;
  content: "";
  pointer-events: none;
  display: none;
}

.reel-marker > * {
  position: relative;
  z-index: 1;
}

.rm-no {
  display: flex;
  align-items: center;
  min-width: 52px;
  justify-content: center;
  padding: 0 14px;
  border-right: 1px solid var(--glass-line);
  color: var(--paper);
  background: rgba(8, 7, 7, 0.16);
  font-family: var(--display);
  font-size: 1.2rem;
  font-variant-numeric: lining-nums;
  line-height: 1;
}

.rm-meta {
  display: flex;
  align-items: center;
  gap: 0.7em;
  padding: 0 16px;
  color: var(--paper-dim);
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.17em;
  text-transform: uppercase;
  white-space: nowrap;
}

.rm-meta b {
  color: var(--lavender);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}

.rm-meta i {
  color: rgba(236, 234, 227, 0.32);
  font-style: normal;
}

.rm-perf {
  min-width: 40px;
  display: block;
  flex: 1 1 auto;
  align-self: stretch;
  -webkit-mask-image: repeating-linear-gradient(to right, transparent 0 9px, #000 9px 22px, transparent 22px 31px);
  mask-image: repeating-linear-gradient(to right, transparent 0 9px, #000 9px 22px, transparent 22px 31px);
  -webkit-mask-size: auto 11px;
  mask-size: auto 11px;
  -webkit-mask-position: 0 50%;
  mask-position: 0 50%;
  -webkit-mask-repeat: repeat-x;
  mask-repeat: repeat-x;
}

/* A perforation is a window: only the fixed page atmosphere is painted. */
.perf-fill {
  background-image: var(--bokeh-img);
  background-attachment: fixed;
  background-size: cover;
  background-position: 50% 50%;
  background-repeat: no-repeat;
  animation: drift 46s ease-in-out infinite;
}

@keyframes drift {
  0%, 100% { background-position: 48% 48%; }
  50% { background-position: 52% 52%; }
}

/* ============================================================
   LARGE FILM SURFACES

   The same supplied wear vocabulary is carried onto larger horizontal and
   vertical film elements. Stock stays translucent; the outline is removed;
   and only the exposed end receives silhouette variation.
   ============================================================ */
.film-surface-wrap {
  position: relative;
  min-width: 0;
}

.film-surface-wrap::before {
  position: absolute;
  inset: -12px -8px;
  z-index: 0;
  content: "";
  pointer-events: none;
  background:
    radial-gradient(ellipse at 50% 50%, rgba(94, 150, 161, 0.16), rgba(168, 149, 255, 0.075) 58%, transparent 78%),
    radial-gradient(ellipse at 82% 42%, rgba(191, 242, 217, 0.06), transparent 66%);
  filter: blur(14px);
  opacity: 0.78;
}

.film-surface-wrap > .film-surface {
  position: relative;
  z-index: 1;
}

.film-surface {
  overflow: hidden;
  border: 0;
  border-radius: 0;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  box-shadow: none;
}

.film-surface:hover {
  border-color: transparent;
  box-shadow: none;
}

.film-surface[data-film-cut="1"] {
  background:
    linear-gradient(90deg, transparent 0 9%, rgba(236, 234, 227, 0.11) 24%, transparent 39%, rgba(236, 234, 227, 0.07) 57%, transparent 78%) 0 63% / 100% 1px no-repeat,
    radial-gradient(ellipse, rgba(146, 116, 64, 0.24), transparent 72%) 21% 97% / 210px 24px no-repeat,
    linear-gradient(0deg, rgba(0, 0, 0, 0.2), transparent 22%) 0 100% / 100% 100% no-repeat,
    linear-gradient(160deg, rgba(14, 22, 27, 0.68), rgba(5, 9, 13, 0.57));
}

.film-surface[data-film-cut="2"] {
  background:
    linear-gradient(90deg, transparent 0 4%, rgba(236, 234, 227, 0.08) 18%, rgba(236, 234, 227, 0.12) 55%, rgba(236, 234, 227, 0.16) 74%, transparent 93%) 0 26% / 100% 1px no-repeat,
    radial-gradient(ellipse, rgba(146, 116, 64, 0.26), transparent 70%) 88% 50% / 260px 100% no-repeat,
    linear-gradient(180deg, rgba(0, 0, 0, 0.18), transparent 18%) 0 0 / 100% 100% no-repeat,
    linear-gradient(155deg, rgba(18, 29, 35, 0.68), rgba(5, 9, 13, 0.56));
}

.film-surface[data-film-cut="3"] {
  background:
    linear-gradient(90deg, transparent 0 46%, rgba(236, 234, 227, 0.13) 53%, transparent 61%) 0 41% / 100% 1px no-repeat,
    radial-gradient(ellipse, rgba(146, 116, 64, 0.2), transparent 74%) 27% 8% / 300px 30px no-repeat,
    radial-gradient(ellipse, rgba(71, 108, 118, 0.18), transparent 74%) 68% 94% / 240px 26px no-repeat,
    linear-gradient(165deg, rgba(17, 27, 33, 0.67), rgba(5, 9, 13, 0.56));
}

.film-surface[data-film-cut="4"] {
  background:
    linear-gradient(90deg, rgba(236, 234, 227, 0.09) 0 22%, rgba(236, 234, 227, 0.17) 44%, rgba(236, 234, 227, 0.1) 68%, rgba(236, 234, 227, 0.14) 100%) 0 47% / 100% 1px no-repeat,
    radial-gradient(ellipse, rgba(6, 4, 2, 0.36), transparent 68%) 52% 88% / 170px 22px no-repeat,
    linear-gradient(0deg, rgba(0, 0, 0, 0.18), transparent 20%) 0 100% / 100% 100% no-repeat,
    linear-gradient(160deg, rgba(16, 26, 32, 0.67), rgba(5, 9, 13, 0.56));
}

.film-surface[data-film-cut="5"] {
  background:
    linear-gradient(90deg, transparent 0 21%, rgba(236, 234, 227, 0.1) 40%, transparent 62%) 0 70% / 100% 1px no-repeat,
    linear-gradient(90deg, transparent 0 33%, rgba(236, 234, 227, 0.07) 49%, transparent 70%) 0 82% / 100% 1px no-repeat,
    radial-gradient(ellipse, rgba(146, 116, 64, 0.24), transparent 72%) 6% 50% / 220px 100% no-repeat,
    linear-gradient(160deg, rgba(18, 28, 34, 0.67), rgba(5, 9, 13, 0.56));
}

.film-surface--horizontal[data-film-cut="2"] {
  clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 100%, 0 100%);
}

.film-surface--horizontal[data-film-cut="3"] {
  clip-path: polygon(5px 0, 100% 0, 100% 100%, 6px 100%, 2px 78%, 7px 61%, 1px 44%, 5px 22%);
}

.film-surface--horizontal[data-film-cut="4"] {
  clip-path: polygon(7px 0, 100% 0, calc(100% - 7px) 100%, 0 100%);
}

.film-surface--horizontal[data-film-cut="5"] {
  clip-path: polygon(0 0, calc(100% - 4px) 0, calc(100% - 1px) 19%, calc(100% - 6px) 38%, calc(100% - 2px) 57%, calc(100% - 7px) 76%, calc(100% - 3px) 100%, 0 100%);
}

/* The same end treatments rotated into the travel direction for vertical film. */
.film-surface--vertical[data-film-cut="2"] {
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 10px), 0 100%);
}

.film-surface--vertical[data-film-cut="3"] {
  clip-path: polygon(0 5px, 22% 1px, 44% 7px, 61% 2px, 78% 6px, 100% 0, 100% 100%, 0 100%);
}

.film-surface--vertical[data-film-cut="4"] {
  clip-path: polygon(0 7px, 100% 0, 100% calc(100% - 7px), 0 100%);
}

.film-surface--vertical[data-film-cut="5"] {
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 4px), 81% calc(100% - 1px), 62% calc(100% - 6px), 43% calc(100% - 2px), 24% calc(100% - 7px), 0 calc(100% - 3px));
}

@media (max-width: 560px) {
  .rm-no { padding: 9px 13px 11px; font-size: 1.2rem; }
  .rm-meta { padding: 0 12px; font-size: 0.66rem; letter-spacing: 0.12em; }
}

@media (prefers-reduced-motion: reduce) {
  .perf-fill { animation: none; }
}