:root {
  --bg:       #0e0d10;
  --bg2:      #141317;
  --surface:  #1a191e;
  --border:   rgba(255,255,255,0.07);
  --border2:  rgba(255,255,255,0.14);
  --fg:       #f0ecdd;
  --fg-dim:   #9b9899;
  --fg-muted: #8a8892;
  --red:      #e06c75;
  --green:    #87a987;
  --yellow:   #d4a84b;
  --blue:     #5b9cf6;
  --violet:   #8992a7;
  --teal:     #c8f06e;
  --orange:   #c8f06e;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

body {
  font-family: 'JetBrains Mono', monospace;
  background: var(--bg);
  color: var(--fg);
  font-size: 12px;
  line-height: 1.6;
}

/* ===== INTRO ===== */
#intro-overlay {
  position: fixed; inset: 0;
  background: var(--bg);
  display: flex; align-items: center; justify-content: center;
  z-index: 9999; cursor: pointer;
}
#intro-overlay.gone { display: none; }
#intro-text, #intro-cursor {
  font-size: clamp(20px, 4vw, 38px);
  color: var(--fg);
  letter-spacing: 3px;
  font-weight: 300;
}
#intro-cursor { animation: blink 1s step-end infinite; }
@keyframes blink { 50% { opacity: 0; } }

/* ===== BOOT ===== */
#boot-sequence {
  position: fixed; inset: 0;
  background: var(--bg);
  display: none; flex-direction: column;
  align-items: center; justify-content: center;
  z-index: 9998; gap: 6px;
}
#boot-sequence.active { display: flex; }
.boot-line { font-size: 12px; color: var(--fg-dim); display: none; }
.boot-line.visible { display: block; animation: glitch-in .12s steps(2); }

/* ===== LAYOUT ===== */
.container { display: none; min-height: 100vh; min-height: 100dvh; }
.container.visible { display: flex; }

/* ===== BOOT ANIMATIONS ===== */
@keyframes glitch-in {
  0% { opacity: 0; transform: translateX(-2px); }
  50% { opacity: 1; transform: translateX(1px); }
  100% { transform: translateX(0); }
}
[data-boot] { opacity: 0; visibility: hidden; }
[data-boot].revealed {
  opacity: 1; visibility: visible;
  animation: glitch-in 0.25s ease-out;
}

/* ===== DOT MATRIX (dalla griglia di nothing.tech) =====
   livello fisso a 32px dai bordi, 12 colonne (4 sotto i 640px),
   punto bianco da 1px al 30% in mix-blend-difference. */
:root { --dm-cell: calc((100vw - 64px) / 12); }
@media (max-width: 639px) { :root { --dm-cell: calc((100vw - 64px) / 4); } }
body::before {
  content: ''; position: fixed; inset: 31px; z-index: 0; pointer-events: none;
  opacity: .3; mix-blend-mode: difference;
  background-image: radial-gradient(circle, #fff 1px, transparent 1.5px);
  background-size: var(--dm-cell) var(--dm-cell);
  background-position: calc(1px - var(--dm-cell) / 2) calc(1px - var(--dm-cell) / 2);
}
.container, .pj { position: relative; z-index: 1; }

/* ===== ETICHETTE E SOTTOTITOLI IN DOTO ===== */
html .nav-header, html .section-title, html .pl-label, html .bio-block-label,
html .pj-eyebrow, html .pj-sec:not(.fp-ch) h2, html .viz-label, html .fp-h, html .led-t,
html .fp-stats span, html .pj-sec.fp-ch h2 .sub, html .facts div > span:first-child, html .fly-list .lv,
html .fp-toc .s {
  font-family: 'Doto', 'JetBrains Mono', monospace; font-weight: 800; font-size: 13px; letter-spacing: 1.5px; text-transform: uppercase;
}
html .pl-year, html .age-clock, html .project-year, html .profile-meta {
  font-family: 'Doto', 'JetBrains Mono', monospace; font-weight: 800; font-size: 13px; letter-spacing: .5px; text-transform: uppercase;
}
html .tagline-subtitle { font-family: 'Doto', 'JetBrains Mono', monospace; font-weight: 800; text-transform: uppercase; letter-spacing: 1.5px; }
html .tagline-subtitle::before { font-family: 'JetBrains Mono', monospace; font-weight: 400; letter-spacing: 0; }