/* ============================================================
 * Visual effects — custom cursor, particles, stars, glow pulses.
 * These run sitewide (not landing-only) so the brand identity
 * stays consistent across blog, archive, single, etc.
 *
 * All of them respect prefers-reduced-motion via base.css.
 * ============================================================ */

/* ----- Custom cursor ------------------------------------------------ */
.cursor {
	position: fixed;
	top: 0;
	left: 0;
	width: 10px;
	height: 10px;
	background: var(--ember);
	border-radius: 50%;
	pointer-events: none;
	z-index: 9999;
	transition: transform 0.15s ease;
	mix-blend-mode: screen;
	transform: translate(-50%, -50%);
}
.cursor-ring {
	position: fixed;
	top: 0;
	left: 0;
	width: 36px;
	height: 36px;
	border: 1.5px solid rgba(212, 82, 26, 0.5);
	border-radius: 50%;
	pointer-events: none;
	z-index: 9998;
	transition: width 0.35s ease, height 0.35s ease, border-color 0.35s ease;
	transform: translate(-50%, -50%);
}
body:hover .cursor { transform: translate(-50%, -50%) scale(1); }

/* ----- Particles container (used on the opening section) ------------ */
.particles {
	position: absolute;
	inset: 0;
	overflow: hidden;
	pointer-events: none;
}
.particle {
	position: absolute;
	width: 2px;
	height: 2px;
	background: var(--ember);
	border-radius: 50%;
	animation: float linear infinite;
	opacity: 0;
}
@keyframes float {
	0%   { transform: translateY(100vh) translateX(0);    opacity: 0; }
	10%  { opacity: 0.8; }
	90%  { opacity: 0.4; }
	100% { transform: translateY(-10vh) translateX(40px); opacity: 0; }
}

/* ----- Stars container (Chapter 5) ---------------------------------- */
.ch5-stars {
	position: absolute;
	inset: 0;
	overflow: hidden;
	pointer-events: none;
}
.star {
	position: absolute;
	width: 1px;
	height: 1px;
	background: white;
	border-radius: 50%;
	animation: twinkle ease-in-out infinite;
}
@keyframes twinkle {
	0%, 100% { opacity: 0.1; }
	50%      { opacity: 0.8; }
}

/* ----- Reusable glow pulse (portrait, ch3, ch5 etc.) ---------------- */
@keyframes glowPulse {
	0%, 100% { opacity: 0.5; transform: scale(1); }
	50%      { opacity: 1;   transform: scale(1.1); }
}

@keyframes pulse {
	0%, 100% { opacity: 0.4; }
	50%      { opacity: 1; }
}

/* Hide cursor on touch devices and small screens */
@media (hover: none), (pointer: coarse) {
	body { cursor: auto; }
	.cursor, .cursor-ring { display: none; }
}