/* Parallax scroll (after Aceternity "parallax-scroll" / "hero-parallax"): the photo drifts slower than the page
 * inside a clipped frame. view.js sets the transform; this file only sets up the frame. Nothing here hides
 * content, so without JS (or with reduced motion) the image simply shows as published. */

/* core/image: the img (or its link) is wrapped in span.kfx-frame, which clips the scaled image. */
.kfx-parallax .kfx-frame {
	display: block;
	position: relative;
	width: fit-content;
	max-width: 100%;
	overflow: hidden;
	line-height: 0;
}
.kfx-parallax.aligncenter .kfx-frame { margin-inline: auto; }
.kfx-parallax.alignwide .kfx-frame,
.kfx-parallax.alignfull .kfx-frame { width: auto; }
.kfx-parallax .kfx-frame > a { display: block; }

/* Lightbox figures (not re-parented) and covers clip on themselves. */
.kfx-parallax.kfx-frame-self,
.wp-block-cover.kfx-parallax { overflow: hidden; }

.kfx-parallax.is-parallax-on .kfx-frame img,
.kfx-parallax.is-parallax-on.kfx-frame-self > img,
.wp-block-cover.kfx-parallax.is-parallax-on > .wp-block-cover__image-background,
.wp-block-cover.kfx-parallax.is-parallax-on > .wp-block-cover__video-background {
	will-change: transform;
	transform-origin: 50% 50%;
	backface-visibility: hidden;
}

@media (prefers-reduced-motion: reduce) {
	.kfx-parallax .kfx-frame img,
	.kfx-parallax.kfx-frame-self > img,
	.wp-block-cover.kfx-parallax > .wp-block-cover__image-background,
	.wp-block-cover.kfx-parallax > .wp-block-cover__video-background { transform: none !important; will-change: auto; }
}
