/* ==========================================================================
   Ensoul ASCII Logo v2.3.0
   Shortcode [ensoul_logo] – scramble reveal on scroll
   ========================================================================== */

.ensoul-ascii-logo {
	width: 100%;
	display: flex;
	justify-content: center;
	overflow: hidden;
	/* Container queries on the wrapper so the pre's font-size scales
	   to the wrapper's REAL width — independent of viewport padding,
	   grid changes, or breakpoints. */
	container-type: inline-size;
}

.ensoul-ascii-logo__pre {
	font-family: var(--font-mono, 'Courier New', Courier, monospace);
	/* 82 chars wide. Real character advance for typical monospace
	   fonts is between 0.55em and 0.62em. Using 0.62em as the
	   pessimistic upper bound: 82 × 0.62 = 50.84em max content width.
	   1cqw = 1% of the wrapper's inline size, so the maximum safe
	   font-size is 100cqw / 50.84 ≈ 1.96cqw. We use 1.85cqw to keep
	   a ~5% safety margin even with quirky fonts. */
	font-size: clamp(2.5px, 1.85cqw, 14px);
	line-height: 1.15;
	letter-spacing: 0;
	white-space: pre;
	margin: 0;
	text-align: center;
	color: var(--color-white, #fff);
	max-width: 100%;
	overflow: hidden;
}

.ensoul-ascii-logo__line {
	display: inline;
	opacity: 0;
	transition: opacity 0.08s ease;
}

.ensoul-ascii-logo__line--visible {
	opacity: 1;
}

@media (max-width: 768px) {
	.ensoul-ascii-logo {
		padding: 0;
		margin: 0 auto;
	}
}

/* Older browsers without container-query support: fall back to the
   viewport-based formula tuned to the current 8-column mobile grid
   (75vw central content width, 12.5vw padding on each side). */
@supports not (container-type: inline-size) {
	.ensoul-ascii-logo__pre {
		font-size: clamp(4px, 1.95vw, 14px);
	}
	@media (max-width: 768px) {
		.ensoul-ascii-logo__pre {
			/* (75vw available) / 50.84em ≈ 1.47vw max → 1.4vw safe. */
			font-size: clamp(2.5px, 1.4vw, 5.5px);
		}
	}
}