/* Viewport Fixed Block – front-end styles (v1.7.0) */

/* -----------------------------------------------------------------------
   Placeholder — reserves in-flow space while the element is fixed.
   ----------------------------------------------------------------------- */
.vfb-placeholder {
	pointer-events: none;
	visibility:     hidden;
}

/* -----------------------------------------------------------------------
   Fixed state
   ----------------------------------------------------------------------- */
.vfb-enabled.vfb-is-fixed {
	will-change: transform;
}

/* -----------------------------------------------------------------------
   Release state — scroll-linked transform applied by JS.
   ----------------------------------------------------------------------- */
.vfb-enabled.vfb-is-released {
	will-change: transform;
}

/* -----------------------------------------------------------------------
   Full-viewport-height mode
   ----------------------------------------------------------------------- */
.vfb-enabled.vfb-fullheight.vfb-is-fixed,
.vfb-enabled.vfb-fullheight.vfb-is-released {
	height:     calc( 100vh - var( --vfb-offset, 0px ) );
	overflow-y: auto;
}

@supports ( height: 100dvh ) {
	.vfb-enabled.vfb-fullheight.vfb-is-fixed,
	.vfb-enabled.vfb-fullheight.vfb-is-released {
		height: calc( 100dvh - var( --vfb-offset, 0px ) );
	}
}

/* -----------------------------------------------------------------------
   Entry animations — CSS transition-based.

   Pattern:
     1. JS adds `.vfb-anim-{preset}` (sets the FROM state via base rule)
     2. JS forces a reflow
     3. JS adds `.vfb-anim-enter` (which enables the transition to TO state)

   The transition duration is driven by --vfb-anim-duration (set inline
   by JS from the block attribute, default 400ms).

   We DON'T animate transform/opacity during the release phase; the
   scroll-linked translateY from JS is enough motion.
   ----------------------------------------------------------------------- */

/* --- Smooth scroll / Glide -------------------------------------------- */
.vfb-enabled.vfb-anim-smooth,
.vfb-enabled.vfb-anim-glide {
	transform: translateY( 18px );
	opacity:   0.6;
}
.vfb-enabled.vfb-anim-smooth.vfb-anim-enter {
	transform:  translateY( 0 );
	opacity:    1;
	transition: transform var( --vfb-anim-duration, 400ms ) cubic-bezier( 0.25, 0.46, 0.45, 0.94 ),
	            opacity   var( --vfb-anim-duration, 400ms ) ease;
}
.vfb-enabled.vfb-anim-glide.vfb-anim-enter {
	transform:  translateY( 0 );
	opacity:    1;
	transition: transform var( --vfb-anim-duration, 400ms ) cubic-bezier( 0.34, 1.56, 0.64, 1 ),
	            opacity   var( --vfb-anim-duration, 400ms ) ease;
}

/* --- Fade ---------------------------------------------------------------- */
.vfb-enabled.vfb-anim-fade {
	opacity: 0;
}
.vfb-enabled.vfb-anim-fade.vfb-anim-enter {
	opacity:    1;
	transition: opacity var( --vfb-anim-duration, 400ms ) ease;
}

/* --- Slide down (enters from above) ------------------------------------- */
.vfb-enabled.vfb-anim-slide-down {
	transform: translateY( -32px );
	opacity:   0;
}
.vfb-enabled.vfb-anim-slide-down.vfb-anim-enter {
	transform:  translateY( 0 );
	opacity:    1;
	transition: transform var( --vfb-anim-duration, 400ms ) cubic-bezier( 0.25, 0.46, 0.45, 0.94 ),
	            opacity   var( --vfb-anim-duration, 400ms ) ease;
}

/* --- Slide up (enters from below) --------------------------------------- */
.vfb-enabled.vfb-anim-slide-up {
	transform: translateY( 32px );
	opacity:   0;
}
.vfb-enabled.vfb-anim-slide-up.vfb-anim-enter {
	transform:  translateY( 0 );
	opacity:    1;
	transition: transform var( --vfb-anim-duration, 400ms ) cubic-bezier( 0.25, 0.46, 0.45, 0.94 ),
	            opacity   var( --vfb-anim-duration, 400ms ) ease;
}

/* --- Slide left (enters from right) ------------------------------------- */
.vfb-enabled.vfb-anim-slide-left {
	transform: translateX( 32px );
	opacity:   0;
}
.vfb-enabled.vfb-anim-slide-left.vfb-anim-enter {
	transform:  translateX( 0 );
	opacity:    1;
	transition: transform var( --vfb-anim-duration, 400ms ) cubic-bezier( 0.25, 0.46, 0.45, 0.94 ),
	            opacity   var( --vfb-anim-duration, 400ms ) ease;
}

/* --- Slide right (enters from left) ------------------------------------- */
.vfb-enabled.vfb-anim-slide-right {
	transform: translateX( -32px );
	opacity:   0;
}
.vfb-enabled.vfb-anim-slide-right.vfb-anim-enter {
	transform:  translateX( 0 );
	opacity:    1;
	transition: transform var( --vfb-anim-duration, 400ms ) cubic-bezier( 0.25, 0.46, 0.45, 0.94 ),
	            opacity   var( --vfb-anim-duration, 400ms ) ease;
}

/* --- Scale --------------------------------------------------------------- */
.vfb-enabled.vfb-anim-scale {
	transform: scale( 0.92 );
	opacity:   0;
}
.vfb-enabled.vfb-anim-scale.vfb-anim-enter {
	transform:  scale( 1 );
	opacity:    1;
	transition: transform var( --vfb-anim-duration, 400ms ) cubic-bezier( 0.25, 0.46, 0.45, 0.94 ),
	            opacity   var( --vfb-anim-duration, 400ms ) ease;
}

/* --- Blur --------------------------------------------------------------- */
.vfb-enabled.vfb-anim-blur {
	opacity: 0;
	filter:  blur( 8px );
}
.vfb-enabled.vfb-anim-blur.vfb-anim-enter {
	opacity:    1;
	filter:     blur( 0px );
	transition: opacity var( --vfb-anim-duration, 400ms ) ease,
	            filter  var( --vfb-anim-duration, 400ms ) ease;
}

/* --- Fade + slide down -------------------------------------------------- */
.vfb-enabled.vfb-anim-fade-slide-down {
	transform: translateY( -24px );
	opacity:   0;
}
.vfb-enabled.vfb-anim-fade-slide-down.vfb-anim-enter {
	transform:  translateY( 0 );
	opacity:    1;
	transition: transform var( --vfb-anim-duration, 400ms ) cubic-bezier( 0.25, 0.46, 0.45, 0.94 ),
	            opacity   var( --vfb-anim-duration, 400ms ) ease;
}

/* -----------------------------------------------------------------------
   Reduced motion — disable all transitions.
   ----------------------------------------------------------------------- */
@media ( prefers-reduced-motion: reduce ) {
	.vfb-enabled {
		transition: none !important;
	}
	.vfb-enabled.vfb-is-fixed,
	.vfb-enabled.vfb-is-released {
		will-change: auto;
	}
}