/* =========================================================================
 * hex-float.css — cursor-revealed 3D hex block floor over the homepage's
 * <main> section backgrounds (#news, #latest-posts, #most-read-posts). See
 * assets/js/hex-float.js, which injects the canvas and adds/removes the
 * classes used below.
 * ========================================================================= */

.lb-section--hexfloat {
	position: relative;
}

/* Content stays above the canvas so cards/text/images occlude it naturally —
   the effect only ever shows through real whitespace. */
.lb-section--hexfloat > .lb-container {
	position: relative;
	z-index: 1;
}

.lb-hexfloat {
	position: absolute;
	inset: 0;
	/* Canvas is a replaced element — without an explicit CSS size it renders
	   at its intrinsic pixel-buffer size (width/height attrs, scaled by
	   devicePixelRatio in hex-float.js) instead of stretching to fill via
	   inset alone. Invisible at dpr:1 but on HiDPI/scaled displays the
	   canvas ends up 1.5x-2x too big, overflowing its section sideways and
	   into the next one. */
	width: 100%;
	height: 100%;
	z-index: 0;
	display: block;
	pointer-events: none;
	opacity: 0;
	transition: opacity 900ms var(--lb-ease-out);
}

/* Fine pointers only, and only once JS confirms motion is live — matches the
   no-flash convention used by .lb-hero--live in hero.css. */
@media (hover: hover) and (pointer: fine) {
	html.lb-motion .lb-section--hexfloat.is-live .lb-hexfloat {
		opacity: 1;
	}
}