/* ================================================
   TITLE SCREEN / SPLASH SCREEN
   ================================================ */

.title-screen {
	position: absolute;
	inset: 0;
	display: grid;
	place-items: center;
	width: 100%;
	height: 100%;
	padding: calc(2.5rem + env(safe-area-inset-top)) 
	         calc(1.25rem + env(safe-area-inset-left)) 
	         calc(2.5rem + env(safe-area-inset-bottom)) 
	         calc(1.25rem + env(safe-area-inset-right));
	z-index: 40;
	border-radius: inherit;
	background: rgba(12, 3, 6, 0.7);
	background-image: url('../assets/bg.jpg');
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	backdrop-filter: blur(8px) saturate(160%);
	border: 1px solid rgba(255, 52, 82, 0.28);
	box-shadow: 0 22px 70px rgba(0, 0, 0, 0.65), inset 0 0 24px rgba(255, 52, 82, 0.16);
	gap: 1.75rem;
	text-align: center;
	cursor: pointer;
	overflow: hidden;
	isolation: isolate;
	transition: opacity var(--transition-slow), transform var(--transition-slow);
}

.title-screen[hidden] {
	display: none;
}

.title-screen.title-screen--leaving {
	opacity: 0;
	transform: scale(0.96);
	pointer-events: none;
}

html.entered .title-screen {
	transform: translateY(-6vh);
	opacity: 0;
	pointer-events: none;
}

.title-screen > *:not(.title-screen__fx) {
	position: relative;
	z-index: 2;
}

/* Title Screen Effects Layer */
.title-screen__fx {
	position: absolute;
	inset: 0;
	overflow: hidden;
	pointer-events: none;
	z-index: 0;
	mix-blend-mode: screen;
}

.title-screen__fx span {
	position: absolute;
	display: block;
	inset: 0;
	transform-origin: center;
}

.title-screen__layer--grid {
	opacity: 0.68;
	background:
		repeating-linear-gradient(to right, rgba(255, 52, 82, 0.14) 0, rgba(255, 52, 82, 0.14) 1px, transparent 1px, transparent 46px),
		repeating-linear-gradient(to bottom, rgba(118, 184, 255, 0.12) 0, rgba(118, 184, 255, 0.12) 1px, transparent 1px, transparent 46px);
	animation: grid-pan 20s linear infinite, grid-flicker 5.4s ease-in-out infinite;
}

.title-screen__layer--pulse {
	background: radial-gradient(circle at center, rgba(255, 72, 102, 0.32) 0%, rgba(255, 72, 102, 0.04) 60%, transparent 70%);
	filter: blur(2px);
	animation: pulse-wave 5.6s ease-in-out infinite;
}

.title-screen__layer--particles {
	opacity: 0.28;
	background:
		repeating-radial-gradient(circle at 10% 20%, rgba(255, 255, 255, 0.3) 0 1px, transparent 2px 60px),
		repeating-radial-gradient(circle at 80% 70%, rgba(255, 82, 120, 0.35) 0 1.5px, transparent 1.5px 72px);
	background-size: 240px 240px, 320px 320px;
	animation: particles-glide 16s linear infinite;
}

.title-screen::before,
.title-screen::after {
	content: "";
	position: absolute;
	inset: -2px;
	border-radius: inherit;
	pointer-events: none;
}

.title-screen::before {
	border: 1px solid rgba(255, 43, 69, 0.4);
	opacity: 0.7;
	box-shadow: 0 0 26px rgba(255, 43, 69, 0.32);
	animation: frame-pulse 7s ease-in-out infinite;
}

.title-screen::after {
	background:
		radial-gradient(circle at 50% 18%, rgba(255, 65, 94, 0.4) 0%, rgba(255, 65, 94, 0) 60%),
		radial-gradient(circle at 50% 88%, rgba(120, 0, 25, 0.35) 0%, rgba(120, 0, 25, 0) 68%);
	mix-blend-mode: screen;
	opacity: 0.8;
	filter: blur(10px);
	animation: aurora-shift 12s ease-in-out infinite;
}

/* Ensure interactive areas work */
.title-screen,
.cta {
	pointer-events: auto;
}

/* Logo */
.logo {
	display: grid;
	justify-items: center;
	gap: 0.4rem;
	text-transform: uppercase;
	letter-spacing: 0.08rem;
	position: relative;
	isolation: isolate;
}

.logo span:first-child {
	font-size: clamp(1.75rem, 6.5vw, 2.65rem);
	letter-spacing: 0.14rem;
	color: var(--text-primary);
	text-shadow: 0 0 24px rgba(243, 246, 255, 0.5);
}

.logo span:last-child {
	font-size: clamp(2.4rem, 10vw, 4rem);
	font-weight: 700;
	background: linear-gradient(112deg, #f4f7ff 0%, var(--accent) 48%, #ff9560 100%);
	background-clip: text;
	-webkit-background-clip: text;
	color: transparent;
	text-shadow: 0 0 24px rgba(250, 34, 84, 0.35);
	animation: logo-glow 4.6s ease-in-out infinite;
	font-family: var(--font-display);
	letter-spacing: 0.12rem;
}

.subtitle {
	font-size: clamp(0.95rem, 3.5vw, 1.15rem);
	color: var(--text-secondary);
	text-transform: uppercase;
	letter-spacing: 0.35rem;
	margin-top: -0.35rem;
}

/* Call-to-Action Button */
.cta {
	font-size: clamp(1rem, 3.5vw, 1.25rem);
	font-weight: 600;
	letter-spacing: 0.28rem;
	text-transform: uppercase;
	padding: 0.85rem 1.35rem;
	background: rgba(7, 17, 25, 0.58);
	color: var(--text-primary);
	position: relative;
	overflow: hidden;
}

.cta::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(120deg, transparent 10%, rgba(243, 246, 255, 0.4) 45%, rgba(243, 246, 255, 0.2) 55%, transparent 90%);
	transform: translateX(-70%) skewX(-15deg);
	animation: shimmer 3.6s ease-in-out infinite;
}

.cta span {
	position: relative;
}

.cta-indicator {
	font-size: 0.85rem;
	font-weight: normal;
	letter-spacing: 0.18rem;
	margin-top: 0.85rem;
	color: rgba(243, 246, 255, 0.55);
	animation: pulse 2.8s ease-in-out infinite;
}

html.entered .cta-indicator {
	animation-play-state: paused;
}