/**
 * Omar Techfolio - Main Stylesheet
 *
 * A modern, performant stylesheet with:
 * - CSS Custom Properties for theming
 * - Dark/Light mode support
 * - Glassmorphism effects
 * - Terminal aesthetics
 * - Accessibility focus states
 * - Reduced motion support
 *
 * @package OmarTechfolio
 */

/* ==========================================================================
   1. Custom Properties (CSS Variables)
   ========================================================================== */

:root {
	/* Colors - Dark Theme (Default) - Liquid Glass Aesthetic */
	--color-bg: #000000;
	--color-bg-alt: #0a0a0a;
	--color-surface: #111111;
	--color-surface-hover: #1a1a1a;
	--color-border: rgba(230, 237, 245, 0.15);
	--color-text: #ffffff;
	--color-text-subtle: #cccccc;
	--color-text-muted: #999999;
	--color-accent-light: #e6edf5;
	--color-accent-steel: #8fa3b8;
	--color-success: #22c55e;
	--color-warning: #f59e0b;
	--color-danger: #ef4444;

	/* Gradients - Liquid Glass Style */
	--gradient-neon: linear-gradient(135deg, var(--color-accent-light) 0%, var(--color-accent-steel) 100%);
	--gradient-surface: linear-gradient(180deg, rgba(0, 20, 40, 0.85) 0%, rgba(0, 0, 0, 0.95) 100%);
	--gradient-glass: linear-gradient(135deg, rgba(230, 237, 245, 0.1) 0%, rgba(143, 163, 184, 0.08) 100%);

	/* Spacing */
	--space-xs: clamp(0.5rem, 0.45rem + 0.25vw, 0.75rem);
	--space-sm: clamp(0.75rem, 0.7rem + 0.25vw, 1rem);
	--space-md: clamp(1rem, 0.9rem + 0.5vw, 1.5rem);
	--space-lg: clamp(1.5rem, 1.3rem + 1vw, 2.5rem);
	--space-xl: clamp(2rem, 1.7rem + 1.5vw, 3.5rem);
	--space-2xl: clamp(3rem, 2.5rem + 2.5vw, 5rem);

	/* Border Radius */
	--radius-xs: 0.25rem;
	--radius-sm: 0.375rem;
	--radius-md: 0.5rem;
	--radius-lg: 0.75rem;
	--radius-xl: 1rem;
	--radius-2xl: 1.5rem;
	--radius-full: 9999px;

	/* Shadows - Liquid Glass Glows */
	--shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.3);
	--shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.45), 0 2px 4px -1px rgba(0, 0, 0, 0.32);
	--shadow-lg: 0 12px 18px -5px rgba(0, 0, 0, 0.55), 0 8px 12px -4px rgba(0, 0, 0, 0.4);
	--shadow-xl: 0 24px 32px -8px rgba(0, 0, 0, 0.6), 0 16px 16px -8px rgba(0, 0, 0, 0.45);
	--shadow-glow: 0 0 30px rgba(230, 237, 245, 0.5), 0 0 60px rgba(143, 163, 184, 0.3);
	--shadow-glow-intense: 0 0 20px rgba(230, 237, 245, 0.7), 0 0 40px rgba(230, 237, 245, 0.5), 0 0 60px rgba(143, 163, 184, 0.4);

	/* Typography */
	--font-primary: 'Inter Variable', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
	--font-mono: 'SF Mono', 'Monaco', 'Inconsolata', 'Fira Code', 'Fira Mono', 'Roboto Mono', monospace;

	/* Font Sizes */
	--text-xs: clamp(0.75rem, 0.7rem + 0.25vw, 0.875rem);
	--text-sm: clamp(0.875rem, 0.825rem + 0.25vw, 1rem);
	--text-base: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
	--text-md: clamp(1.125rem, 1.05rem + 0.375vw, 1.25rem);
	--text-lg: clamp(1.25rem, 1.15rem + 0.5vw, 1.5rem);
	--text-xl: clamp(1.5rem, 1.35rem + 0.75vw, 2rem);
	--text-2xl: clamp(2rem, 1.75rem + 1.25vw, 3rem);
	--text-3xl: clamp(2.5rem, 2rem + 2.5vw, 4rem);

	/* Transitions */
	--transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
	--transition-base: 250ms cubic-bezier(0.4, 0, 0.2, 1);
	--transition-slow: 350ms cubic-bezier(0.4, 0, 0.2, 1);

	/* Z-index */
	--z-skip: 9999;
	--z-header: 1000;
	--z-modal: 2000;
	--z-toast: 3000;

	/* Layout */
	--content-width: 720px;
	--wide-width: 1280px;
	--header-height: 80px;

	color-scheme: dark;
}

/* Light Theme */
@media (prefers-color-scheme: light) {
	:root:not([data-theme]) {
		--color-bg: #ffffff;
		--color-bg-alt: #f8fafc;
		--color-surface: #ffffff;
		--color-surface-hover: #f0f9ff;
		--color-border: rgba(143, 163, 184, 0.2);
		--color-text: #0f172a;
		--color-text-subtle: #334155;
		--color-text-muted: #64748b;
		--color-accent-light: #8fa3b8;
		--color-accent-steel: #7f8ea3;

		--gradient-neon: linear-gradient(135deg, #8fa3b8 0%, #7f8ea3 100%);
		--gradient-glass: linear-gradient(135deg, rgba(8, 145, 178, 0.08) 0%, rgba(13, 148, 136, 0.06) 100%);
		--shadow-sm: 0 1px 3px 0 rgba(0, 0, 0, 0.08);
		--shadow-md: 0 4px 12px -2px rgba(0, 0, 0, 0.1), 0 2px 6px -2px rgba(0, 0, 0, 0.06);
		--shadow-lg: 0 12px 24px -4px rgba(0, 0, 0, 0.12), 0 6px 12px -2px rgba(0, 0, 0, 0.08);
		--shadow-xl: 0 24px 48px -8px rgba(0, 0, 0, 0.15), 0 12px 24px -8px rgba(0, 0, 0, 0.1);
		--shadow-glow: 0 0 24px rgba(8, 145, 178, 0.3), 0 0 48px rgba(13, 148, 136, 0.2);
		--shadow-glow-intense: 0 0 18px rgba(8, 145, 178, 0.4), 0 0 36px rgba(8, 145, 178, 0.3), 0 0 54px rgba(13, 148, 136, 0.25);

		color-scheme: light;
	}
}

[data-theme="light"] {
	--color-bg: #ffffff;
	--color-bg-alt: #f8fafc;
	--color-surface: #ffffff;
	--color-surface-hover: #f0f9ff;
	--color-border: rgba(143, 163, 184, 0.2);
	--color-text: #0f172a;
	--color-text-subtle: #334155;
	--color-text-muted: #64748b;
	--color-accent-light: #8fa3b8;
	--color-accent-steel: #7f8ea3;

	--gradient-neon: linear-gradient(135deg, #8fa3b8 0%, #7f8ea3 100%);
	--gradient-glass: linear-gradient(135deg, rgba(8, 145, 178, 0.08) 0%, rgba(13, 148, 136, 0.06) 100%);
	--shadow-sm: 0 1px 3px 0 rgba(0, 0, 0, 0.08);
	--shadow-md: 0 4px 12px -2px rgba(0, 0, 0, 0.1), 0 2px 6px -2px rgba(0, 0, 0, 0.06);
	--shadow-lg: 0 12px 24px -4px rgba(0, 0, 0, 0.12), 0 6px 12px -2px rgba(0, 0, 0, 0.08);
	--shadow-xl: 0 24px 48px -8px rgba(0, 0, 0, 0.15), 0 12px 24px -8px rgba(0, 0, 0, 0.1);
	--shadow-glow: 0 0 24px rgba(8, 145, 178, 0.3), 0 0 48px rgba(13, 148, 136, 0.2);
	--shadow-glow-intense: 0 0 18px rgba(8, 145, 178, 0.4), 0 0 36px rgba(8, 145, 178, 0.3), 0 0 54px rgba(13, 148, 136, 0.25);

	color-scheme: light;
}

/* Light mode glass card overrides — white bg needs dark-tint glass */
:root:not([data-theme]) .bento-card,
[data-theme="light"] .bento-card,
:root:not([data-theme]) .card,
[data-theme="light"] .card,
:root:not([data-theme]) .project-card,
[data-theme="light"] .project-card,
:root:not([data-theme]) .bento-card:hover,
[data-theme="light"] .bento-card:hover {
	border-color: rgba(0, 0, 0, 0.18);
}

/* ==========================================================================
   2. Font Face
   ========================================================================== */

/* Inter Variable served by system stack; removed missing local font to avoid 404s */

/* ==========================================================================
   3. Base Styles
   ========================================================================== */

*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
	scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}

	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
	}
}

body {
	margin: 0;
	padding: 0;
	font-family: var(--font-primary);
	font-size: var(--text-base);
	line-height: 1.6;
	color: var(--color-text);
	background-color: var(--color-bg);
	background-image:
		radial-gradient(circle at 1px 1px, var(--color-text-muted) 1px, transparent 1px);
	background-size: 32px 32px;
	background-position: 0 0;
	min-height: 100vh;
}

body.is-loading {
	overflow: hidden;
}

/* ==========================================================================
   4. Typography
   ========================================================================== */

h1, h2, h3, h4, h5, h6 {
	margin-top: 0;
	font-weight: 700;
	line-height: 1.2;
	color: var(--color-text);
}

h1 { font-size: var(--text-3xl); margin-bottom: var(--space-md); }
h2 { font-size: var(--text-2xl); margin-bottom: var(--space-sm); margin-top: var(--space-lg); }
h3 { font-size: var(--text-xl); margin-bottom: var(--space-sm); margin-top: var(--space-md); }
h4 { font-size: var(--text-lg); margin-bottom: var(--space-xs); }
h5 { font-size: var(--text-md); margin-bottom: var(--space-xs); }
h6 { font-size: var(--text-base); margin-bottom: var(--space-xs); }

p {
	margin-top: 0;
	margin-bottom: var(--space-md);
}

a {
	color: var(--color-accent-light);
	text-decoration: none;
	transition: color var(--transition-fast);
}

a:hover {
	color: var(--color-accent-steel);
}

a:focus-visible {
	outline: 2px solid var(--color-accent-light);
	outline-offset: 2px;
	border-radius: var(--radius-xs);
}

strong, b {
	font-weight: 600;
}

