/* ==========================================================================
   film.css — THE SHARED SOUL (2026-07-03) · «ليلة في سينما بو عمر»
   Loaded on EVERY page. The film signature layer:
   - sprocket edges that ROLL with scroll (.fl-perf)
   - SMPTE timecode HUD with a reel that SPINS with scroll velocity (.fl-hud)
   - the verified glass recipe (.fl-glass)
   - silent-film intertitle frame (.fl-inter)
   - cinema artifacts (clapper divider, showtime stamp)
   All JS-gated: html.flm only. Without JS → hidden, page fully readable.
   ========================================================================== */

/* ---- rolling sprocket edges (film pulled through the projector) ---- */
.fl-perf {
  position: fixed; inset-block: 0; width: 13px; z-index: 77; pointer-events: none; opacity: .45;
  background-image: repeating-linear-gradient(to bottom, transparent 0 16px, rgba(225, 215, 175, .16) 16px 26px);
  will-change: background-position;
}
.fl-perf.l { inset-inline-start: 0; }
.fl-perf.r { inset-inline-end: 0; }
@media (max-width: 760px) { .fl-perf { width: 8px; opacity: .32; } }
html:not(.flm) .fl-perf { display: none; }

/* ---- the timecode HUD + spinning reel ---- */
.fl-hud {
  position: fixed; inset-block-end: 14px; inset-inline-start: 16px; z-index: 78; pointer-events: none;
  display: flex; align-items: center; gap: .55rem;
  font-family: 'Courier New', monospace; font-size: .64rem; letter-spacing: .06em; color: #E1D7AF;
  background: rgba(0, 0, 0, .45); border: 1px solid rgba(225, 215, 175, .22); border-radius: 6px;
  padding: .45em .7em; line-height: 1.5; backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
}
.fl-hud .tc-val { color: #C93A32; font-weight: 700; }
.fl-hud .tc-page { display: block; color: rgba(225, 215, 175, .6); font-size: .58rem; margin-block-start: .1rem; }
/* the reel: two circles + spokes, spins with scroll velocity */
.fl-reel {
  width: 20px; height: 20px; flex: none; border-radius: 50%;
  border: 1.5px solid rgba(225, 215, 175, .75); position: relative; will-change: transform;
}
.fl-reel::before {
  content: ""; position: absolute; inset: 26%; border-radius: 50%;
  border: 1.5px solid rgba(225, 215, 175, .75);
}
.fl-reel::after {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(rgba(225, 215, 175, .75), rgba(225, 215, 175, .75)) 50% 0 / 1.5px 30% no-repeat,
    linear-gradient(rgba(225, 215, 175, .75), rgba(225, 215, 175, .75)) 50% 100% / 1.5px 30% no-repeat,
    linear-gradient(90deg, rgba(225, 215, 175, .75), rgba(225, 215, 175, .75)) 0 50% / 30% 1.5px no-repeat,
    linear-gradient(90deg, rgba(225, 215, 175, .75), rgba(225, 215, 175, .75)) 100% 50% / 30% 1.5px no-repeat;
}
@media (max-width: 760px) { .fl-hud { font-size: .58rem; inset-block-end: 10px; inset-inline-start: 10px; } .fl-reel { width: 16px; height: 16px; } }
html:not(.flm) .fl-hud { display: none; }

/* ---- THE GLASS (the one verified recipe — study values, nothing else) ---- */
.fl-glass {
  background: linear-gradient(165deg, rgba(255, 255, 255, .045), rgba(255, 255, 255, .015));
  backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
  border: 1px solid rgba(225, 215, 175, .18);
  box-shadow: inset 0 4px 4px -2px rgba(255, 255, 255, .3),   /* rim light  FFFFFF@30 Y4/B4 */
              inset 0 -6px 6px -3px rgba(0, 0, 0, .25);        /* depth      000000@25 Y6/B6 */
  border-radius: 14px;
}

/* ---- silent-film intertitle frame (manifesto thoughts) ---- */
.fl-inter {
  position: relative; border: 1px solid rgba(225, 215, 175, .4); border-radius: 4px;
  outline: 1px solid rgba(225, 215, 175, .16); outline-offset: 7px;
  padding: clamp(2rem, 5vw, 3.6rem) clamp(1.4rem, 4vw, 3rem);
}
.fl-inter::before, .fl-inter::after {
  content: "✶"; position: absolute; inset-inline-start: 50%; translate: -50% 0;
  color: #C93A32; font-size: .8rem; background: inherit; padding-inline: .5rem;
}
.fl-inter::before { inset-block-start: -0.55em; }
.fl-inter::after { inset-block-end: -0.55em; }

/* ---- the clapper (chapter dividers) — pure CSS slate ---- */
.fl-clap { position: relative; width: 44px; height: 34px; margin-inline: auto; margin-block-end: 1rem; }
.fl-clap i {
  position: absolute; inset-inline: 0; inset-block-start: 10px; height: 24px;
  background: #17150f; border: 1.5px solid rgba(225, 215, 175, .65); border-radius: 2px 2px 4px 4px; display: block;
}
.fl-clap b {
  position: absolute; inset-inline: 0; inset-block-start: 0; height: 10px; display: block;
  border-radius: 2px; transform-origin: 0 100%; rotate: -8deg;
  background: repeating-linear-gradient(115deg, #17150f 0 7px, #E1D7AF 7px 14px);
  border: 1.5px solid rgba(225, 215, 175, .65);
}

/* ---- showtime stamp (journal / tickets) ---- */
.fl-show {
  display: inline-flex; align-items: center; gap: .45rem;
  font-family: 'Courier New', monospace; font-size: .68rem; letter-spacing: .08em;
  color: #C93A32; border: 1.5px solid rgba(201, 58, 50, .55); border-radius: 4px;
  padding: .3em .7em; rotate: -1.5deg;
}

@media (prefers-reduced-motion: reduce) {
  .fl-perf, .fl-hud { display: none; }
}

/* home HUD after the reel injection: one clean LTR row, pinned bottom-left */
html.flm .hm-timecode {
  display: flex; align-items: center; gap: .55rem;
  left: 16px; right: auto; direction: ltr; white-space: nowrap;
}
html.flm .hm-timecode .fl-reel { flex: none; margin: 0 !important; }
html.flm .hm-timecode .tc-wrap { display: block; text-align: left; }
.fl-hud { left: 16px; right: auto; direction: ltr; white-space: nowrap; }
.fl-hud .tc-page { text-align: left; }

/* ---- manifesto: every thought becomes a silent-film intertitle card ---- */
.ip-mani .ip-mani-line .wrap {
  max-width: min(760px, 88vw);
  border: 1px solid rgba(225, 215, 175, .4); border-radius: 4px;
  outline: 1px solid rgba(225, 215, 175, .16); outline-offset: 7px;
  padding: clamp(2rem, 5vw, 3.4rem) clamp(1.4rem, 4vw, 2.8rem);
  background: rgba(7, 7, 6, .55); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px);
  position: relative;
}
.ip-mani .ip-mani-line .wrap::before, .ip-mani .ip-mani-line .wrap::after {
  content: "✶"; position: absolute; inset-inline-start: 50%; translate: -50% 0;
  color: #C93A32; font-size: .8rem; background: #0a0a08; padding-inline: .5rem; line-height: 1;
}
.ip-mani .ip-mani-line .wrap::before { inset-block-start: -0.5em; }
.ip-mani .ip-mani-line .wrap::after { inset-block-end: -0.5em; }

/* ---- footer mark: same mark as the header, pre-cut transparent (sand-baked) ---- */
.poster-footer .footer-lockup img {
  mix-blend-mode: normal; filter: none; -webkit-filter: none;
  width: clamp(84px, 9vw, 112px); height: auto;
  background: none; border: 0; border-radius: 0; box-shadow: none; padding: 0;
}