/**
 * HFSE Sticky / layout styles.
 *
 * Kept intentionally small and class-driven so the JS engine only ever
 * toggles classes — no per-frame inline style thrash beyond dynamic values.
 *
 * @package HFSE
 */

/* Header / footer wrappers rendered by the plugin. */
.hfse-header,
.hfse-footer {
	position: relative;
	width: 100%;
}

/* Base sticky element — transitions are set inline by the engine. */
.hfse-sticky {
	will-change: transform;
}

/* Active sticky state. */
.hfse-sticky-active {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	width: 100%;
}

/* Placeholder preserves document flow so content never jumps. */
.hfse-sticky-placeholder {
	display: block;
	width: 100%;
	pointer-events: none;
}

/* Optional drop shadow while stuck. */
.hfse-sticky-shadow {
	box-shadow: 0 2px 12px rgba( 0, 0, 0, 0.12 );
}

/* Hide-on-scroll-down: slide the element out of view. */
.hfse-sticky-active.hfse-hidden.hfse-anim-slide {
	transform: translateY( -100% );
}

.hfse-sticky-active.hfse-hidden.hfse-anim-fade {
	opacity: 0;
	pointer-events: none;
}

.hfse-sticky-active.hfse-hidden.hfse-anim-none {
	display: none;
}

/* Entry animation when the element first sticks. */
.hfse-anim-slide.hfse-sticky-active:not( .hfse-hidden ) {
	transform: translateY( 0 );
}

/* Reusable section wrapper. */
.hfse-section {
	display: block;
}

/* Respect users who prefer reduced motion. */
@media ( prefers-reduced-motion: reduce ) {
	.hfse-sticky,
	.hfse-sticky-active {
		transition-duration: 0ms !important;
	}
}

/* Keyboard focus visibility for interactive children. */
.hfse-header :focus-visible,
.hfse-footer :focus-visible,
.hfse-section :focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 2px;
}