/* JSRM V4D — additive depth/easing enhancement for V4C's 4 existing panels.
   DO NOT change the core .cinema-panel transform or sticky/pinned geometry. */
html.jsrm-depth-on .cinema-panel .cinema-art {
  transform:translate3d(0,var(--jsrm-depth-art-y,0px),0) scale(var(--jsrm-depth-art-scale,1));
  transform-origin:50% 53%;
  will-change:transform;
}
html.jsrm-depth-on .cinema-panel .cinema-copy .cinema-num,
html.jsrm-depth-on .cinema-panel .cinema-copy h2,
html.jsrm-depth-on .cinema-panel .cinema-copy p,
html.jsrm-depth-on .cinema-panel .cinema-copy .cinema-cta {
  opacity:var(--jsrm-depth-copy-alpha,1);
  transform:translate3d(0,var(--jsrm-depth-copy-y,0px),0);
  will-change:transform,opacity;
}
/* Behind text and illustration: a subtle metallic light roll, not a replacement for existing images. */
html.jsrm-depth-on .cinema-panel::before {
  content:"";
  position:absolute;
  inset:-18%;
  z-index:0;
  background:radial-gradient(ellipse 42% 52% at 72% 36%,rgba(255,255,255,.24),transparent 80%),
    linear-gradient(112deg,transparent 35%,rgba(247,148,30,.11) 54%,transparent 71%);
  opacity:calc(var(--jsrm-depth-light-alpha,1) * .65);
  transform:translate3d(0,calc(var(--jsrm-depth-art-y,0px) * -.55),0);
  pointer-events:none;
}
html.jsrm-depth-on .cinema-panel-two::before {opacity:calc(var(--jsrm-depth-light-alpha,1) * .4)}
html.jsrm-depth-on .cinema-panel-three::before {opacity:calc(var(--jsrm-depth-light-alpha,1) * .28)}
html.jsrm-depth-on .cinema-panel-four::before {opacity:calc(var(--jsrm-depth-light-alpha,1) * .37)}
/* Structural containment: ensure decorative layers never intercept links. */
html.jsrm-depth-on .cinema-panel .cinema-panel-inner {position:relative;z-index:2}
html.jsrm-depth-on .cinema-panel .cinema-footer-note {z-index:3}
/* Keep legibility and GPU load sane on tablets and phones. */
@media(max-width:950px) {
 html.jsrm-depth-on .cinema-panel .cinema-art {transform:translate3d(0,calc(var(--jsrm-depth-art-y,0px) * .4),0) scale(1)}
 html.jsrm-depth-on .cinema-panel .cinema-copy .cinema-num,
 html.jsrm-depth-on .cinema-panel .cinema-copy h2,
 html.jsrm-depth-on .cinema-panel .cinema-copy p,
 html.jsrm-depth-on .cinema-panel .cinema-copy .cinema-cta {transform:translate3d(0,calc(var(--jsrm-depth-copy-y,0px) * .5),0)}
}
@media(prefers-reduced-motion:reduce) {
 .cinema-panel .cinema-copy h2,.cinema-panel .cinema-copy p,
 .cinema-panel .cinema-copy .cinema-cta,.cinema-panel .cinema-art {
  will-change:auto!important;
 }
}