/**
 * @fileoverview Stili principali della homepage di XIZZAN
 * @description Sistema di design cyberpunk/terminal con:
 *   - Design tokens completamente configurabili via CSS custom properties
 *   - Effetti CRT/scanlines realistici
 *   - Cursore custom con interpolazione lerp
 *   - Modalità Konami Code con tema cyberpunk neon
 *   - Layout completamente fluido (320px → 4K)
 * @author Matteo Pompei (XIZZAN)
 */

/* ============================================================================
   FONT FACES
   ---------------------------------------------------------------------------
   JetBrains Mono self-hosted da Cloudflare Pages.
   Font variabile: un singolo file copre tutti i pesi (100–800).
   ============================================================================ */

/* JetBrains Mono - Regular/Variable (pesi 100–800) */
@font-face {
	font-family: "JetBrains Mono";
	src: url("/assets/fonts/JetBrainsMono-Variable.woff2") format("woff2");
	font-weight: 100 800; /* Range completo del font variabile */
	font-style: normal;
	font-display: swap; /* Mostra fallback subito, swap quando caricato */
}

/* JetBrains Mono - Italic/Variable */
@font-face {
	font-family: "JetBrains Mono";
	src: url("/assets/fonts/JetBrainsMono-Italic-Variable.woff2") format("woff2");
	font-weight: 100 800;
	font-style: italic;
	font-display: swap;
}

/* ============================================================================
   DESIGN TOKENS
   ---------------------------------------------------------------------------
   Sistema centralizzato di variabili CSS che governa l'intero design system.
   Modificare solo qui per cambiare tema/spaziature/timing a livello globale.
   Organizzato in sezioni logiche per facilitare la navigazione.
   ============================================================================ */
