/*
 * Comic Effects — Halftone, Ink Shadows, Impact Words
 * Unbreakable · Retro Comic Static Site
 *
 * Stripped down to essentials: halftone texture, ink shadows,
 * and the impact word effect. No body outline, no page turn,
 * no ink divider, no halftone strip, no speed lines.
 */

/* ─── HALFTONE DOT OVERLAY ────────────────────────────────────────────── */

.c-halftone {
	position: relative;
}

.c-halftone::after {
	content: '';
	position: absolute;
	inset: 0;
	background-image: url('../images/halftone-overlay.svg');
	background-size: 6px 6px;
	mix-blend-mode: multiply;
	opacity: 0.12;
	pointer-events: none;
	z-index: 1;
}

/* Dark panels use screen blend to make dots lighter */
.c-halftone--on-dark::after {
	mix-blend-mode: screen;
	opacity: 0.06;
}

/* Accent / emphasis area — larger dots */
.c-halftone--accent::after {
	background-size: 8px 8px;
	opacity: 0.18;
	mix-blend-mode: overlay;
}

/* Panel-specific halftone — only within .c-panel bounds */
.c-panel.c-halftone::after {
	border-radius: inherit;
}

@media (max-width: 767px) {
	.c-halftone::after {
		background-size: 10px 10px;
	}
	.c-halftone--accent::after {
		background-size: 12px 12px;
	}
}


/* ─── INK PUNCH SHADOWS ────────────────────────────────────────────────── */

.c-ink-shadow {
	box-shadow: var(--shadow-ink);
	transform: translate(-2px, -2px);
}

.c-ink-shadow--lg {
	box-shadow: var(--shadow-ink-lg);
	transform: translate(-3px, -3px);
}

.c-ink-shadow--interactive {
	transition: transform var(--transition-base), box-shadow var(--transition-base);
}
.c-ink-shadow--interactive:hover,
.c-ink-shadow--interactive:focus {
	transform: translate(-3px, -3px);
	box-shadow: var(--shadow-ink-lg);
}
.c-ink-shadow--interactive:active {
	transform: translate(-1px, -1px);
	box-shadow: 2px 2px 0 var(--color-ink);
}


/* ─── HALFTONE — CSS-ONLY RADIAL VARIANT ───────────────────────────────── */

.c-halftone--radial {
	background:
		radial-gradient(circle, var(--color-crimson) 0.8px, transparent 0.8px),
		radial-gradient(circle, var(--color-crimson) 0.8px, transparent 0.8px);
	background-size: 6px 6px, 6px 6px;
	background-position: 0 0, 3px 3px;
	background-blend-mode: screen;
	opacity: 0.08;
	mix-blend-mode: screen;
}


/* ─── SOUND EFFECT / IMPACT WORDS ───────────────────────────────────────── */

.c-impact-word {
	display: block;
	font-family: var(--font-heading);
	font-size: clamp(4rem, 12vw, 9rem);
	line-height: 0.9;
	text-transform: uppercase;
	letter-spacing: var(--ls-heading);
	color: var(--color-crimson);
	text-shadow:
		4px 4px 0 var(--color-ink),
		-2px -2px 0 var(--color-ink),
		2px -2px 0 var(--color-ink),
		-2px 2px 0 var(--color-ink),
		0 6px 0 rgba(0,0,0,0.3);
	-webkit-text-stroke: 2px var(--color-ink);
	paint-order: stroke fill;
	transform: rotate(-2deg) skewX(-3deg);
	margin-bottom: var(--space-md);
}

.c-impact-word--cyan  { color: var(--color-cyan); }
.c-impact-word--white { color: var(--color-white); }

.c-impact-word--pulse {
	animation: impact-pulse 3s ease-in-out infinite;
}

@keyframes impact-pulse {
	0%, 100% { transform: rotate(-2deg) skewX(-3deg) scale(1); }
	50%      { transform: rotate(-2deg) skewX(-3deg) scale(1.03); }
}

@media (prefers-reduced-motion: reduce) {
	.c-impact-word--pulse {
		animation: none;
	}
}