/* Premium refinements for the Shop Manual / Shop Talk hub (resources.html), loaded after
   premium-motion.css on this page only. Mart's Tools - CMS PSD stays the visual authority; the motion
   is Melissa's (Saqib, 2026-09-29). Hooks: scripts/premium/resources.py and src/premium/resources.js.
   Only transform, opacity and clip-path move; nothing here hides content without the engine running. */

/* ---------- hero plate: the hero photo as an image layer, so it can settle and drift like Melissa's ----------
   Same sizing as src/editorial-continuity.css at every breakpoint; the library's first row still crosses
   over it onto the paper (the hero keeps overflow:visible, the layer clips itself). */
/* The photo itself (2026-10-02 fix round, C2): full colour; src/editorial-continuity.css adds the chevron and the
   gradient that stops. Set here, not in the shared file, so no park microsite carries it. Phones: plain navy. */
body.uf-site[data-page-family=resources] .uf-ed-hero{background-image:url('../pages/headers/shop-manual-melissa-front-1920.webp');background-position:62% 46%;background-size:cover}
@media (max-width:800px){body.uf-site[data-page-family=resources] .uf-ed-hero{background-image:none}}
body.uf-site[data-page-family=resources] .uf-ed-hero:has(>.uf-ed-plate){background-image:none}
body.uf-site[data-page-family=resources] .uf-ed-plate{position:absolute;inset:0;z-index:-2;overflow:hidden;pointer-events:none}
body.uf-site[data-page-family=resources] .uf-ed-plate-drift{position:absolute;inset:0}
body.uf-site[data-page-family=resources] .uf-ed-plate img{display:block;width:100%;height:100%;max-width:none;object-fit:cover;object-position:62% 46%}
/* 2026-10-05: Mart's 3:2 header has more sky than the 2:1 drive-aisle photo it replaced, so the crop sits lower
   (46%) to keep the glass bay doors in the band; the hero background above uses the same position. */

/* ---------- content that page scripts swap (library pages and filters, guide topics and pages, the
   Shop Talk / Shop Stories tabs): the newly shown items arrive with Melissa's pane change (opacity and
   8px, .5s). The class is set by premium/resources.js right after the reader's own change, only while
   the engine runs; an animation always ends on the finished state. ---------- */
@keyframes uf-mx-pane{from{opacity:0;translate:0 8px}to{opacity:1;translate:none}}
@media (prefers-reduced-motion:no-preference){
  body.uf-site[data-page-family=resources] .uf-pane-play>:not([hidden]){animation:uf-mx-pane .5s var(--mx-ease) both}
}
/* Cards still waiting below the fold for their group reveal carry no transition on the moving
   properties, so a source transition never smooths GSAP's frames (the engine's own rule for its units). */
body.uf-site[data-page-family=resources] .uf-lib-wait{transition-property:color,background-color,border-color,box-shadow}

/* ---------- hover, in Melissa's photo tile timing (1.04 over .8s), pointer devices only ---------- */
@media (hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference){
  body.uf-site[data-page-family=resources] :is(.uf-guide-cover,.uf-media-photo,.fsc .ph) img{transition:scale .8s var(--mx-ease)}
  body.uf-site[data-page-family=resources] :is(.uf-guide-row,.uf-media-card,.fsc):is(:hover,:focus-visible) :is(.uf-guide-cover,.uf-media-photo,.ph) img{scale:1.04}
}
/* Melissa's cards never lift; the free-tools cards keep their colour and shape and stay put. */
body.uf-site[data-page-family=resources] .mcard:hover{transform:none}
/* The "live" dots in the mosaic labels blink three times and rest: Melissa runs nothing perpetual, and
   anything that blinks longer than five seconds needs a pause control (WCAG 2.2.2). */
body.uf-site[data-page-family=resources] .mz .lb i{animation-iteration-count:3}

/* Cheline 2026-10-09 (A36h): the tool cards' descriptions ran straight into their buttons. */
body.uf-site[data-page-family=resources] .mag .mcard p{margin-bottom:24px}