:root {
	/* =========================================================================
	   COLORS - Palette cyberpunk con accenti neon
	   ========================================================================= */

	/* Backgrounds: gradazione sottile dal body al terminal per profondità */
	--color-bg-body: #06080e;
	--color-bg-terminal: #0a0e16;
	--color-bg-overlay: rgba(13, 0, 21, 0.95);

	/* Bordi: accent primario al 30% di opacità per eleganza */
	--color-border-terminal: rgba(0, 240, 255, 0.3);

	/* Accenti neon - usati per glow, highlights e interazioni */
	--color-accent-primary: #00f0ff; /* Cyan - principale */
	--color-accent-secondary: #ff006e; /* Magenta/Pink - contrasto */
	--color-accent-tertiary: #ffd700; /* Gold - highlight Debian */
	--color-accent-success: #00ff88; /* Green - LED/system ready */

	/* Gerarchia testuale: 4 livelli di grigio per leggibilità WCAG */
	--color-text-primary: #c8d0e0; /* Testo principale, alto contrasto */
	--color-text-secondary: #8a94a8; /* Tagline, link */
	--color-text-muted: #718096; /* Commenti "//", testo terziario */
	--color-text-faint: #64748b; /* Footer, elementi minimi */

	/* Valori RGB per rgba() dinamici nelle shadow/glow */
	--color-accent-primary-rgb: 0, 240, 255;
	--color-accent-secondary-rgb: 255, 0, 110;
	--color-accent-tertiary-rgb: 255, 215, 0;
	--color-accent-success-rgb: 0, 255, 136;

	/* =========================================================================
	   TYPOGRAPHY - Scala fluida e tracking
	   ========================================================================= */

	/* Font stack monospace con fallback a cascata */
	--font-family-mono:
		"JetBrains Mono", "Fira Code", "Cascadia Code", "Consolas", "Courier New",
		monospace;
	--font-weight-normal: 400;
	--font-weight-bold: 700;

	/* Scala tipografica fluida con clamp() per responsività 320px → 4K */
	--text-2xs: clamp(0.5rem, 0.4rem + 0.4vw, 0.9rem); /* Separatori ◈ */
	--text-xs: clamp(0.6rem, 0.4rem + 0.4vw, 1.2rem); /* Footer */
	--text-sm: clamp(0.7rem, 0.5rem + 0.5vw, 1.5rem); /* Sub, social links */
	--text-base: clamp(0.75rem, 0.5rem + 0.6vw, 1.75rem); /* Tagline */
	--text-xl: clamp(2rem, 8vw, 7rem); /* Titolo principale */

	/* Tracking (letter-spacing) per diversi contesti */
	--tracking-tight: 0.03em; /* Tagline: leggibilità alta */
	--tracking-normal: 0.05em; /* Link, testo standard */
	--tracking-wide: 0.08em; /* Titolo principale */
	--tracking-wider: 0.15em; /* Footer "SYSTEM READY" */
	--tracking-widest: 0.25em; /* Sottotitolo "// web developer" */

	/* Line height per il corpo del testo */
	--leading-normal: 1.7;

	/* =========================================================================
	   SPACING - Scala modulare con clamp() fluida
	   ========================================================================= */

	/* Scala modulare 2xs → 3xl per spaziature generiche */
	--space-2xs: clamp(0.25rem, 0.5vw, 0.5rem);
	--space-xs: clamp(0.4rem, 0.5vw, 0.75rem);
	--space-sm: clamp(0.5rem, 1vw, 0.75rem);
	--space-md: clamp(0.75rem, 1.2vw, 1.2rem);
	--space-lg: clamp(1rem, 1.5vw, 1.5rem);
	--space-xl: clamp(1.25rem, 2vw, 2rem);
	--space-2xl: clamp(1.5rem, 3vw, 3rem);
	--space-3xl: clamp(2rem, 4vw, 4rem);

	/* Spaziature specifiche che non seguono la scala modulare (valori legacy) */
	--space-body-padding: clamp(1rem, 3vw, 3rem);
	--space-terminal-x: clamp(1.5rem, 5vw, 4rem);
	--space-terminal-y-top: clamp(2rem, 4vw, 4rem);
	--space-terminal-y-bottom: clamp(1.5rem, 3vw, 3rem);
	--space-social-link-py: 0.25rem;
	--space-footer-mt: clamp(1.25rem, 2vw, 1.75rem);
	--space-overlay-gap: 1rem;

	/* =========================================================================
	   SIZING - Dimensioni componenti
	   ========================================================================= */

	--container-width: clamp(280px, 85vw, 900px); /* Terminal max-width */
	--corner-size: clamp(1.25rem, 1.5vw, 2rem); /* Brackets angolari */
	--corner-line-width: 3px; /* Spessore linee corner */
	--divider-width: clamp(3.75rem, 3rem + 1vw, 7rem);
	--divider-height: clamp(2px, 0.15vw, 3px);
	--led-size: clamp(0.4rem, 0.4rem + 0.1vw, 0.75rem);

	/* Block cursor per il terminale: basato su em/ch per proporzioni corrette */
	--cursor-block-width: 1ch;
	--cursor-block-height: 1.2em;
	--cursor-block-offset: 0.1em; /* Offset verticale per allineamento */
	--cursor-block-ml: 0.2ch; /* Margine sinistro dal testo */

	--tagline-min-height: 3.4em; /* Previene layout shift durante typewriter */
	--scanline-height: 2px;

	/* Custom cursor (mouse): dimensioni fisse per consistenza visiva */
	--custom-cursor-ring-size: 28px;
	--custom-cursor-ring-size-hover: 42px;
	--custom-cursor-dot-size: 5px;
	--custom-cursor-border-width: 1.5px;

	/* =========================================================================
	   BORDERS
	   ========================================================================= */

	--border-width: 1px;
	--border-radius-none: 0; /* Terminal squadrato (no radius) */
	--border-radius-full: 50%; /* LED e cursor circolare */

	/* =========================================================================
	   SHADOWS - Sistema di glow neon multi-livello
	   ========================================================================= */

	/* Glow esterni per componenti */
	--shadow-glow-xs: 0 0 clamp(4px, 0.5vw, 12px);
	--shadow-glow-sm: 0 0 clamp(5px, 0.7vw, 15px);
	--shadow-glow-md: 0 0 clamp(6px, 1vw, 18px);
	--shadow-glow-lg: 0 0 clamp(8px, 1.5vw, 24px);
	--shadow-glow-xl: 0 0 clamp(12px, 2vw, 30px);
	--shadow-glow-2xl: 0 0 clamp(15px, 2.5vw, 45px);

	/* Shadow specifici */
	--shadow-terminal: 0 0 clamp(40px, 5vw, 120px);
	--shadow-text-glow-sm: 0 0 clamp(4px, 0.5vw, 12px);
	--shadow-text-glow-md: 0 0 clamp(5px, 0.8vw, 15px);
	--shadow-text-glow-lg: 0 0 clamp(8px, 1.5vw, 24px);
	--shadow-text-glow-xl: 0 0 clamp(15px, 2.5vw, 45px);

	/* Composite shadows per cursor e titolo */
	--shadow-cursor-ring:
		0 0 12px rgba(var(--color-accent-primary-rgb), 0.4),
		inset 0 0 8px rgba(var(--color-accent-primary-rgb), 0.15);
	--shadow-cursor-ring-hover:
		0 0 18px rgba(var(--color-accent-secondary-rgb), 0.5),
		inset 0 0 12px rgba(var(--color-accent-secondary-rgb), 0.2);
	--shadow-cursor-dot: 0 0 8px var(--color-accent-primary);
	--shadow-title:
		var(--shadow-text-glow-md) rgba(var(--color-accent-primary-rgb), 0.5),
		var(--shadow-text-glow-xl) rgba(var(--color-accent-primary-rgb), 0.2),
		2px 0 0 var(--color-accent-secondary), -2px 0 0 var(--color-accent-tertiary);

	/* =========================================================================
	   ANIMATIONS - Timing, easing e delays
	   ========================================================================= */

	/* Durations: scale dal quasi-instantaneo al molto lento */
	--duration-instant: 0.01ms; /* Per prefers-reduced-motion */
	--duration-fast: 0.15s;
	--duration-normal: 0.3s;
	--duration-slow: 0.5s;
	--duration-slower: 0.6s;
	--duration-title: 0.7s;
	--duration-glitch: 0.3s;
	--duration-blink: 1s;
	--duration-pulse: 2s;
	--duration-scanline: 8s;
	--duration-konami-glitch: 4s;

	/* Easing curves: expo e bounce per movimento "fisico" */
	--ease-out-expo: cubic-bezier(0.22, 1, 0.36, 1); /* Decelerazione rapida */
	--ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1); /* Overshoot leggero */
	--ease-linear: linear;
	--ease-step: step-end; /* Per blink on/off del cursor */

	/* Delays boot sequence: orchestrazione della sequenza di avvio */
	--delay-corner-1: 0.2s;
	--delay-corner-2: 0.25s;
	--delay-corner-3: 0.3s;
	--delay-corner-4: 0.35s;
	--delay-title: 0.4s;
	--delay-sub: 1s;
	--delay-divider: 1.2s;
	--delay-tagline: 1.4s;
	--delay-social-base: 6s;
	--delay-social-stagger: 0.05s;
	--delay-footer: 6.5s;
	--delay-scanlines-boot: 0.1s;
	--delay-scanlines-flicker: 1s;

	/* =========================================================================
	   Z-INDEX - Hierarchy chiara per layering
	   ========================================================================= */

	--z-digital-rain: 0; /* Sfondo più basso */
	--z-terminal: 1; /* Contenuto principale */
	--z-scanlines: 100; /* Overlay CRT */
	--z-custom-cursor: 9999; /* Cursore sempre sopra tutto */
	--z-konami-overlay: 10000; /* Overlay Konami massimo */

	/* =========================================================================
	   OPACITY - Valori standardizzati
	   ========================================================================= */

	--opacity-scanline-subtle: 0.02;
	--opacity-glow-subtle: 0.05;
	--opacity-scanline-line: 0.4;
	--opacity-vignette: 0.4;
	--opacity-digital-rain: 0.4;
}

