/*
	assets/css/style.css
	---------------------
	This file is a small fallback stylesheet so the site renders without the
	Tailwind CDN. For full production styles generate this file using Tailwind:

		npm install
		npm run build:css

	The repo includes a minimal Tailwind input at src/styles/tailwind-input.css
	and a tailwind.config.cjs. The generated output will replace this file.
*/

/* Minimal fallback styles */
:root{--bg:#f8fafc;--text:#111827;--muted:#6b7280}
html,body{height:100%}
body{background:var(--bg);color:var(--text);font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;margin:0}
a{color:inherit}
button,input,textarea,select{font:inherit}

/* Small utilities used by the site to keep rendering usable */
.max-w-5xl{max-width:64rem}
.mx-auto{margin-left:auto;margin-right:auto}
.px-4{padding-left:1rem;padding-right:1rem}
.py-6{padding-top:1.5rem;padding-bottom:1.5rem}
.bg-white{background:#fff}
.rounded-lg{border-radius:.5rem}
.rounded-2xl{border-radius:1rem}
.border{border:1px solid #e5e7eb}
.shadow{box-shadow:0 1px 2px rgba(0,0,0,0.05)}
.text-neutral-700{color:var(--muted)}
.text-sm{font-size:.875rem}
.font-medium{font-weight:500}
.font-semibold{font-weight:600}
.hidden{display:none}
.flex{display:flex}
.items-center{align-items:center}
.justify-between{justify-content:space-between}
.gap-2{gap:.5rem}
.rounded{border-radius:.25rem}
.p-2{padding:.5rem}
.p-3{padding:.75rem}
.p-6{padding:1.5rem}
.border-t{border-top:1px solid #e5e7eb}
.min-h-screen{min-height:100vh}
#earth-bg{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden}

/* Foreground container class used to ensure content is above the background canvas */
.site-foreground{position:relative;z-index:1}

/* Small spacer helper used in the hero column */
.spacer-50x120{width:50px;height:120px}

/* Load pop-up animation */
@keyframes popUp {
	0% { opacity: 0; transform: translateY(12px) scale(0.98); }
	60% { opacity: 1; transform: translateY(-6px) scale(1.02); }
	100% { opacity: 1; transform: translateY(0) scale(1); }
}

.pop-target{opacity:0;transform:translateY(12px) scale(0.98);will-change:transform,opacity}
.pop-animate{animation-name:popUp;animation-duration:420ms;animation-timing-function:cubic-bezier(.2,.9,.2,1);animation-fill-mode:forwards}

@media (prefers-reduced-motion: reduce) {
	.pop-target, .pop-animate { transition: none !important; animation: none !important; opacity: 1 !important; transform: none !important }
}

/* Subtle radial gradient page background: white inner, very light blue outer at 10% */
body::before{
	content: '';
	position: fixed;
	inset: 0;
	z-index: -1;
	pointer-events: none;
	background: radial-gradient(circle at center, rgba(255,255,255,1) 0%, rgba(122,156,198,0.10) 100%);
}

/* Frosted glass style shadow for headings/text
	 - multiple layered text-shadows create a soft glow and depth
	 - subtle translucent stroke to lift text from background
	 Use by adding the `frosted-text` class to headings or other text elements.
*/
/* Frosted glass style for headings/text */
.frosted-text {
	color: rgba(17,24,39,0.98);

	/* keep your existing shadows */
	text-shadow: 
		0 1px 0 rgba(255,255,255,0.75),
		0 8px 20px rgba(122,156,198,0.10),
		0 2px 6px rgba(2,6,23,0.12);

	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

/* Stronger variant for large hero titles */
.frosted-text--hero { 
	text-shadow: 
		0 1px 0 rgba(255,255,255,0.8), 
		0 14px 38px rgba(122,156,198,0.12), 
		0 4px 12px rgba(2,6,23,0.14);

	background: rgba(255,255,255,0.25);
	backdrop-filter: blur(8px) saturate(180%) contrast(95%);
	-webkit-backdrop-filter: blur(8px) saturate(180%) contrast(95%);
	border-radius: 0.75rem;
	padding: 0.25em 0.6em;
	display: inline-block;
}


/* Muted paragraph variant requested: RGB(212,212,212) with a soft shadow */
.muted-paragraph{
	color: rgb(212,212,212);
	text-shadow: 0 8px 24px rgba(2,6,23,0.18), 0 1px 0 rgba(255,255,255,0.03);
}