/* ---------- Fonts ----------
   Ospitati qui e non presi dal CDN di Google: caricarli da fonts.googleapis.com
   manda l'indirizzo IP di chi visita a un terzo, e per due file da 5 KB non ne
   vale la pena. Entrambi sono sotto Open Font License. */
@font-face{
  font-family: "Press Start 2P";
  src: url("../fonts/press-start-2p.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face{
  font-family: "VT323";
  src: url("../fonts/vt323.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}

/* ---------- Palette derived from logo.png ---------- */
:root{
  --gb-0: #2a3308;   /* deepest */
  --gb-1: #405010;   /* body bg (main image color) */
  --gb-2: #526119;   /* card bg */
  --gb-3: #707c28;   /* muted */
  --gb-4: #acb046;   /* mid */
  --gb-5: #d0d058;   /* bright (S color) */
  --gb-6: #e4e690;   /* highlight */

  --font-pixel: "Press Start 2P", ui-monospace, "Courier New", monospace;
  --font-mono:  "VT323", ui-monospace, "Courier New", monospace;

  --maxw: 1080px;
  --gutter: clamp(20px, 4vw, 48px);
  --px: 4px; /* base pixel unit for borders/offsets */
}

*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;padding:0}
img,svg,iframe{display:block;max-width:100%}
a{color:inherit;text-decoration:none}

html{scroll-behavior:smooth}

body{
  font-family: var(--font-mono);
  font-size: 24px;
  line-height: 1.3;
  color: var(--gb-5);
  background: var(--gb-1);
  min-height: 100vh;
  overflow-x: hidden;
  image-rendering: pixelated;
  -webkit-font-smoothing: none;
  font-smooth: never;
  text-rendering: optimizeSpeed;
}

/* Vignette + CRT bulge */
body::before{
  content:"";
  position:fixed; inset:0;
  pointer-events:none;
  z-index:0;
  background:
    radial-gradient(1200px 800px at 50% 40%, rgba(208,208,88,0.06), transparent 70%),
    radial-gradient(120% 100% at 50% 50%, transparent 45%, rgba(0,0,0,0.7) 100%);
}
/* LCD scanlines + pixel dot grid */
body::after{
  content:"";
  position:fixed; inset:0;
  pointer-events:none;
  z-index: 999;
  background-image:
    repeating-linear-gradient(to bottom, rgba(0,0,0,0.22) 0 2px, transparent 2px 4px),
    repeating-linear-gradient(to right,  rgba(0,0,0,0.10) 0 2px, transparent 2px 4px);
  mix-blend-mode: multiply;
  opacity: .7;
  animation: flicker 6s infinite steps(2);
}

/* ---------- Faulty terminal FX ---------- */
.crt-noise, .crt-glitch{
  position:fixed; inset:0; pointer-events:none;
  z-index: 998;
}
.crt-noise{
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.82  0 0 0 0 0.82  0 0 0 0 0.34  0 0 0 0.14 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  mix-blend-mode: overlay;
  opacity: .45;
  animation: noise-jitter .18s steps(4) infinite;
}
.crt-glitch{
  overflow:hidden;
  mix-blend-mode: screen;
  opacity: .55;
}
.crt-glitch::before,
.crt-glitch::after{
  content:"";
  position:absolute; left:-2%; right:-2%;
  height: 3px;
  background: linear-gradient(90deg, transparent, rgba(208,208,88,0.55), transparent);
  filter: blur(.5px);
}
.crt-glitch::before{ top:-10%; animation: glitch-slow 7.3s steps(1) infinite }
.crt-glitch::after{  top:-10%; animation: glitch-fast 4.7s steps(1) infinite; height: 1px; background: linear-gradient(90deg, transparent, rgba(255,120,120,0.35), rgba(120,220,255,0.35), transparent) }

@keyframes flicker{
  0%,96%,100%{ opacity:.7 }
  97%{ opacity:.55 } 98%{ opacity:.85 } 99%{ opacity:.6 }
}
@keyframes noise-jitter{
  0%{ transform: translate(0,0) }
  25%{ transform: translate(-1px,1px) }
  50%{ transform: translate(1px,-1px) }
  75%{ transform: translate(-1px,-1px) }
  100%{ transform: translate(1px,1px) }
}
@keyframes glitch-slow{
  0%,88%,100%{ top:-10%; opacity:0 }
  89%{ top:22%; opacity:1 }
  92%{ top:47%; opacity:1 }
  94%{ top:70%; opacity:1 }
  96%{ top:110%; opacity:0 }
}
@keyframes glitch-fast{
  0%,92%,100%{ top:-10%; opacity:0 }
  93%{ top:35%; opacity:1 }
  95%{ top:78%; opacity:1 }
  97%{ top:110%; opacity:0 }
}

/* Chromatic aberration on the big pixel text */
h1, .big{
  text-shadow:
    3px 3px 0 var(--gb-0),
    1px 0 0 rgba(255,80,80,0.35),
   -1px 0 0 rgba(80,220,255,0.30);
}

/* ---------- Journey wrapper ---------- */
.journey{
  position: relative;
  z-index: 1;
  padding-inline: var(--gutter);
  padding-block: clamp(48px, 8vh, 96px) 40px;
}

/* ---------- Journey line ---------- */
.journey__line{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
  filter: drop-shadow(0 0 6px rgba(208,208,88,0.35));
}
.journey__path{
  stroke-dasharray: 1 1;
  stroke-dashoffset: 0;
}
.journey__dot{
  fill: var(--gb-6);
  /* pixel size — dots stay square regardless of stretch via non-scaling-stroke isn't needed, they scale with viewBox */
}

/* ---------- Typography ---------- */
.kicker{
  font-family: var(--font-pixel);
  font-size: 12px;
  letter-spacing: .12em;
  color: var(--gb-4);
  text-transform: uppercase;
  display:block;
  margin-bottom: 20px;
}

h1{
  font-family: var(--font-pixel);
  font-size: clamp(1.2rem, 2.4vw, 1.9rem);
  line-height: 1.4;
  color: var(--gb-6);
  margin: 6px 0 20px;
  letter-spacing: 0;
  text-shadow: 3px 3px 0 var(--gb-0);
}

.big{
  font-family: var(--font-pixel);
  font-size: clamp(.85rem, 1.8vw, 1.25rem);
  color: var(--gb-6);
  display:block;
  line-height: 1.45;
  text-shadow: 2px 2px 0 var(--gb-0);
  word-break: break-word;
}

.hero p{
  font-family: var(--font-mono);
  font-size: clamp(19px, 1.9vw, 24px);
  line-height: 1.45;
  color: var(--gb-4);
  margin: 0 auto;
  max-width: 42ch;
}

/* ---------- Card (hard, pixel-y) ---------- */
.card{
  position: relative;
  background: var(--gb-2);
  border: var(--px) solid var(--gb-4);
  border-radius: 0;
  padding: clamp(24px, 4vw, 40px);
  /* stepped chunky shadow */
  box-shadow:
    var(--px) var(--px) 0 var(--gb-3),
    calc(var(--px)*2) calc(var(--px)*2) 0 var(--gb-0);
}

/* ---------- Logo (pixel S) ---------- */
.logo{
  display:block;
  width: clamp(112px, 20vw, 176px);
  height: auto;
  margin: 0 auto 26px;
  border: var(--px) solid var(--gb-4);
  border-radius: 0;
  image-rendering: pixelated;
  image-rendering: -moz-crisp-edges;
  image-rendering: crisp-edges;
  box-shadow: var(--px) var(--px) 0 var(--gb-0);
}

/* ---------- Hero ---------- */
.hero{
  min-height: 92vh;
  display:grid;
  place-items:center;
  position: relative;
  z-index: 2;
}
.hero .card{
  max-width: 640px;
  text-align:center;
}

/* ---------- Chapters ---------- */
.chapter{
  position: relative;
  min-height: 80vh;
  max-width: var(--maxw);
  margin: 0 auto;
  display:grid;
  grid-template-columns: 1fr 1fr;
  align-items:center;
  gap: clamp(24px, 5vw, 64px);
  padding-block: 40px;
  z-index: 2;
}
.chapter--right .chapter__content{ grid-column: 2 }
.chapter--left  .chapter__content{ grid-column: 1 }

.chapter__content.link{
  display:block;
  padding: 26px 30px;
  border: var(--px) solid var(--gb-4);
  background: var(--gb-2);
  border-radius: 0;
  box-shadow:
    var(--px) var(--px) 0 var(--gb-3),
    calc(var(--px)*2) calc(var(--px)*2) 0 var(--gb-0);
  transition: transform .1s steps(2), background .1s steps(2), box-shadow .1s steps(2);
}
.chapter__content.link:hover,
.chapter__content.link:focus-visible{
  transform: translate(calc(var(--px)*-1), calc(var(--px)*-1));
  background: var(--gb-3);
  box-shadow:
    calc(var(--px)*2) calc(var(--px)*2) 0 var(--gb-4),
    calc(var(--px)*4) calc(var(--px)*4) 0 var(--gb-0);
  outline: none;
}

/* Spotify card: shrink to its child, no extra empty space */

/* ---------- Footer ---------- */
.foot{
  position:relative; z-index:2;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap: 6px;
  text-align:center;
  padding: 60px 0 28px;
  color: var(--gb-4);
  font-family: var(--font-mono);
  font-size: 22px;
  letter-spacing: .02em;
  line-height: 1.45;
}

/* ---------- Motion (stepped) ---------- */
[data-reveal]{ opacity:0; transition: opacity .4s steps(4), transform .4s steps(4) }
[data-reveal="fade"]{ transform: translateY(12px) }
[data-reveal="right"]{ transform: translateX(-16px) }
[data-reveal="left"]{  transform: translateX(16px) }
[data-reveal].is-visible{ opacity:1; transform:none }

@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  [data-reveal]{opacity:1; transform:none; transition:none}
  .journey__path{ stroke-dasharray: none !important; stroke-dashoffset: 0 !important }
  body::after, .crt-noise, .crt-glitch::before, .crt-glitch::after{ animation:none !important }
  .crt-noise{ opacity:.2 }
  .crt-glitch{ display:none }
}

/* ---------- 404 ---------- */
.errore{
  position:relative; z-index:2;
  min-height:100vh;
  display:grid; place-items:center;
  padding: var(--gutter);
}
.errore .card{ max-width: 620px; text-align:center }
.errore p{ margin: 0 0 32px; color: var(--gb-4) }
.tasto{
  display:inline-block;
  font-family: var(--font-pixel);
  font-size: .7rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--gb-6);
  padding: 18px 24px;
  border: var(--px) solid var(--gb-4);
  box-shadow:
    var(--px) var(--px) 0 var(--gb-3),
    calc(var(--px)*2) calc(var(--px)*2) 0 var(--gb-0);
  transition: transform .1s steps(2), background .1s steps(2), box-shadow .1s steps(2);
}
.tasto:hover,
.tasto:focus-visible{
  transform: translate(calc(var(--px)*-1), calc(var(--px)*-1));
  background: var(--gb-3);
  box-shadow:
    calc(var(--px)*2) calc(var(--px)*2) 0 var(--gb-4),
    calc(var(--px)*4) calc(var(--px)*4) 0 var(--gb-0);
  outline: none;
}

/* Il marchio è disegnato a pixel interi su griglia 16x16 e sta nella stessa
   cornice del logo in testa alla pagina: bordo, ombra a gradino, fondo scuro. */
.riga{ display:flex; align-items:center; gap: 18px }
.cornice{
  flex: none;
  display: block;
  width: 44px; height: 44px;
  padding: 5px;
  background: var(--gb-0);
  border: var(--px) solid var(--gb-4);
  box-shadow: var(--px) var(--px) 0 var(--gb-0);
  color: var(--gb-5);
}
.cornice svg{
  display: block;
  width: 100%; height: 100%;
  fill: currentColor;
  shape-rendering: crispEdges;
}

/* ---------- Responsive ---------- */
@media (max-width: 780px){
  body{ font-size: 20px }
  .chapter{
    grid-template-columns: 1fr;
    min-height: auto;
    padding-block: 70px;
    place-items: center;
  }
  .chapter--right .chapter__content,
  .chapter--left  .chapter__content{ grid-column: 1; width: 100%; max-width: 420px }
  .hero{ min-height: 80vh }
}