/**
 * Atelier Forma v0.5.2 — SIX SHOTS PER SEQUENCE.
 * 3x longer before the visual story repeats, not 3x slower movement.
 * Faster, varied camera travel per shot (9–12 s), with soft image transitions.
 * Photos are full-resolution sources; there is no extra MP4 compression.
 */
.cinema-hq{
  position:absolute;inset:0;width:100%;height:100%;
  overflow:hidden;isolation:isolate;
  transform:none!important;animation:none!important;
  background:none!important;opacity:1!important;
  pointer-events:none;
}
.cinema-hq-frame{
  display:block;position:absolute;inset:0;width:100%;height:100%;
  background-position:50% center;background-size:cover;background-repeat:no-repeat;
  opacity:0;transition:opacity 1.15s ease-in-out;
  transform:scale(1.05) translate3d(-1.25%,0,0);
  animation:forma-shot-a var(--forma-shot-time,12s) ease-in-out 1 both;
  animation-play-state:paused;will-change:opacity,transform;
  pointer-events:none;
}
.cinema-hq-frame.is-reverse{animation-name:forma-shot-b}
.cinema-hq-frame.is-active{opacity:1}
/* Remove the opening double-dissolve/snap. The fallback .hero-photo starts
   at 64% center with 1.045x scale, so the first moving shot must begin at
   precisely the same crop and transform, even when the HQ image loads late. */
/* Identical focal point on desktop, ultrawide and mobile.
   Earlier desktop CSS used 64%, while ultrawide used 70% for the poster. */
.hero{--forma-hero-focal:64%}
.hero>.hero-photo{background-position:var(--forma-hero-focal) center}
@media(min-width:1600px){.hero{--forma-hero-focal:70%}}
.hero>.cinema-hq .cinema-hq-frame{transition-duration:1.55s}
.hero>.cinema-hq .cinema-hq-frame.is-initial{
  background-position:var(--forma-hero-focal) center!important;
  animation-name:forma-hero-opening;
}
@keyframes forma-hero-opening{
  0%{transform:scale(1.045) translate3d(0,0,0)}
  100%{transform:scale(1.13) translate3d(1.45%,-.3%,0)}
}
.cinema-hq[data-motion-state="playing"] .cinema-hq-frame.is-active{animation-play-state:running}
.cinema-hq:not([data-motion-state="playing"]) .cinema-hq-frame{animation-play-state:paused}
@keyframes forma-shot-a{
  0%{transform:scale(1.05) translate3d(-1.25%,.25%,0)}
  100%{transform:scale(1.14) translate3d(1.65%,-.35%,0)}
}
@keyframes forma-shot-b{
  0%{transform:scale(1.06) translate3d(1.35%,-.35%,0)}
  100%{transform:scale(1.15) translate3d(-1.65%,.25%,0)}
}
.hero>.cinema-hq{z-index:-2}
.image-break>.cinema-hq,.case-film>.cinema-hq,
.cinema-interlude-picture>.cinema-hq,
.studio-editorial-photo>.cinema-hq{z-index:1}
.cinema-hq+.hq-toggle{
  background:rgba(22,29,28,.45);pointer-events:auto;
}
.cinema-hq+.hq-toggle .cinema-label{font-size:9px}
.case-film-caption{letter-spacing:.18em}
@media(max-width:850px){
 .cinema-hq-frame{transition-duration:.95s}
 .cinema-hq+.hq-toggle .cinema-label{font-size:8px}
}
@media(prefers-reduced-motion:reduce){
 .cinema-hq{display:none!important}
 .hq-toggle{display:none!important}
}