:root{
  --accent-1:#3aa3ff; --accent-2:#1dd1a1;
  --ink-1:#f3f6fb; --ink-2:#c9d2e1;
  --bg-0:#07080b; --bg-1:#0a0d12; --bg-2:#0a0b0f;
}

html,body{
  margin:0; min-height:100vh; color:var(--ink-1);
  font-family:'Inter',system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  background:
    radial-gradient(1200px 800px at 80% 10%, color-mix(in oklab, var(--accent-1) 14%, transparent) 0%, transparent 60%),
    radial-gradient(900px 700px at 10% 90%, color-mix(in oklab, var(--accent-2) 12%, transparent) 0%, transparent 60%),
    linear-gradient(180deg,var(--bg-0),var(--bg-1) 55%,var(--bg-2));
  background-attachment: fixed, fixed, fixed;
}
*{ box-sizing:border-box }

.hero--fullscreen{
  position:relative; min-height:100svh;
  display:grid; place-items:center; overflow:hidden; isolation:isolate;
  padding-inline:clamp(16px, 3vw, 40px);
}

/* H1 Marquee */
.hero-marquee{
  position:absolute; inset-inline:0; top:34svh;
  width:100vw; overflow:hidden; margin:0; padding:0; line-height:1;
  font-weight:600; letter-spacing:-.03em;
  font-size:clamp(36px, 8.6vw, 100px);
  color:#fff; text-align:center; pointer-events:none; z-index:3;
}
.hero-marquee .marquee-track{
  display:flex; gap:4vw; white-space:nowrap; justify-content:center; will-change:transform;
}
.hero-marquee .marquee-item{
  display:inline-flex; align-items:center; gap:.4em; color:#fff;
  opacity:0; padding-inline:1vw; transform:translateY(10px);
}

/* Social */
.social-left{
  position:absolute; left:clamp(16px, 8vw, 120px); bottom:clamp(16px, 6vw, 50px);
  z-index:4; pointer-events:auto;
}
.social-left ul{ list-style:none; margin:0; padding:0; display:grid; gap:8px; }
.social-left a{
  display:inline-flex; align-items:center; gap:8px;
  color:var(--ink-2); text-decoration:none; font-weight:600;
  font-size:clamp(14px,1.2vw,18px);
}
.social-left a:hover{ color:#fff; text-decoration:underline; }
.social-left .icon{ flex:0 0 auto; opacity:.9; }

/* Ruoli a destra */
.roles-right{
  position:absolute; right:clamp(16px, 8vw, 120px); bottom:clamp(16px, 6vw, 50px);
  z-index:4; display:flex; align-items:flex-start; gap:10px; pointer-events:none;
}
.roles-right .slashes{ font-weight:500; font-size:clamp(20px, 3vw, 40px); color:var(--ink-2); margin-top:2px; }
.roles-right .roles-lines{
  font-weight:500; letter-spacing:-.01em; line-height:1.2;
  font-size:clamp(22px, 4.6vw, 55px); color:#fff; text-align:right;
}

/* Canvas 3D */
.avatar-wrap{ width:100%; display:flex; justify-content:center; }
#avatar-container{
  position:relative; width:min(1100px,92vw);
  height:clamp(460px,80vh,860px);
  display:flex; align-items:center; justify-content:center;
  z-index:1; background:none; border:0; box-shadow:none;
  margin-top:clamp(24px, 6vh, 50px);
}
#avatar-container canvas{
  position:absolute; inset:0; width:100%!important; height:100%!important; display:block;
  touch-action:pan-y; -webkit-user-select:none; user-select:none; pointer-events:auto; z-index:5;
}
#avatar-loading{ font-size:1rem; color:var(--ink-2); opacity:.9; }

/* Effetto grana */
.grain{
  position:absolute; inset:-15%;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='1' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E");
  mix-blend-mode:soft-light; pointer-events:none; z-index:0;
  -webkit-mask-image:radial-gradient(65% 65% at 50% 55%, rgba(0,0,0,.18), rgba(0,0,0,1));
          mask-image:radial-gradient(65% 65% at 50% 55%, rgba(0,0,0,.18), rgba(0,0,0,1));
}

@media (max-width:980px){
  .hero-marquee{ top:32svh; }
  #avatar-container{ height:clamp(420px,66vh,760px); }
}
@media (max-width:640px){
  .hero-marquee{ top:30svh; font-size:clamp(32px, 10vw, 56px); }
  #avatar-container{ height:clamp(380px,62vh,700px); }
  .roles-right .roles-lines{ font-size:clamp(18px, 8vw, 36px); }
}
@media (prefers-reduced-motion: reduce){
  .grain{ display:none; }
}
