/* ==========================================================================
   vIDS Landing Page — ZLC Salt Lake City
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700;800&family=IBM+Plex+Mono:wght@400;500;600&display=swap');

/* ---------- CSS Variables ---------- */
:root {
	--bg-primary: #070b12;
	--bg-card: rgba(255, 255, 255, 0.03);
	--bg-card-hover: rgba(255, 255, 255, 0.07);
	--border-dim: rgba(255, 255, 255, 0.06);
	--border-hover: rgba(255, 176, 0, 0.3);
	--text-primary: #e8e6e1;
	--text-secondary: rgba(255, 255, 255, 0.45);
	--text-muted: rgba(255, 255, 255, 0.25);
	--amber: #FFB000;
	--amber-dim: rgba(255, 176, 0, 0.15);
	--amber-glow: rgba(255, 176, 0, 0.06);
	--teal: #15ABFF;
	--teal-dim: rgba(21, 171, 255, 0.12);
	--green: #0FFF40;
	--red-alert: #F33939;
}

/* ---------- Landing Page Shell ---------- */
.landing-shell {
	position: relative;
	min-height: 100vh;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	background: var(--bg-primary);
}

/* ---------- Topographic Background ---------- */
.landing-shell::before {
	content: '';
	position: absolute;
	inset: 0;
	background:
		radial-gradient(ellipse 80% 50% at 20% 80%, rgba(255, 176, 0, 0.04) 0%, transparent 60%),
		radial-gradient(ellipse 60% 40% at 80% 20%, rgba(21, 171, 255, 0.03) 0%, transparent 50%);
	pointer-events: none;
	z-index: 0;
}

.topo-canvas {
	position: absolute;
	inset: 0;
	z-index: 0;
	overflow: hidden;
	opacity: 0.4;
}

.topo-canvas svg {
	width: 100%;
	height: 100%;
}

/* ---------- Grain Overlay ---------- */
.landing-shell::after {
	content: '';
	position: absolute;
	inset: 0;
	background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.03'/%3E%3C/svg%3E");
	pointer-events: none;
	z-index: 1;
}

/* ---------- Landing Content (everything sits above bg) ---------- */
.landing-content {
	position: relative;
	z-index: 2;
	flex: 1;
	display: flex;
	flex-direction: column;
}

/* ---------- Top Bar ---------- */
.landing-topbar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 24px 40px;
	border-bottom: 1px solid var(--border-dim);
}

.landing-brand {
	display: flex;
	align-items: center;
	gap: 16px;
}

.landing-brand-mark {
	font-family: 'IBM Plex Mono', monospace;
	font-weight: 600;
	font-size: 13px;
	letter-spacing: 0.15em;
	color: var(--amber);
	background: var(--amber-dim);
	padding: 6px 12px;
	border: 1px solid rgba(255, 176, 0, 0.2);
}

.landing-brand-text {
	font-family: 'Outfit', sans-serif;
	font-weight: 300;
	font-size: 14px;
	color: var(--text-secondary);
	letter-spacing: 0.04em;
}

.landing-brand-text strong {
	font-weight: 600;
	color: var(--text-primary);
}

