:root{
  --bg: rgba(255,255,255,0.04);
  --stroke: rgba(255,255,255,0.08);
  --text: #e8f3ee;
  --muted: #9fb8ac;
  --accent: #68fd85;

  /* avatar controls */
  --avatar-size: clamp(96px, 12vw, 128px);
  --avatar-radius: 12px;
  --avatar-pos-y: 6%;
}

html{ scroll-behavior: smooth; }
*{ box-sizing: border-box; }
html, body { overflow-x: hidden; }

body{
  margin:0; color: var(--text);
  font-family: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, 'Helvetica Neue', Arial, sans-serif;
  font-size: clamp(15px, 1.8vw, 18px);
  line-height: 1.55;
  background:
    radial-gradient(900px 600px at 20% 10%, #0b1220 0%, #05070b 40%, #000 100%),
    radial-gradient(2px 2px at 20% 30%, rgba(255,255,255,.14), transparent 40%),
    radial-gradient(1.5px 1.5px at 70% 60%, rgba(255,255,255,.1), transparent 45%);
  background-attachment: fixed;
  animation: twinkle 14s linear infinite;
  cursor: auto !important;
}
@keyframes twinkle{
  0%   { background-position: 0 0, 0 0, 0 0; }
  100% { background-position: 0 0, 250px 180px, -220px -160px; }
}

/* Glass utility (resto del sito) */
.glass{
  background: var(--bg);
  border:1px solid var(--stroke);
  backdrop-filter: blur(6px);
  box-shadow: 0 6px 24px rgba(0,0,0,.28);
  border-radius:16px;
}

/* ================= Header sopra a tutto ================= */
.site-header{
  position: sticky;     /* era: static */
  top: 0;
  width: 100%;
  margin: 0;
  padding: 8px 12px;
  border-radius: 0;
  z-index: 2000;        /* header sopra le sezioni */
}
.header-inner{
  max-width: 1200px;
  margin: 8px auto;
  padding: .6rem .9rem;
  display:flex; align-items:center; justify-content:space-between; gap: 12px;
  border-radius: 12px;
}
.glass-header .header-inner{
  position: relative;   /* nuovo: crea stacking per i figli */
  background: linear-gradient(135deg, rgba(255,255,255,0.10), rgba(255,255,255,0.00));
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,0.18);
  box-shadow: 0 8px 32px 0 rgba(0,0,0,0.37);
  z-index: 2100;        /* sopra a tutto ciò che segue */
}

.brand{ font-weight:800; letter-spacing:.5px; font-size: clamp(16px, 3.5vw, 20px); }
.brand span{ color: var(--accent); }
.nav{ display:flex; gap:.6rem; align-items:center; }
.nav-link{
  color: var(--muted); text-decoration:none; padding:.6rem .75rem; border-radius:10px;
  transition: background .15s ease, color .15s ease;
}
.nav-link:hover{ background: rgba(255,255,255,0.06); color: var(--text); }
.nav-cta{ margin-left:.5rem; }

/* Burger */
.menu-toggle{
  display:none; width:44px; height:44px; border-radius:12px; border:1px solid var(--stroke);
  background: rgba(255,255,255,0.06); padding:0; align-items:center; justify-content:center;
  position: relative; z-index: 2200; /* sopra al menu */
}
.menu-toggle .bar{
  display:block; width:20px; height:2px; background: var(--text);
  margin:3px auto; border-radius:2px; transition: transform .2s ease, opacity .2s ease;
}
.menu-open .bar:nth-child(2){ opacity:.0 }
.menu-open .bar:nth-child(1){ transform: translateY(5px) rotate(45deg) }
.menu-open .bar:nth-child(3){ transform: translateY(-5px) rotate(-45deg) }

/* Sezioni */
.section{
  position: relative; z-index: 1;
  padding: clamp(2.4rem, 5vw, 5rem) 1rem;
  max-width: 1200px; margin: 0 auto;
  scroll-margin-top: 84px;
}

/* ===== FX CARDS ===== */
.fx-cards{
  width: 100%;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(12px, 2.4vw, 28px);
  padding-top: .6rem;
}
.fx-card{
  position: relative;
  min-height: 240px;
  border-radius: 18px;
  text-decoration: none;
  color: var(--text);
  overflow: hidden;
  transition: transform .15s ease, box-shadow .15s ease;
}
.fx-card__content{
  position: relative; z-index: 1;
  display: grid; align-content: center; justify-items: start;
  gap: .35rem; padding: clamp(14px, 2.6vw, 20px);
  border-radius: inherit; background: rgba(10,14,20,.55);
}
.fx-card__anim{ width: clamp(120px, 28vw, 180px); aspect-ratio: 1/1; }
.fx-card__title{ margin: .1rem 0 0; font-weight: 800; font-size: clamp(1rem, 2.4vw, 1.2rem); }
.fx-card__desc{ margin: 0; color: var(--muted); font-size: .95rem; }
.fx-card__cta{
  margin-top: .5rem; padding: .5rem .75rem; border-radius: 10px;
  border: 1px solid var(--stroke); background: rgba(255,255,255,0.06);
  font-weight: 700; font-size: .9rem;
}
.fx-card::before{
  content:""; position:absolute; inset:0;
  background:
    radial-gradient( 460px circle at var(--mx, -1000px) var(--my, -1000px),
      color-mix(in hsl, var(--accent) 55%, transparent),
      transparent 40% );
  opacity: 0; transition: opacity .15s ease;
}
.fx-card:hover::before,
.fx-card:focus-visible::before{ opacity: .9; }
.fx-card:hover{ transform: translateY(-2px); }