code, kbd, samp {
	font-family: var(--font-mono);
	font-size: 0.9em;
	padding: 0.125rem 0.375rem;
	background-color: var(--color-surface);
	border-radius: var(--radius-xs);
	border: 1px solid var(--color-border);
}

pre {
	padding: var(--space-md);
	background-color: var(--color-surface);
	border-radius: var(--radius-md);
	overflow-x: auto;
	border: 1px solid var(--color-border);
}

pre code {
	padding: 0;
	background: none;
	border: none;
}

blockquote {
	margin: var(--space-lg) 0;
	padding: var(--space-md);
	padding-left: var(--space-lg);
	background-color: var(--color-surface);
	border-left: 4px solid var(--color-accent-light);
	border-radius: var(--radius-md);
	font-style: italic;
}

/* ==========================================================================
   5. Layout
   ========================================================================== */

.wp-site-blocks {
	min-height: 100vh;
	display: flex;
	flex-direction: column;
}

main {
	flex: 1;
	padding-top: var(--space-xl);
	padding-bottom: var(--space-2xl);
}

.container {
	max-width: var(--wide-width);
	margin-left: auto;
	margin-right: auto;
	padding-left: var(--space-md);
	padding-right: var(--space-md);
}

.container--narrow {
	max-width: var(--content-width);
}

/* ==========================================================================
   6. Skip Link
   ========================================================================== */

.skip-link {
	position: absolute;
	top: -100px;
	left: 0;
	background: var(--color-accent-light);
	color: var(--color-bg);
	padding: 0.75rem 1.5rem;
	text-decoration: none;
	z-index: var(--z-skip);
	font-weight: 600;
	border-radius: 0 0 var(--radius-md) 0;
	transition: top var(--transition-fast);
}

.skip-link:focus {
	top: 0;
	outline: none;
}

/* ==========================================================================
   7. Header — Floating Pill Nav
   ========================================================================== */

.site-header {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: var(--z-header);
	background: transparent;
	padding: 1.25rem 2rem;
	pointer-events: none;
}

.header-inner {
	pointer-events: all;
	width: fit-content;
	margin: 0 auto;
	position: relative;
	height: 56px;
	background: rgba(255, 255, 255, 0.10);
	backdrop-filter: blur(12px) saturate(1.8) brightness(1.1);
	-webkit-backdrop-filter: blur(12px) saturate(1.8) brightness(1.1);
	border: 1px solid rgba(255, 255, 255, 0.20);
	border-radius: 20px;
	padding: 0 1.75rem;
	gap: var(--space-lg);
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	transition: background 0.3s ease, border-color 0.3s ease;
}

.header-inner:hover {
	background: rgba(255, 255, 255, 0.13);
	border-color: rgba(255, 255, 255, 0.28);
}

.site-logo {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	font-size: var(--text-sm);
	font-weight: 700;
	color: rgba(255, 255, 255, 0.9);
	text-decoration: none;
}

.site-logo:hover {
	color: #fff;
}

.primary-nav ul {
	display: flex;
	list-style: none;
	margin: 0;
	padding: 0;
	gap: 0.25rem;
}

.primary-nav a {
	color: rgba(255, 255, 255, 0.6);
	font-weight: 600;
	font-size: var(--text-xs);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	padding: 0.4rem 0.75rem;
	border-radius: var(--radius-full);
	transition: all var(--transition-fast);
	display: inline-flex;
	align-items: center;
}

.primary-nav a:hover,
.primary-nav a:focus {
	color: #fff;
	background-color: rgba(255, 255, 255, 0.08);
}

.primary-nav .current-menu-item a {
	color: #fff;
}

.service-toggle {
	position: absolute;
	top: 50%;
	left: calc(50% + 280px);
	transform: translateY(-50%);
	background: none;
	border: none;
	border-radius: 50%;
	padding: 6px;
	width: 68px;
	height: 68px;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	pointer-events: all;
	transition: background var(--transition-fast), border var(--transition-fast);
}

.service-toggle:hover,
.service-toggle[aria-expanded="true"] {
	background: rgba(255, 255, 255, 0.10);
	border: 1px solid rgba(255, 255, 255, 0.2);
}

.service-toggle:focus-visible {
	outline: 2px solid rgba(255, 255, 255, 0.4);
	outline-offset: 2px;
}

.service-toggle svg {
	width: 18px;
	height: 18px;
}

.ega-icon {
	width: 52px;
	height: 64px;
	object-fit: contain;
	opacity: 0.7;
	transition: opacity var(--transition-fast);
}

.service-toggle:hover .ega-icon,
.service-toggle[aria-expanded="true"] .ega-icon {
	opacity: 1;
}

.service-snapshot {
	position: fixed;
	top: 5rem;
	left: 50%;
	transform: translateX(-50%);
	width: min(400px, calc(100vw - 2rem));
	padding: 1.25rem 1.25rem 1rem;
	border-radius: 16px;
	background: rgba(8, 10, 14, 0.88);
	border: 1px solid rgba(255, 255, 255, 0.16);
	backdrop-filter: blur(16px) saturate(1.3);
	-webkit-backdrop-filter: blur(16px) saturate(1.3);
	box-shadow: 0 24px 48px rgba(0, 0, 0, 0.6);
	z-index: var(--z-modal);
}

.service-snapshot[hidden] {
	display: none;
}

.service-snapshot__title {
	margin: 0 0 0.6rem;
	font-size: 0.78rem;
	font-weight: 800;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.88);
}

.service-snapshot__list {
	margin: 0;
	padding-left: 1rem;
	display: grid;
	gap: 0.42rem;
}

.service-snapshot__list li {
	font-size: 0.76rem;
	line-height: 1.45;
	color: rgba(255, 255, 255, 0.68);
}

.service-snapshot__list strong {
	color: rgba(255, 255, 255, 0.9);
	font-weight: 700;
}

.service-snapshot__note {
	margin: 0.72rem 0 0;
	padding-top: 0.62rem;
	border-top: 1px solid rgba(255, 255, 255, 0.1);
	font-size: 0.72rem;
	line-height: 1.5;
	color: rgba(255, 255, 255, 0.55);
}

.easter-toast {
	position: fixed;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -40%);
	width: min(480px, calc(100vw - 3rem));
	padding: 2rem 2.5rem;
	border-radius: 20px;
	background: rgba(8, 10, 14, 0.92);
	border: 1px solid rgba(255, 255, 255, 0.22);
	backdrop-filter: blur(20px) saturate(1.4);
	-webkit-backdrop-filter: blur(20px) saturate(1.4);
	font-size: 1.1rem;
	line-height: 1.6;
	color: rgba(255, 255, 255, 0.9);
	text-align: center;
	box-shadow: 0 32px 64px rgba(0, 0, 0, 0.7);
	z-index: var(--z-toast);
	opacity: 0;
	pointer-events: none;
	transition: opacity 300ms ease, transform 300ms ease;
}

.easter-toast.is-visible {
	opacity: 1;
	transform: translate(-50%, -50%);
}

body.easter-rumble .site-header,
body.easter-rumble .site-main,
body.easter-rumble .site-footer-v2 {
	animation: easter-rumble 680ms cubic-bezier(0.36, 0.07, 0.19, 0.97);
}

body.easter-flash::before {
	content: "";
	position: fixed;
	inset: 0;
	pointer-events: none;
	z-index: 99990;
	background: radial-gradient(circle at 50% 46%, rgba(255, 255, 255, 0.22) 0%, rgba(255, 255, 255, 0.07) 28%, rgba(255, 255, 255, 0) 65%);
	animation: easter-flash 520ms ease-out forwards;
}

@keyframes easter-rumble {
	0% { transform: translate3d(0, 0, 0) rotate(0deg); }
	12% { transform: translate3d(-5px, 2px, 0) rotate(-0.25deg); }
	24% { transform: translate3d(5px, -3px, 0) rotate(0.22deg); }
	36% { transform: translate3d(-4px, 3px, 0) rotate(-0.2deg); }
	48% { transform: translate3d(4px, -2px, 0) rotate(0.16deg); }
	60% { transform: translate3d(-3px, 2px, 0) rotate(-0.12deg); }
	72% { transform: translate3d(2px, -1px, 0) rotate(0.08deg); }
	100% { transform: translate3d(0, 0, 0) rotate(0deg); }
}

@keyframes easter-flash {
	0% { opacity: 0; }
	20% { opacity: 1; }
	100% { opacity: 0; }
}

/* ==========================================================================
   8. Footer
   ========================================================================== */

.site-footer {
	background: var(--color-surface);
	border-top: 1px solid var(--color-border);
	padding: var(--space-xl) 0 var(--space-md);
	margin-top: auto;
}

.site-footer-v2 {
	background: transparent;
	background-color: rgba(255, 255, 255, 0.01);
	border-top: 1px solid rgba(255, 255, 255, 0.14);
	backdrop-filter: blur(2px) saturate(1.05);
	-webkit-backdrop-filter: blur(2px) saturate(1.05);
	padding: var(--space-lg) 0;
	position: relative;
	z-index: 1;
}

.footer-v2__inner {
	display: flex;
	justify-content: space-between;
	align-items: center;
	max-width: 1300px;
	margin: 0 auto;
	padding: 0 var(--space-xl);
}

.footer-copy {
	font-size: var(--text-xs);
	color: rgba(255, 255, 255, 0.3);
}

.footer-hint {
	text-align: center;
	padding-bottom: 0.75rem;
}

.footer-hint__text {
	font-family: var(--font-mono, monospace);
	font-size: 0.7rem;
	color: rgba(255, 255, 255, 0.18);
	letter-spacing: 0.04em;
}

.footer-socials {
	display: flex;
	gap: 0.75rem;
}

.footer-inner {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
	gap: var(--space-lg);
	margin-bottom: var(--space-lg);
}

.footer-section h3 {
	font-size: var(--text-md);
	margin-bottom: var(--space-sm);
}

.social-links {
	display: flex;
	gap: var(--space-sm);
	list-style: none;
	margin: 0;
	padding: 0;
}

.social-links a {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	background: var(--color-bg);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-full);
	color: var(--color-text-subtle);
	transition: all var(--transition-fast);
}

.social-links a:hover {
	background: var(--color-accent-light);
	color: var(--color-bg);
	transform: translateY(-2px);
	box-shadow: var(--shadow-md);
}

.footer-bottom {
	text-align: center;
	padding-top: var(--space-md);
	border-top: 1px solid var(--color-border);
	color: var(--color-text-subtle);
	font-size: var(--text-sm);
}

/* ==========================================================================
   9. Buttons
   ========================================================================== */