/* ============================================================================
   KONAMI MODE: CYBERPUNK NEON
   ---------------------------------------------------------------------------
   Override dei soli colori quando viene attivato il Konami Code.
   Tutti gli altri token (spacing, sizing, timing) rimangono invariati.
   ============================================================================ */
body.konami-active {
	/* Background più scuro e violaceo */
	--color-bg-body: #0d0015;
	--color-bg-terminal: #150020;
	--color-bg-overlay: rgba(13, 0, 21, 0.95);
	--color-border-terminal: rgba(255, 0, 255, 0.3);

	/* Inversione accenti: magenta diventa primario, cyan secondario */
	--color-accent-primary: #ff00ff;
	--color-accent-secondary: #00ffff;
	--color-accent-tertiary: #ff0080;
	--color-accent-success: #00ff88;

	/* Testi virati al viola/lilla */
	--color-text-primary: #f0e0ff;
	--color-text-secondary: #c0a0e0;
	--color-text-muted: #9070b0;
	--color-text-faint: #705090;

	/* RGB aggiornati per le shadow */
	--color-accent-primary-rgb: 255, 0, 255;
	--color-accent-secondary-rgb: 0, 255, 255;
	--color-accent-tertiary-rgb: 255, 0, 128;
	--color-accent-success-rgb: 0, 255, 136;
}

/* Titolo con glitch sottile continuo in modalità Konami */
body.konami-active h1 {
	animation: konami-glitch-subtle var(--duration-konami-glitch) infinite;
}

/* Divider con glow più intenso */
body.konami-active .divider {
	background: linear-gradient(
		90deg,
		transparent,
		var(--color-accent-primary),
		transparent
	);
	box-shadow: var(--shadow-glow-md) rgba(var(--color-accent-primary-rgb), 0.3);
}

/* Custom cursor in modalità Konami */
body.konami-active .cursor-dot {
	background: var(--color-accent-primary);
	box-shadow: var(--shadow-cursor-dot);
}

body.konami-active .cursor-ring {
	border-color: var(--color-accent-primary);
	box-shadow: var(--shadow-cursor-ring);
}

body.konami-active .cursor-ring.hover {
	border-color: var(--color-accent-secondary);
	box-shadow: var(--shadow-cursor-ring-hover);
}

/* Scanlines più intense e dual-tone */
body.konami-active #scanlines {
	background:
		repeating-linear-gradient(
			0deg,
			rgba(0, 0, 0, 0.35) 0px,
			rgba(0, 0, 0, 0.35) 1px,
			transparent 1px,
			transparent 3px
		),
		linear-gradient(
			to bottom,
			rgba(var(--color-accent-primary-rgb), 0.04) 0%,
			transparent 50%,
			rgba(var(--color-accent-secondary-rgb), 0.04) 100%
		);
}

