/*
 * 404 template — "Lost in Cyberspace".
 * 1:1 reproduction of the live Newspaper/tagDiv 404 animated stage.
 * Self-contained (vivid neon palette is intentional and page-specific);
 * only the surrounding shell uses foundation tokens.
 */

.site-main--404 {
	padding: 0;
}

.error-404-container {
	min-height: 90vh;
	display: flex;
	align-items: center;
	justify-content: center;
	background: #000;
	position: relative;
	overflow: hidden;
	font-family: var(--font-sans);
}

.error-404-container::before {
	content: '';
	position: absolute;
	width: 400%;
	height: 400%;
	background: radial-gradient(circle at 25% 25%, #ff0080 0%, transparent 50%),
		radial-gradient(circle at 75% 75%, #7928ca 0%, transparent 50%),
		radial-gradient(circle at 50% 50%, #0070f3 0%, transparent 50%);
	animation: galaxyRotate 30s linear infinite;
	opacity: 0.4;
}

.stars {
	position: absolute;
	width: 100%;
	height: 100%;
	background-image:
		radial-gradient(2px 2px at 20px 30px, white, transparent),
		radial-gradient(2px 2px at 40px 70px, white, transparent),
		radial-gradient(1px 1px at 50px 160px, white, transparent),
		radial-gradient(1px 1px at 130px 40px, white, transparent),
		radial-gradient(2px 2px at 80px 10px, white, transparent);
	background-repeat: repeat;
	background-size: 200px 200px;
	animation: starsMove 100s linear infinite;
	opacity: 0.3;
}

.error-content {
	text-align: center;
	color: white;
	z-index: 10;
	padding: 40px;
	max-width: 900px;
	animation: hologramGlitch 0.1s ease-in-out infinite alternate;
}

.error-404 {
	font-size: 300px;
	font-weight: 900;
	margin: 0;
	line-height: 1;
	position: relative;
	background: linear-gradient(45deg, #ff0080, #7928ca, #0070f3, #00d9ff, #ff0080);
	background-size: 400% 400%;
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
	animation: epicGradient 3s ease infinite, float 4s ease-in-out infinite;
	filter: drop-shadow(0 0 80px rgba(255, 0, 128, 0.8));
}

.error-404::before,
.error-404::after {
	content: '404';
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	background: linear-gradient(45deg, #ff0080, #7928ca, #0070f3, #00d9ff);
	background-size: 400% 400%;
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
	z-index: -1;
}

.error-404::before {
	animation: epicGradient 3s ease infinite, glitch-1 0.3s ease-in-out infinite alternate;
	filter: blur(3px);
	opacity: 0.7;
}

.error-404::after {
	animation: epicGradient 3s ease infinite reverse, glitch-2 0.3s ease-in-out infinite alternate;
	filter: blur(5px);
	opacity: 0.5;
}

.error-title {
	font-size: 48px;
	font-weight: 700;
	margin: 40px 0 20px;
	text-transform: uppercase;
	letter-spacing: 5px;
	position: relative;
	color: white;
	text-shadow: 0 0 30px rgba(255, 255, 255, 0.5);
}

.error-description {
	font-size: 22px;
	margin-bottom: 60px;
	opacity: 0.8;
	line-height: 1.8;
	max-width: 600px;
	margin-left: auto;
	margin-right: auto;
	text-shadow: 0 0 30px rgba(0, 245, 255, 0.8);
	animation: pulse 2s ease-in-out infinite;
}

.error-buttons {
	display: flex;
	gap: 40px;
	justify-content: center;
	flex-wrap: wrap;
}

.error-btn {
	display: inline-block;
	padding: 20px 50px;
	text-decoration: none;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 3px;
	font-size: 18px;
	position: relative;
	overflow: hidden;
	transition: all 0.3s ease;
	border: 2px solid transparent;
}

.btn-home {
	background: linear-gradient(45deg, #ff0080, #7928ca);
	color: white;
	box-shadow: 0 0 60px rgba(255, 0, 128, 0.6);
	border-radius: 50px;
}

.btn-home::before {
	content: '';
	position: absolute;
	top: -50%;
	left: -50%;
	width: 200%;
	height: 200%;
	background: linear-gradient(45deg, transparent, rgba(255, 255, 255, 0.3), transparent);
	transform: rotate(45deg);
	transition: all 0.5s;
}

.btn-home:hover::before {
	animation: shine 0.5s ease-in-out;
}

.btn-home:hover {
	transform: translateY(-5px) scale(1.1);
	box-shadow: 0 20px 80px rgba(255, 0, 128, 0.8);
}

.btn-back {
	color: #00d9ff;
	border: 2px solid #00d9ff;
	background: rgba(0, 217, 255, 0.1);
	box-shadow: 0 0 40px rgba(0, 217, 255, 0.4),
		inset 0 0 40px rgba(0, 217, 255, 0.1);
	border-radius: 50px;
}

.btn-back:hover {
	background: rgba(0, 217, 255, 0.3);
	transform: translateY(-5px) scale(1.1);
	box-shadow: 0 20px 80px rgba(0, 217, 255, 0.8),
		inset 0 0 60px rgba(0, 217, 255, 0.3);
	color: white;
}

.particle {
	position: absolute;
	background: linear-gradient(45deg, #ff0080, #00d9ff);
	border-radius: 50%;
	pointer-events: none;
}

.particle:nth-child(1) { width: 8px; height: 8px; top: 10%; left: 10%; animation: float-particle 15s infinite; }
.particle:nth-child(2) { width: 6px; height: 6px; top: 20%; left: 80%; animation: float-particle 20s infinite; animation-delay: 2s; }
.particle:nth-child(3) { width: 10px; height: 10px; top: 60%; left: 20%; animation: float-particle 18s infinite; animation-delay: 4s; }
.particle:nth-child(4) { width: 4px; height: 4px; top: 80%; left: 60%; animation: float-particle 22s infinite; animation-delay: 1s; }
.particle:nth-child(5) { width: 12px; height: 12px; top: 30%; left: 50%; animation: float-particle 16s infinite; animation-delay: 3s; }
.particle:nth-child(6) { width: 8px; height: 8px; top: 70%; left: 30%; animation: float-particle 19s infinite; animation-delay: 5s; }
.particle:nth-child(7) { width: 6px; height: 6px; top: 40%; left: 90%; animation: float-particle 21s infinite; animation-delay: 2.5s; }
.particle:nth-child(8) { width: 10px; height: 10px; top: 90%; left: 40%; animation: float-particle 17s infinite; animation-delay: 4.5s; }

.beam {
	position: absolute;
	height: 2px;
	background: linear-gradient(90deg, transparent, #ff0080, #00d9ff, transparent);
	box-shadow: 0 0 30px currentColor;
	opacity: 0.8;
}

.beam-1 {
	width: 400px;
	top: 20%;
	left: -400px;
	animation: beam-slide 8s infinite;
}

.beam-2 {
	width: 300px;
	bottom: 30%;
	right: -300px;
	animation: beam-slide-reverse 6s infinite;
	animation-delay: 2s;
	background: linear-gradient(90deg, transparent, #7928ca, #ff0080, transparent);
}

.beam-3 {
	width: 500px;
	top: 60%;
	left: -500px;
	animation: beam-slide 10s infinite;
	animation-delay: 4s;
	background: linear-gradient(90deg, transparent, #0070f3, #00d9ff, transparent);
}

.grid {
	position: absolute;
	width: 100%;
	height: 100%;
	background-image:
		linear-gradient(rgba(255, 0, 128, 0.1) 1px, transparent 1px),
		linear-gradient(90deg, rgba(255, 0, 128, 0.1) 1px, transparent 1px);
	background-size: 50px 50px;
	animation: gridMove 20s linear infinite;
	transform: perspective(1000px) rotateX(60deg);
	opacity: 0.3;
}

@keyframes galaxyRotate {
	0% { transform: rotate(0deg) scale(1); }
	50% { transform: rotate(180deg) scale(1.5); }
	100% { transform: rotate(360deg) scale(1); }
}

@keyframes starsMove {
	0% { transform: translateY(0); }
	100% { transform: translateY(-200px); }
}

@keyframes epicGradient {
	0% { background-position: 0% 50%; }
	50% { background-position: 100% 50%; }
	100% { background-position: 0% 50%; }
}

@keyframes float {
	0%, 100% { transform: translateY(0) scale(1); }
	50% { transform: translateY(-20px) scale(1.02); }
}

@keyframes glitch-1 {
	0% { transform: translate(0); }
	20% { transform: translate(-3px, 3px); }
	40% { transform: translate(-3px, -3px); }
	60% { transform: translate(3px, 3px); }
	80% { transform: translate(3px, -3px); }
	100% { transform: translate(0); }
}

@keyframes glitch-2 {
	0% { transform: translate(0); }
	20% { transform: translate(3px, -3px); }
	40% { transform: translate(3px, 3px); }
	60% { transform: translate(-3px, -3px); }
	80% { transform: translate(-3px, 3px); }
	100% { transform: translate(0); }
}

@keyframes hologramGlitch {
	0% { transform: skew(0deg); }
	100% { transform: skew(0.01deg); }
}

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

@keyframes shine {
	0% { left: -50%; top: -50%; }
	100% { left: 150%; top: 150%; }
}

@keyframes float-particle {
	0% { transform: translateY(0) translateX(0) scale(1); opacity: 0; }
	10% { opacity: 1; }
	90% { opacity: 1; }
	100% { transform: translateY(-100vh) translateX(200px) scale(0); opacity: 0; }
}

@keyframes beam-slide {
	0% { left: -400px; opacity: 0; }
	10% { opacity: 0.8; }
	90% { opacity: 0.8; }
	100% { left: 100%; opacity: 0; }
}

@keyframes beam-slide-reverse {
	0% { right: -300px; opacity: 0; }
	10% { opacity: 0.8; }
	90% { opacity: 0.8; }
	100% { right: 100%; opacity: 0; }
}

@keyframes gridMove {
	0% { transform: perspective(1000px) rotateX(60deg) translateZ(0); }
	100% { transform: perspective(1000px) rotateX(60deg) translateZ(50px); }
}

@media (max-width: 768px) {
	.error-404 { font-size: 180px; }
	.error-title { font-size: 32px; }
	.error-description { font-size: 18px; }
	.error-buttons { flex-direction: column; align-items: center; gap: 20px; }
	.error-btn { width: 280px; text-align: center; }
	.grid { display: none; }
}

@media (prefers-reduced-motion: reduce) {
	.error-404-container::before,
	.stars,
	.error-content,
	.error-404,
	.error-404::before,
	.error-404::after,
	.error-description,
	.particle,
	.beam,
	.grid {
		animation: none !important;
	}
}