.btn {
	display: inline-flex;
	align-items: center;
	gap: 0.6rem;
	padding: 0.85rem 1.6rem;
	font-size: var(--text-sm);
	font-weight: 600;
	font-family: var(--font-primary);
	text-decoration: none;
	border-radius: var(--radius-xl);
	cursor: pointer;
	position: relative;
	white-space: nowrap;
	border: 1px solid rgba(230, 237, 245, 0.22);
	background: linear-gradient(180deg, rgba(255,255,255,0.06) 0%, rgba(255,255,255,0.02) 100%), var(--gradient-glass);
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
	box-shadow: 0 6px 20px rgba(0,0,0,0.35), 0 0 24px rgba(230, 237, 245, 0.18);
	color: var(--color-text);
	transition: transform var(--transition-fast), box-shadow var(--transition-fast), background var(--transition-fast), border-color var(--transition-fast);
}

/* Sheen effect */
.btn::after {
	content: '';
	position: absolute;
	left: -30%;
	top: 0;
	width: 30%;
	height: 100%;
	background: linear-gradient(120deg, transparent 0%, rgba(255,255,255,0.25) 50%, transparent 100%);
	transform: skewX(-20deg) translateX(-100%);
	opacity: 0;
	transition: opacity 0.3s ease, transform 0.6s ease;
	pointer-events: none;
}

.btn:hover {
	transform: translateY(-2px);
	border-color: rgba(230, 237, 245, 0.35);
	box-shadow: 0 8px 24px rgba(0,0,0,0.4), 0 0 28px rgba(230, 237, 245, 0.24), 0 0 56px rgba(143, 163, 184, 0.18);
}

.btn:hover::after {
	opacity: 1;
	transform: skewX(-20deg) translateX(320%);
}

.btn:active {
	transform: translateY(0px) scale(0.99);
	box-shadow: 0 6px 18px rgba(0,0,0,0.35), 0 0 18px rgba(230, 237, 245, 0.22);
}

.btn--primary {
	background: linear-gradient(180deg, rgba(255,255,255,0.08) 0%, rgba(255,255,255,0.03) 100%), var(--gradient-neon);
	color: var(--color-bg);
	border-color: rgba(230, 237, 245, 0.28);
}

.btn--secondary {
	background: transparent;
	color: var(--color-accent-light);
	border: 1.5px solid rgba(230, 237, 245, 0.35);
}

.btn--secondary:hover {
	background: linear-gradient(180deg, rgba(230, 237, 245, 0.12) 0%, rgba(230, 237, 245, 0.06) 100%);
	color: var(--color-text);
}

.btn--ghost {
	background: transparent;
	color: var(--color-accent-light);
	border: 2px solid var(--color-accent-light);
}

.btn--ghost:hover {
	background: var(--color-accent-light);
	color: var(--color-bg);
	border-color: var(--color-accent-light);
	transform: translateY(-2px);
	box-shadow: 0 0 18px rgba(230, 237, 245, 0.28);
}

.btn:focus-visible {
	outline: 2px solid var(--color-accent-light);
	outline-offset: 2px;
}

/* Reset wrapper when using WordPress block buttons to avoid double button look */
.wp-block-button.btn {
	background: transparent !important;
	border: 0 !important;
	padding: 0 !important;
	box-shadow: none !important;
	backdrop-filter: none !important;
	-webkit-backdrop-filter: none !important;
	position: relative;
}

.wp-block-button.btn::after { display: none !important; }

/* Block editor button integration (ensure the anchor is styled) */
.wp-block-button.btn .wp-block-button__link {
	all: unset;
	display: inline-flex;
	align-items: center;
	gap: 0.6rem;
	padding: 0.85rem 1.6rem;
	font-size: var(--text-sm);
	font-weight: 600;
	border-radius: var(--radius-xl);
	cursor: pointer;
	position: relative;
	white-space: nowrap;
	border: 1px solid rgba(230, 237, 245, 0.22);
	background: linear-gradient(180deg, rgba(255,255,255,0.06) 0%, rgba(255,255,255,0.02) 100%), var(--gradient-glass);
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
	box-shadow: 0 6px 20px rgba(0,0,0,0.35), 0 0 24px rgba(230, 237, 245, 0.18);
	color: var(--color-text);
	transition: transform var(--transition-fast), box-shadow var(--transition-fast), background var(--transition-fast), border-color var(--transition-fast);
}

.wp-block-button.btn .wp-block-button__link::after {
	content: '';
	position: absolute;
	left: -30%;
	top: 0;
	width: 30%;
	height: 100%;
	background: linear-gradient(120deg, transparent 0%, rgba(255,255,255,0.25) 50%, transparent 100%);
	transform: skewX(-20deg) translateX(-100%);
	opacity: 0;
	transition: opacity 0.3s ease, transform 0.6s ease;
	pointer-events: none;
}

.wp-block-button.btn .wp-block-button__link:hover {
	transform: translateY(-2px);
	border-color: rgba(230, 237, 245, 0.35);
	box-shadow: 0 8px 24px rgba(0,0,0,0.4), 0 0 28px rgba(230, 237, 245, 0.24), 0 0 56px rgba(143, 163, 184, 0.18);
}

.wp-block-button.btn .wp-block-button__link:hover::after {
	opacity: 1;
	transform: skewX(-20deg) translateX(320%);
}

.wp-block-button.btn.btn--primary .wp-block-button__link {
	background: linear-gradient(180deg, rgba(255,255,255,0.08) 0%, rgba(255,255,255,0.03) 100%), var(--gradient-neon);
	color: var(--color-bg);
	border-color: rgba(230, 237, 245, 0.28);
}

.wp-block-button.btn.btn--secondary .wp-block-button__link {
	background: transparent;
	color: var(--color-accent-light);
	border: 1.5px solid rgba(230, 237, 245, 0.35);
}

.wp-block-button.btn.btn--secondary .wp-block-button__link:hover {
	background: linear-gradient(180deg, rgba(230, 237, 245, 0.12) 0%, rgba(230, 237, 245, 0.06) 100%);
	color: var(--color-text);
}

@media (prefers-reduced-motion: reduce) {
	.btn,
	.wp-block-button.btn .wp-block-button__link {
		transition: none;
	}
	.btn::after,
	.wp-block-button.btn .wp-block-button__link::after {
		transition: none;
		display: none;
	}
}

/* ==========================================================================
   10. Cards & Glassmorphism
   ========================================================================== */

.glass {
	background: rgba(17, 17, 17, 0.4);
	backdrop-filter: blur(20px);
	-webkit-backdrop-filter: blur(20px);
	border: 1px solid rgba(230, 237, 245, 0.2);
	border-radius: var(--radius-xl);
	padding: var(--space-lg);
	box-shadow: var(--shadow-lg);
	position: relative;
	overflow: hidden;
}

.glass::before {
	content: '';
	position: absolute;
	inset: 0;
	background: var(--gradient-glass);
	opacity: 0.5;
	border-radius: inherit;
	pointer-events: none;
	z-index: -1;
}

.glass::after {
	content: '';
	position: absolute;
	top: 0;
	left: -100%;
	width: 100%;
	height: 100%;
	background: linear-gradient(90deg, transparent, rgba(230, 237, 245, 0.1), transparent);
	transition: left 0.5s ease;
	pointer-events: none;
}

.glass:hover::after {
	left: 100%;
}

[data-theme="light"] .glass {
	background: rgba(255, 255, 255, 0.7);
	backdrop-filter: blur(20px);
	-webkit-backdrop-filter: blur(20px);
	border: 1px solid rgba(0, 204, 204, 0.25);
	box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
}

.card {
	background: rgba(255, 255, 255, 0.05);
	border: 1px solid rgba(255, 255, 255, 0.10);
	border-radius: var(--radius-lg);
	padding: var(--space-lg);
	backdrop-filter: blur(12px) saturate(1.8);
	-webkit-backdrop-filter: blur(12px) saturate(1.8);
	transition: all var(--transition-base);
}

.card:hover {
	transform: translateY(-4px);
	box-shadow: var(--shadow-xl);
	border-color: rgba(255, 255, 255, 0.25);
}

.card__image {
	width: 100%;
	height: auto;
	border-radius: var(--radius-md);
	margin-bottom: var(--space-md);
	object-fit: cover;
}

/* About Showcase Layout */
.about-grid {
	display: grid;
	grid-template-columns: 1.75fr 1fr;
	gap: var(--space-lg);
}

@media (max-width: 960px) {
	.about-grid { grid-template-columns: 1fr; }
}

.about-card {
	border-radius: var(--radius-xl);
	overflow: hidden;
	position: relative;
}

.about-card--tall { min-height: 520px; }
.about-card--code { min-height: 280px; }
.about-card--tech { min-height: 360px; }

.about-card__image img {
	width: 100%;
	height: auto;
	display: block;
	border-radius: var(--radius-lg);
}

.about-card--cta {
	background: var(--gradient-neon);
	color: var(--color-bg);
	border-radius: var(--radius-xl);
	padding: var(--space-lg);
	box-shadow: var(--shadow-lg), 0 0 24px rgba(230, 237, 245, 0.22);
}

.about-card--cta .btn.btn--secondary {
	background: rgba(255,255,255,0.12);
	color: var(--color-bg);
	border-color: rgba(255,255,255,0.25);
}

[data-theme="light"] .about-card--cta {
	color: var(--color-text);
	box-shadow: var(--shadow-lg), 0 0 18px rgba(143, 163, 184, 0.18);
}

.card__title {
	font-size: var(--text-lg);
	margin-bottom: var(--space-xs);
}

.card__excerpt {
	color: var(--color-text-subtle);
	margin-bottom: var(--space-md);
}

/* ==========================================================================
   11. Terminal Styles
   ========================================================================== */

.terminal {
	background: rgba(17, 17, 17, 0.5);
	backdrop-filter: blur(20px);
	-webkit-backdrop-filter: blur(20px);
	border: 1px solid rgba(230, 237, 245, 0.25);
	border-radius: var(--radius-lg);
	overflow: hidden;
	box-shadow: var(--shadow-glow), var(--shadow-xl);
	position: relative;
}

.terminal::before {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(135deg, rgba(230, 237, 245, 0.06) 0%, rgba(143, 163, 184, 0.04) 100%);
	pointer-events: none;
	border-radius: inherit;
}

.terminal__bar {
	background: var(--color-bg-alt);
	padding: 0.75rem 1rem;
	display: flex;
	align-items: center;
	gap: 0.5rem;
	border-bottom: 1px solid var(--color-border);
}

