:root {
  --bg: #000;
  --text: #E8E8E8;
  --muted: #888;
  --accent: #A8D8E8;
  --line: rgba(255,255,255,0.10);
  --line-strong: rgba(255,255,255,0.22);
}

*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: 80px;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: 'Asap', system-ui, -apple-system, sans-serif;
  font-size: 18px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

.container {
  max-width: 720px;
  margin: 0 auto;
  padding: 0 1.5rem;
}

/* NAV */
nav.top {
  position: sticky;
  top: 0;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  background: rgba(0, 0, 0, 0.7);
  border-bottom: 1px solid var(--line);
  z-index: 10;
}
nav.top ul {
  list-style: none;
  margin: 0 auto;
  padding: 1rem 1.5rem;
  display: flex;
  gap: 1.75rem;
  justify-content: flex-end;
  font-size: 0.95rem;
  max-width: 720px;
}
nav.top a {
  color: var(--muted);
  text-decoration: none;
  transition: color 0.2s ease;
}
nav.top a:hover,
nav.top a:focus-visible {
  color: var(--accent);
  outline: none;
}

/* SEZIONI */
section.container, header.hero {
  padding: 7rem 1.5rem;
}
section + section {
  border-top: 1px solid var(--line);
}

/* HERO */
.hero {
  min-height: calc(100vh - 60px);
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* CROSSWORD */
.crossword {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  width: min(86vw, 440px);
  margin: 0 0 3rem 0;
  font-family: 'Alike', Georgia, serif;
  font-weight: normal;
  line-height: 1;
}

.cell {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 1 / 1;
  border: 1px solid var(--line);
  font-size: clamp(1.2rem, 6vw, 2.2rem);
  text-transform: uppercase;
  color: var(--text);
  opacity: 0;
  animation: cellIn 0.5s ease forwards;
}
.cell.empty {
  border: none;
  animation: none;
  opacity: 1;
}
.cell.shared {
  color: var(--accent);
  border-color: var(--line-strong);
}

@keyframes cellIn {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

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

.hero p.lead {
  font-size: clamp(1.05rem, 2.4vw, 1.25rem);
  max-width: 32em;
  margin: 0;
  color: var(--text);
}

/* TITOLI */
h2 {
  font-family: 'Alike', Georgia, serif;
  font-weight: normal;
  font-size: clamp(1.6rem, 4vw, 2rem);
  margin: 0 0 2.5rem 0;
  color: var(--text);
  letter-spacing: 0.01em;
}
h2::before {
  content: "§ ";
  color: var(--accent);
}

/* STACK */
.stack-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
}
.stack-list li {
  border: 1px solid var(--line-strong);
  color: var(--muted);
  padding: 0.3rem 0.85rem;
  font-size: 0.9rem;
  letter-spacing: 0.02em;
  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}
.stack-list li:hover {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--bg);
}

/* PROGETTI */
.project {
  padding: 1.75rem 0;
  border-top: 1px solid var(--line);
}
.project:last-of-type {
  border-bottom: 1px solid var(--line);
}
.project-icon {
  display: block;
  width: 44px;
  height: 44px;
  border-radius: 8px;
  margin-bottom: 0.75rem;
}
.project h3 {
  margin: 0 0 0.25rem 0;
  font-family: 'Alike', Georgia, serif;
  font-weight: normal;
  font-size: 1.3rem;
}
.project p {
  margin: 0;
  color: var(--muted);
}
.project p.project-meta {
  margin-bottom: 0.5rem;
  font-size: 0.85rem;
  letter-spacing: 0.02em;
}

/* CONTATTI */
.contact-intro {
  margin-bottom: 3rem;
}

form {
  display: grid;
  gap: 1.5rem;
  max-width: 480px;
  margin: 0 auto;
}
.field label {
  display: block;
  color: var(--muted);
  font-size: 0.85rem;
  margin-bottom: 0.4rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
input, textarea {
  width: 100%;
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--line-strong);
  color: var(--text);
  font-family: inherit;
  font-size: 1rem;
  padding: 0.5rem 0;
  outline: none;
  transition: border-color 0.2s ease;
  border-radius: 0;
}
input:focus, textarea:focus {
  border-bottom-color: var(--accent);
}
textarea {
  resize: vertical;
  min-height: 110px;
}
button {
  background: transparent;
  color: var(--accent);
  border: 1px solid var(--accent);
  padding: 0.75rem 1.75rem;
  font-family: inherit;
  font-size: 1rem;
  cursor: pointer;
  justify-self: stretch;
  font-variant: all-small-caps;
  transition: background 0.2s ease, color 0.2s ease;
  letter-spacing: 0.04em;
}
button:hover, button:focus-visible {
  background: var(--accent);
  color: var(--bg);
  outline: none;
}

/* Honeypot anti-bot */
.hp {
  position: absolute;
  left: -9999px;
  opacity: 0;
}

/* FOOTER */
footer {
  padding: 3rem 0 4rem 0;
  text-align: center;
  color: var(--muted);
  font-size: 0.85rem;
  border-top: 1px solid var(--line);
}

