:root{
  /* Palette */
  --page-bg: linear-gradient(180deg,#a2dff7,#005ea2);
  --accent:#005ea2;
  --testi:#f1f5f9;
  --ink:#000;
  --muted:#f8fafc;
  --card:#ffffff;
  --line:#e9eaee;

  /* Navbar */
  --nav-bg: rgba(10,14,18,.98);
  --nav-bg-scrolled: rgba(10,14,18,.78);
  --nav-text:#fff;
  --nav-pad-x: 10px;   /* deve essere uguale al padding orizzontale della navbar */
  --nav-radius: 20px;     /* raggio angoli navbar */

  --particle-color: rgba(255, 255, 255, 0.9); 
  --particle-color-2: rgba(230, 230, 230, 0.6); 
  --particle-size-min: 6px;   /* minimo 6px */
  --particle-size-max: 14px;  /* massimo 14px */
  --particle-count-desktop: 120; /* più palline */
  --particle-count-mobile: 60;   /* metà su mobile */
}

/* Reset base */
*{box-sizing:border-box}
html,body{margin:0;padding:0}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} }

/* Tipografia e fondo */
body{
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color:var(--ink);
  background:var(--page-bg);
  transition:background 600ms ease;
  line-height:1.6;
  min-height:100vh;
  display:flex; flex-direction:column;
  padding-top:96px; /* spazio sotto navbar fixed */
}

/* Helpers */
.container{max-width:1100px;margin:0 auto;padding:0 16px}
.section{padding:96px 0}
.skip-link{position:absolute;left:-9999px}
.skip-link:focus{left:16px;top:16px;background:#000;color:#fff;padding:8px 12px;border-radius:8px;z-index:999}


@media (prefers-color-scheme: light){
  /* su sfondi chiari usa puntini più scuri e più trasparenti */
  :root{
    --particle-color: rgba(0,0,0,0.20);
    --particle-color-2: rgba(0,0,0,0.10);
  }
}

/* Layer globale di particelle */
#particles-bg{
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: -1;          /* dietro al contenuto; se non si vede, vedi la nota sotto */
  overflow: hidden;
  transform: translateZ(0);
  will-change: transform;
  contain: layout paint;  /* (o almeno: contain: paint;) */
}

/* Il singolo puntino */
#particles-bg span{
  position: absolute;
  display: block;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, rgba(255,255,255,0.9), rgba(255,255,255,0.05));
  opacity: 0.6;
  will-change: transform, opacity;
  animation: floatUp linear infinite;
  box-shadow: 0 0 12px rgba(255,255,255,0.4); /* glow più soft */
  filter: blur(1px); /* effetto “vetro” */
}

#particles-bg span.alt {
  background: radial-gradient(circle at 30% 30%, rgba(200,230,255,0.8), rgba(200,230,255,0.05));
  opacity: 0.5;
}

@keyframes floatUp{
  0%   { transform: translate3d(var(--x,0), 110vh, 0) scale(var(--s,1)); opacity: 0; }
  10%  { opacity: 0.7; }
  50%  { transform: translate3d(calc(var(--x,0) + var(--drift, 40px)), 50vh, 0) scale(calc(var(--s,1) * 1.1)); }
  100% { transform: translate3d(var(--x,0), -10vh, 0) scale(calc(var(--s,1) * 0.8)); opacity: 0; }
}

/* Riduci quantità su schermi piccoli */
@media (max-width: 768px){
  :root{ --particle-count-desktop: var(--particle-count-mobile); }
}

/* Accessibilità: se l’utente disattiva animazioni, rendi statico e molto tenue */
@media (prefers-reduced-motion: reduce){
  #particles-bg span{
    animation: none !important;
    opacity: 0.15;
    transform: translateY(0) !important;
  }
}








/* --- Anti overflow orizzontale globale --- */
html, body {
  max-width: 100%;
  overflow-x: hidden;
}

/* Media responsive: niente elementi più larghi del viewport */
img, svg, canvas, video {
  max-width: 100%;
  height: auto;
  display: block;
}

/* Contenitori: evita che spingano fuori */
.container {
  width: 100%;
  overflow-x: hidden;
}