/* ============================================================================
   KEYFRAMES - Animazioni globali
   ---------------------------------------------------------------------------
   Definite prima di essere referenziate per chiarezza.
   Raggruppate per categoria: konami, glitch, boot sequence, UI.
   ============================================================================ */

/* ---------- Konami & Glitch Effects ---------- */

@keyframes konami-glitch-subtle {
	0%,
	92%,
	100% {
		transform: none;
		filter: none;
	}
	93% {
		transform: translateX(-2px) skewX(-1deg);
		filter: hue-rotate(90deg) saturate(2);
	}
	94% {
		transform: translateX(2px) skewX(1deg);
		filter: hue-rotate(-90deg) saturate(2);
	}
	95% {
		transform: translateX(-1px);
		filter: hue-rotate(45deg);
	}
	96% {
		transform: none;
		filter: none;
	}
}

@keyframes glitch-storm {
	0%,
	100% {
		transform: translate(0);
		filter: none;
	}
	10% {
		transform: translate(-8px, 5px) skewX(3deg);
		filter: hue-rotate(90deg) saturate(3);
	}
	20% {
		transform: translate(8px, -5px) skewX(-3deg);
		filter: hue-rotate(-90deg) contrast(2);
	}
	30% {
		transform: translate(-5px, 8px);
		filter: brightness(2) hue-rotate(180deg);
	}
	40% {
		transform: translate(5px, -8px) skewX(2deg);
		filter: hue-rotate(270deg);
	}
	50% {
		transform: translate(-8px, -5px);
		filter: saturate(0.3) brightness(1.5);
	}
	60% {
		transform: translate(8px, 5px) skewX(-2deg);
		filter: hue-rotate(45deg) contrast(3);
	}
	70% {
		transform: translate(-5px, -8px);
		filter: hue-rotate(-45deg);
	}
	80% {
		transform: translate(5px, 8px) skewX(3deg);
		filter: brightness(0.5) saturate(4);
	}
	90% {
		transform: translate(-8px, 5px);
		filter: hue-rotate(135deg);
	}
}

@keyframes glitch-text-storm {
	0%,
	100% {
		opacity: 1;
		transform: translateX(0);
	}
	25% {
		opacity: 0.8;
		transform: translateX(-3px) skewX(-2deg);
	}
	50% {
		opacity: 0.6;
		transform: translateX(3px) skewX(2deg);
	}
	75% {
		opacity: 0.9;
		transform: translateX(-2px);
	}
}

@keyframes konami-glitch {
	0%,
	100% {
		transform: translateX(0);
	}
	20% {
		transform: translateX(-10px) skewX(-5deg);
	}
	40% {
		transform: translateX(8px) skewX(3deg);
	}
	60% {
		transform: translateX(-5px) skewX(-2deg);
	}
	80% {
		transform: translateX(3px) skewX(1deg);
	}
}

/* ---------- Boot Sequence Animations ---------- */

@keyframes terminal-boot {
	0% {
		opacity: 0;
		transform: scale(0.95) translateY(10px);
	}
	60% {
		opacity: 1;
		transform: scale(1.01) translateY(-2px);
	}
	100% {
		opacity: 1;
		transform: scale(1) translateY(0);
	}
}

@keyframes corner-boot {
	from {
		opacity: 0;
		transform: scale(0.5);
	}
	to {
		opacity: 1;
		transform: scale(1);
	}
}

@keyframes h1-reveal {
	0% {
		clip-path: inset(0 100% 0 0);
		opacity: 0.3;
		filter: blur(4px);
	}
	100% {
		clip-path: inset(0 0 0 0);
		opacity: 1;
		filter: blur(0);
	}
}

@keyframes h1-beam {
	0% {
		left: -4px;
		opacity: 0;
	}
	10% {
		opacity: 1;
	}
	90% {
		opacity: 1;
	}
	100% {
		left: calc(100% + 4px);
		opacity: 0;
	}
}

@keyframes divider-boot {
	0% {
		opacity: 0;
		width: 0;
	}
	50% {
		opacity: 1;
	}
	100% {
		opacity: 1;
		width: var(--divider-width);
	}
}

