/* Chosen complete film frames move inside stable layout anchors. This sheet
   loads after cinematic.css. No aspect ratio, source footage or scroll is
   altered. The full static frame remains the default. */
[data-motion-stage],[data-film-reveal]{transform:none}
[data-film-motion]{
  transform:scale(var(--film-scroll-scale,1));transform-origin:center;
  transition-property:opacity;will-change:auto;
}
.opening-cinema .opening-lead__frame{
  transform:none;transform-origin:center;will-change:auto;
}
[data-film-motion-active] [data-film-motion],
.opening-cinema__stage[data-film-motion-active] .opening-lead__frame{will-change:transform}
[data-film-motion] picture,[data-film-motion] img,[data-film-motion] video{
  width:100%;height:100%;object-fit:contain;object-position:center;
}
/* A real film link owns its whole hover/focus affordance. A separate uniform
   scale interpolates hover, leaving scroll's rAF transform unslowed. The 1.2%
   expansion stays inside the existing page gutters and film-card gaps. */
a[data-film-hover],.scroll-mood-ready main a[data-film-hover]{
  --film-hover-scale:1;scale:var(--film-hover-scale);
  transition:scale .6s cubic-bezier(0,0,.2,1);
}
a[data-film-hover] .frame-cue{
  opacity:1;justify-content:flex-end;background:none;
}
a[data-film-hover] .frame-cue::after{content:none}
a[data-film-hover] .frame-cue__control{
  display:inline-flex;align-items:center;flex:none;max-width:100%;
  min-height:36px;border:1px solid rgba(245,245,242,.6);border-radius:999px;
  color:#f5f5f2;background:rgba(5,5,5,.7);box-shadow:0 2px 12px rgba(5,5,5,.12);
}
a[data-film-hover] .frame-cue__label{
  display:block;overflow:hidden;max-width:0;opacity:0;white-space:nowrap;
  padding-inline-start:0;transform:translateX(6px);
  transition:max-width .5s cubic-bezier(0,0,.2,1),padding .5s cubic-bezier(0,0,.2,1),opacity .3s ease,transform .5s cubic-bezier(0,0,.2,1);
}
a[data-film-hover] .frame-cue__arrow{
  display:grid;place-items:center;flex:none;width:34px;height:34px;
  font-size:17px;line-height:1;transform:none;
}
a[data-film-hover]:focus-visible .frame-cue__label{
  max-width:13ch;padding-inline-start:14px;opacity:1;transform:none;
}
@media (hover:hover) and (pointer:fine){
  a[data-film-hover]:hover,a[data-film-hover]:focus-visible,
  .scroll-mood-ready main a[data-film-hover]:hover,
  .scroll-mood-ready main a[data-film-hover]:focus-visible{--film-hover-scale:1.012}
  a[data-film-hover]:hover .frame-cue__label{
    max-width:13ch;padding-inline-start:14px;opacity:1;transform:none;
  }
  /* Tiny cropping is opt-in for an illustrative landscape thumbnail only.
     Hero and portrait footage keep the entire frame. */
  a[data-film-hover="zoom"] picture,
  a[data-film-hover="zoom"] video{
    transform:scale(1);transition:transform .6s cubic-bezier(0,0,.2,1);
  }
  a[data-film-hover="zoom"]:hover picture,
  a[data-film-hover="zoom"]:hover video,
  a[data-film-hover="zoom"]:focus-visible picture,
  a[data-film-hover="zoom"]:focus-visible video{transform:scale(1.025)}
  .film-card--portrait a[data-film-hover] picture,
  .film-card--portrait a[data-film-hover] video,
  .opening-cinema a[data-film-hover] picture,
  .opening-cinema a[data-film-hover] video{transform:none}
  .opening-cinema a[data-film-hover],
  .scroll-mood-ready main .opening-cinema a[data-film-hover]{scale:1}
}
/* Keep touch and keyboard film links discoverable even without hover. */
@media (hover:none),(pointer:coarse){
  [data-film-motion] .frame-cue{opacity:1}
  a[data-film-hover] .frame-cue__label{
    max-width:13ch;padding-inline-start:14px;opacity:1;transform:none;
  }
  a[data-film-hover],.scroll-mood-ready main a[data-film-hover]{scale:1}
  a[data-film-hover] .frame-cue__control{min-height:44px}
  a[data-film-hover] .frame-cue__arrow{width:42px;height:42px}
  a[data-film-hover] .frame-cue__label{font-size:13px;line-height:1.25}
}
@media (prefers-reduced-motion:reduce){
  [data-film-motion],.opening-cinema .opening-lead__frame{transform:none;will-change:auto}
  a[data-film-hover],.scroll-mood-ready main a[data-film-hover]{scale:1;transition:none}
  a[data-film-hover] picture,a[data-film-hover] video{transform:none!important;transition:none}
  a[data-film-hover] .frame-cue__label{transition:none}
}