.terminal__dot {
	width: 12px;
	height: 12px;
	border-radius: 50%;
	background: var(--color-text-muted);
}

.terminal__dot:nth-child(1) {
	background: #ef4444;
}

.terminal__dot:nth-child(2) {
	background: #f59e0b;
}

.terminal__dot:nth-child(3) {
	background: #22c55e;
}

.terminal__body {
	padding: var(--space-lg);
	font-family: var(--font-mono);
	font-size: var(--text-sm);
	line-height: 1.8;
	color: var(--color-text);
}

.terminal__prompt {
	color: var(--color-success);
	user-select: none;
}

.terminal__command {
	color: var(--color-accent-light);
}

.caret {
	display: inline-block;
	width: 0.6em;
	height: 1.2em;
	background: var(--color-accent-light);
	animation: blink 1s step-end infinite;
	vertical-align: middle;
	margin-left: 0.125rem;
}

@keyframes blink {
	50% {
		opacity: 0;
	}
}

@media (prefers-reduced-motion: reduce) {
	.caret {
		animation: none;
	}
}

/* ==========================================================================
   12. Tech Chips
   ========================================================================== */

.tech-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin: var(--space-md) 0;
}

.chip {
	display: inline-flex;
	align-items: center;
	padding: 0.375rem 0.875rem;
	font-size: var(--text-xs);
	font-weight: 500;
	background: var(--color-surface);
	color: var(--color-text);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-full);
	transition: all var(--transition-fast);
	cursor: default;
	appearance: none;
	font: inherit;
}

.chip:hover {
	background: var(--color-surface-hover);
	border-color: var(--color-accent-light);
	color: var(--color-accent-light);
	transform: translateY(-1px);
}

.chip--filter {
	cursor: pointer;
	background: var(--color-surface);
	color: var(--color-text);
}

.chip--filter.active {
	background: var(--gradient-neon);
	color: var(--color-bg);
	border-color: transparent;
}

/* ==========================================================================
   13. Project Grid
   ========================================================================== */

.projects-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(320px, 100%), 1fr));
	gap: var(--space-xl);
	margin: var(--space-xl) 0;
	max-width: 1400px;
	margin-left: auto;
	margin-right: auto;
	padding: 0 var(--space-lg);
}

@container (min-width: 600px) {
	.projects-grid {
		grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
	}
}

@media (min-width: 1200px) {
	.projects-grid {
		grid-template-columns: repeat(3, 1fr);
	}
}

.project-card {
	position: relative;
	display: flex;
	flex-direction: column;
	background: rgba(255, 255, 255, 0.05);
	border: 1px solid rgba(255, 255, 255, 0.10);
	border-radius: var(--radius-lg);
	overflow: hidden;
	backdrop-filter: blur(12px) saturate(1.8);
	-webkit-backdrop-filter: blur(12px) saturate(1.8);
	transition: all var(--transition-base);
}

.project-card:hover {
	transform: translateY(-6px);
	box-shadow: var(--shadow-xl);
	border-color: rgba(255, 255, 255, 0.25);
}

.project-card__image {
	width: 100%;
	height: 220px;
	object-fit: cover;
	background: var(--color-bg-alt);
}

.project-card__content {
	padding: var(--space-md);
	flex: 1;
	display: flex;
	flex-direction: column;
}

.project-card__title {
	font-size: var(--text-lg);
	margin-bottom: var(--space-xs);
}

.project-card__title a {
	color: var(--color-text);
	text-decoration: none;
}

.project-card__title a:hover {
	color: var(--color-accent-light);
}

.project-card__excerpt {
	color: var(--color-text-subtle);
	font-size: var(--text-sm);
	margin-bottom: var(--space-md);
	flex: 1;
}

.project-card__meta {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-sm);
	flex-wrap: wrap;
}

/* ==========================================================================
   14. Project Buttons
   ========================================================================== */

.project-buttons {
	display: flex;
	gap: var(--space-sm);
	flex-wrap: wrap;
	margin: var(--space-lg) 0;
}

/* ==========================================================================
   15. Project Meta
   ========================================================================== */

.project-meta {
	display: flex;
	gap: var(--space-lg);
	flex-wrap: wrap;
	padding: var(--space-md);
	background: var(--color-surface);
	border-radius: var(--radius-md);
	border: 1px solid var(--color-border);
	margin: var(--space-lg) 0;
	font-size: var(--text-sm);
}

.project-meta__item {
	display: flex;
	gap: 0.5rem;
}

.project-meta__item strong {
	color: var(--color-text-subtle);
}

/* ==========================================================================
   16. Project Navigation
   ========================================================================== */

.project-navigation {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
	gap: var(--space-md);
	margin: var(--space-2xl) 0;
}

.project-nav__link {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	padding: var(--space-md);
	background: var(--color-surface);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-lg);
	transition: all var(--transition-base);
	text-decoration: none;
}

.project-nav__link:hover {
	border-color: var(--color-accent-light);
	transform: translateX(-4px);
}

.project-nav__link--next:hover {
	transform: translateX(4px);
}

.project-nav__label {
	font-size: var(--text-xs);
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: var(--color-text-subtle);
	font-weight: 600;
}

.project-nav__title {
	font-size: var(--text-md);
	color: var(--color-text);
	font-weight: 600;
}

.project-nav__link:hover .project-nav__title {
	color: var(--color-accent-light);
}

/* ==========================================================================
   17. Filter Controls
   ========================================================================== */

.filter-controls {
	display: flex;
	align-items: center;
	gap: var(--space-sm);
	flex-wrap: wrap;
	margin-bottom: var(--space-lg);
	padding: var(--space-md);
	background: var(--color-surface);
	border-radius: var(--radius-lg);
	border: 1px solid var(--color-border);
}

.filter-label {
	font-weight: 600;
	color: var(--color-text-subtle);
	font-size: var(--text-sm);
}

/* ==========================================================================
   18. Timeline
   ========================================================================== */

.timeline {
	position: relative;
	padding-left: var(--space-lg);
	margin: var(--space-xl) 0;
}

.timeline::before {
	content: '';
	position: absolute;
	left: 0;
	top: 0;
	bottom: 0;
	width: 2px;
	background: var(--gradient-neon);
}

.timeline-item {
	position: relative;
	padding-bottom: var(--space-lg);
}

.timeline-item::before {
	content: '';
	position: absolute;
	left: calc(-1 * var(--space-lg) - 6px);
	top: 0;
	width: 14px;
	height: 14px;
	border-radius: 50%;
	background: var(--color-accent-light);
	box-shadow: 0 0 0 4px var(--color-bg);
	border: 2px solid var(--color-accent-light);
}

.timeline-item__year {
	font-size: var(--text-sm);
	color: var(--color-accent-light);
	font-weight: 600;
	margin-bottom: var(--space-xs);
}

.timeline-item__title {
	font-size: var(--text-lg);
	margin-bottom: var(--space-xs);
}

.timeline-item__description {
	color: var(--color-text-subtle);
	font-size: var(--text-sm);
}

/* ==========================================================================
   18. Loading Screen
   ========================================================================== */

.page-loader {
	position: fixed;
	inset: 0;
	background: radial-gradient(circle at top, rgba(230, 237, 245, 0.15), transparent 55%),
				radial-gradient(circle at bottom, rgba(143, 163, 184, 0.1), transparent 55%),
				var(--color-bg);
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 9998;
	transition: opacity 600ms ease, visibility 600ms ease;
	opacity: 1;
	visibility: visible;
	pointer-events: all;
}

.page-loader.is-hidden {
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
}

.page-loader__inner {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--space-md);
	padding: var(--space-lg) var(--space-xl);
	background: var(--gradient-surface);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-xl);
	box-shadow: var(--shadow-glow);
}

.page-loader__spinner {
	width: 56px;
	height: 56px;
	border-radius: 50%;
	background: conic-gradient(from 180deg, rgba(230, 237, 245, 0.3), rgba(230, 237, 245, 0.9), rgba(143, 163, 184, 0.7), rgba(230, 237, 245, 0.3));
	position: relative;
	animation: loader-spin 1.2s linear infinite;
}

.page-loader__spinner::after {
	content: '';
	position: absolute;
	inset: 8px;
	background: var(--color-bg);
	border-radius: 50%;
}

.page-loader__label {
	font-size: var(--text-sm);
	color: var(--color-text-subtle);
	text-transform: uppercase;
	letter-spacing: 0.2em;
}

.page-loader__progress {
	width: 100%;
	height: 4px;
	position: relative;
	overflow: hidden;
	border-radius: var(--radius-full);
	background: rgba(255, 255, 255, 0.08);
}

.page-loader__progress::before {
	content: '';
	position: absolute;
	inset: 0;
	background: var(--gradient-neon);
	animation: loader-progress 1.8s ease-in-out infinite;
}

@keyframes loader-spin {
	to {
		transform: rotate(360deg);
	}
}

@keyframes loader-progress {
	0% {
		transform: translateX(-100%);
	}
	50% {
		transform: translateX(0);
	}
	100% {
		transform: translateX(100%);
	}
}

/* ==========================================================================
   19. Animations & Interactions
   ========================================================================== */

.fade-in {
	opacity: 0;
	transform: translateY(20px);
	transition: opacity var(--transition-slow), transform var(--transition-slow);
	transition-delay: var(--reveal-delay, 0ms);
}

.fade-in.is-visible {
	opacity: 1;
	transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
	.fade-in {
		opacity: 1;
		transform: none;
		transition: none;
	}
}

/* ==========================================================================
   20. Hero V2 — Split Layout with Particles
   ========================================================================== */

body {
	background: #000 !important;
}

.hero-v2 {
	position: relative;
	min-height: 100vh;
	background: #000;
	overflow: hidden;
	display: flex;
	align-items: center;
	padding-top: 90px;
}

.hero-particles {
	position: absolute;
	inset: 0;
	z-index: 0;
	pointer-events: none;
	overflow: hidden;
}

.hero-dash {
	position: absolute;
	width: 3px;
	height: 16px;
	background: #7f8ea3;
	border-radius: 2px;
	opacity: 0;
	animation: dash-float var(--dur, 10s) ease-in-out var(--del, 0s) infinite;
	box-shadow: 0 0 4px rgba(74, 124, 240, 0.4);
}

@keyframes dash-float {
	0%   { opacity: 0;          transform: translateY(20px)  rotate(var(--rot, 40deg)); }
	15%  { opacity: var(--op, 0.55); }
	85%  { opacity: var(--op, 0.55); }
	100% { opacity: 0;          transform: translateY(-60px) rotate(var(--rot, 40deg)); }
}

