/* Recordo splash screen
   Brief brand intro shown once per session before the landing page reveals.
   Click anywhere to skip. Auto-dismisses after ~2.5s. */

.recordo-splash {
	position: fixed;
	inset: 0;
	z-index: 9999;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	background: radial-gradient(ellipse at center, #2E4AA0 0%, #253B83 60%, #1B2C66 100%);
	cursor: pointer;
	overflow: hidden;
	animation: recordo-splash-out 0.6s ease-in-out 2.4s forwards;
}

/* Decorative dotted texture */
.recordo-splash::before {
	content: "";
	position: absolute;
	inset: 0;
	background-image: radial-gradient(rgba(255, 255, 255, 0.07) 1.4px, transparent 1.4px);
	background-size: 28px 28px;
	pointer-events: none;
	opacity: 0;
	animation: recordo-splash-dots-in 0.8s ease-out 0.1s forwards;
}

/* Logo stage */
.recordo-splash-stage {
	position: relative;
	width: 160px;
	height: 160px;
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 2;
}

/* Sound-wave rings emanating from the logo */
.recordo-splash-ring {
	position: absolute;
	left: 50%;
	top: 50%;
	width: 100%;
	aspect-ratio: 1;
	border-radius: 50%;
	border: 2px solid rgba(255, 255, 255, 0.55);
	transform: translate(-50%, -50%);
	opacity: 0;
	animation: recordo-splash-ring 2.2s ease-out infinite;
}
.recordo-splash-ring:nth-child(2) { animation-delay: 0.5s; }
.recordo-splash-ring:nth-child(3) { animation-delay: 1.0s; }
.recordo-splash-ring:nth-child(4) { animation-delay: 1.5s; }

/* The logo itself */
.recordo-splash-logo {
	position: relative;
	z-index: 3;
	width: 110px;
	height: auto;
	opacity: 0;
	transform: scale(0.7);
	animation: recordo-splash-logo-in 0.7s cubic-bezier(0.34, 1.56, 0.64, 1) 0.15s forwards;
	filter: drop-shadow(0 8px 28px rgba(0, 0, 0, 0.25));
}

/* Wordmark under the logo */
.recordo-splash-wordmark {
	position: relative;
	z-index: 2;
	margin-top: 1.5rem;
	font-family: Inter, system-ui, sans-serif;
	font-weight: 700;
	font-size: 1.875rem;
	color: #FFFFFF;
	letter-spacing: -0.02em;
	opacity: 0;
	transform: translateY(8px);
	animation: recordo-splash-text-in 0.6s ease-out 0.5s forwards;
}

/* Tagline */
.recordo-splash-tagline {
	position: relative;
	z-index: 2;
	margin-top: 0.5rem;
	font-family: Inter, system-ui, sans-serif;
	font-size: 0.95rem;
	font-weight: 500;
	color: rgba(255, 255, 255, 0.78);
	letter-spacing: 0.02em;
	opacity: 0;
	animation: recordo-splash-text-in 0.7s ease-out 0.9s forwards;
}

/* Small "tap to skip" hint */
.recordo-splash-skip {
	position: absolute;
	bottom: 1.75rem;
	left: 50%;
	transform: translateX(-50%);
	font-family: Inter, system-ui, sans-serif;
	font-size: 0.75rem;
	color: rgba(255, 255, 255, 0.45);
	letter-spacing: 0.04em;
	text-transform: uppercase;
	opacity: 0;
	animation: recordo-splash-text-in 0.6s ease-out 1.6s forwards;
}

/* Hide state once the JS dismisses or animation completes */
.recordo-splash.is-hidden { display: none; }

/* Keyframes */
@keyframes recordo-splash-logo-in {
	0%   { opacity: 0; transform: scale(0.7); }
	60%  { opacity: 1; transform: scale(1.06); }
	100% { opacity: 1; transform: scale(1); }
}
@keyframes recordo-splash-text-in {
	to { opacity: 1; transform: translateY(0); }
}
@keyframes recordo-splash-ring {
	0%   { opacity: 0.7; width: 60%; border-width: 2px; }
	100% { opacity: 0;   width: 260%; border-width: 0.5px; }
}
@keyframes recordo-splash-dots-in {
	to { opacity: 1; }
}
@keyframes recordo-splash-out {
	0%   { opacity: 1; }
	100% { opacity: 0; visibility: hidden; }
}

/* Block scroll while splash is visible */
html.recordo-splash-locked,
html.recordo-splash-locked body { overflow: hidden; }

@media (prefers-reduced-motion: reduce) {
	.recordo-splash-logo,
	.recordo-splash-wordmark,
	.recordo-splash-tagline,
	.recordo-splash-skip,
	.recordo-splash-ring,
	.recordo-splash {
		animation: none !important;
		opacity: 1;
		transform: none;
	}
	.recordo-splash { animation: recordo-splash-out 0.4s ease-out 1.6s forwards !important; }
}