/* HFM-1 17 Oct 2026: the film band as a cinema. Letterbox bars open, the frame un-masks and un-greys, a projector beam crosses, sprocket strips roll, the frame counter runs, the play button lands. All scrubbed on the band's own view-timeline (--hfmv). Own file; does not touch uploads/pfh-hox/*. Finished state is the default. */
@property --hfm-n{syntax:"<integer>";inherits:true;initial-value:240}
@property --hfm-bar{syntax:"<length>";inherits:true;initial-value:18px}
@property --hfm-y{syntax:"<length>";inherits:true;initial-value:-340px}
.ox .ox-film{position:relative;isolation:isolate;overflow:clip;background:#05080f}
.ox .ox-film .ox-wrap{position:relative;z-index:3}
.ox .ox-film__media{z-index:-2;overflow:clip;background:#05080f}
/* letterbox bars */
.ox .ox-film::before{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;background:linear-gradient(#05080f,#05080f) top/100% var(--hfm-bar) no-repeat,linear-gradient(#05080f,#05080f) bottom/100% var(--hfm-bar) no-repeat}
/* sprocket strips */
.ox .ox-film::after{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;opacity:.5;background-image:repeating-linear-gradient(180deg,rgba(255,255,255,.7) 0 14px,transparent 14px 34px),repeating-linear-gradient(180deg,rgba(255,255,255,.7) 0 14px,transparent 14px 34px);background-size:9px 100%,9px 100%;background-repeat:no-repeat;background-position:16px var(--hfm-y),calc(100% - 16px) var(--hfm-y);-webkit-mask:linear-gradient(180deg,transparent,#000 22%,#000 78%,transparent);mask:linear-gradient(180deg,transparent,#000 22%,#000 78%,transparent)}
/* projector beam + frame counter */
.ox .ox-film__media::before{content:"";position:absolute;inset:-10% -30%;z-index:1;pointer-events:none;background:linear-gradient(100deg,transparent 38%,rgba(255,235,190,.16) 48%,rgba(255,255,255,.22) 50%,rgba(255,235,190,.16) 52%,transparent 62%);mix-blend-mode:screen;translate:0 0}
.ox .ox-film__media::after{content:"REC   FRAME " counter(hfm);counter-reset:hfm var(--hfm-n);position:absolute;top:calc(var(--hfm-bar) + 14px);right:60px;z-index:2;font:500 12.5px/1 var(--mono);letter-spacing:.18em;color:#fff;text-shadow:0 1px 8px rgba(0,0,0,.6)}
.ox .ox-film .ox-btn--go{box-shadow:0 0 0 0 rgba(63,191,132,.0)}
@media (max-width:720px){
  .ox .ox-film::after{display:none}
  .ox .ox-film__media::after{right:20px;font-size:11px}
}
@supports (animation-timeline:view()){@media (prefers-reduced-motion:no-preference){
  .ox-mo .ox-film{view-timeline:--hfmv block}
  .ox-mo .ox-film::before{animation:hfm-bars linear both;animation-timeline:--hfmv;animation-range:entry 0% cover 55%}
  .ox-mo .ox-film::after{animation:hfm-roll linear both;animation-timeline:--hfmv;animation-range:entry 0% exit 100%}
  .ox-mo .ox-film__media{animation:hfm-mask linear both;animation-timeline:--hfmv;animation-range:entry 10% cover 50%}
  .ox-mo .ox-film__media img{animation:hfm-grade linear both;animation-timeline:--hfmv;animation-range:entry 0% cover 60%}
  .ox-mo .ox-film__media::before{animation:hfm-beam linear both;animation-timeline:--hfmv;animation-range:entry 20% exit 40%}
  .ox-mo .ox-film__media::after{animation:hfm-count linear both;animation-timeline:--hfmv;animation-range:entry 0% exit 60%}
  .ox-mo .ox-film .ox-pband__box{animation:hfm-box linear both;animation-timeline:--hfmv;animation-range:entry 25% cover 48%}
  .ox-mo .ox-film .ox-btn--go{animation:hfm-play linear both;animation-timeline:--hfmv;animation-range:entry 55% cover 70%}
  .ox-mo .ox-film .ox-btn--go .ox-play{animation:hfm-spin linear both;animation-timeline:--hfmv;animation-range:entry 55% cover 75%}
  .ox-mo .ox-film .ox-h2{animation:hfm-h linear both;animation-timeline:--hfmv;animation-range:entry 30% cover 52%}
  @keyframes hfm-bars{from{--hfm-bar:clamp(70px,12vw,170px)}to{--hfm-bar:18px}}
  @keyframes hfm-roll{from{--hfm-y:0px}to{--hfm-y:-680px}}
  @keyframes hfm-mask{from{clip-path:inset(14% 8% 14% 8% round 18px)}to{clip-path:inset(0 0 0 0 round 0)}}
  @keyframes hfm-grade{from{scale:1.28;filter:grayscale(1) contrast(1.15) brightness(.7)}to{scale:1;filter:none}}
  @keyframes hfm-beam{from{translate:-55% 0;opacity:0}30%{opacity:1}to{translate:55% 0;opacity:0}}
  @keyframes hfm-count{from{--hfm-n:0}to{--hfm-n:240}}
  @keyframes hfm-box{from{opacity:0;translate:0 70px}to{opacity:1;translate:0 0}}
  @keyframes hfm-play{0%{scale:.7;opacity:.2;box-shadow:0 0 0 0 rgba(63,191,132,.7)}70%{scale:1.07;opacity:1}100%{scale:1;opacity:1;box-shadow:0 0 0 18px rgba(63,191,132,0)}}
  @keyframes hfm-spin{from{rotate:-120deg;scale:.4}to{rotate:0deg;scale:1}}
  @keyframes hfm-h{from{letter-spacing:.07em;opacity:.15}to{letter-spacing:0;opacity:1}}
}}