.hero-v2__grid {
	position: relative;
	z-index: 1;
	display: grid;
	grid-template-columns: 1fr 1fr;
	align-items: center;
	max-width: 1300px;
	width: 100%;
	margin: 0 auto;
	padding: var(--space-xl) var(--space-xl);
	gap: var(--space-xl);
}

.hero-v2__greeting {
	font-size: var(--text-lg);
	color: rgba(255, 255, 255, 0.5);
	margin-bottom: 0.5rem;
	font-weight: 400;
}

.hero-v2__name {
	font-size: clamp(3.5rem, 6.5vw, 6.5rem);
	font-weight: 800;
	line-height: 1;
	color: #fff;
	margin-bottom: 0.75rem;
	letter-spacing: -0.02em;
}

.hero-v2__role {
	font-size: var(--text-xl);
	font-weight: 700;
	color: #fff;
	margin-bottom: 0.75rem;
	min-height: 2.2rem;
}

.hero-v2__desc {
	color: rgba(255, 255, 255, 0.45);
	font-size: var(--text-sm);
	margin-bottom: var(--space-md);
	max-width: 480px;
}

.hero-v2__divider {
	border: none;
	border-top: 1px solid rgba(255, 255, 255, 0.1);
	margin: var(--space-md) 0;
}

.hero-v2__status {
	display: flex;
	flex-direction: column;
	gap: 0.6rem;
	margin-bottom: var(--space-lg);
}

.hero-status-item {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	font-size: var(--text-sm);
}

.hero-status-dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	flex-shrink: 0;
}

.hero-status-dot--red   { background: #ef4444; box-shadow: 0 0 6px #ef4444; }
.hero-status-dot--green { background: #22c55e; box-shadow: 0 0 6px #22c55e; }

.hero-status-label {
	color: rgba(255, 255, 255, 0.4);
}

.hero-status-value {
	color: rgba(255, 255, 255, 0.85);
}

.hero-v2__socials {
	display: flex;
	gap: 0.75rem;
}

.social-pill {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 42px;
	height: 42px;
	background: rgba(255, 255, 255, 0.06);
	border: 1px solid rgba(255, 255, 255, 0.1);
	border-radius: 50%;
	color: rgba(255, 255, 255, 0.7);
	transition: all var(--transition-fast);
}

.social-pill:hover {
	background: rgba(255, 255, 255, 0.12);
	color: #fff;
	transform: translateY(-2px);
}

.hero-v2__photo-wrap {
	display: flex;
	justify-content: flex-end;
	align-items: flex-end;
	height: 100%;
}

.hero-v2__photo {
	max-height: 75vh;
	width: auto;
	max-width: 100%;
	object-fit: contain;
	object-position: bottom;
	filter: grayscale(100%);
	display: block;
}

@media (max-width: 900px) {
	.hero-v2__grid {
		grid-template-columns: 1fr;
	}

	.hero-v2__photo-wrap {
		display: none;
	}

	.hero-v2__name {
		font-size: clamp(2.8rem, 10vw, 4rem);
	}
}

/* ==========================================================================
   21. Bento Grid Layout
   ========================================================================== */

.bento-section {
	max-width: 1300px;
	margin: 0 auto;
	padding: var(--space-2xl) var(--space-xl);
	position: relative;
	z-index: 1;
}

.bento-grid {
	display: grid;
	gap: 1rem;
}

.bento-grid--about {
	grid-template-columns: 280px 1fr;
	grid-template-rows: auto auto auto;
}

.bento-grid--edu-skills {
	grid-template-columns: 1fr 1fr;
}

.bento-card {
	background: rgba(255, 255, 255, 0.05);
	border: 1px solid rgba(255, 255, 255, 0.10);
	border-radius: 16px;
	padding: var(--space-lg);
	position: relative;
	overflow: hidden;
	backdrop-filter: blur(12px) saturate(1.8) brightness(1.05);
	-webkit-backdrop-filter: blur(12px) saturate(1.8) brightness(1.05);
	transition: border-color 0.25s ease;
}

.bento-card:hover {
	border-color: rgba(255, 255, 255, 0.20);
}

.bento-card--heading {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 120px;
}

.bento-card--heading h2 {
	font-size: var(--text-2xl);
	font-weight: 700;
	color: #fff;
	margin: 0;
	text-align: center;
}

/* Location card — world map with sweeping line */
.bento-card--location {
	padding: 0;
	overflow: hidden;
}

.loc-map-container {
	background: #0a0a0a;
	width: 100%;
	height: 100%;
	min-height: 220px;
	position: relative;
	overflow: hidden;
}

.loc-map-wrapper {
	filter: grayscale(1) brightness(0.3) contrast(1.2);
	width: 100%;
	height: 100%;
	position: absolute;
	inset: 0;
}

.loc-map-img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.loc-line {
	background: #0095ff;
	width: 1px;
	height: 100%;
	position: absolute;
	top: 0;
	left: -2%;
	box-shadow: -2px 0 6px rgba(0,149,255,0.8), 2px 0 6px rgba(0,149,255,0.8);
	animation: loc-sweep 3s linear infinite;
}

@keyframes loc-sweep {
	0%   { left: -10%; }
	100% { left: 102%; }
}

.loc-info {
	z-index: 10;
	position: absolute;
	bottom: 24px;
	left: 24px;
}

.location-city {
	color: #d1d5db;
	letter-spacing: -0.5px;
	margin-bottom: 2px;
	font-size: 28px;
	font-weight: 800;
	line-height: 1;
}

.location-coords {
	color: #d1d5db;
	opacity: 0.7;
	letter-spacing: 0.5px;
	font-family: 'SF Mono', Monaco, 'Roboto Mono', monospace;
	font-size: 15px;
	font-weight: 500;
}

.location-tz {
	color: #d1d5db;
	letter-spacing: 0.5px;
	margin-top: 2px;
	font-family: 'SF Mono', Monaco, 'Roboto Mono', monospace;
	font-size: 15px;
	font-weight: 700;
}

@media (max-width: 640px) {
	.loc-info { bottom: 20px; left: 20px; }
	.location-city { font-size: 20px; }
	.location-coords, .location-tz { font-size: 12px; }
}

@media (prefers-reduced-motion: reduce) {
	.loc-line { animation: none; }
}

/* Workflow bar */
.workflow-bar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.5rem;
}

.workflow-step {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.5rem;
	flex: 1;
}

.workflow-icon {
	width: 40px;
	height: 40px;
	background: rgba(255, 255, 255, 0.06);
	border: 1px solid rgba(255, 255, 255, 0.1);
	border-radius: 10px;
	display: flex;
	align-items: center;
	justify-content: center;
	color: rgba(255, 255, 255, 0.35);
	transition: color 0.3s ease;
}

.workflow-label {
	font-size: 0.65rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.3);
}

.workflow-arrow {
	color: rgba(255, 255, 255, 0.15);
	font-size: var(--text-lg);
	flex-shrink: 0;
}

/* Step color variables */
.workflow-step[data-step="1"] { --sc: 167, 139, 250; }
.workflow-step[data-step="2"] { --sc: 96,  165, 250; }
.workflow-step[data-step="3"] { --sc: 52,  211, 153; }
.workflow-step[data-step="4"] { --sc: 251, 191, 36;  }
.workflow-step[data-step="5"] { --sc: 248, 113, 113; }

/* Traveling glow — icon box */
@keyframes wf-icon-glow {
	0%, 14%, 100% {
		background: rgba(255, 255, 255, 0.06);
		border-color: rgba(255, 255, 255, 0.1);
		box-shadow: none;
		color: rgba(255, 255, 255, 0.35);
	}
	7% {
		background: rgba(var(--sc), 0.18);
		border-color: rgba(var(--sc), 0.65);
		box-shadow: 0 0 18px rgba(var(--sc), 0.45), 0 0 40px rgba(var(--sc), 0.2);
		color: rgb(var(--sc));
	}
}

/* Traveling glow — label */
@keyframes wf-label-glow {
	0%, 14%, 100% { color: rgba(255, 255, 255, 0.3); }
	7%            { color: rgb(var(--sc)); }
}

/* Traveling glow — arrow */
@keyframes wf-arrow-glow {
	0%, 14%, 100% { color: rgba(255, 255, 255, 0.15); text-shadow: none; }
	7%            { color: rgba(255, 255, 255, 0.8); text-shadow: 0 0 8px rgba(255, 255, 255, 0.5); }
}

/* All on same 3.5s cycle, each step offset by 0.7s */
.workflow-step[data-step="1"] .workflow-icon  { animation: wf-icon-glow  3.5s ease-in-out 0s    infinite; }
.workflow-step[data-step="2"] .workflow-icon  { animation: wf-icon-glow  3.5s ease-in-out 0.7s  infinite; }
.workflow-step[data-step="3"] .workflow-icon  { animation: wf-icon-glow  3.5s ease-in-out 1.4s  infinite; }
.workflow-step[data-step="4"] .workflow-icon  { animation: wf-icon-glow  3.5s ease-in-out 2.1s  infinite; }
.workflow-step[data-step="5"] .workflow-icon  { animation: wf-icon-glow  3.5s ease-in-out 2.8s  infinite; }

.workflow-step[data-step="1"] .workflow-label { animation: wf-label-glow 3.5s ease-in-out 0s    infinite; }
.workflow-step[data-step="2"] .workflow-label { animation: wf-label-glow 3.5s ease-in-out 0.7s  infinite; }
.workflow-step[data-step="3"] .workflow-label { animation: wf-label-glow 3.5s ease-in-out 1.4s  infinite; }
.workflow-step[data-step="4"] .workflow-label { animation: wf-label-glow 3.5s ease-in-out 2.1s  infinite; }
.workflow-step[data-step="5"] .workflow-label { animation: wf-label-glow 3.5s ease-in-out 2.8s  infinite; }

/* Arrows glow halfway between the steps on either side */
.workflow-arrow[data-arrow="1"] { animation: wf-arrow-glow 3.5s ease-in-out 0.35s infinite; }
.workflow-arrow[data-arrow="2"] { animation: wf-arrow-glow 3.5s ease-in-out 1.05s infinite; }
.workflow-arrow[data-arrow="3"] { animation: wf-arrow-glow 3.5s ease-in-out 1.75s infinite; }
.workflow-arrow[data-arrow="4"] { animation: wf-arrow-glow 3.5s ease-in-out 2.45s infinite; }