@keyframes social-boot {
	from {
		opacity: 0;
		transform: translateY(8px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

@keyframes cursor-appear {
	from {
		opacity: 0;
	}
	to {
		opacity: 1;
	}
}

/* ---------- UI Animations ---------- */

@keyframes fade-up {
	from {
		opacity: 0;
		transform: translateY(12px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

@keyframes scanlines-boot {
	from {
		opacity: 0;
	}
	to {
		opacity: 1;
	}
}

@keyframes scanline-move {
	0% {
		transform: translateY(-10vh);
	}
	100% {
		transform: translateY(110vh);
	}
}

@keyframes scanline-flicker {
	0%,
	100% {
		opacity: 1;
	}
	92% {
		opacity: 1;
	}
	93% {
		opacity: 0.8;
	}
	94% {
		opacity: 1;
	}
	96% {
		opacity: 0.9;
	}
	97% {
		opacity: 1;
	}
}

@keyframes pulse {
	0%,
	100% {
		opacity: 1;
	}
	50% {
		opacity: 0.3;
	}
}

@keyframes blink {
	0%,
	100% {
		opacity: 1;
	}
	50% {
		opacity: 0;
	}
}

/* ============================================================================
   KONAMI OVERLAY
   ---------------------------------------------------------------------------
   Overlay a schermo pieno che appare quando viene attivato il Konami Code.
   Messaggio "ACCESS GRANTED" + sottotitolo cyberpunk.
   ============================================================================ */
.konami-overlay {
	position: fixed;
	inset: 0;
	background: var(--color-bg-overlay);
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
	gap: var(--space-overlay-gap);
	z-index: var(--z-konami-overlay);
	opacity: 0;
	pointer-events: none;
	transition: opacity var(--duration-slow) ease;
}

.konami-overlay.show {
	opacity: 1;
	pointer-events: auto;
}

.konami-overlay .message {
	font-family: var(--font-family-mono);
	font-size: clamp(1.5rem, 5vw, 3rem);
	color: var(--color-accent-primary);
	text-shadow:
		0 0 20px rgba(var(--color-accent-primary-rgb), 0.8),
		0 0 40px rgba(var(--color-accent-primary-rgb), 0.4);
	letter-spacing: var(--tracking-widest);
	animation: konami-glitch var(--duration-glitch) ease-in-out 3;
}

.konami-overlay .sub-message {
	font-family: var(--font-family-mono);
	font-size: clamp(0.8rem, 2vw, 1.2rem);
	color: var(--color-text-secondary);
	letter-spacing: var(--tracking-wider);
	opacity: 0;
	animation: fade-up var(--duration-slow) ease-out var(--delay-sub) forwards;
}

/* ============================================================================
   DIGITAL RAIN CANVAS
   ---------------------------------------------------------------------------
   Canvas fullscreen per effetto Matrix in modalità Konami.
   Reso tramite JavaScript, CSS gestisce solo posizionamento e fade-in.
   ============================================================================ */
#digitalRain {
	position: fixed;
	inset: 0;
	z-index: var(--z-digital-rain);
	pointer-events: none;
	opacity: 0;
	transition: opacity var(--duration-slow) ease;
}

body.konami-active #digitalRain {
	opacity: var(--opacity-digital-rain);
}

/* ============================================================================
   GLITCH STORM (stato transitorio durante attivazione Konami)
   ============================================================================ */
body.glitch-storm .terminal {
	animation: glitch-storm var(--duration-glitch) ease-in-out 5;
}

body.glitch-storm #scanlines {
	opacity: 1 !important;
	animation: none;
}

body.glitch-storm h1 {
	animation: glitch-text-storm var(--duration-fast) ease-in-out 10;
}

/* ============================================================================
   BASE STYLES
   ---------------------------------------------------------------------------
   Reset minimi e configurazione del body come container centrato.
   ============================================================================ */
* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

body {
	background: var(--color-bg-body);
	min-height: 100dvh; /* Dynamic viewport height per mobile */
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: var(--font-family-mono);
	padding: var(--space-body-padding);
	position: relative;
	overflow-x: hidden;
	-webkit-font-smoothing: antialiased;
	user-select: none; /* Previene selezione testo come documento */
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
}

/* ============================================================================
   CUSTOM CURSOR
   ---------------------------------------------------------------------------
   Cursore custom cyberpunk composto da due elementi:
   - Ring: cerchio grande con movimento interpolato (lerp) per fluidità
   - Dot: punto centrale che segue immediatamente il mouse
   
   Visibile solo su dispositivi con puntatore fine (no touch).
   ============================================================================ */
.cursor-dot,
.cursor-ring {
	position: fixed;
	top: 0;
	left: 0;
	pointer-events: none;
	z-index: var(--z-custom-cursor);
	transform: translate(-50%, -50%);
	border-radius: var(--border-radius-full);
	opacity: 0;
	transition:
		opacity var(--duration-normal) ease,
		width var(--duration-normal) ease,
		height var(--duration-normal) ease,
		background var(--duration-normal) ease,
		border-color var(--duration-normal) ease;
}

.cursor-ring {
	width: var(--custom-cursor-ring-size);
	height: var(--custom-cursor-ring-size);
	border: var(--custom-cursor-border-width) solid var(--color-accent-primary);
	box-shadow: var(--shadow-cursor-ring);
	transition:
		opacity var(--duration-normal) ease,
		width var(--duration-normal) ease,
		height var(--duration-normal) ease,
		transform var(--duration-fast) ease-out;
}

.cursor-dot {
	width: var(--custom-cursor-dot-size);
	height: var(--custom-cursor-dot-size);
	background: var(--color-accent-primary);
	box-shadow: var(--shadow-cursor-dot);
	transition:
		opacity var(--duration-normal) ease,
		width var(--duration-fast) ease,
		height var(--duration-fast) ease,
		background var(--duration-fast) ease;
}

/* Hover state: ring si espande, dot scompare */
.cursor-ring.hover {
	width: var(--custom-cursor-ring-size-hover);
	height: var(--custom-cursor-ring-size-hover);
	background: rgba(var(--color-accent-primary-rgb), 0.1);
	border-color: var(--color-accent-secondary);
	box-shadow: var(--shadow-cursor-ring-hover);
}

.cursor-dot.hover {
	width: 0;
	height: 0;
	opacity: 0;
}

.cursor-visible {
	opacity: 1;
}

/* Nasconde cursore nativo solo su desktop con puntatore fine */
@media (hover: hover) and (pointer: fine) {
	body,
	a,
	button {
		cursor: none;
	}
}

/* Nasconde cursori custom su touch device */
@media (hover: none) {
	.cursor-dot,
	.cursor-ring {
		display: none !important;
	}
}

/* ============================================================================
   SCANLINES / CRT EFFECT
   ---------------------------------------------------------------------------
   Overlay che simula un monitor CRT con:
   - Linee orizzontali ripetute (scanlines)
   - Gradient verticale per effetto tubo catodico
   - Scanline luminosa in movimento (::before)
   - Vignettatura radiale per effetto monitor curvo (::after)
   
   Usa transform per l'animazione della scanline (GPU-accelerated).
   ============================================================================ */
#scanlines {
	position: fixed;
	inset: 0;
	pointer-events: none;
	z-index: var(--z-scanlines);
	background:
		repeating-linear-gradient(
			0deg,
			rgba(0, 0, 0, 0.2) 0px,
			rgba(0, 0, 0, 0.2) 1px,
			transparent 1px,
			transparent 3px
		),
		linear-gradient(
			to bottom,
			rgba(var(--color-accent-primary-rgb), var(--opacity-scanline-subtle)) 0%,
			transparent 50%,
			rgba(var(--color-accent-primary-rgb), var(--opacity-scanline-subtle)) 100%
		);
	opacity: 0;
	animation:
		scanlines-boot var(--duration-slow) ease-out var(--delay-scanlines-boot)
			forwards,
		scanline-flicker var(--duration-scanline) ease-in-out
			var(--delay-scanlines-flicker) infinite;
}

/* Scanline luminosa in movimento verticale */
#scanlines::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: var(--scanline-height);
	background: linear-gradient(
		to bottom,
		transparent,
		rgba(var(--color-accent-primary-rgb), 0.04),
		rgba(var(--color-accent-primary-rgb), 0.08),
		rgba(var(--color-accent-primary-rgb), 0.04),
		transparent
	);
	animation: scanline-move var(--duration-scanline) var(--ease-linear) infinite;
	opacity: var(--opacity-scanline-line);
	will-change: transform; /* Hint al browser per ottimizzazione GPU */
}

/* Vignettatura radiale per effetto monitor curvo */
#scanlines::after {
	content: "";
	position: absolute;
	inset: 0;
	background: radial-gradient(
		ellipse at center,
		transparent 60%,
		rgba(0, 0, 0, var(--opacity-vignette)) 100%
	);
	pointer-events: none;
}

