/* ===================================================================
   Fabio Alpha — CSS custom (tokens, utilitaires, animations)
   Chargé après tailwind.css : peut surcharger sans conflit.
   =================================================================== */

:root {
	--fa-lime: #DFFF00;
	--fa-font-display: "Cormorant Garamond", serif;
	--fa-font-sans: "Montserrat", system-ui, sans-serif;
}

/* ---- Utilitaires couleur custom (équivalent des @utility d'origine) ---- */
.text-accent-lime { color: var(--fa-lime); }
.bg-accent-lime { background-color: var(--fa-lime); }
.border-accent-lime { border-color: var(--fa-lime); }

/* ---- Polices custom (équivalent font-display / font-sans) ---- */
.font-display { font-family: var(--fa-font-display); }
.font-sans { font-family: var(--fa-font-sans); }

/* ---- Base ---- */
html { scroll-behavior: smooth; }
body {
	background-color: #0B0B0B;
	color: #FFFFFF;
	font-family: var(--fa-font-sans);
	font-size: 16px;
	line-height: 1.7;
	cursor: none;
}
h1, h2, h3, h4 {
	font-family: var(--fa-font-display);
	font-weight: 500;
	letter-spacing: -0.01em;
	line-height: 1.05;
}
a, button { cursor: none; }
@media (max-width: 768px) {
	body, a, button { cursor: auto; }
	#fa-cursor-ring, #fa-cursor-dot { display: none !important; }
}

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

/* ---- Noise overlay ---- */
.noise { position: relative; }
.noise::before {
	content: "";
	position: fixed;
	inset: 0;
	pointer-events: none;
	z-index: 1;
	opacity: 0.06;
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
	mix-blend-mode: overlay;
}

/* ---- Marquee ---- */
@keyframes fa-marquee { 0% { transform: translateX(0); } 100% { transform: translateX(-25%); } }
.animate-marquee { animation: fa-marquee 30s linear infinite; }

/* ---- Scrollbar ---- */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: #0B0B0B; }
::-webkit-scrollbar-thumb { background: #1f1f1f; }
::-webkit-scrollbar-thumb:hover { background: var(--fa-lime); }
::selection { background: var(--fa-lime); color: #0B0B0B; }

/* ===================================================================
   Animations — équivalents Framer Motion en CSS pur / JS léger
   =================================================================== */

/* Hero : révélation de lignes de texte */
.fa-line-reveal {
	transform: translateY(110%);
	opacity: 1;
	animation: fa-line-in 1s cubic-bezier(.77,0,.18,1) forwards;
	animation-delay: var(--fa-delay, 0s);
}
@keyframes fa-line-in { to { transform: translateY(0); } }

.fa-fade-in { opacity: 0; animation: fa-fade-in 0.6s ease forwards; animation-delay: var(--fa-delay, 0s); }
@keyframes fa-fade-in { to { opacity: 1; } }

.fa-fade-up { opacity: 0; transform: translateY(20px); animation: fa-fade-up 0.8s ease forwards; animation-delay: var(--fa-delay, 0s); }
@keyframes fa-fade-up { to { opacity: 1; transform: translateY(0); } }

/* Formes flottantes du Hero */
.fa-spin-slow { animation: fa-spin 40s linear infinite; }
@keyframes fa-spin { to { transform: rotate(360deg); } }

.fa-float-y { animation: fa-float-y 8s ease-in-out infinite; }
@keyframes fa-float-y { 0%,100% { transform: translateY(0); } 50% { transform: translateY(30px); } }

.fa-rotate-wobble { animation: fa-rotate-wobble 12s ease-in-out infinite; }
@keyframes fa-rotate-wobble { 0%,100% { transform: rotate(12deg); } 50% { transform: rotate(45deg); } }

.fa-pulse-dot { animation: fa-pulse-dot 2.5s infinite; }
@keyframes fa-pulse-dot { 0%,100% { opacity: 0.2; } 50% { opacity: 1; } }

.fa-scroll-line { transform-origin: top; animation: fa-scroll-line 2s infinite; }
@keyframes fa-scroll-line { 0%,100% { transform: scaleY(0.3); } 50% { transform: scaleY(1); } }

.fa-pulse-scale { animation: fa-pulse-scale 10s infinite; }
@keyframes fa-pulse-scale { 0%,100% { transform: scale(1); } 50% { transform: scale(1.2); } }

/* Reveal on scroll (déclenché en JS via IntersectionObserver, classe .is-visible ajoutée) */
.fa-reveal { opacity: 0; transform: translateY(30px); transition: opacity 0.8s ease, transform 0.8s ease; transition-delay: var(--fa-delay, 0s); }
.fa-reveal.is-visible { opacity: 1; transform: translateY(0); }

.fa-reveal-x { opacity: 0; transform: translateX(30px); transition: opacity 0.6s ease, transform 0.6s ease; transition-delay: var(--fa-delay, 0s); }
.fa-reveal-x.is-visible { opacity: 1; transform: translateX(0); }

.fa-reveal-scale { opacity: 0; transform: scale(0.95); transition: opacity 1s ease, transform 1s ease; }
.fa-reveal-scale.is-visible { opacity: 1; transform: scale(1); }

.fa-icon-hover { transition: transform 0.3s ease; }
.group:hover .fa-icon-hover { transform: rotate(12deg) scale(1.1); }

/* Skill bar : largeur animée au scroll */
.fa-skill-bar { width: 0; transition: width 1.2s cubic-bezier(.77,0,.18,1); transition-delay: var(--fa-delay, 0s); }
.fa-skill-bar.is-visible { width: var(--fa-pct, 0%); }

/* Timeline dot : pulsation continue */
.fa-timeline-dot { animation: fa-timeline-pulse 2s infinite; animation-delay: var(--fa-delay, 0s); }
@keyframes fa-timeline-pulse { 0%,100% { transform: scale(1); opacity: 0.6; } 50% { transform: scale(1.4); opacity: 1; } }

/* Nav : entrée au chargement */
.fa-nav-enter { opacity: 0; transform: translateY(-40px); animation: fa-nav-in 0.8s ease forwards; animation-delay: 2.2s; }
@keyframes fa-nav-in { to { opacity: 1; transform: translateY(0); } }

/* Loader */
#fa-loader { transition: opacity 0.6s ease-in-out; }
#fa-loader.fa-loader-hide { opacity: 0; pointer-events: none; }
#fa-loader-title { transform: translateY(110%); animation: fa-line-in 0.9s cubic-bezier(.77,0,.18,1) forwards; animation-delay: 0.2s; }
#fa-loader-bar { width: 0; animation: fa-loader-bar 1.6s ease-in-out forwards; }
@keyframes fa-loader-bar { to { width: 100%; } }

/* Portfolio : items filtrés cachés */
.fa-portfolio-item.fa-hidden { display: none; }

/* Bouton mailto de repli (si CF7 absent) */
.fa-btn-primary {
	display: inline-flex; align-items: center; gap: 1rem;
	background: var(--fa-lime); color: #000;
	padding: 1.25rem 2.5rem; font-size: 0.875rem;
	text-transform: uppercase; letter-spacing: 0.25em; font-weight: 500;
	transition: transform 0.2s ease;
}
.fa-btn-primary:hover { transform: scale(1.03); }