/* (opzionale) Se qualche sezione crea ancora micro-scroll */
.section { overflow-x: hidden; }

/* ===== DARK MODE ===== */
[data-theme="dark"] {
  --page-bg: linear-gradient(180deg, #0d1117, #0a0e1a);
  --card: #161b27;
  --line: #2a2f42;
  --ink: #f1f5f9;
  --muted: #cbd5e1;
  --accent: #4a9eff;
  --nav-bg: rgba(5,7,12,.98);
  --nav-bg-scrolled: rgba(5,7,12,.78);
}
[data-theme="dark"] body { color: var(--ink); }
[data-theme="dark"] .section-title { color: #f1f5f9; }
[data-theme="dark"] .section-desc { color: #94a3b8; }
[data-theme="dark"] .about-desc { color: #cbd5e1; }
[data-theme="dark"] .about-desc strong { color: #e2e8f0; }
[data-theme="dark"] .hero-title { color: #f1f5f9; }
[data-theme="dark"] .hero-role { color: #94a3b8; }
[data-theme="dark"] .card { background: var(--card); border-color: var(--line); }
[data-theme="dark"] .card h3 { color: #e2e8f0; }
[data-theme="dark"] .card p { color: #94a3b8; }
[data-theme="dark"] .t-item { background: var(--card); border-color: var(--line); color: #cbd5e1; }
[data-theme="dark"] .t-year { color: #94a3b8; }
[data-theme="dark"] .t-body strong { color: #e2e8f0; }
[data-theme="dark"] .t-body ul { color: #94a3b8; }
[data-theme="dark"] .skills .grid > div { background: var(--card); border-color: var(--line); }
[data-theme="dark"] .skills h3 { color: #e2e8f0; }
[data-theme="dark"] .bullets li { color: #94a3b8; }
[data-theme="dark"] .skill-bar__name { color: #e2e8f0; }
[data-theme="dark"] .skill-bar__level { color: #7eb4ff; }
[data-theme="dark"] .skill-bar__track { background: #2a2f42; }
[data-theme="dark"] .cert-card { background: var(--card); border-color: var(--line); }
[data-theme="dark"] .cert-card h3 { color: #e2e8f0; }
[data-theme="dark"] .cert-card p { color: #94a3b8; }
[data-theme="dark"] .cert-logo { background: #1e2438; }
[data-theme="dark"] .case-feature { background: linear-gradient(130deg, var(--card), #1a2035); border-color: var(--line); }
[data-theme="dark"] .case-feature__body h3 { color: #e2e8f0; }
[data-theme="dark"] .case-feature__body p { color: #94a3b8; }
[data-theme="dark"] .case-stat { background: linear-gradient(145deg,rgba(74,158,255,.1),rgba(74,158,255,.05)); border-color: var(--line); }
[data-theme="dark"] .case-stat span { color: #7eb4ff; }
[data-theme="dark"] .case-stat strong { color: #e2e8f0; }
[data-theme="dark"] .case-meta li { background: var(--card); border-color: var(--line); }
[data-theme="dark"] .case-meta span { color: #7eb4ff; }
[data-theme="dark"] .case-meta p { color: #94a3b8; }
[data-theme="dark"] .case-card { background: linear-gradient(160deg, var(--card), #1a2035); border-color: var(--line); }
[data-theme="dark"] .case-card__body h3 { color: #e2e8f0; }
[data-theme="dark"] .case-card__body p { color: #94a3b8; }
[data-theme="dark"] .case-highlights { color: #94a3b8; }
[data-theme="dark"] .chip { background: rgba(74,158,255,.12); border-color: rgba(74,158,255,.25); color: #7eb4ff; }
[data-theme="dark"] .eyebrow { color: #7eb4ff; }
[data-theme="dark"] .section-head .section-desc { color: #94a3b8; }
[data-theme="dark"] .contact-form input,
[data-theme="dark"] .contact-form textarea { background: var(--card); border-color: var(--line); color: #f1f5f9; }
[data-theme="dark"] .btn-outline.btn-about { background: var(--card); border-color: var(--line); color: #f1f5f9; }