/**
 * Brutalist Animations
 * Keyframe animations extracted from the Stitch design system.
 * Marquee ticker, glitch effects, terminal cursor, hex streams.
 */

/* ========================================
   MARQUEE TICKER
   Infinite scrolling banner animation.
   Used in header ticker / status bar.
   ======================================== */
@keyframes ticker {
	0% {
		transform: translate3d(0, 0, 0);
	}
	100% {
		transform: translate3d(-100%, 0, 0);
	}
}

.marquee-ticker {
	overflow: hidden;
	white-space: nowrap;
	width: 100%;
}

.marquee-ticker__inner {
	display: inline-flex;
	animation: ticker 30s linear infinite;
	gap: 3rem;
}

.marquee-ticker__inner:hover {
	animation-play-state: paused;
}

/* ========================================
   GLITCH EFFECT
   Used for error states, emphasis moments.
   ======================================== */
@keyframes glitch {
	0% {
		transform: translate(0);
		text-shadow: none;
	}
	20% {
		transform: translate(-2px, 2px);
		text-shadow: 2px 0 var(--wp--preset--color--accent-4), -2px 0 var(--wp--preset--color--accent);
	}
	40% {
		transform: translate(2px, -2px);
		text-shadow: -2px 0 var(--wp--preset--color--accent-4), 2px 0 var(--wp--preset--color--accent);
	}
	60% {
		transform: translate(-1px, 1px);
		text-shadow: 1px 0 var(--wp--preset--color--accent), -1px 0 var(--wp--preset--color--accent-4);
	}
	80% {
		transform: translate(1px, -1px);
		text-shadow: -1px 0 var(--wp--preset--color--accent), 1px 0 var(--wp--preset--color--accent-4);
	}
	100% {
		transform: translate(0);
		text-shadow: none;
	}
}

.glitch {
	animation: glitch 0.3s ease-in-out;
}

.glitch-loop {
	animation: glitch 2s ease-in-out infinite;
}

/* ========================================
   TERMINAL CURSOR BLINK
   Used in terminal feed / code blocks.
   ======================================== */
@keyframes blink {
	0%, 50% {
		opacity: 1;
	}
	51%, 100% {
		opacity: 0;
	}
}

.terminal-cursor::after {
	content: "█";
	color: var(--wp--preset--color--accent-4);
	animation: blink 1s step-end infinite;
}

/* ========================================
   HEX STREAM
   Background data stream effect.
   ======================================== */
@keyframes hexStream {
	0% {
		transform: translateY(0);
		opacity: 0.3;
	}
	50% {
		opacity: 0.6;
	}
	100% {
		transform: translateY(-100%);
		opacity: 0.1;
	}
}

.hex-stream {
	animation: hexStream 8s linear infinite;
	font-family: var(--wp--preset--font-family--body);
	font-size: 10px;
	color: var(--wp--preset--color--accent-4);
	opacity: 0.15;
	pointer-events: none;
}

/* ========================================
   PULSE
   Active/live indicator animation.
   ======================================== */
@keyframes pulse {
	0%, 100% {
		opacity: 1;
	}
	50% {
		opacity: 0.5;
	}
}

.pulse {
	animation: pulse 2s ease-in-out infinite;
}

/* ========================================
   FADE IN UP
   Entry animation for sections/cards.
   ======================================== */
@keyframes fadeInUp {
	from {
		opacity: 0;
		transform: translateY(20px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

.fade-in-up {
	animation: fadeInUp 0.6s ease-out forwards;
	opacity: 0;
}

/* ========================================
   SCAN LINE
   Terminal/CRT scan line effect.
   ======================================== */
@keyframes scanline {
	0% {
		transform: translateY(-100%);
	}
	100% {
		transform: translateY(100vh);
	}
}

.scanline-overlay::after {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 2px;
	background: var(--wp--preset--color--accent-4);
	opacity: 0.1;
	animation: scanline 4s linear infinite;
	pointer-events: none;
}

/* ========================================
   COUNT UP
   For metric counters / numbers.
   ======================================== */
@keyframes countUp {
	from {
		opacity: 0;
		transform: translateY(10px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

.count-up {
	animation: countUp 0.8s ease-out forwards;
}