/**
 * The Truth Layer video settles into place as you scroll to it.
 *
 * It enters oversized -- wider than the measure, reading as full-bleed -- and
 * shrinks to its resting width by the time it is fully in the viewport. The
 * range is `entry 0%` to `entry 100%`, which is literally "from first
 * appearing to completely on screen", so the motion is finished exactly when
 * the panel is whole. (CLAUDE.md warns that `entry` percentages are a poor way
 * to say where an element SITS; here "fully entered" is the actual intent, so
 * entry is the right timeline and `cover` would be the wrong one.)
 *
 * Two sizes, not one. The resting size is real layout -- the panel breaks out
 * of its 1196 measure to `min(1440px, 100vw - 48px)` -- so the player and its
 * controls are rasterised at full size and stay crisp. Only the scroll
 * animation uses `scale`, and it ends at 1, so nothing is left permanently
 * scaled. A single always-on `scale` would have been one property and a
 * slightly soft video.
 *
 * Use the INDIVIDUAL `scale` property, never `transform: scale()`. The same
 * rule the Problem cards' tilt follows: individual transform properties
 * compose, so anything else that later wants to move this panel can do so
 * without clobbering the settle.
 *
 * Fails open by construction. The finished state is the plain CSS; the
 * animation only exists inside `@supports (animation-timeline: view())`, so
 * Safari and Firefox get the resting layout with no motion and there is no
 * script that can fail and leave the panel oversized.
 *
 * Desktop only (>= 1025). Below that the measure is the viewport and there is
 * no room to shrink into.
 *
 * `overflow-x: clip` on the section is required, not decorative: at the start
 * of the range the panel is ~16% wider than its already-wide resting size and
 * genuinely exceeds the viewport. `clip` contains it without creating a scroll
 * container, which `hidden` would.
 */

@media ( min-width: 1025px ) {

	.elementor .tl-media-section.tl-media-section {
		overflow-x: clip;
	}

	.elementor .tl-video.tl-video {
		--tl-w: min( 1440px, calc( 100vw - 48px ) );

		width: var( --tl-w );
		/* The percentage resolves against the 1196 measure, so this re-centres
		   the wider panel inside it. Same breakout the Problem card row uses. */
		margin-inline: calc( ( 100% - var( --tl-w ) ) / 2 );

		/* A bit more air than the element's own 32px, now that it is wider. */
		margin-block: 56px;

		/* Grow DOWNWARD only. With the default centre origin the panel expands
		   about 63px upward at scale 1.16 -- more than its margin -- and
		   measured a 7px overlap into the paragraph above at entry 0%. Pinning
		   the origin to the top edge makes that overlap structurally
		   impossible at any scale, rather than something a margin has to be
		   large enough to absorb. The growth all goes below instead, where
		   nothing is on screen yet: the panel is still entering from the
		   bottom of the viewport, and by the time the row beneath it could be
		   visible the ease-out has the scale back to ~1. */
		transform-origin: center top;
	}

	@supports ( animation-timeline: view() ) {
		@media ( prefers-reduced-motion: no-preference ) {

			.elementor .tl-video.tl-video {
				animation: facteus-tl-video-settle linear both;
				animation-timeline: view();
				animation-range: entry 0% entry 100%;
				animation-timing-function: ease-out;
			}

			@keyframes facteus-tl-video-settle {
				from { scale: 1.16; }
				to   { scale: 1; }
			}
		}
	}
}