/* Premium motion refinements for the video family (episode, episode2, story-flight, story-somersworth).
   Loaded after premium-motion.css on video pages only. Feel: Melissa (src/facility-premium.*); layout:
   Mart's Tools - Video.psd. Only transform, scale and opacity move; nothing here hides content before
   the engine runs, and the players never move.

   Hero photograph plate (scripts/premium/video.py adds .mxv-plate > .mxv-photo[data-mx~=settle parallax]).
   It carries exactly the photo, size and positions editorial-continuity.css gives the hero background
   (center bottom cover; 55% bottom at 1000px and below; auto 100% right center at 800px and below), and the
   hero keeps only its navy base colour, so the first paint is unchanged. The plate clips its photo because
   the hero itself must not clip (the player frame sits just below it). The photo box reaches 12% above the
   plate, so the 10 yPercent drift never uncovers its top edge. */
body.uf-site .uf-ed--video .uf-ed-hero:has(>.mxv-plate){background-image:none}
body.uf-site .uf-ed--video .uf-ed-hero>.mxv-plate{position:absolute;inset:0;z-index:-1;overflow:hidden;pointer-events:none}
body.uf-site .uf-ed--video .uf-ed-hero>.mxv-plate>.mxv-drift{position:absolute;inset:-12% 0 0 0;display:block}
body.uf-site .uf-ed--video .mxv-drift>.mxv-photo{position:absolute;inset:0;display:block;background:url('../pages/somersworth/aerial.jpg') 60% 70%/cover no-repeat}
/* One hero photo per page (2026-10-03 polish, P3): the four pages shared Somersworth's summer aerial. Shop Stories S01
   keeps it (the story is Somersworth's); S02 is about the fall 2024 flight, so it shows a frame of that flight developed
   from the camera's raw file with its own white balance (no grading); the two Shop Talk samples show stills from
   their own kind of bay (illustrative, like the episodes). */
body.uf-site[data-page=episode] .uf-ed--video .mxv-drift>.mxv-photo{background-image:url('../illustrative/weld-shop-sunlit-1600.webp')}
body.uf-site[data-page=episode2] .uf-ed--video .mxv-drift>.mxv-photo{background-image:url('../illustrative/overland-truck-bay-1600.webp')}
body.uf-site[data-page=story-flight] .uf-ed--video .mxv-drift>.mxv-photo{background-image:url('../pages/somersworth/raw-05-park-and-corridor.webp')}
@media(max-width:1000px){body.uf-site .uf-ed--video .mxv-drift>.mxv-photo{background-position:55% bottom}}
@media(max-width:800px){body.uf-site .uf-ed--video .uf-ed-hero>.mxv-plate>.mxv-drift{inset:0}body.uf-site .uf-ed--video .mxv-drift>.mxv-photo{background-size:auto 100%;background-position:right center}}

/* Episode transcript: Melissa's accordion (.mx-acc) instead of a snap. The row opens on the grid-rows
   curve (.5s) while the text fades in (.35s); episode.js still toggles .open and the +/- label. */
body.uf-site .uf-ed--video .tr>.bd{display:grid;grid-template-rows:0fr;max-height:none;overflow:hidden;opacity:0;visibility:hidden;transition:grid-template-rows .5s var(--mx-ease),opacity .35s ease,visibility 0s linear .5s}
body.uf-site .uf-ed--video .tr.open>.bd{grid-template-rows:1fr;opacity:1;visibility:visible;transition:grid-template-rows .5s var(--mx-ease),opacity .35s ease,visibility 0s}
/* Closed, the text box also gives up its vertical padding (on the same curve), so the closed row is 0px tall
   as it was before; a 0fr row alone still holds the padding. */
body.uf-site .uf-ed--video .tr>.bd>div{min-height:0;overflow:hidden;transition:padding .5s var(--mx-ease)}
body.uf-site .uf-ed--video .tr:not(.open)>.bd>div{padding-block:0}
@media (prefers-reduced-motion:reduce){body.uf-site .uf-ed--video .tr>.bd,body.uf-site .uf-ed--video .tr>.bd>div{transition:none}}

/* Next-up and Keep going cards: Melissa's gallery hover (the photo eases to 1.04 over .8s). The shared
   finish keeps the card itself still (site-consistency.css forces transform:none on cards), so only the
   photo inside its clipped frame moves; the individual scale property never fights the wipe's settle. */
@media (prefers-reduced-motion:no-preference){
  body.uf-site .uf-ed--video :is(.nc .ph,.rc .rph) img{transition:scale .8s var(--mx-ease)}
  body.uf-site .uf-ed--video :is(.nc:hover .ph,.rc:hover .rph,.nc:focus-visible .ph,.rc:focus-visible .rph) img{scale:1.04}
}

/* Story reading-progress bar: full width, scaled from the left (content/scripts/story-*.js write scaleX once
   per frame instead of a width on every scroll event). It is a meter, not decoration, so it tracks the scroll
   exactly under every motion setting. */
body.uf-site[data-page-family=video] #prog.prog{width:100%;transform:scaleX(0);transform-origin:0 50%;pointer-events:none;will-change:transform}