/**
 * styles.css — Shared design system for xaviermalina.com
 *
 * Extracted from inline <style> blocks across all pages.
 * Single source of truth for theme variables, typography utilities,
 * scrollbar, grid overlay, brutalist utilities, and visual overlays.
 *
 * CSS URLs resolve relative to this file's location (2025_11/).
 */

/* ===== Theme Variables ===== */
:root {
	--bg-color: #0a0a0a;
	--text-color: #e0e0e0;
	--accent-color: #ffffff;
}

/* ===== Base Styles ===== */
body {
	background-color: var(--bg-color);
	color: var(--text-color);
	font-family: 'DM Sans', sans-serif;
	overflow-x: hidden;
}

/* ===== Typography Utilities ===== */
.font-syne {
	font-family: 'Syne', sans-serif;
}

.font-mono {
	font-family: 'Space Mono', monospace;
}

.font-michroma {
	font-family: 'Michroma', sans-serif;
}

/* ===== Brutalist Design Utilities ===== */
.brutalist-border {
	border: 1px solid #333;
}

.brutalist-hover:hover {
	background-color: #fff;
	color: #000;
}

/* ===== Text Stroke Animation ===== */
.text-stroke {
	-webkit-text-stroke: 1px rgba(255, 255, 255, 0.1);
	color: transparent;
	transition: all 0.5s ease;
}

.text-stroke:hover {
	-webkit-text-stroke: 0px;
	color: #fff;
}

/* ===== Custom Scrollbar ===== */
::-webkit-scrollbar {
	width: 8px;
}

::-webkit-scrollbar-track {
	background: #0a0a0a;
}

::-webkit-scrollbar-thumb {
	background: #333;
}

::-webkit-scrollbar-thumb:hover {
	background: #555;
}

/* ===== Grid/Scanline Background ===== */
.grid-bg {
	background-size: 40px 40px;
	width: 100%;
	height: 100%;
	pointer-events: none;
	background: linear-gradient(to bottom,
			rgba(255, 255, 255, 0), rgba(255, 255, 255, 0) 50%,
			rgba(0, 0, 0, 0.2) 50%, rgba(0, 0, 0, 0.2));
	background-size: 100% 4px;
	z-index: 3;
	opacity: 0.15;
	position: fixed;
	inset: 0;
}

/* ===== Visual Overlays (used on index + projects hero) ===== */

/* Vignette: cinematic corner darkening */
#vignette {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	pointer-events: none;
	background:
		radial-gradient(circle at bottom left, rgba(0, 0, 0, 0.9) 0%, transparent 35%),
		radial-gradient(circle at bottom right, rgba(0, 0, 0, 0.9) 0%, transparent 35%),
		radial-gradient(circle, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 1) 120%);
	z-index: 2;
}

/* Scanline: retro horizontal line overlay */
#scanline {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	pointer-events: none;
	background: linear-gradient(to bottom,
			rgba(255, 255, 255, 0), rgba(255, 255, 255, 0) 50%,
			rgba(0, 0, 0, 0.2) 50%, rgba(0, 0, 0, 0.2));
	background-size: 100% 4px;
	z-index: 3;
	opacity: 0.15;
}

/* Film grain noise texture */
#noise {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	pointer-events: none;
	z-index: 4;
	opacity: 0.05;
	background-image: url("assets/noise.png");
	background-repeat: repeat;
	background-size: 256px 256px;
}

/* Bottom gradient fade */
#bottom-fade {
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 50vh;
	background: radial-gradient(ellipse 120% 100% at top, transparent 40%, #0a0a0a 100%);
	pointer-events: none;
	z-index: 5;
}