/* Page transition overlay styles */
:root{
  --overlay-bg: #9E9FD2; /* project purple (tailwind) */
  --arrow-green: #CBDE77; /* project green (tailwind) */
}

.page-transition-overlay{
	position:fixed;
	inset:0;
	background:var(--overlay-bg);
	display:flex;
	align-items:center;
	justify-content:center;
	z-index:9999;
	transform-origin:center bottom;
	transform:translateY(100%);
	transition:transform 1040ms cubic-bezier(.2,.9,.3,1), opacity 720ms ease;
	opacity:0;
	pointer-events:none;
}
.page-transition-overlay.visible{
	transform:translateY(0%); /* fully cover viewport when visible */
	opacity:1;
	pointer-events:auto;
}

.overlay-inner{
	text-align:center;
	color:white;
	display:flex;
	flex-direction:column;
	gap:1rem;
	align-items:center;
}
.overlay-title{
	font-family: 'Public Sans', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial;
	font-weight:800;
	letter-spacing:6px;
	font-size:clamp(20px, 6vw, 56px);
	margin:0;
}
.overlay-badge a{
	display:inline-block;
	/* Ensure the NameIcon is visible on the purple overlay */
	color: #ffffff !important;
	background: transparent !important;
	border-color: var(--arrow-green) !important;
	box-shadow: none;
}

.overlay-top-arrow{
	position:absolute;
	top:18px;
	left:50%;
	transform:translateX(-50%);
}

/* initial state when new page loaded and we want to animate the overlay out */
html[data-view-transition="1"] .page-transition-overlay{
	transform:translateY(0%);
	opacity:1;
}

/* animate overlay out (scroll up off page) */
.page-transition-overlay.out{
	transform:translateY(-120%);
	transition:transform 1600ms cubic-bezier(.2,.9,.3,1), opacity 1040ms ease;
	opacity:0;
}

@media (max-width: 768px){
	.overlay-title{ font-size: clamp(18px, 10vw, 36px); letter-spacing:4px }
	.overlay-top-arrow{ top:12px }
}