/* fx-parallax: the picture drifts slower than the page inside a fixed frame.
   Modern browsers: CSS scroll-driven animation on the compositor (no JS per frame). Chrome 115+, Safari 26+, Firefox 159+. Older: the JS fallback (desktop only).
   The frame keeps its size (aspect-ratio or height you set), so nothing shifts. */
[data-fx~="parallax"]{position:relative;overflow:hidden}
[data-fx~="parallax"] img{width:100%;height:calc(100% + var(--px-range,80px));object-fit:cover;position:absolute;left:0;top:calc(var(--px-range,80px) / -2);will-change:transform}
@supports (animation-timeline: view()){
  @keyframes fxPx{from{transform:translateY(calc(var(--px-range,80px) / -2))}to{transform:translateY(calc(var(--px-range,80px) / 2))}}
  [data-fx~="parallax"] img{animation:fxPx linear both;animation-timeline:view(block);animation-range:cover 0% cover 100%}
}
@media (prefers-reduced-motion:reduce){[data-fx~="parallax"] img{animation:none!important;transform:none!important;top:0;height:100%}}