/*!
 * Glenops theme — main styles (Alexandria design system)
 * All animations and component styles that Tailwind utilities can't express cleanly.
 * Elevation = tonal surface stacking; no borders between sections, no card shadows.
 */

body {
	font-family: 'Inter', system-ui, sans-serif;
	background-color: #f2f3fa; /* surface-low */
	color: #191c20;            /* on-surface */
}

html {
	scroll-behavior: smooth;
}

/* ============================================================
 * Pricing card — tonal hover, no borders, no transform lifts
 * ============================================================ */
.pricing-card {
	background-color: #ffffff; /* surface-lowest */
	border-radius: 1rem;
	transition: background-color 0.3s ease;
}
.pricing-card:hover {
	background-color: #f2f3fa; /* surface-low */
}
.pricing-card.highlighted::before {
	content: '';
	position: absolute;
	top: 0; left: 0; right: 0;
	height: 4px;
	background: linear-gradient(to right, #cc1c1c, #a31515);
	border-radius: 1rem 1rem 0 0;
}

/* ============================================================
 * Blinking status dot
 * ============================================================ */
@keyframes blink {
	0%, 100% { opacity: 1; }
	50%      { opacity: 0.4; }
}
.animate-blink { animation: blink 2s infinite ease-in-out; }

/* ============================================================
 * Services showcase — aurora inside the dark demo container only
 * Section itself is light (bg-surface-lowest)
 * ============================================================ */
.showcase-aurora-canvas {
	position: absolute;
	inset: 0;
	pointer-events: none;
	z-index: 0;
}
.showcase-blob-1 {
	position: absolute;
	border-radius: 50%;
	filter: blur(80px);
	opacity: 0.4;
	will-change: transform;
	width: 650px; height: 480px;
	background: radial-gradient(ellipse at center, rgba(20, 55, 175, 0.65) 0%, transparent 70%);
	top: -15%; right: -8%;
	animation: aurora-drift-2 22s ease-in-out infinite alternate;
}
.showcase-blob-2 {
	position: absolute;
	border-radius: 50%;
	filter: blur(80px);
	opacity: 0.35;
	will-change: transform;
	width: 550px; height: 420px;
	background: radial-gradient(ellipse at center, rgba(100, 10, 140, 0.6) 0%, transparent 70%);
	bottom: -12%; left: -8%;
	animation: aurora-drift-1 26s ease-in-out infinite alternate;
}
.showcase-blob-3 {
	position: absolute;
	border-radius: 50%;
	filter: blur(80px);
	opacity: 0.28;
	will-change: transform;
	width: 450px; height: 350px;
	background: radial-gradient(ellipse at center, rgba(180, 18, 18, 0.5) 0%, transparent 70%);
	top: 35%; left: 38%;
	animation: aurora-drift-3 18s ease-in-out infinite alternate;
}

/* ============================================================
 * Services showcase — pills (light mode) + demo container (dark)
 * ============================================================ */
.svc-pill {
	background-color: rgba(6, 11, 24, 0.72);
	backdrop-filter: blur(16px);
	-webkit-backdrop-filter: blur(16px);
	border: 1px solid rgba(255, 255, 255, 0.1);
	border-radius: 0.5rem;
	color: rgba(255, 255, 255, 0.55);
	transition: all 0.25s ease;
}
.svc-pill:hover {
	background-color: rgba(6, 11, 24, 0.88);
	border-color: rgba(255, 255, 255, 0.18);
	color: rgba(255, 255, 255, 0.9);
}
.svc-pill.active {
	background-color: rgba(6, 11, 24, 0.9);
	border-color: rgba(204, 28, 28, 0.55);
	color: #e84040;
}
.svc-progress {
	position: absolute;
	bottom: 0; left: 0;
	height: 2px;
	background-color: #e84040;
	width: 0%;
	transition: width 0.1s linear;
}

/* Demo glass container — dark aurora surface */
.showcase-demo-container {
	position: relative; /* contains absolutely-positioned aurora canvas */
	background-color: #060b18;
	border-radius: 1rem;
	min-height: 420px;
	display: flex;
	flex-direction: column;
}
.svc-demo {
	display: none;
	opacity: 0;
	transition: opacity 0.4s ease;
}
.svc-demo.active {
	position: relative;
	z-index: 1; /* above the aurora canvas */
	flex: 1;
	display: grid;
	min-height: 420px;
	opacity: 1;
}

/* Right animation panel within the demo */
.svc-demo-right {
	background-color: rgba(255, 255, 255, 0.04);
	border-left: 1px solid rgba(255, 255, 255, 0.06);
}

/* ── Dark-mode token overrides for demo templates ── */
.showcase-demo-container .text-on-surface           { color: #ffffff; }
.showcase-demo-container .text-on-surface-variant   { color: rgba(148, 163, 184, 0.85); }
.showcase-demo-container .bg-surface-container      { background-color: rgba(255, 255, 255, 0.09); }
.showcase-demo-container .bg-surface-lowest         { background-color: rgba(255, 255, 255, 0.05); }
.showcase-demo-container .bg-surface-high           { background-color: rgba(255, 255, 255, 0.12); }
.showcase-demo-container .bg-surface-dim            { background-color: rgba(255, 255, 255, 0.2); }
.showcase-demo-container .bg-primary-container      { background-color: rgba(204, 28, 28, 0.2); }
/* Support demo outer border */
.showcase-demo-container [class*="border-\[rgba"]   { border-color: rgba(255, 255, 255, 0.1) !important; }

/* ============================================================
 * Showcase demo animations
 * ============================================================ */

/* Uptime bars */
@keyframes barGrow {
	0%   { height: 20%; background-color: #10B981; }
	40%  { height: 60%; }
	60%  { height: 90%; }
	100% { height: 70%; }
}
@keyframes barDip {
	0%, 100% { height: 80%; background-color: #10B981; }
	50%      { height: 30%; background-color: #f59e0b; }
}
.uptime-bar {
	background-color: #10B981;
	animation: barGrow 3s ease-in-out infinite;
	animation-delay: var(--bar-delay, 0s);
}
.uptime-bar.dip { animation: barDip 5s ease-in-out infinite; }

/* Security pulse + log */
@keyframes pulseRing {
	0%   { transform: scale(0.5); opacity: 0.6; }
	100% { transform: scale(2.0); opacity: 0; }
}
.pulse-ring {
	animation: pulseRing 2.5s ease-out infinite;
	animation-delay: var(--ring-delay, 0s);
}
@keyframes logSlideIn {
	0%   { transform: translateY(8px); opacity: 0; }
	20%  { transform: translateY(0);   opacity: 1; }
	80%  { opacity: 1; }
	100% { opacity: 0.4; }
}
.log-row {
	animation: logSlideIn 4s ease-in-out infinite;
	animation-delay: var(--log-delay, 0s);
	opacity: 0;
}

/* Performance gauge */
@keyframes needleSpin {
	0%   { transform: rotate(-90deg); }
	100% { transform: rotate(70deg); }
}
.gauge-needle {
	transform-origin: 50% 100%;
	animation: needleSpin 3s ease-in-out infinite alternate;
}

/* Backups file-to-cloud */
@keyframes fileToCloud {
	0%   { transform: translate(0, 0)     scale(1);   opacity: 1; }
	70%  { transform: translate(140px, -60px) scale(0.6); opacity: 0.9; }
	100% { transform: translate(140px, -60px) scale(0);   opacity: 0; }
}
.backup-file {
	animation: fileToCloud 3s ease-in-out infinite;
	animation-delay: var(--file-delay, 0s);
}

/* Integrations data packets */
@keyframes packetFlow {
	0%   { offset-distance: 0%;   opacity: 0; }
	10%  { opacity: 1; }
	90%  { opacity: 1; }
	100% { offset-distance: 100%; opacity: 0; }
}
.data-packet {
	offset-path: path("M 40 100 C 120 40, 280 160, 360 100");
	animation: packetFlow 2.5s linear infinite;
	animation-delay: var(--packet-delay, 0s);
}
.data-packet.reverse {
	offset-path: path("M 360 100 C 280 160, 120 40, 40 100");
}

/* Support typing dots + tickets */
@keyframes typingDot {
	0%, 60%, 100% { transform: translateY(0);    opacity: 0.4; }
	30%           { transform: translateY(-3px); opacity: 1; }
}
.typing-dot {
	animation: typingDot 1.2s ease-in-out infinite;
	animation-delay: var(--dot-delay, 0s);
}
@keyframes ticketAppear {
	0%, 20%   { transform: translateY(6px); opacity: 0; }
	40%, 100% { transform: translateY(0);   opacity: 1; }
}
.ticket-row {
	animation: ticketAppear 4s ease-in-out infinite;
	animation-delay: var(--ticket-delay, 0s);
}

/* ============================================================
 * Mega-menu — glassmorphism panel, diffuse shadow only
 * ============================================================ */
.megamenu-trigger .megamenu-chevron { transition: transform 0.2s ease; }
.megamenu-trigger[aria-expanded="true"] .megamenu-chevron { transform: rotate(180deg); }
.megamenu-trigger[aria-expanded="true"] { color: #cc1c1c; }

.megamenu-panel {
	background: rgba(248, 249, 255, 0.95); /* surface @ 95% */
	backdrop-filter: blur(20px);
	-webkit-backdrop-filter: blur(20px);
	box-shadow: 0 32px 48px -8px rgba(25, 28, 32, 0.06);
	opacity: 0;
	visibility: hidden;
	transform: translate(-50%, -8px);
	transition: opacity 0.2s ease, transform 0.2s ease, visibility 0s linear 0.2s;
}
.megamenu-panel.open {
	opacity: 1;
	visibility: visible;
	transform: translate(-50%, 0);
	transition: opacity 0.2s ease, transform 0.2s ease, visibility 0s linear 0s;
}
.megamenu-backdrop {
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.25s ease, visibility 0s linear 0.25s;
}
.megamenu-backdrop.open {
	opacity: 1;
	visibility: visible;
	transition: opacity 0.25s ease, visibility 0s linear 0s;
}
.megamenu-item {
	transition: background-color 0.15s ease, transform 0.15s ease;
}
.megamenu-item:hover {
	background-color: #ececf4; /* surface-container */
}
.megamenu-item:hover .megamenu-item-icon {
	color: #cc1c1c; /* primary */
}
.megamenu-item-icon {
	transition: color 0.15s ease;
	color: #545f71; /* secondary */
}
.megamenu-cat-heading {
	font-family: 'Public Sans', system-ui, sans-serif;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: #43474e; /* on-surface-variant */
	padding-bottom: 12px;
	margin-bottom: 8px;
}

/* ============================================================
 * Service page cards — surface tiers instead of borders
 * ============================================================ */
.service-card {
	background-color: #f2f3fa; /* surface-low */
	border-radius: 0.75rem;
	transition: background-color 0.3s ease;
}
.service-card:hover {
	background-color: #ececf4; /* surface-container */
}
.pain-card {
	background-color: #f2f3fa; /* surface-low */
	border-radius: 0.75rem;
}

/* ============================================================
 * Lead capture modal — glass backdrop, white panel, diffuse shadow
 * ============================================================ */
.lead-modal {
	position: fixed;
	inset: 0;
	z-index: 200;
	display: flex;
	align-items: flex-start;
	justify-content: center;
	padding: 5rem 1rem 2rem;
	background: rgba(25, 28, 32, 0.55); /* on_surface @ 55% */
	backdrop-filter: blur(4px);
	-webkit-backdrop-filter: blur(4px);
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.3s ease, visibility 0s linear 0.3s;
	overflow-y: auto;
}
.lead-modal.open {
	opacity: 1;
	visibility: visible;
	transition: opacity 0.3s ease, visibility 0s linear 0s;
}
.lead-modal-panel {
	width: 100%;
	max-width: 620px;
	background: #ffffff; /* surface_container_lowest */
	border-radius: 1rem;
	box-shadow: 0 32px 48px -8px rgba(25, 28, 32, 0.05);
	overflow: hidden;
	transform: translateY(-28px) scale(0.98);
	transition: transform 0.38s cubic-bezier(0.34, 1.4, 0.64, 1);
	position: relative;
	margin-bottom: 2rem;
}
.lead-modal.open .lead-modal-panel {
	transform: translateY(0) scale(1);
}
.lead-modal-bg {
	position: absolute;
	inset: 0;
	background:
		radial-gradient(ellipse 80% 60% at 110% -20%, rgba(9, 76, 178, 0.05) 0%, transparent 60%),
		radial-gradient(ellipse 60% 50% at -10% 110%, rgba(84, 95, 113, 0.05) 0%, transparent 60%);
	pointer-events: none;
}
@keyframes lead-modal-spin {
	to { transform: rotate(360deg); }
}
.lead-modal-spin {
	animation: lead-modal-spin 0.8s linear infinite;
}

/* ============================================================
 * Site header — fixed, scroll-reactive
 * At top of page: transparent overlay on dark hero (white text)
 * Scrolling up (not at top): light bg, dark text
 * Scrolling down: slides up and hides
 * ============================================================ */
#siteHeader {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	width: 100%;
	border-bottom: 1px solid transparent;
	transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1),
	            background-color 0.25s ease,
	            box-shadow 0.25s ease,
	            border-color 0.25s ease;
}

/* Logo swap — white version visible by default (transparent/dark state) */
.header-logo-dark  { display: block; }
.header-logo-light { display: none; }

#siteHeader.header-scrolled .header-logo-dark  { display: none; }
#siteHeader.header-scrolled .header-logo-light { display: block; }

/* Nav links — white when transparent over dark hero */
.header-nav-link {
	color: rgba(255, 255, 255, 0.85);
	transition: color 0.2s ease;
}
.header-nav-link:hover { color: #ffffff; }
.header-brand-text { color: #ffffff; }


/* Scrolled (light bg) state */
#siteHeader.header-scrolled {
	background-color: rgba(255, 255, 255, 0.97);
	backdrop-filter: blur(20px);
	-webkit-backdrop-filter: blur(20px);
	border-bottom-color: rgba(195, 199, 207, 0.35);
	box-shadow: 0 1px 20px rgba(25, 28, 32, 0.06);
}
#siteHeader.header-scrolled .header-nav-link {
	color: #43474e; /* on-surface-variant */
}
#siteHeader.header-scrolled .header-nav-link:hover {
	color: #cc1c1c; /* red accent */
}
#siteHeader.header-scrolled .header-brand-text { color: #191c20; }
#siteHeader.header-scrolled svg.text-primary { color: #cc1c1c !important; }
#siteHeader.header-scrolled .megamenu-trigger[aria-expanded="true"] { color: #cc1c1c; }

/* Hidden state — slides up out of viewport */
#siteHeader.header-hidden {
	transform: translateY(-100%);
}

/* ============================================================
 * Mobile navigation drawer
 * Slides down from the header on small screens
 * ============================================================ */
.mobile-menu {
	position: fixed;
	top: 72px;
	left: 0;
	right: 0;
	z-index: 45;
	background: rgba(6, 11, 24, 0.97);
	backdrop-filter: blur(20px);
	-webkit-backdrop-filter: blur(20px);
	border-bottom: 1px solid rgba(255, 255, 255, 0.08);
	max-height: calc(100vh - 72px);
	overflow-y: auto;
	/* Closed state */
	transform: translateY(-8px);
	opacity: 0;
	visibility: hidden;
	transition:
		transform 0.28s cubic-bezier(0.4, 0, 0.2, 1),
		opacity 0.22s ease,
		visibility 0s linear 0.28s;
}
.mobile-menu.open {
	transform: translateY(0);
	opacity: 1;
	visibility: visible;
	transition:
		transform 0.28s cubic-bezier(0.4, 0, 0.2, 1),
		opacity 0.22s ease,
		visibility 0s linear 0s;
}
.mobile-menu-link {
	display: flex;
	align-items: center;
	color: rgba(255, 255, 255, 0.7);
	font-family: 'Public Sans', system-ui, sans-serif;
	font-size: 0.9375rem;
	font-weight: 500;
	padding: 0.6rem 0.75rem;
	border-radius: 0.5rem;
	transition: background-color 0.15s ease, color 0.15s ease;
}
.mobile-menu-link:hover {
	background-color: rgba(255, 255, 255, 0.07);
	color: #ffffff;
}

/* ============================================================
 * Internal page hero — shared aurora dark band
 * Negative margin pulls the section up over the 72px header
 * spacer div so the dark bg reads edge-to-edge behind the
 * transparent fixed nav.
 * ============================================================ */
.page-hero-aurora {
	position: relative;
	overflow: hidden;
	background-color: #060b18;
	margin-top: -72px;
	padding-top: calc(72px + 4rem);
	padding-bottom: 4rem;
}
@media (min-width: 768px) {
	.page-hero-aurora {
		padding-top: calc(72px + 6rem);
		padding-bottom: 6rem;
	}
}
.page-hero-aurora-canvas {
	position: absolute;
	inset: 0;
	pointer-events: none;
	z-index: 0;
}
.page-hero-blob-1 {
	position: absolute;
	border-radius: 50%;
	filter: blur(90px);
	opacity: 0.45;
	will-change: transform;
	width: 700px; height: 500px;
	background: radial-gradient(ellipse at center, rgba(160, 15, 15, 0.65) 0%, transparent 70%);
	top: -20%; left: -10%;
	animation: aurora-drift-1 20s ease-in-out infinite alternate;
}
.page-hero-blob-2 {
	position: absolute;
	border-radius: 50%;
	filter: blur(80px);
	opacity: 0.35;
	will-change: transform;
	width: 600px; height: 440px;
	background: radial-gradient(ellipse at center, rgba(20, 50, 170, 0.6) 0%, transparent 70%);
	top: 5%; right: -8%;
	animation: aurora-drift-2 24s ease-in-out infinite alternate;
}
.page-hero-blob-3 {
	position: absolute;
	border-radius: 50%;
	filter: blur(80px);
	opacity: 0.28;
	will-change: transform;
	width: 500px; height: 380px;
	background: radial-gradient(ellipse at center, rgba(85, 10, 120, 0.55) 0%, transparent 70%);
	bottom: -20%; left: 35%;
	animation: aurora-drift-3 22s ease-in-out infinite alternate;
}
.page-hero-content {
	position: relative;
	z-index: 1;
}
/* Glass panel that wraps the animated demo inside a page hero */
.page-hero-demo-panel {
	background: rgba(255, 255, 255, 0.06);
	backdrop-filter: blur(24px);
	-webkit-backdrop-filter: blur(24px);
	border: 1px solid rgba(255, 255, 255, 0.1);
	border-radius: 1rem;
	padding: 1.5rem;
	width: 100%;
	max-width: 28rem;
}

/* ============================================================
 * Pricing aurora section — dark bg + animated color blobs
 * ============================================================ */
.pricing-aurora-section {
	position: relative;
	overflow: hidden;
	background-color: #060b18;
}

/* The aurora canvas — absolutely placed behind the cards */
.pricing-aurora-canvas {
	position: absolute;
	inset: 0;
	pointer-events: none;
	z-index: 0;
}

/* Individual aurora blobs */
.aurora-blob {
	position: absolute;
	border-radius: 50%;
	filter: blur(80px);
	opacity: 0.45;
	will-change: transform;
}
.aurora-blob-1 {
	width: 700px; height: 500px;
	background: radial-gradient(ellipse at center, rgba(180, 20, 20, 0.7) 0%, transparent 70%);
	top: -10%; left: -15%;
	animation: aurora-drift-1 18s ease-in-out infinite alternate;
}
.aurora-blob-2 {
	width: 600px; height: 450px;
	background: radial-gradient(ellipse at center, rgba(90, 10, 120, 0.6) 0%, transparent 70%);
	top: 20%; right: -10%;
	animation: aurora-drift-2 22s ease-in-out infinite alternate;
}
.aurora-blob-3 {
	width: 550px; height: 400px;
	background: radial-gradient(ellipse at center, rgba(20, 40, 160, 0.5) 0%, transparent 70%);
	bottom: -5%; left: 30%;
	animation: aurora-drift-3 26s ease-in-out infinite alternate;
}
.aurora-blob-4 {
	width: 400px; height: 350px;
	background: radial-gradient(ellipse at center, rgba(140, 15, 15, 0.4) 0%, transparent 70%);
	top: 50%; left: 50%;
	animation: aurora-drift-4 20s ease-in-out infinite alternate;
}

@keyframes aurora-drift-1 {
	0%   { transform: translate(0, 0) scale(1); }
	100% { transform: translate(80px, 60px) scale(1.15); }
}
@keyframes aurora-drift-2 {
	0%   { transform: translate(0, 0) scale(1.05); }
	100% { transform: translate(-70px, 80px) scale(0.9); }
}
@keyframes aurora-drift-3 {
	0%   { transform: translate(0, 0) scale(0.95); }
	100% { transform: translate(60px, -50px) scale(1.1); }
}
@keyframes aurora-drift-4 {
	0%   { transform: translate(0, 0) scale(1); }
	100% { transform: translate(-50px, -70px) scale(1.2); }
}

/* Glass pricing cards */
.pricing-card-glass {
	background: rgba(255, 255, 255, 0.06);
	backdrop-filter: blur(24px);
	-webkit-backdrop-filter: blur(24px);
	border: 1px solid rgba(255, 255, 255, 0.1);
	border-radius: 1rem;
	transition: background 0.3s ease, border-color 0.3s ease;
}
.pricing-card-glass:hover {
	background: rgba(255, 255, 255, 0.1);
	border-color: rgba(255, 255, 255, 0.18);
}
.pricing-card-glass.highlighted {
	background: rgba(255, 255, 255, 0.11);
	border-color: rgba(204, 28, 28, 0.5);
	box-shadow: 0 0 40px rgba(204, 28, 28, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.15);
}
.pricing-card-glass {
	overflow: hidden; /* clip ::before stripe to card's border-radius */
}
.pricing-card-glass.highlighted::before {
	content: '';
	position: absolute;
	top: 0; left: 0; right: 0;
	height: 3px;
	background: linear-gradient(to right, #cc1c1c, #e84040);
}