/* BW-47 — a shared entrance and quiet movement for each page opening.
   Content remains visible before JavaScript enables motion. */
.motion-enabled .hero-content{animation:none}
.motion-enabled [data-arrival-item]{animation:page-arrival 900ms cubic-bezier(.22,.65,.3,1) var(--arrival-delay,0ms) both}
@keyframes page-arrival{
  from{opacity:0;translate:0 18px}
  to{opacity:1;translate:0 0}
}
.motion-enabled [data-arrival-item]:focus-within{opacity:1;translate:0 0;animation:none}

/* Animate the picture, not its crop: object-position belongs to the page. */
.motion-enabled .opening-photo-motion:is(.hero,.gp-opening-image) :is(.hero-cover,.gp-opening-photo){
  animation:opening-photo-drift 18s ease-in-out infinite alternate;
  animation-play-state:paused;
  transform-origin:center;
}
.motion-enabled .opening-photo-motion.opening-in-view:is(.hero,.gp-opening-image) :is(.hero-cover,.gp-opening-photo){animation-play-state:running}
@keyframes opening-photo-drift{
  from{transform:translate3d(0,0,0) scale(1)}
  to{transform:translate3d(-.5%,.3%,0) scale(1.045)}
}

/* BW-49: start the guide's quiet camera movement just past its slowest phase. */
.motion-enabled .hero[data-guide-hero].opening-photo-motion .hero-cover{
  animation-name:guide-hero-drift;
  animation-duration:14s;
  animation-delay:-2s;
}
@keyframes guide-hero-drift{
  from{transform:translate3d(0,0,0) scale(1)}
  to{transform:translate3d(-.6%,.3%,0) scale(var(--guide-hero-zoom,1.06))}
}
@media(max-width:700px){.hero[data-guide-hero]{--guide-hero-zoom:1.04}}

/* A film already has its intended framing; do not add the parallax overscan. */
.hero.opening-film .cinema-frame{inset:0;width:100%;height:100%;transform:none}
.gp-opening-image:is(.opening-film,.opening-photo-motion){position:relative;overflow:hidden}
.gp-opening-image:is(.opening-film,.opening-photo-motion) .cinema-frame{position:absolute;inset:0;width:100%;height:100%;z-index:0;transform:none}
.gp-opening-image:is(.opening-film,.opening-photo-motion) .gp-opening-photo{position:absolute;inset:0;width:100%;height:100%;z-index:0;object-fit:cover}
.opening-film .playlist-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:var(--scene-position,50% 50%);opacity:0;transition:opacity 1.25s ease}
.opening-film .playlist-video.is-active{opacity:1}
.hero.opening-film[data-active-scene] .hero-cover,.gp-opening-image.opening-film[data-active-scene] .gp-opening-photo{object-position:var(--scene-position,50% 50%)}
@media(max-width:700px){
  .opening-film .playlist-video,.hero.opening-film[data-active-scene] .hero-cover,.gp-opening-image.opening-film[data-active-scene] .gp-opening-photo{object-position:var(--scene-position-mobile,50% 50%)}
}

/* Settings apply immediately, including while an entrance is in progress. */
.motion-background [data-arrival-item],.motion-background .opening-photo-motion :is(.hero-cover,.gp-opening-photo){animation-play-state:paused!important}
.motion-paused [data-arrival-item]{opacity:1;translate:0 0;animation:none!important}
.motion-paused .opening-photo-motion :is(.hero-cover,.gp-opening-photo){animation:none!important;transform:none}
@media(prefers-reduced-motion:reduce){
  [data-arrival-item]{opacity:1;translate:0 0;animation:none!important}
  .opening-photo-motion :is(.hero-cover,.gp-opening-photo){animation:none!important;transform:none}
  .opening-film .playlist-video{display:none}
}
@media print{
  [data-arrival-item]{opacity:1;translate:0 0;animation:none!important}
  .opening-photo-motion :is(.hero-cover,.gp-opening-photo){animation:none!important;transform:none}
  .opening-film .playlist-video{display:none}
}