/* PAINTED PLATES AS MOVING SHOTS (Eivind, 2026-10-07: "i regret saying we need to show collected images in full screen. we can use them
   as they are and use ken burns to zoom in and out and pan around. let us make this into like a cutscene or at least create some simple
   movement. as a transition over to the next scene."). Replaces the 2026-10-06 "whole page, contained" rule (FEEDBACK s6).

   A Wyeth plate is a tall painting (about 1100 x 1400). On the wide stage it fills the frame and the camera travels down (or up) the
   painting while it eases in or out a little, so the whole picture is seen over the page, like a documentary camera on a still. Each plate
   has its own move. Nothing is drawn over it: no rain, no light zones, no hotspots. The engine's own crossfade takes it into the next scene.

   HOW: the move animates two registered custom properties (--kb-y the crop's height, --kb-s the zoom). play-stage.css pins the crop with
   object-position !important, and an !important declaration beats any keyframe; a var() inside our own !important declaration still moves.
   motion.css stops every #panel img animation under Still (the default switch): the rule below is more specific and also !important,
   because a plate's slow camera IS the cutscene, not the sea's sway. Only the device's own reduce-motion setting stops it. */
@property --kb-y { syntax: '<percentage>'; inherits: false; initial-value: 40%; }
@property --kb-s { syntax: '<number>'; inherits: false; initial-value: 1; }

html body.ps-on #panel > img[data-disp-key*="/plate-"]{object-fit:cover!important;object-position:50% var(--kb-y)!important;background:#000;
  transform:scale(var(--kb-s))!important;transform-origin:50% 40%;will-change:transform;
  animation:sswPlatePanDown 22s cubic-bezier(.33,0,.25,1) both!important}
html body.ps-on #panel:has(> img[data-disp-key*="/plate-"]:not(.panel-out)) > :not(img){display:none!important}
/* the outgoing plate keeps its last frame while the engine fades it (no jump back to the start) */
html body.ps-on #panel > img.panel-out[data-disp-key*="/plate-"]{animation-play-state:paused!important}

/* the moves, one per plate: where the eye starts and where it lands */
html body.ps-on #panel > img[data-disp-key*="/plate-wyeth-billy"]{animation-name:sswPlatePanUp!important}           /* boots up to the face (Eivind, 2026-10-08; kb-plan) */
html body.ps-on #panel > img[data-disp-key*="/plate-wyeth-blackdog"]{animation-name:sswPlatePushIn!important}       /* into the fight */
html body.ps-on #panel > img[data-disp-key*="/plate-wyeth-blackspot"]{animation-name:sswPlatePanUp!important}       /* from the hand up to the faces */
html body.ps-on #panel > img[data-disp-key*="/plate-wyeth-pew"]{animation-name:sswPlatePanUp!important}             /* the stick on the road up to his face */
html body.ps-on #panel > img[data-disp-key*="/plate-wyeth-leaves-home"]{animation-name:sswPlatePullOut!important}   /* the boy, then the road away */
html body.ps-on #panel > img[data-disp-key*="/plate-wyeth-silver"]{animation-name:sswPlatePanUp!important}

@keyframes sswPlatePanDown{from{--kb-y:8%;--kb-s:1.12}to{--kb-y:78%;--kb-s:1}}
@keyframes sswPlatePanUp{from{--kb-y:85%;--kb-s:1.1}to{--kb-y:22%;--kb-s:1}}
@keyframes sswPlatePushIn{from{--kb-y:45%;--kb-s:1}to{--kb-y:38%;--kb-s:1.18}}
@keyframes sswPlatePullOut{from{--kb-y:30%;--kb-s:1.22}to{--kb-y:55%;--kb-s:1}}

@media (prefers-reduced-motion:reduce){ html body.ps-on #panel > img[data-disp-key*="/plate-"]{animation:none!important;--kb-y:40%;--kb-s:1} }