.landing-topbar-meta {
	font-family: 'IBM Plex Mono', monospace;
	font-size: 11px;
	color: var(--text-muted);
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

/* ---------- Unauthenticated: Hero Login ---------- */
.landing-hero {
	flex: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 60px 40px;
	text-align: center;
}

.hero-facility {
	font-family: 'Outfit', sans-serif;
	font-weight: 800;
	font-size: clamp(64px, 10vw, 140px);
	letter-spacing: -0.03em;
	line-height: 0.9;
	color: var(--text-primary);
	margin-bottom: 8px;
	position: relative;
}

.hero-facility .facility-accent {
	background: linear-gradient(135deg, var(--amber), #ff8c00);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
}

.hero-subtitle {
	font-family: 'IBM Plex Mono', monospace;
	font-size: 13px;
	font-weight: 500;
	letter-spacing: 0.25em;
	text-transform: uppercase;
	color: var(--text-secondary);
	margin-bottom: 56px;
}

.hero-subtitle::before,
.hero-subtitle::after {
	content: '——';
	color: var(--text-muted);
	margin: 0 12px;
}

.hero-login-btn {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	font-family: 'Outfit', sans-serif;
	font-weight: 600;
	font-size: 15px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--bg-primary);
	background: var(--amber);
	border: none;
	padding: 18px 48px;
	cursor: pointer;
	text-decoration: none;
	position: relative;
	overflow: hidden;
	transition: transform 0.2s ease, box-shadow 0.3s ease;
}

.hero-login-btn:hover,
.hero-login-btn:focus {
	color: var(--bg-primary);
	text-decoration: none;
	transform: translateY(-2px);
	box-shadow: 0 8px 40px rgba(255, 176, 0, 0.25), 0 0 80px rgba(255, 176, 0, 0.08);
}

.hero-login-btn:active {
	transform: translateY(0);
}

.hero-login-btn i {
	font-size: 16px;
}

/* Sweep animation on login button */
.hero-login-btn::after {
	content: '';
	position: absolute;
	top: 0;
	left: -100%;
	width: 60%;
	height: 100%;
	background: linear-gradient(90deg, transparent, rgba(255,255,255,0.15), transparent);
	animation: btn-sweep 3s ease-in-out infinite;
}

@keyframes btn-sweep {
	0%, 100% { left: -100%; }
	50% { left: 140%; }
}

/* ---------- Authenticated: Menu Grid ---------- */
.landing-main {
	flex: 1;
	display: flex;
	flex-direction: column;
	padding: 0 40px 40px;
}

.landing-welcome {
	padding: 40px 0 8px;
}

.welcome-greeting {
	font-family: 'Outfit', sans-serif;
	font-weight: 300;
	font-size: 28px;
	color: var(--text-primary);
	margin: 0;
	line-height: 1.3;
}

.welcome-greeting strong {
	font-weight: 700;
}

.welcome-meta {
	font-family: 'IBM Plex Mono', monospace;
	font-size: 12px;
	color: var(--text-muted);
	letter-spacing: 0.06em;
	margin-top: 6px;
}

/* Section divider */
.landing-divider {
	height: 1px;
	background: linear-gradient(90deg, var(--amber) 0%, var(--border-dim) 40%, transparent 100%);
	margin: 24px 0 32px;
}

.section-label {
	font-family: 'IBM Plex Mono', monospace;
	font-size: 10px;
	font-weight: 600;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--text-muted);
	margin-bottom: 16px;
}

/* Menu grid */
.menu-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
	gap: 12px;
	list-style: none;
	padding: 0;
	margin: 0;
}

.menu-card {
	position: relative;
	background: var(--bg-card);
	border: 1px solid var(--border-dim);
	padding: 28px 24px;
	cursor: pointer;
	transition: all 0.25s ease;
	display: flex;
	align-items: flex-start;
	gap: 20px;
	text-decoration: none;
	color: inherit;
	overflow: hidden;
}

.menu-card::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 3px;
	height: 0;
	background: var(--amber);
	transition: height 0.3s ease;
}

.menu-card:hover {
	background: var(--bg-card-hover);
	border-color: var(--border-hover);
	transform: translateY(-1px);
	text-decoration: none;
	color: inherit;
}

.menu-card:hover::before {
	height: 100%;
}

.menu-card:active {
	transform: translateY(0);
}

.menu-card-icon {
	flex-shrink: 0;
	width: 44px;
	height: 44px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 18px;
	border: 1px solid var(--border-dim);
	transition: all 0.25s ease;
}

.menu-card:hover .menu-card-icon {
	border-color: var(--border-hover);
}

.menu-card-icon.icon-amber {
	color: var(--amber);
	background: var(--amber-dim);
}

.menu-card-icon.icon-teal {
	color: var(--teal);
	background: var(--teal-dim);
}

.menu-card-icon.icon-green {
	color: var(--green);
	background: rgba(15, 255, 64, 0.08);
}

.menu-card-icon.icon-red {
	color: var(--red-alert);
	background: rgba(243, 57, 57, 0.08);
}

.menu-card-icon.icon-white {
	color: var(--text-secondary);
	background: rgba(255, 255, 255, 0.04);
}

.menu-card-body {
	flex: 1;
	min-width: 0;
}

.menu-card-title {
	font-family: 'Outfit', sans-serif;
	font-weight: 600;
	font-size: 15px;
	color: var(--text-primary);
	margin: 0 0 4px;
	line-height: 1.3;
}