/* ============================================================================
   TERMINAL CONTAINER
   ---------------------------------------------------------------------------
   Box principale del sito. Nessun border-radius per mantenere estetica HUD.
   ============================================================================ */
.terminal {
	width: var(--container-width);
	background: var(--color-bg-terminal);
	border: var(--border-width) solid var(--color-border-terminal);
	border-radius: var(--border-radius-none);
	padding: var(--space-terminal-y-top) var(--space-terminal-x)
		var(--space-terminal-y-bottom);
	box-shadow: var(--shadow-terminal)
		rgba(var(--color-accent-primary-rgb), var(--opacity-glow-subtle));
	position: relative;
	text-align: center;
	z-index: var(--z-terminal);
	animation: terminal-boot var(--duration-slower) var(--ease-out-expo) backwards;
}

/* ============================================================================
   CORNER BRACKETS
   ---------------------------------------------------------------------------
   I quattro corner brackets HUD. Ogni angolo è uno <span> con ::before e ::after
   per le due linee perpendicolari.
   
   Il posizionamento usa calc(var(--border-width) * -1) per allineamento perfetto
   con il bordo di 1px del terminal.
   ============================================================================ */
.corner {
	position: absolute;
	width: var(--corner-size);
	height: var(--corner-size);
	pointer-events: none;
	will-change: transform; /* Ottimizzazione animazione di boot */
	animation: corner-boot var(--duration-normal) var(--ease-bounce) backwards;
}

.corner::before,
.corner::after {
	content: "";
	position: absolute;
	background: var(--color-accent-primary);
	box-shadow: var(--shadow-glow-xs) var(--color-accent-primary);
}