/* 2 colonne */
.two-col{
  display:grid; grid-template-columns: 1.2fr 1fr;
  gap: clamp(16px, 4vw, 40px); align-items:center;
}
.two-col .col.media{ display:flex; justify-content:center; }
.section .content{ padding: clamp(14px, 2.6vw, 24px); border-radius: 18px; }

/* Intro: avatar più grande e alto */
.avatar{
  width: var(--avatar-size);
  height: calc(var(--avatar-size) * 1.2);
  aspect-ratio: 3 / 4;
  object-fit: cover;
  object-position: 50% var(--avatar-pos-y);
  border-radius: var(--avatar-radius);
  border:1px solid var(--stroke);
  background:#0a0f15;
}
.subtitle{ color: var(--muted); margin:.2rem 0 1rem; }
.id-card{ display:flex; align-items:center; gap: 14px; margin-bottom: 10px; }
.list{ line-height:1.6; display:grid; gap:.7rem; padding-left: 1rem; }
.actions{ margin-top:.5rem; }

/* Skills */
.tags{
  display:flex; flex-wrap:wrap; gap:.5rem; padding:0; list-style:none; margin-top:1rem;
}
.tags li{
  padding:.55rem .8rem; border-radius: 12px;
  background: rgba(255,255,255,0.06); border:1px solid var(--stroke);
  color: var(--muted);
}

/* Portfolio */
.portfolio{
  display:grid; grid-template-columns: 1fr 1fr;
  align-items:center; gap: clamp(16px, 4vw, 56px);
}
.dna{ display:flex; justify-content:center; }
.timeline{ display:grid; gap: 14px; }
.node{
  position: relative; padding: .9rem 1rem; border-radius: 14px;
  text-decoration:none; color:var(--text);
  transition: transform .15s ease, background .15s ease;
}
.node:hover{ transform: translateY(-1px); background: rgba(255,255,255,0.04); }

/* Tooltip */
.tooltip{
  position: fixed; left:0; top:0; transform: translate(-50%, -150%);
  opacity:0; pointer-events:none;
  background:#0b1320; border:1px solid var(--stroke);
  padding:.6rem .8rem; border-radius:10px; font-size:.9rem; max-width: 280px; z-index: 100;
}
.tooltip h4{ margin:.1rem 0 .3rem; font-size:1rem; }
.tooltip p{ margin:0; color: var(--muted); }

/* Form */
.form{ display:grid; gap:.7rem; }
.form .grid{ display:grid; grid-template-columns: 1fr 1fr; gap:.7rem; }
.form input, .form select, .form textarea{
  width:100%; padding:1rem 1rem; border-radius:12px;
  border:1px solid var(--stroke); background: rgba(10,14,20,.5); color:var(--text);
}
.form input::placeholder, .form textarea::placeholder{ color:#9ab; }
.footnote{ color: var(--muted); font-size:.85rem; margin:.2rem 0 0; }

/* Footer */
.site-footer{ text-align:center; color: var(--muted); padding: 3rem 1rem 5rem; }

/* Reveal */
.reveal{ opacity: 0; transform: translateY(14px); transition: opacity .45s ease, transform .45s ease; }
.reveal.in-view{ opacity: 1; transform: none; }

/* Fallback no-JS */
html.no-js .reveal { opacity: 1 !important; transform: none !important; }

/* Riduci motion */
@media (prefers-reduced-motion: reduce){
  *{ animation: none !important; transition: none !important; }
}

/* ================= Responsive ================= */
@media (max-width: 1200px){
  .fx-cards{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 720px){
  .menu-toggle{ display:flex; }

  /* Menu mobile: sopra a tutto */
  .nav{
    position: fixed;
    top: 72px; left: 8px; right: 8px;
    display: grid; gap: 8px; padding: 10px;
    background: rgba(10,14,20,0.82);
    border:1px solid var(--stroke); border-radius: 14px;
    transform: translateY(-8px);
    opacity:0; pointer-events:none;
    backdrop-filter: blur(6px);
    z-index: 3000;   /* <<< IMPORTANTE: menu sopra a ogni contenuto */
  }
  .nav-cta{ width: 100%; }
  .site-header.menu-open .nav{
    transform: translateY(0); opacity:1; pointer-events: auto;
  }

  .two-col{ grid-template-columns: 1fr; }
  .fx-card__anim{ width: clamp(140px, 55vw, 180px); }
  .section{ padding: 2rem 1rem; scroll-margin-top: 72px; }

  /* avatar su mobile */
  :root{
    --avatar-size: clamp(100px, 36vw, 160px);
    --avatar-pos-y: 4%;
  }

  .form .grid{ grid-template-columns: 1fr; }
}

@media (max-width: 420px){
  .btn{ width:100%; }
}

/* Kill cursori custom residui */
#cursor, #cursorPt { display: none !important; visibility: hidden !important; opacity: 0 !important; }

/* Fallback desktop portfolio */
#portfolio .reveal { opacity: 1 !important; transform: none !important; }

/* Click-through per le animazioni Lottie */
dotlottie-wc, dotlottie-player, .lottie { pointer-events: none; }