/* ========================================
   Ensoul Page Transitions — v2.3.0
   Strip mask + ASCII logo
   ======================================== */

/* ── Barba container ────────────── */
/* The .ens-barba-container <div> wraps everything between header and
   footer — including <main>, sections, columns — so that Barba swaps
   the complete page structure at a consistent DOM depth.
   It MUST be transparent to layout: no padding, no margin, no max-width. */

.ens-barba-container {
	width: 100%;
	display: contents; /* Invisible to layout — children act as if
	                      they are direct children of .wp-site-blocks.
	                      This preserves .wp-site-blocks > main selectors
	                      and block-gap spacing. */
}

/* Fallback for older browsers that don't support display:contents */
@supports not (display: contents) {
	.ens-barba-container {
		display: block;
		margin: 0;
		padding: 0;
	}
}

.ens-transitioning .ens-barba-container {
	pointer-events: none;
}

.ens-transitioning {
	/* No overflow:hidden — it can clip position:fixed navs.
	   The overlay covers the page visually + blocks pointer-events. */
}

/* Hide global grid lines during transitions — their mix-blend-mode
   can bleed through the overlay on some browsers. display:none fully
   removes the element from the render tree (visibility:hidden does not
   prevent blend-mode compositing in all engines). */
.ens-transitioning #escr-global-lines {
	display: none;
}

/* ── Transition overlay ─────────── */

.ens-transition-overlay {
	position: fixed;
	inset: -1px;
	z-index: 999;
	display: flex;
	pointer-events: none;
	visibility: hidden;
}

.ens-transition-overlay--active {
	pointer-events: auto;
	visibility: visible;
}

/* ── Strips ─────────────────────── */

.ens-transition-strip {
	flex: 1;
	height: 100%;
	transform: scaleY(0);
	transform-origin: top center;
	will-change: transform;
	background-color: var(--ens-transition-bg, #0a0a0a);
	/* Anti sub-pixel gap: extend each strip slightly past its flex boundary */
	margin: 0 -0.5px;
}

/* Blend mode is controlled by body class so it can be toggled at runtime
   by the perf debugger for live A/B comparison.
     .ens-strips-blend-overlay → match line-colors compositing
     .ens-strips-blend-flat    → no blend (cheaper on the GPU) */
body.ens-strips-blend-overlay .ens-transition-strip {
	mix-blend-mode: overlay;
}

body.ens-strips-blend-flat .ens-transition-strip {
	mix-blend-mode: normal;
}

/* ── ASCII logo (centered on overlay) */

.ens-transition-logo {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	z-index: 1;
	opacity: 0;
	color: var(--ens-transition-text, #fff);
	user-select: none;
	pointer-events: none;
	border: none;
	outline: none;
	background: none;
}

.ens-transition-logo__pre {
	margin: 0;
	padding: 0;
	border: none;
	outline: none;
	background: none;
	box-shadow: none;
	text-decoration: none;
	font-family: var(--font-mono, 'Courier New', Courier, monospace);
	font-size: clamp(0.28rem, 0.65vw, 0.6rem);
	line-height: 1;
	letter-spacing: 0.02em;
	white-space: pre;
}

.ens-transition-logo__line {
	display: block;
	opacity: 0;
}

.ens-transition-logo__line--visible {
	opacity: 1;
}