@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&family=Orbitron:wght@400;700;900&display=swap');

/* ===== Type 1 Header — self-contained section =====
   All styles are scoped under .type1-header so they
   won't collide with the rest of the page.
   ================================================== */

.type1-header {
    padding-top:50px;
	position: relative;
	width: 100%;
	height: calc(100vh - 50px);
	min-height: 480px;
	overflow: hidden;
	background: #0a0014;
}

/* Canvas background — fills the .type1-header container */
.type1-header canvas {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 0;
}

/* Content overlay — centered within the container */
.type1-header .overlay {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	pointer-events: none;
}

/* Scanline CRT effect — scoped to the header only */
.type1-header::after {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: repeating-linear-gradient(
		0deg,
		transparent,
		transparent 2px,
		rgba(0, 0, 0, 0.08) 2px,
		rgba(0, 0, 0, 0.08) 4px
	);
	pointer-events: none;
	z-index: 2;
}

.type1-header .hero {
	text-align: center;
	pointer-events: auto;
}

.type1-header .hero-content {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 1rem;
    padding-left: 1em;
    padding-right: 1em;
    padding-top: 3em;
}

/* Neon pre-title */
.type1-header .hero-pre {
	font-family: 'Press Start 2P', monospace;
	font-size: 1rem;
	letter-spacing: 0.5em;
	color: #ff6ec7;
	text-shadow:
		0 0 7px #ff6ec7,
		0 0 20px #ff6ec7,
		0 0 42px #ff2d95,
		0 0 80px #ff2d95;
}

/* Glitch title */
.type1-header .hero-title {
	font-family: 'Orbitron', sans-serif;
	font-size: clamp(2rem, 6vw, 4.5rem);
	font-weight: 900;
	letter-spacing: 0.08em;
	color: #fff;
	text-shadow:
		0 0 10px #00f0ff,
		0 0 30px #00f0ff,
		0 0 60px #0080ff,
		0 0 100px #0080ff;
	position: relative;
}

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

.type1-header .glitch::before {
	animation: glitch-1 3s infinite linear;
	clip-path: polygon(0 0, 100% 0, 100% 35%, 0 35%);
	color: #ff00ff;
	text-shadow: -2px 0 #ff00ff;
}

.type1-header .glitch::after {
	animation: glitch-2 3s infinite linear;
	clip-path: polygon(0 65%, 100% 65%, 100% 100%, 0 100%);
	color: #00ffff;
	text-shadow: 2px 0 #00ffff;
}

@keyframes glitch-1 {
	0%, 90%, 100% { transform: translate(0); }
	92% { transform: translate(-3px, 1px); }
	94% { transform: translate(3px, -1px); }
	96% { transform: translate(-2px, 2px); }
	98% { transform: translate(2px, -2px); }
}

@keyframes glitch-2 {
	0%, 88%, 100% { transform: translate(0); }
	90% { transform: translate(3px, 1px); }
	93% { transform: translate(-3px, -1px); }
	95% { transform: translate(2px, 2px); }
	97% { transform: translate(-2px, -2px); }
}

.type1-header .hero-sub {
	font-size: clamp(1rem, 2vw, 1.5rem);
	color: #b0e0ff;
	letter-spacing: 0.15em;
	text-shadow: 0 0 15px rgba(0, 240, 255, 0.5);
	max-width: 600px;
}

.type1-header .hero-divider {
	width: 280px;
	height: 3px;
	background: linear-gradient(90deg, transparent, #ff6ec7, #00f0ff, #ff6ec7, transparent);
	border-radius: 2px;
	box-shadow: 0 0 12px #ff6ec7, 0 0 24px #00f0ff;
}

.type1-header .hero-train {
	max-width: min(500px, 80vw);
	height: auto;
	filter:
		drop-shadow(0 0 15px rgba(255, 110, 199, 0.6))
		drop-shadow(0 0 30px rgba(0, 240, 255, 0.4));
	animation: train-hover 4s ease-in-out infinite;
}

@keyframes train-hover {
	0%, 100% { transform: translateY(0); }
	50% { transform: translateY(-8px); }
}

.type1-header .hero-tagline {
	font-family: 'Press Start 2P', monospace;
	font-size: clamp(0.6rem, 1.5vw, 0.9rem);
	color: #ffde59;
	text-shadow:
		0 0 7px #ffde59,
		0 0 20px #ffde59,
		0 0 40px #ff9500;
	letter-spacing: 0.25em;
}

/* Neon flicker */
.type1-header .neon-flicker {
	animation: flicker 4s infinite;
}

@keyframes flicker {
	0%, 19%, 21%, 23%, 25%, 54%, 56%, 100% { opacity: 1; }
	20%, 24%, 55% { opacity: 0.6; }
}

/* Responsive */
@media (max-width: 600px) {
	.type1-header .hero-pre {
		font-size: 0.65rem;
		letter-spacing: 0.3em;
	}

	.type1-header .hero-divider {
		width: 180px;
	}

	.type1-header .hero-tagline {
		letter-spacing: 0.15em;
	}
}

@media (prefers-reduced-motion: reduce) {
	.type1-header *,
	.type1-header *::before,
	.type1-header *::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
	}
}