@media (prefers-reduced-motion: reduce) {
	.workflow-step .workflow-icon,
	.workflow-step .workflow-label,
	.workflow-arrow { animation: none; }
}

/* Timeline */
.timeline {
	display: flex;
	flex-direction: column;
	gap: 1.5rem;
}

.timeline-item {
	display: flex;
	gap: 1rem;
	align-items: flex-start;
}

.timeline-dot {
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: #7f8ea3;
	flex-shrink: 0;
	margin-top: 0.35rem;
	box-shadow: 0 0 6px rgba(74, 124, 240, 0.5);
}

.timeline-period {
	font-size: var(--text-xs);
	color: rgba(255, 255, 255, 0.4);
	margin-bottom: 0.2rem;
}

.timeline-title {
	font-size: var(--text-sm);
	font-weight: 700;
	color: #fff;
	margin-bottom: 0.15rem;
}

.timeline-org {
	font-size: var(--text-xs);
	color: rgba(255, 255, 255, 0.5);
}

.timeline-desc {
	font-size: var(--text-xs);
	color: rgba(255, 255, 255, 0.38);
	line-height: 1.6;
	margin-top: 0.25rem;
}

.timeline-item--sub {
	padding-left: 1.25rem;
}

.timeline-dot--sm {
	width: 6px;
	height: 6px;
	background: rgba(255, 255, 255, 0.2) !important;
	box-shadow: none !important;
	margin-top: 0.45rem;
	flex-shrink: 0;
	border-radius: 50%;
}

/* Skills chips */
.skills-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
}

.skill-chip {
	display: inline-flex;
	align-items: center;
	padding: 0.35rem 0.85rem;
	background: rgba(74, 124, 240, 0.12);
	border: 1px solid rgba(74, 124, 240, 0.25);
	border-radius: var(--radius-full);
	color: rgba(255, 255, 255, 0.8);
	font-size: var(--text-xs);
	font-weight: 500;
}

@media (max-width: 900px) {
	.bento-grid--about,
	.bento-grid--edu-skills {
		grid-template-columns: 1fr;
	}

	.bento-grid--about .bento-card--bio {
		grid-row: unset;
	}
}

/* ==========================================================================
   21. Wider Containers & Spacing
   ========================================================================== */

.container--wide {
	max-width: 1400px;
	margin-left: auto;
	margin-right: auto;
	padding-left: var(--space-xl);
	padding-right: var(--space-xl);
}

.site-main {
	padding-top: 0;
}

.site-main > * + * {
	margin-top: var(--space-2xl);
}

/* Better section spacing */
.glass {
	padding: var(--space-xl);
	margin-top: var(--space-2xl);
	margin-bottom: var(--space-2xl);
}

@media (max-width: 768px) {
	.container--wide {
		padding-left: var(--space-md);
		padding-right: var(--space-md);
	}

	.glass {
		padding: var(--space-lg);
	}
}

/* ==========================================================================
   22. Utilities
   ========================================================================== */

.sr-only,
.screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border-width: 0;
}

.text-gradient {
	background: var(--gradient-neon);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
}

.text-center {
	text-align: center;
}

.mb-0 { margin-bottom: 0 !important; }
.mt-0 { margin-top: 0 !important; }

/* ==========================================================================
   23. Responsive
   ========================================================================== */

@media (max-width: 768px) {
	:root {
		--header-height: 64px;
	}

	.primary-nav ul {
		flex-direction: column;
		gap: 0.5rem;
	}

	.header-inner {
		flex-wrap: wrap;
	}

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

	.filter-controls {
		flex-direction: column;
		align-items: flex-start;
	}
}

/* ==========================================================================
   24. Print Styles
   ========================================================================== */

@media print {
	.site-header,
	.site-footer,
	.service-toggle,
	.service-snapshot,
	.easter-toast,
	.project-buttons,
	.filter-controls {
		display: none;
	}

	body {
		background: white;
		color: black;
	}
}

/* ==========================================================================
   25. Page Loader
   ========================================================================== */

#page-loader {
	position: fixed;
	inset: 0;
	background: #000;
	z-index: 99999;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	transition: opacity 0.45s ease, visibility 0.45s ease;
}

#page-loader.is-hidden {
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
}

.loader-bar {
	width: 180px;
	height: 2px;
	background: rgba(74, 124, 240, 0.2);
	border-radius: 999px;
	overflow: hidden;
	margin-bottom: 1rem;
}

.loader-bar::after {
	content: '';
	display: block;
	height: 100%;
	background: #7f8ea3;
	box-shadow: 0 0 12px #7f8ea3, 0 0 24px rgba(74, 124, 240, 0.5);
	animation: loader-fill 1.2s ease-in-out infinite;
	border-radius: 999px;
}

@keyframes loader-fill {
	0%   { width: 0%;   margin-left: 0; }
	50%  { width: 70%;  margin-left: 0; }
	100% { width: 0%;   margin-left: 100%; }
}

.loader-label {
	font-family: var(--font-mono);
	font-size: 0.7rem;
	color: rgba(255, 255, 255, 0.3);
	letter-spacing: 0.18em;
	text-transform: uppercase;
}

/* ==========================================================================
   26. Nav Active Dot
   ========================================================================== */

.primary-nav a {
	position: relative;
}

.primary-nav a.is-active::after {
	content: '';
	position: absolute;
	bottom: -6px;
	left: 50%;
	transform: translateX(-50%);
	width: 4px;
	height: 4px;
	border-radius: 50%;
	background: #fff;
	box-shadow: 0 0 8px rgba(255, 255, 255, 0.8), 0 0 16px rgba(255, 255, 255, 0.4);
}

/* ==========================================================================
   27. Status Dots Ping Animation
   ========================================================================== */

.hero-status-dot {
	position: relative;
}

.hero-status-dot::before {
	content: '';
	position: absolute;
	inset: 0;
	border-radius: 50%;
	animation: status-ping 2s ease-out infinite;
}