/* Top-Left */
.corner.tl {
	top: calc(var(--border-width) * -1);
	left: calc(var(--border-width) * -1);
	animation-delay: var(--delay-corner-1);
	transform-origin: top left;
}
.corner.tl::before {
	top: 0;
	left: 0;
	width: 100%;
	height: var(--corner-line-width);
}
.corner.tl::after {
	top: 0;
	left: 0;
	width: var(--corner-line-width);
	height: 100%;
}

/* Top-Right */
.corner.tr {
	top: calc(var(--border-width) * -1);
	right: calc(var(--border-width) * -1);
	animation-delay: var(--delay-corner-2);
	transform-origin: top right;
}
.corner.tr::before {
	top: 0;
	right: 0;
	width: 100%;
	height: var(--corner-line-width);
}
.corner.tr::after {
	top: 0;
	right: 0;
	width: var(--corner-line-width);
	height: 100%;
}

/* Bottom-Left */
.corner.bl {
	bottom: calc(var(--border-width) * -1);
	left: calc(var(--border-width) * -1);
	animation-delay: var(--delay-corner-3);
	transform-origin: bottom left;
}
.corner.bl::before {
	bottom: 0;
	left: 0;
	width: 100%;
	height: var(--corner-line-width);
}
.corner.bl::after {
	bottom: 0;
	left: 0;
	width: var(--corner-line-width);
	height: 100%;
}

/* Bottom-Right */
.corner.br {
	bottom: calc(var(--border-width) * -1);
	right: calc(var(--border-width) * -1);
	animation-delay: var(--delay-corner-4);
	transform-origin: bottom right;
}
.corner.br::before {
	bottom: 0;
	right: 0;
	width: 100%;
	height: var(--corner-line-width);
}
.corner.br::after {
	bottom: 0;
	right: 0;
	width: var(--corner-line-width);
	height: 100%;
}

/* ============================================================================
   TYPOGRAPHY - Title & Subtitle
   ---------------------------------------------------------------------------
   Titolo "XIZZAN": HUD reveal da sinistra a destra con scan beam (::after).
   Subtitle "// web developer" con "//" generato via CSS per perfetto centraggio.
   ============================================================================ */
h1 {
	position: relative;
	display: inline-block;
	font-size: var(--text-xl);
	font-weight: var(--font-weight-bold);
	color: var(--color-accent-primary);
	text-shadow: var(--shadow-title);
	letter-spacing: var(--tracking-wide);
	margin-bottom: var(--space-2xs);
	font-family: var(--font-family-mono);
	animation: h1-reveal var(--duration-title) var(--ease-out-expo)
		var(--delay-title) backwards;
}

/* Scan beam: barra luminosa che attraversa il titolo durante il reveal */
h1::after {
	content: "";
	position: absolute;
	top: -10%;
	width: 4px;
	height: 120%;
	background: linear-gradient(
		to bottom,
		transparent,
		var(--color-accent-primary) 30%,
		var(--color-accent-primary) 70%,
		transparent
	);
	box-shadow:
		0 0 12px var(--color-accent-primary),
		0 0 24px rgba(var(--color-accent-primary-rgb), 0.6);
	opacity: 0;
	animation: h1-beam var(--duration-title) var(--ease-out-expo)
		var(--delay-title) forwards;
	pointer-events: none;
}

.sub {
	color: var(--color-text-primary);
	font-size: var(--text-sm);
	letter-spacing: var(--tracking-widest);
	margin-bottom: var(--space-lg);
	animation: fade-up var(--duration-slow) ease-out var(--delay-sub) backwards;
}

/* "// " generato via CSS per mantenere perfetto centraggio del testo */
.sub::before {
	content: "// ";
	color: var(--color-text-muted);
}

/* ============================================================================
   DIVIDER
   ---------------------------------------------------------------------------
   Linea orizzontale con gradient e glow, espansione da width:0 a full.
   ============================================================================ */
.divider {
	width: var(--divider-width);
	height: var(--divider-height);
	background: linear-gradient(
		90deg,
		transparent,
		var(--color-accent-primary),
		transparent
	);
	margin: var(--space-lg) auto;
	box-shadow: var(--shadow-glow-md) rgba(var(--color-accent-primary-rgb), 0.3);
	animation: divider-boot var(--duration-slower) var(--ease-out-expo)
		var(--delay-divider) backwards;
}

/* ============================================================================
   TAGLINE
   ---------------------------------------------------------------------------
   Testo principale della bio. min-height previene layout shift durante il
   typewriter. white-space: pre-line preserva eventuali \n nel testo.
   ============================================================================ */
.tagline {
	color: var(--color-text-secondary);
	font-size: var(--text-base);
	letter-spacing: var(--tracking-tight);
	margin-bottom: var(--space-xl);
	line-height: var(--leading-normal);
	text-align: center;
	white-space: pre-line;
	min-height: var(--tagline-min-height);
}

/* Highlight colorati per parole chiave nella tagline */
.tagline .highlight {
	color: var(--color-accent-tertiary);
	text-shadow: var(--shadow-text-glow-sm)
		rgba(var(--color-accent-tertiary-rgb), 0.2);
}

