@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;700;900&family=Rajdhani:wght@300;400;600&display=swap');

* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

body {
	font-family: 'Rajdhani', sans-serif;
	background: linear-gradient(135deg, #0a0a0a 0%, #2e1a1a 50%, #3e1616 100%);
	color: #ffffff;
	overflow-x: hidden;
	min-height: 100vh;
	position: relative;
}

.particles {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 1;
	pointer-events: none;
}

.particle {
	position: absolute;
	width: 2px;
	height: 2px;
	background: #00ffff;
	border-radius: 50%;
	animation: float 6s infinite linear;
	box-shadow: 0 0 6px #00ffff;
}

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

.container {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	min-height: 100vh;
	padding: 20px;
	position: relative;
	z-index: 2;
}

.glitch {
	text-align: center;
	font-family: 'Orbitron', monospace;
	font-size: clamp(2.5rem, 8vw, 6rem);
	font-weight: 900;
	text-transform: uppercase;
	position: relative;
	color: #ff0000;
	letter-spacing: 0.1em;
	animation: glitch 2s infinite;
	text-shadow: 
		0 0 10px #ffee00,
		0 0 20px #ffee00,
		0 0 40px #ffee00;
}

.glitch::before,
.glitch::after {
	content: attr(data-text);
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

.glitch::before {
	animation: glitch-1 0.5s infinite;
	color: #ff00ff;
	z-index: -1;
}

.glitch::after {
	animation: glitch-2 0.5s infinite;
	color: #ffff00;
	z-index: -2;
}

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

@keyframes glitch-1 {
	0%, 90%, 100% {
		transform: translate(0);
	}
	10% {
		transform: translate(-2px, -2px);
	}
	20% {
		transform: translate(2px, 2px);
	}
	30% {
		transform: translate(-2px, 2px);
	}
	40% {
		transform: translate(2px, -2px);
	}
}

@keyframes glitch-2 {
	0%, 90%, 100% {
		transform: translate(0);
	}
	15% {
		transform: translate(2px, -2px);
	}
	25% {
		transform: translate(-2px, 2px);
	}
	35% {
		transform: translate(2px, 2px);
	}
	45% {
		transform: translate(-2px, -2px);
	}
}

.subtitle {
	font-size: clamp(1.2rem, 4vw, 2rem);
	margin: 2rem 0;
	text-align: center;
	color: #ffffff;
	font-weight: 300;
	letter-spacing: 0.2em;
	text-transform: uppercase;
}

.progress-container {
	width: 100%;
	max-width: 500px;
	height: 6px;
	background: rgba(255, 255, 255, 0.1);
	border-radius: 10px;
	margin: 3rem 0;
	overflow: hidden;
	position: relative;
	box-shadow: inset 0 0 10px rgba(0, 255, 255, 0.3);
}

.progress-bar {
	height: 100%;
	background: linear-gradient(90deg, #ff0000, #ff5e00, #ffff00, #ff0000);
	background-size: 400% 400%;
	animation: progress 3s ease-in-out infinite, gradient 2s ease infinite;
	border-radius: 10px;
	box-shadow: 0 0 20px rgba(0, 255, 255, 0.8);
}

@keyframes progress {
	0% { width: 0%; }
	50% { width: 70%; }
	100% { width: 100%; }
}

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

.status-text {
	font-size: 1.4rem;
	margin: 2rem 0;
	color: #e5ff00;
	text-align: center;
	font-weight: 400;
	letter-spacing: 0.1em;
	text-shadow: 0 0 10px rgba(255, 0, 0, 0.5);
}

.eta {
	font-size: 1.1rem;
	color: #ffff00;
	margin: 1rem 0;
	font-weight: 600;
	text-shadow: 0 0 10px rgba(255, 255, 0, 0.5);
}

.hexagon {
	width: 100px;
	height: 100px;
	position: relative;
	margin: 3rem auto;
	animation: rotate 4s linear infinite;
}

.hexagon::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: linear-gradient(45deg, #ff9b00, #ff0000);
	clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
	animation: pulse 2s ease-in-out infinite;
}

@keyframes rotate {
	0% { transform: rotate(0deg); }
	100% { transform: rotate(360deg); }
}

@keyframes pulse {
	0%, 100% { 
		box-shadow: 0 0 20px rgba(0, 255, 255, 0.8);
		filter: brightness(1);
	}
	50% { 
		box-shadow: 0 0 40px rgba(255, 0, 255, 1);
		filter: brightness(1.5);
	}
}

.social-links {
	display: flex;
	gap: 2rem;
	margin-top: 3rem;
}

.social-link {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 50px;
	height: 50px;
	border: 2px solid #ff0000;
	border-radius: 50%;
	color: #fffb00;
	text-decoration: none;
	transition: all 0.3s ease;
	font-size: 1.2rem;
	position: relative;
	overflow: hidden;
}

.social-link::before {
	content: '';
	position: absolute;
	top: 0;
	left: -100%;
	width: 100%;
	height: 100%;
	background: linear-gradient(90deg, transparent, rgba(0, 255, 255, 0.3), transparent);
	transition: left 0.5s ease;
}

.social-link:hover {
	color: #ffffff;
	border-color: #ff00ff;
	box-shadow: 0 0 20px rgba(0, 255, 255, 0.6);
	transform: scale(1.1);
}

.social-link:hover::before {
	left: 100%;
}

.grid-background {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-image: 
		linear-gradient(rgba(0, 255, 255, 0.1) 1px, transparent 1px),
		linear-gradient(90deg, rgba(0, 255, 255, 0.1) 1px, transparent 1px);
	background-size: 50px 50px;
	animation: grid-move 20s linear infinite;
	z-index: 0;
}

@keyframes grid-move {
	0% { transform: translate(0, 0); }
	100% { transform: translate(50px, 50px); }
}

.notification {
	position: fixed;
	bottom: 2rem;
	right: 2rem;
	background: rgba(0, 0, 0, 0.8);
	border: 1px solid #ff0000;
	border-radius: 10px;
	padding: 1rem 1.5rem;
	color: #fffb00;
	font-family: 'Orbitron', monospace;
	font-size: 0.9rem;
	box-shadow: 0 0 20px rgba(255, 251, 0, 0.3);
	animation: slideIn 0.5s ease-out;
	z-index: 3;
}

@keyframes slideIn {
	from {
		transform: translateX(100%);
		opacity: 0;
	}
	to {
		transform: translateX(0);
		opacity: 1;
	}
}

@media (max-width: 768px) {
	.social-links {
		gap: 1rem;
	}
	
	.social-link {
		width: 40px;
		height: 40px;
		font-size: 1rem;
	}
	
	.notification {
		bottom: 1rem;
		right: 1rem;
		left: 1rem;
		text-align: center;
	}
}