.hero-status-dot--red::before  { background: var(--color-danger); }
.hero-status-dot--green::before { background: var(--color-success); }
.hero-status-dot--blue {
	background: #7f8ea3;
	box-shadow: 0 0 6px rgba(74, 124, 240, 0.7);
}
.hero-status-dot--blue::before { background: #7f8ea3; }

@keyframes status-ping {
	0%   { transform: scale(1);   opacity: 0.75; }
	100% { transform: scale(2.8); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
	.hero-status-dot::before { animation: none; }
}

/* ==========================================================================
   29. Stacked Tilted Cards
   ========================================================================== */

/* Bio hover text swap */
.bio-text {
	position: absolute;
	inset: var(--space-lg);
	transition: opacity 0.45s ease;
}

.bio-text--personal {
	opacity: 0;
	pointer-events: none;
}

.bento-card--heading:hover + .bento-card--bio .bio-text--default,
.bento-card--bio:hover .bio-text--default {
	opacity: 0;
}

.bento-card--heading:hover + .bento-card--bio .bio-text--personal,
.bento-card--bio:hover .bio-text--personal {
	opacity: 1;
	pointer-events: auto;
}

@media (prefers-reduced-motion: reduce) {
	.bio-text { transition: none; }
}

/* ==========================================================================
   30. Skill Categories
   ========================================================================== */

.skill-categories {
	display: flex;
	flex-direction: column;
	gap: 1.4rem;
}

.skill-category__header {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	margin-bottom: 0.65rem;
}

.skill-category__bar {
	display: block;
	width: 3px;
	height: 15px;
	border-radius: 2px;
	flex-shrink: 0;
	transition: height 0.3s ease;
}

.skill-category:hover .skill-category__bar {
	height: 20px;
}

.skill-category--blue .skill-category__bar   { background: #7f8ea3; }
.skill-category--green .skill-category__bar  { background: #22c55e; }
.skill-category--purple .skill-category__bar { background: #a78bfa; }
.skill-category--orange .skill-category__bar { background: #f97316; }

.skill-category__name {
	font-size: 0.7rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.07em;
	color: rgba(255, 255, 255, 0.55);
}

.skill-category__count {
	font-size: 0.62rem;
	font-weight: 700;
	padding: 0.1rem 0.45rem;
	border-radius: var(--radius-full);
	margin-left: auto;
}

.skill-category--blue .skill-category__count {
	background: rgba(74, 124, 240, 0.15);
	color: #7f8ea3;
}

.skill-category--green .skill-category__count {
	background: rgba(34, 197, 94, 0.15);
	color: #22c55e;
}

.skill-category--purple .skill-category__count {
	background: rgba(167, 139, 250, 0.15);
	color: #a78bfa;
}

.skill-category--orange .skill-category__count {
	background: rgba(249, 115, 22, 0.15);
	color: #f97316;
}

/* ==========================================================================
   31. Projects Page — Editorial Layout
   ========================================================================== */

.projects-editorial {
	max-width: 820px;
	margin: 0 auto;
	padding: var(--space-2xl) var(--space-xl);
	padding-top: calc(var(--header-height) + var(--space-2xl));
}

.projects-editorial__heading {
	font-size: var(--text-3xl);
	font-weight: 800;
	color: #fff;
	margin: 0 0 var(--space-2xl);
	letter-spacing: -0.02em;
}

.editorial-project {
	display: grid;
	grid-template-columns: 72px 1fr;
	gap: var(--space-lg);
	padding-bottom: var(--space-2xl);
	margin-bottom: var(--space-2xl);
	border-bottom: 1px solid rgba(255, 255, 255, 0.07);
	align-items: start;
}

.editorial-project:last-child {
	border-bottom: none;
}

.editorial-project__num {
	font-size: 4.5rem;
	font-weight: 900;
	line-height: 1;
	color: rgba(255, 255, 255, 0.06);
	letter-spacing: -0.04em;
	user-select: none;
	padding-top: 0.1em;
}

.editorial-project__title {
	font-size: var(--text-xl);
	font-weight: 800;
	color: #fff;
	margin: 0 0 0.75rem;
	line-height: 1.25;
	letter-spacing: -0.01em;
}

.editorial-project__stack {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem;
	margin-bottom: 1rem;
}

.editorial-project__desc {
	color: rgba(255, 255, 255, 0.5);
	line-height: 1.8;
	font-size: var(--text-sm);
	margin-bottom: 1.25rem;
}

.editorial-project__links {
	display: flex;
	gap: 1.25rem;
}

.editorial-project__link {
	display: inline-flex;
	align-items: center;
	gap: 0.45rem;
	font-size: var(--text-xs);
	font-weight: 600;
	color: rgba(255, 255, 255, 0.45);
	text-decoration: none;
	border-bottom: 1px solid rgba(255, 255, 255, 0.12);
	padding-bottom: 1px;
	transition: color 0.2s ease, border-color 0.2s ease;
}

.editorial-project__link:hover {
	color: #7f8ea3;
	border-color: #7f8ea3;
}

@media (max-width: 640px) {
	.editorial-project {
		grid-template-columns: 1fr;
		gap: var(--space-sm);
	}

	.editorial-project__num {
		font-size: 2.75rem;
	}

	.projects-editorial {
		padding: var(--space-xl) var(--space-md);
	}
}

/* ==========================================================================
   32. GitHub Repo Cards
   ========================================================================== */

.gh-repo-meta {
	display: flex;
	flex-wrap: wrap;
	gap: 0.65rem;
	align-items: center;
	margin-bottom: 0.75rem;
}

.gh-lang {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	font-size: var(--text-xs);
	color: rgba(255, 255, 255, 0.6);
}

.gh-lang-dot {
	width: 10px;
	height: 10px;
	border-radius: 50%;
	flex-shrink: 0;
}

.gh-updated {
	font-size: var(--text-xs);
	color: rgba(255, 255, 255, 0.3);
}

.gh-loading {
	padding: 4rem 0;
	color: rgba(255, 255, 255, 0.3);
	font-family: var(--font-mono);
	font-size: var(--text-xs);
}

.gh-error {
	color: rgba(255, 255, 255, 0.4);
	font-size: var(--text-sm);
	padding: 2rem 0;
}

.gh-error a {
	color: #7f8ea3;
}

.gh-footer {
	margin-top: var(--space-xl);
	padding-top: var(--space-lg);
	border-top: 1px solid rgba(255, 255, 255, 0.07);
}

.gh-footer-link {
	font-size: var(--text-xs);
	color: rgba(255, 255, 255, 0.35);
	text-decoration: none;
	transition: color 0.2s ease;
}

.gh-footer-link:hover {
	color: #7f8ea3;
}

.editorial-project.gh-animate {
	opacity: 0;
	transform: translateY(16px);
	animation: gh-fadein 0.45s ease forwards;
	animation-delay: calc(var(--stagger-i, 0) * 80ms);
}

@keyframes gh-fadein {
	to { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
	.editorial-project.gh-animate {
		animation: none;
		opacity: 1;
		transform: none;
	}
}

/* ==========================================================================
   33. Resume Page
   ========================================================================== */

.resume-page {
	max-width: 820px;
	margin: 0 auto;
	padding: var(--space-2xl) var(--space-xl);
	padding-top: calc(var(--header-height) + var(--space-2xl));
}

.resume-header {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	flex-wrap: wrap;
	gap: var(--space-lg);
	margin-bottom: var(--space-2xl);
	padding-bottom: var(--space-xl);
	border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.resume-name {
	font-size: var(--text-3xl);
	font-weight: 900;
	color: #fff;
	margin: 0 0 0.35rem;
	letter-spacing: -0.02em;
}

.resume-title {
	font-size: var(--text-sm);
	color: rgba(255, 255, 255, 0.45);
	margin: 0 0 0.75rem;
}

.resume-contact {
	display: flex;
	flex-wrap: wrap;
	gap: 1.25rem;
}

.resume-contact a {
	font-size: var(--text-xs);
	color: rgba(255, 255, 255, 0.4);
	text-decoration: none;
	transition: color 0.2s ease;
}

.resume-contact a:hover {
	color: #7f8ea3;
}

.resume-download {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.65rem 1.4rem;
	background: rgba(74, 124, 240, 0.12);
	border: 1px solid rgba(74, 124, 240, 0.35);
	border-radius: var(--radius-full);
	font-size: var(--text-xs);
	font-weight: 700;
	color: #7f8ea3;
	text-decoration: none;
	transition: background 0.2s ease, border-color 0.2s ease;
	white-space: nowrap;
	align-self: flex-start;
}

.resume-download:hover {
	background: rgba(74, 124, 240, 0.22);
	border-color: rgba(74, 124, 240, 0.6);
}

.resume-section {
	margin-bottom: var(--space-2xl);
}

.resume-section__label {
	font-size: 0.7rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	color: rgba(255, 255, 255, 0.3);
	margin: 0 0 var(--space-lg);
	padding-left: 0.85rem;
	border-left: 3px solid #7f8ea3;
}

.resume-section__label--green  { border-left-color: #22c55e; }
.resume-section__label--purple { border-left-color: #a78bfa; }

.resume-summary {
	font-size: var(--text-sm);
	color: rgba(255, 255, 255, 0.55);
	line-height: 1.85;
	margin: 0;
}

.resume-exp {
	display: flex;
	flex-direction: column;
	gap: var(--space-lg);
}

.resume-exp-item {
	display: grid;
	grid-template-columns: 1fr auto;
	gap: 0.2rem 1rem;
}

.resume-exp-item__title {
	font-size: var(--text-sm);
	font-weight: 700;
	color: #fff;
	grid-column: 1;
}

.resume-exp-item__period {
	font-size: var(--text-xs);
	color: rgba(255, 255, 255, 0.3);
	white-space: nowrap;
	grid-column: 2;
	grid-row: 1;
	padding-top: 0.15em;
}

.resume-exp-item__org {
	font-size: var(--text-xs);
	color: rgba(255, 255, 255, 0.45);
	grid-column: 1;
}

.resume-exp-item__desc {
	font-size: var(--text-xs);
	color: rgba(255, 255, 255, 0.4);
	line-height: 1.75;
	margin-top: 0.35rem;
	grid-column: 1 / -1;
}

.resume-skills {
	display: flex;
	flex-direction: column;
	gap: var(--space-md);
}

.resume-skill-group {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}

.resume-skill-group__label {
	font-size: 0.68rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.07em;
}

@media (max-width: 640px) {
	.resume-page {
		padding: var(--space-xl) var(--space-md);
		padding-top: calc(var(--header-height) + var(--space-xl));
	}

	.resume-header {
		flex-direction: column;
	}

	.resume-exp-item {
		grid-template-columns: 1fr;
	}

	.resume-exp-item__period {
		grid-column: 1;
		grid-row: auto;
	}
}

/* ======================================================================
   31. Front Page Starfield Drift Background
   ====================================================================== */

.starfield-drift-bg {
	position: fixed;
	inset: 0;
	pointer-events: none;
	z-index: 0;
	overflow: hidden;
	background: #000;
}

.starfield-drift-bg::before,
.starfield-drift-bg::after {
	content: "";
	position: absolute;
	inset: -25%;
	background-repeat: repeat;
	will-change: transform, opacity;
}

.starfield-drift-bg::before {
	background-image:
		radial-gradient(circle at 8% 12%, rgba(255,255,255,0.95) 0 1.2px, transparent 2px),
		radial-gradient(circle at 22% 34%, rgba(255,255,255,0.78) 0 1.2px, transparent 2px),
		radial-gradient(circle at 37% 18%, rgba(255,255,255,0.9) 0 1.4px, transparent 2.2px),
		radial-gradient(circle at 51% 62%, rgba(255,255,255,0.75) 0 1.4px, transparent 2.2px),
		radial-gradient(circle at 66% 26%, rgba(255,255,255,0.85) 0 1.3px, transparent 2.1px),
		radial-gradient(circle at 79% 73%, rgba(255,255,255,0.8) 0 1.4px, transparent 2.2px),
		radial-gradient(circle at 91% 41%, rgba(255,255,255,0.92) 0 1.2px, transparent 2px),
		radial-gradient(circle at 16% 66%, rgba(255,255,255,0.7) 0 1.1px, transparent 1.9px),
		radial-gradient(circle at 46% 86%, rgba(255,255,255,0.84) 0 1.2px, transparent 2px),
		radial-gradient(circle at 72% 52%, rgba(255,255,255,0.88) 0 1.3px, transparent 2.1px),
		radial-gradient(circle at 95% 12%, rgba(255,255,255,0.76) 0 1.1px, transparent 1.9px),
		radial-gradient(circle at 11% 24%, rgba(255,255,255,0.82) 0 1.2px, transparent 2px),
		radial-gradient(circle at 27% 78%, rgba(255,255,255,0.7) 0 1.1px, transparent 1.9px),
		radial-gradient(circle at 63% 14%, rgba(255,255,255,0.9) 0 1.3px, transparent 2.1px),
		radial-gradient(circle at 84% 61%, rgba(255,255,255,0.86) 0 1.2px, transparent 2px);
	background-size: 320px 320px;
	opacity: 0.68;
	animation: starfield-drift-far 160s linear infinite;
}

.starfield-drift-bg::after {
	background-image:
		radial-gradient(circle at 14% 82%, rgba(255,255,255,1) 0 1.8px, transparent 2.8px),
		radial-gradient(circle at 29% 57%, rgba(255,255,255,0.95) 0 1.9px, transparent 2.9px),
		radial-gradient(circle at 43% 77%, rgba(255,255,255,0.88) 0 1.7px, transparent 2.7px),
		radial-gradient(circle at 58% 31%, rgba(255,255,255,1) 0 2px, transparent 3px),
		radial-gradient(circle at 73% 89%, rgba(255,255,255,0.9) 0 1.8px, transparent 2.8px),
		radial-gradient(circle at 87% 16%, rgba(255,255,255,0.98) 0 1.9px, transparent 2.9px),
		radial-gradient(circle at 7% 46%, rgba(255,255,255,0.86) 0 1.7px, transparent 2.7px),
		radial-gradient(circle at 35% 12%, rgba(255,255,255,0.9) 0 1.8px, transparent 2.8px),
		radial-gradient(circle at 52% 68%, rgba(255,255,255,0.92) 0 1.9px, transparent 2.9px),
		radial-gradient(circle at 94% 44%, rgba(255,255,255,0.86) 0 1.7px, transparent 2.7px);
	background-size: 460px 460px;
	opacity: 0.5;
	animation: starfield-drift-near 95s linear infinite, starfield-twinkle 8s ease-in-out infinite;
}

.shooting-star {
	position: absolute;
	top: 0;
	left: 0;
	width: 180px;
	height: 2px;
	border-radius: 999px;
	background: linear-gradient(
		90deg,
		rgba(255, 255, 255, 0) 0%,
		rgba(255, 255, 255, 0.12) 55%,
		rgba(255, 255, 255, 0.98) 100%
	);
	opacity: 0;
	transform: rotate(-28deg) translate3d(0, 0, 0);
	filter: drop-shadow(0 0 6px rgba(255, 255, 255, 0.45));
	will-change: transform, opacity;
}

.shooting-star--1 {
	top: 20%;
	left: 5%;
	animation: shooting-star-fall 26s ease-out infinite;
}

.shooting-star--2 {
	top: 34%;
	left: 62%;
	animation: shooting-star-fall 34s ease-out 8s infinite;
}

.shooting-star--3 {
	top: 11%;
	left: 44%;
	animation: shooting-star-fall 42s ease-out 14s infinite;
}

.burst-star {
	position: absolute;
	top: 15%;
	left: 0;
	width: 220px;
	height: 2px;
	border-radius: 999px;
	background: linear-gradient(
		90deg,
		rgba(255, 255, 255, 0) 0%,
		rgba(255, 255, 255, 0.18) 52%,
		rgba(255, 255, 255, 1) 100%
	);
	opacity: 0;
	transform: rotate(-30deg) translate3d(0, 0, 0) scaleX(0.7);
	filter: drop-shadow(0 0 7px rgba(255, 255, 255, 0.6));
	will-change: transform, opacity;
	animation: burst-star-fall var(--dur, 1.2s) ease-out forwards;
}

body.easter-burst .shooting-star--1 {
	animation-duration: 7s;
}

body.easter-burst .shooting-star--2 {
	animation-duration: 9s;
}

body.easter-burst .shooting-star--3 {
	animation-duration: 11s;
}

@keyframes starfield-drift-far {
	from { transform: translate3d(0, 0, 0); }
	to { transform: translate3d(-120px, 90px, 0); }
}

@keyframes starfield-drift-near {
	from { transform: translate3d(0, 0, 0); }
	to { transform: translate3d(180px, -140px, 0); }
}

@keyframes starfield-twinkle {
	0%, 100% { opacity: 0.2; }
	50% { opacity: 0.42; }
}

@keyframes shooting-star-fall {
	0% {
		opacity: 0;
		transform: rotate(-28deg) translate3d(0, 0, 0) scaleX(0.5);
	}
	2.5% {
		opacity: 0.95;
	}
	8% {
		opacity: 0.9;
		transform: rotate(-28deg) translate3d(300px, 220px, 0) scaleX(1.15);
	}
	12%, 100% {
		opacity: 0;
		transform: rotate(-28deg) translate3d(520px, 380px, 0) scaleX(0.9);
	}
}

@keyframes burst-star-fall {
	0% {
		opacity: 0;
		transform: rotate(-30deg) translate3d(0, 0, 0) scaleX(0.65);
	}
	12% {
		opacity: 1;
	}
	78% {
		opacity: 0.96;
		transform: rotate(-30deg) translate3d(var(--dx, 620px), var(--dy, 420px), 0) scaleX(1.1);
	}
	100% {
		opacity: 0;
		transform: rotate(-30deg) translate3d(calc(var(--dx, 620px) + 110px), calc(var(--dy, 420px) + 90px), 0) scaleX(0.9);
	}
}

/* keep content above the starfield layer when present */
.site-main > .starfield-drift-bg ~ * {
	position: relative;
	z-index: 1;
}

/* allow stars to be visible behind hero */
.home .hero-v2 {
	background: transparent;
}

/* make homepage content boxes match the transparent hero treatment */
.home .bento-card {
	background: rgba(6, 8, 12, 0.08) !important;
	border-color: rgba(255, 255, 255, 0.16) !important;
	backdrop-filter: blur(5px) saturate(1.05);
	-webkit-backdrop-filter: blur(5px) saturate(1.05);
}

.home .bento-card:hover {
	background: rgba(6, 8, 12, 0.12) !important;
	border-color: rgba(255, 255, 255, 0.22) !important;
}

.home .workflow-icon {
	background: rgba(6, 8, 12, 0.06) !important;
	border-color: rgba(255, 255, 255, 0.16) !important;
}

.home .skill-category,
.home .timeline-item {
	background: rgba(6, 8, 12, 0.06) !important;
}

.home .timeline-item:hover {
	background: rgba(6, 8, 12, 0.1) !important;
}

.home .glass {
	background: rgba(6, 8, 12, 0.08) !important;
	border-color: rgba(255, 255, 255, 0.16) !important;
}

.home .glass::before,
.home .glass::after {
	display: none !important;
}

/* hard transparency override for homepage cards */
.home .bento-card,
.home .skill-category,
.home .timeline-item,
.home .workflow-icon,
.home .glass {
	background: transparent !important;
	background-color: rgba(255, 255, 255, 0.015) !important;
	background-image: none !important;
	border-color: rgba(255, 255, 255, 0.18) !important;
	backdrop-filter: blur(1.5px) saturate(1) !important;
	-webkit-backdrop-filter: blur(1.5px) saturate(1) !important;
}


@media (prefers-reduced-motion: reduce) {
	.starfield-drift-bg::before,
	.starfield-drift-bg::after {
		animation: none;
	}

	.shooting-star {
		animation: none;
		opacity: 0;
	}

	.burst-star {
		display: none;
	}

	body.easter-rumble .site-header,
	body.easter-rumble .site-main,
	body.easter-rumble .site-footer-v2 {
		animation: none;
	}

	body.easter-flash::before {
		display: none;
	}
}

/* ==========================================================================
   27. Ailo Chat Page
   ========================================================================== */

.ailo-section {
	display: flex;
	flex-direction: column;
	align-items: center;
	min-height: calc(100vh - var(--header-height, 80px) - 80px);
	padding: calc(var(--header-height, 80px) + 3rem) 1.5rem 3rem;
	max-width: 800px;
	margin: 0 auto;
	width: 100%;
}

.ailo-header {
	text-align: center;
	margin-bottom: 2rem;
}

.ailo-title {
	font-size: clamp(2rem, 5vw, 3rem);
	font-weight: 800;
	letter-spacing: -0.02em;
	margin: 0 0 0.5rem;
	color: #fff;
}

.ailo-subtitle {
	font-size: 0.95rem;
	color: rgba(255, 255, 255, 0.5);
	margin: 0;
	letter-spacing: 0.01em;
}

.ailo-chat-wrap {
	display: flex;
	flex-direction: column;
	width: 100%;
	flex: 1;
	background: rgba(255, 255, 255, 0.05);
	border: 1px solid rgba(255, 255, 255, 0.12);
	border-radius: 20px;
	backdrop-filter: blur(16px) saturate(1.4);
	-webkit-backdrop-filter: blur(16px) saturate(1.4);
	box-shadow: 0 24px 60px rgba(0, 0, 0, 0.5);
	overflow: hidden;
}

.ailo-messages {
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: 12px;
	padding: 1.5rem;
	overflow-y: auto;
	min-height: 400px;
	max-height: 55vh;
	scroll-behavior: smooth;
}

.ailo-messages::-webkit-scrollbar { width: 4px; }
.ailo-messages::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.15); border-radius: 4px; }

.ailo-msg {
	max-width: 80%;
	padding: 0.75rem 1rem;
	border-radius: 16px;
	border: 1px solid rgba(255, 255, 255, 0.1);
	backdrop-filter: blur(8px);
	line-height: 1.6;
	font-size: 0.92rem;
	animation: ailoMsgIn 0.2s ease both;
}

.ailo-msg p {
	margin: 0;
	color: rgba(255, 255, 255, 0.85);
	white-space: pre-wrap;
	word-break: break-word;
}

.ailo-msg--bot {
	align-self: flex-start;
	background: rgba(255, 255, 255, 0.07);
	border-bottom-left-radius: 4px;
}

.ailo-msg--user {
	align-self: flex-end;
	background: rgba(255, 255, 255, 0.12);
	border: 1px solid rgba(255, 255, 255, 0.18);
	border-bottom-right-radius: 4px;
}

.ailo-msg--user p { color: #fff; }

/* Typing indicator */
.ailo-typing {
	display: flex;
	align-items: center;
	gap: 5px;
	padding: 0.75rem 1rem;
	max-width: fit-content;
	background: rgba(255, 255, 255, 0.07);
}

.ailo-dot {
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.5);
	animation: ailoDot 1.4s infinite both;
}

.ailo-dot:nth-child(1) { animation-delay: 0s; }
.ailo-dot:nth-child(2) { animation-delay: 0.2s; }
.ailo-dot:nth-child(3) { animation-delay: 0.4s; }

@keyframes ailoDot {
	0%, 80%, 100% { opacity: 0.3; transform: scale(0.85); }
	40%            { opacity: 1;   transform: scale(1); }
}

/* Input bar */
.ailo-input-bar {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 0.75rem 1rem;
	border-top: 1px solid rgba(255, 255, 255, 0.08);
	background: rgba(255, 255, 255, 0.03);
}

.ailo-input {
	flex: 1;
	background: transparent;
	border: none;
	outline: none;
	font-size: 0.92rem;
	color: #fff;
	padding: 0.5rem 0.25rem;
	font-family: inherit;
}

.ailo-input::placeholder { color: rgba(255, 255, 255, 0.3); }

.ailo-send-btn {
	width: 38px;
	height: 38px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.1);
	border: 1px solid rgba(255, 255, 255, 0.2);
	color: rgba(255, 255, 255, 0.8);
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	flex-shrink: 0;
	transition: background var(--transition-fast), color var(--transition-fast);
}

.ailo-send-btn:hover {
	background: rgba(255, 255, 255, 0.18);
	color: #fff;
}

.ailo-send-btn:disabled,
.ailo-send-btn--loading {
	opacity: 0.4;
	cursor: not-allowed;
}

/* Suggestion chips */
.ailo-suggestions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	padding: 0.75rem 1rem;
	border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.ailo-chip {
	background: rgba(255, 255, 255, 0.07);
	border: 1px solid rgba(255, 255, 255, 0.15);
	border-radius: 9999px;
	color: rgba(255, 255, 255, 0.75);
	cursor: pointer;
	font-size: 0.8rem;
	font-family: inherit;
	padding: 0.35rem 0.85rem;
	transition: background 0.2s, border-color 0.2s;
	white-space: nowrap;
}

.ailo-chip:hover {
	background: rgba(167, 139, 250, 0.18);
	border-color: rgba(167, 139, 250, 0.45);
	color: #fff;
}

@keyframes ailoMsgIn {
	from { opacity: 0; transform: translateY(6px); }
	to   { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
	.ailo-msg { animation: none; }
	.ailo-dot  { animation: none; opacity: 0.5; }
}