/* 3D view: elements move in depth while you scroll. Driven by --p (0..1) from fx3d.js.
   Without the script, in Simple view or with reduce-motion, everything is flat and still. */
html[data-view="3d"] [data-fx]{will-change:transform,opacity;backface-visibility:hidden}
html[data-view="3d"] [data-fx="rise"]{transform:perspective(900px) rotateX(calc((1 - var(--p,1)) * 58deg)) translateY(calc((1 - var(--p,1)) * 44px));transform-origin:50% 100%;opacity:calc(.12 + var(--p,1) * .88)}
html[data-view="3d"] [data-fx="fan"]{transform:perspective(1100px) translateZ(calc((1 - var(--p,1)) * -240px)) rotateY(calc((1 - var(--p,1)) * var(--dir,0) * 36deg)) rotateX(calc((1 - var(--p,1)) * 24deg));opacity:calc(var(--p,1) * 1.25)}
html[data-view="3d"] [data-fx="flip"]{transform:perspective(800px) rotateX(calc((1 - var(--p,1)) * -88deg));transform-origin:50% 0;opacity:calc(var(--p,1) * 1.3)}
html[data-view="3d"] [data-fx="zoom"]{transform:perspective(1000px) scale(calc(.8 + var(--p,1) * .2)) rotateX(calc((1 - var(--p,1)) * 30deg));opacity:calc(.2 + var(--p,1) * .8)}
html[data-view="3d"] [data-fx="hero"]{transform:perspective(1200px) rotateX(calc(var(--p,0) * 24deg)) translateY(calc(var(--p,0) * -46px)) scale(calc(1 - var(--p,0) * .08));transform-origin:50% 0;opacity:calc(1 - var(--p,0) * .75)}
@media (prefers-reduced-motion:reduce){html[data-view="3d"] [data-fx]{transform:none!important;opacity:1!important}}