/* base.css — reset, variabili di tema (palette, dark, accent), sfondo mesh.
   Caricato per primo. Le classi del logo/avatar arrivano in Fase 2. */

:root {
  --violet: #7c3aed;
  --violet-glow: rgba(124, 58, 237, 0.45);
  --pink: #ec4899;
  --cyan: #22d3ee;
  --bg: #0a0a10;
  --panel: rgba(22, 22, 34, 0.55);
  --panel-border: rgba(255, 255, 255, 0.07);
  --panel-border-strong: rgba(255, 255, 255, 0.12);
  --text: #e9e9f6;
  --text-dim: rgba(229, 229, 245, 0.55);
}

* { -webkit-tap-highlight-color: transparent; box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body {
  font-family: 'Inter', system-ui, sans-serif;
  background: var(--bg);
  color: var(--text);
  overflow-x: hidden;
  font-feature-settings: 'cv11', 'ss01';
  -webkit-font-smoothing: antialiased;
}

/* Safety net: .hidden nasconde (Tailwind lo definisce già; ridondante e innocuo). */
.hidden { display: none !important; }

/* ===== Sfondo mesh gradient animato ===== */
.mesh-bg {
  position: fixed;
  inset: -10%;
  z-index: -1;
  filter: blur(80px) saturate(1.1);
  opacity: 0.55;
  pointer-events: none;
}
.mesh-bg::before, .mesh-bg::after, .mesh-bg > span {
  content: '';
  position: absolute;
  border-radius: 50%;
  animation: meshDrift 24s ease-in-out infinite;
}
.mesh-bg::before {
  width: 60vmax; height: 60vmax;
  background: radial-gradient(circle, #7c3aed 0%, transparent 60%);
  top: -10%; left: -10%;
}
.mesh-bg::after {
  width: 55vmax; height: 55vmax;
  background: radial-gradient(circle, #ec4899 0%, transparent 60%);
  bottom: -15%; right: -10%;
  animation-delay: -8s;
}
.mesh-bg > span {
  width: 45vmax; height: 45vmax;
  background: radial-gradient(circle, #22d3ee 0%, transparent 60%);
  top: 30%; left: 40%;
  animation-delay: -16s;
  opacity: 0.6;
}
@keyframes meshDrift {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
  33% { transform: translate3d(4%, -3%, 0) scale(1.08); }
  66% { transform: translate3d(-3%, 3%, 0) scale(0.95); }
}

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

/* ===== Marchio Horologio — orologio minimale, montato da js/logo.js ===== */
.logo { display: block; position: relative; }
.logosvg {
  display: block; width: 100%; height: 100%;
  filter: drop-shadow(0 2px 8px rgba(124, 58, 237, 0.5));
}
/* La tacca rosa orbita via SMIL <animateTransform> dentro l'SVG (vedi
   js/logo.js): è il battito di Horologio, deve girare sempre. SMIL non è
   soggetto a prefers-reduced-motion — con battery saver / "rimuovi
   animazioni" attivi un'animazione CSS si fermerebbe, qui no. */