.menu-card-desc {
	font-family: 'IBM Plex Mono', monospace;
	font-size: 11px;
	color: var(--text-muted);
	letter-spacing: 0.02em;
	margin: 0;
	line-height: 1.4;
}

.menu-card-arrow {
	position: absolute;
	top: 14px;
	right: 14px;
	font-size: 10px;
	color: var(--text-muted);
	opacity: 0;
	transform: translate(-4px, 4px);
	transition: all 0.25s ease;
}

.menu-card:hover .menu-card-arrow {
	opacity: 1;
	transform: translate(0, 0);
}

/* ---------- Admin card special treatment ---------- */
.menu-card.card-admin {
	border-style: dashed;
}

/* ---------- Footer ---------- */
.landing-footer {
	position: relative;
	z-index: 2;
	padding: 20px 40px;
	border-top: 1px solid var(--border-dim);
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.landing-footer-left {
	font-family: 'IBM Plex Mono', monospace;
	font-size: 11px;
	color: var(--text-muted);
	letter-spacing: 0.04em;
}

.landing-footer-left a {
	color: var(--text-secondary);
	text-decoration: none;
	transition: color 0.2s;
}

.landing-footer-left a:hover {
	color: var(--amber);
}

.landing-footer-right {
	display: flex;
	align-items: center;
	gap: 16px;
}

.landing-footer-right a {
	color: var(--text-muted);
	text-decoration: none;
	font-size: 16px;
	transition: color 0.2s;
}

.landing-footer-right a:hover {
	color: var(--text-secondary);
}

/* ---------- Radar Sweep (decorative, hero page) ---------- */
.radar-sweep {
	position: absolute;
	bottom: -30%;
	right: -10%;
	width: 500px;
	height: 500px;
	border-radius: 50%;
	border: 1px solid rgba(255, 176, 0, 0.05);
	z-index: 0;
	pointer-events: none;
}

.radar-sweep::before {
	content: '';
	position: absolute;
	inset: 0;
	border-radius: 50%;
	background: conic-gradient(
		from 0deg,
		transparent 0deg,
		transparent 350deg,
		rgba(255, 176, 0, 0.06) 355deg,
		rgba(255, 176, 0, 0.02) 360deg
	);
	animation: radar-rotate 6s linear infinite;
}

.radar-sweep::after {
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	width: 4px;
	height: 4px;
	background: var(--amber);
	border-radius: 50%;
	transform: translate(-50%, -50%);
	box-shadow: 0 0 12px var(--amber);
}

@keyframes radar-rotate {
	from { transform: rotate(0deg); }
	to { transform: rotate(360deg); }
}

/* Concentric rings */
.radar-ring {
	position: absolute;
	border-radius: 50%;
	border: 1px solid rgba(255, 176, 0, 0.04);
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}

.radar-ring:nth-child(1) { width: 33%; height: 33%; }
.radar-ring:nth-child(2) { width: 66%; height: 66%; }
.radar-ring:nth-child(3) { width: 100%; height: 100%; }

/* ---------- Stagger reveal animation ---------- */
@keyframes fade-up {
	from {
		opacity: 0;
		transform: translateY(16px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

.reveal {
	opacity: 0;
	animation: fade-up 0.5s ease forwards;
}

.reveal-d1 { animation-delay: 0.05s; }
.reveal-d2 { animation-delay: 0.1s; }
.reveal-d3 { animation-delay: 0.15s; }
.reveal-d4 { animation-delay: 0.2s; }
.reveal-d5 { animation-delay: 0.25s; }
.reveal-d6 { animation-delay: 0.3s; }
.reveal-d7 { animation-delay: 0.35s; }
.reveal-d8 { animation-delay: 0.4s; }

/* ---------- Responsive ---------- */
@media (max-width: 768px) {
	.landing-topbar {
		padding: 16px 20px;
	}

	.landing-topbar-meta {
		display: none;
	}

	.landing-main {
		padding: 0 20px 20px;
	}

	.hero-facility {
		font-size: clamp(48px, 14vw, 80px);
	}

	.menu-grid {
		grid-template-columns: 1fr;
	}

	.landing-footer {
		padding: 16px 20px;
		flex-direction: column;
		gap: 12px;
		text-align: center;
	}

	.radar-sweep {
		width: 300px;
		height: 300px;
		bottom: -20%;
		right: -20%;
	}
}

@media (max-width: 480px) {
	.landing-brand-text {
		display: none;
	}
}