.tagline .highlight-morrowind {
	color: var(--color-accent-success);
	text-shadow: var(--shadow-text-glow-sm)
		rgba(var(--color-accent-success-rgb), 0.2);
}

/* ============================================================================
   SOCIAL LINKS
   ---------------------------------------------------------------------------
   Lista flex con separatori ◈ rosa tra i link.
   Ogni link appare con staggered animation.
   ============================================================================ */
.social {
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-sm);
	margin-top: var(--space-2xs);
	list-style: none;
}

.social li {
	display: flex;
	align-items: center;
	animation: social-boot var(--duration-normal) ease-out backwards;
}

/* Staggered delay per entrata in sequenza */
.social li:nth-child(1) {
	animation-delay: var(--delay-social-base);
}
.social li:nth-child(2) {
	animation-delay: calc(
		var(--delay-social-base) + var(--delay-social-stagger) * 1
	);
}
.social li:nth-child(3) {
	animation-delay: calc(
		var(--delay-social-base) + var(--delay-social-stagger) * 2
	);
}
.social li:nth-child(4) {
	animation-delay: calc(
		var(--delay-social-base) + var(--delay-social-stagger) * 3
	);
}
.social li:nth-child(5) {
	animation-delay: calc(
		var(--delay-social-base) + var(--delay-social-stagger) * 4
	);
}
.social li:nth-child(6) {
	animation-delay: calc(
		var(--delay-social-base) + var(--delay-social-stagger) * 5
	);
}
.social li:nth-child(7) {
	animation-delay: calc(
		var(--delay-social-base) + var(--delay-social-stagger) * 6
	);
}

/* Separatore ◈ tra i link */
.social .sep {
	color: var(--color-accent-secondary);
	font-size: var(--text-2xs);
	user-select: none;
}

.social a {
	color: var(--color-text-secondary);
	text-decoration: none;
	font-size: var(--text-sm);
	letter-spacing: var(--tracking-normal);
	padding: var(--space-social-link-py) 0;
	border-bottom: var(--border-width) solid transparent;
	transition: all var(--duration-normal) ease;
}

.social a:hover,
.social a:focus-visible {
	color: var(--color-accent-primary);
	border-bottom-color: var(--color-accent-primary);
	text-shadow: var(--shadow-text-glow-lg)
		rgba(var(--color-accent-primary-rgb), 0.2);
	outline: none;
}

/* ============================================================================
   FOOTER
   ---------------------------------------------------------------------------
   LED pulsante verde + testo "SYSTEM READY" che diventa
   "SYSTEM COMPROMISED" dopo attivazione Konami.
   ============================================================================ */
.footer {
	display: inline-flex;
	align-items: center;
	gap: var(--space-xs);
	margin-top: var(--space-footer-mt);
	font-size: var(--text-xs);
	color: var(--color-text-faint);
	letter-spacing: var(--tracking-wider);
	animation: fade-up var(--duration-slow) ease-out var(--delay-footer) backwards;
}

.footer .led {
	width: var(--led-size);
	height: var(--led-size);
	background: var(--color-accent-success);
	border-radius: var(--border-radius-full);
	box-shadow: var(--shadow-glow-sm) var(--color-accent-success);
	animation: pulse var(--duration-pulse) ease-in-out infinite;
}

/* ============================================================================
   BLOCK CURSOR (Terminal-style cursor per typewriter)
   ---------------------------------------------------------------------------
   Cursor a blocchetto che segue la scrittura della tagline.
   Stati: default (invisibile), .typing (fisso durante scrittura),
          .blink (lampeggiante dopo completamento).
   ============================================================================ */
.cursor {
	display: inline-block;
	width: var(--cursor-block-width);
	height: var(--cursor-block-height);
	background: var(--color-accent-primary);
	margin-left: var(--cursor-block-ml);
	vertical-align: baseline;
	position: relative;
	top: var(--cursor-block-offset);
	opacity: 0;
}

.cursor.typing {
	opacity: 1;
	animation: cursor-appear var(--duration-normal) ease-out;
}

.cursor.blink {
	opacity: 1;
	animation: blink var(--duration-blink) var(--ease-step) infinite;
}

/* ============================================================================
   ACCESSIBILITY - prefers-reduced-motion
   ---------------------------------------------------------------------------
   Disabilita tutte le animazioni per utenti con sensibilità al movimento.
   Mostra il contenuto staticamente senza alcuna transizione.
   ============================================================================ */
@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: var(--duration-instant) !important;
		animation-iteration-count: 1 !important;
		transition-duration: var(--duration-instant) !important;
		animation-delay: 0s !important;
	}

	#scanlines {
		display: none;
	}

	h1::after {
		display: none;
	}

	/* Il cursore block resta visibile e lampeggiante (accessibile) */
	.cursor {
		opacity: 1;
		animation: blink var(--duration-blink) var(--ease-step) infinite;
	}

	.cursor-dot,
	.cursor-ring {
		display: none;
	}

	#digitalRain {
		display: none;
	}
}