/* ACCESSIBILITÀ */
@media (prefers-reduced-motion: reduce) {
  .cell { animation: none; opacity: 1; }
  html { scroll-behavior: auto; }
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* MOBILE */
@media (max-width: 480px) {
  section.container, header.hero { padding: 5rem 1.25rem; }
  .container { padding: 0 1.25rem; }
  nav.top ul {
    gap: 1.25rem;
    padding: 0.85rem 1.25rem;
    font-size: 0.9rem;
  }
  .crossword { margin-bottom: 2.25rem; }
}

/* FORME 3D DECORATIVE */
.shapes-col {
  position: fixed;
  top: 0;
  height: 100vh;
  width: 110px;
  pointer-events: none;
  z-index: 0;
  opacity: 0;
  will-change: transform, opacity;
}
.shapes-left  { right: calc(50% + 360px + 28px); }
.shapes-right { left:  calc(50% + 360px + 28px); }

.shape-wrap {
  position: absolute;
  left: 0; right: 0;
  display: flex;
  justify-content: center;
  perspective: 500px;
}
/* glow radiale senza filter (incompatibile con preserve-3d) */
.shape-wrap::before {
  content: '';
  position: absolute;
  width: 130px; height: 130px;
  border-radius: 50%;
  background: radial-gradient(circle, var(--gc, transparent) 0%, transparent 65%);
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
}

.shape-3d {
  position: relative;
  transform-style: preserve-3d;
  will-change: transform;
}
.shape-3d .f {
  position: absolute;
  top: 0; left: 0;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

.s-red  { width: 68px; height: 68px; }
.s-red .f { width: 68px; height: 68px; }
.s-red .f-front  { background: #FF4040; transform: rotateY(  0deg) translateZ(34px); }
.s-red .f-back   { background: #880000; transform: rotateY(180deg) translateZ(34px); }
.s-red .f-right  { background: #CC2020; transform: rotateY( 90deg) translateZ(34px); }
.s-red .f-left   { background: #CC2020; transform: rotateY(-90deg) translateZ(34px); }
.s-red .f-top    { background: #FF6060; transform: rotateX( 90deg) translateZ(34px); }
.s-red .f-bottom { background: #660000; transform: rotateX(-90deg) translateZ(34px); }

/* Piramide quadrata (a=70px, h=80px, slant≈87px, φ≈23.6°) */
.s-pyramid { width: 70px; height: 80px; }
.s-pyramid .f {
  width: 70px;
  height: 87px;
  clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
  transform-origin: 50% 0% 0;
  backface-visibility: visible;
  -webkit-backface-visibility: visible;
}
.s-pyramid .f-front  { background: #2DD450; transform: rotateX(23.6deg); }
.s-pyramid .f-back   { background: #1A8030; clip-path: polygon(50% 0%, 100% 100%, 0% 100%); transform: rotateX(-23.6deg); }
.s-pyramid .f-left   { background: #28BB45; transform: rotateY(-90deg) rotateX(23.6deg); }
.s-pyramid .f-right  { background: #28BB45; transform: rotateY(90deg)  rotateX(23.6deg); }
.s-pyramid .f-bottom {
  height: 70px;
  clip-path: none;
  background: #156025;
  transform: translateY(80px) translateZ(-35px) rotateX(90deg);
}

/* Prisma triangolare (a=60px, h=52px, L=150px) */
.s-blue { width: 60px; height: 52px; }
.s-blue .f-front,
.s-blue .f-back   { width: 60px; height: 52px; clip-path: polygon(50% 0%, 0% 100%, 100% 100%); }
.s-blue .f-front  { background: #4499FF; transform: translateZ(75px); }
.s-blue .f-back   { background: #112299; clip-path: polygon(50% 0%, 100% 100%, 0% 100%); transform: rotateY(180deg) translateZ(75px); }
.s-blue .f-bottom,
.s-blue .f-left,
.s-blue .f-right  { width: 60px; height: 150px; }
.s-blue .f-bottom { background: #88CCFF; transform: translateY(-23px) rotateX(-90deg); }
.s-blue .f-left   { background: #2255EE; transform: translate(-15px, -49px) rotateZ(-60deg) rotateX(90deg); }
.s-blue .f-right  { background: #2255EE; transform: translate(15px,  -49px) rotateZ(60deg)  rotateX(90deg); }

/* Parallelepipedo (W=90, H=50, D=70) */
.s-yellow { width: 90px; height: 50px; }
.s-yellow .f-front, .s-yellow .f-back   { width: 90px; height: 50px; }
.s-yellow .f-left,  .s-yellow .f-right  { width: 70px; height: 50px; }
.s-yellow .f-top,   .s-yellow .f-bottom { width: 90px; height: 70px; }
.s-yellow .f-front  { background: #FFD000; transform: translateZ(35px); }
.s-yellow .f-back   { background: #A07800; transform: rotateY(180deg) translateZ(35px); }
.s-yellow .f-right  { background: #D4A000; transform: translateX(55px) rotateY(90deg); }
.s-yellow .f-left   { background: #D4A000; transform: translateX(-35px) rotateY(-90deg); }
.s-yellow .f-top    { background: #FFE060; transform: translateY(-35px) rotateX(90deg); }
.s-yellow .f-bottom { background: #7A5A00; transform: translateY(15px) rotateX(-90deg); }

@media (max-width: 1020px) {
  .shapes-col { display: none; }
}