/* layout.css — sistema di capitoli a schede impilate + chrome di pagina */

/* ---------- chapters: pila di schede ---------- */
main {
  position: relative;
  perspective: 1600px;
  perspective-origin: 50% 40%;
}

.chapter {
  position: relative;
  min-height: 100svh;
}

/* le schede "piatte" si impilano con sticky: la successiva scorre sopra.
   Il margin-bottom crea il momento di HOLD: la card resta sola a piena
   viewport per --chapter-hold prima che la prossima inizi la transizione. */
.chapter--hello,
.chapter--work,
.chapter--build,
.chapter--stack,
.chapter--contact,
.chapter--exit {
  position: sticky;
  top: 0;
  height: 100svh;
  overflow: hidden;
  margin-bottom: var(--chapter-hold);
}

/* hero fuso: hold più lungo — durante lo scroll stazionario entrano
   statement e metadati (scrub in js/animations.js) */
.chapter--hello { --chapter-hold: 90svh; }

/* ultima card: nessun hold dopo di lei */
.chapter--exit { margin-bottom: 0; }

.chapter__inner {
  position: absolute;
  inset: 0;
  margin: var(--card-gap);
  border: 1px solid var(--line);
  background: var(--bg);
  padding: var(--page-padding);
  transform-origin: center top;
  overflow: hidden;
}

/* sfondi alternati per percepire la pila */
.chapter--work .chapter__inner   { background: var(--bg-2); }
.chapter--build .chapter__inner  { background: var(--bg); }
.chapter--stack .chapter__inner  { background: var(--bg-2); }
.chapter--contact .chapter__inner{ background: var(--bg); }

.chapter--exit .chapter__inner {
  background: var(--dark);
  border-color: var(--dark-line);
  color: var(--dark-fg);
}
/* con WebGL attivo il fondo scuro resta: le particelle vivono su un canvas dedicato */
.exit-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  pointer-events: none;
}

/* ---------- angoli da scheda archivio ---------- */
.corner {
  position: absolute;
  z-index: 3;
  color: var(--muted);
  font-size: .625rem;
  pointer-events: none;
}
.corner--tl { top: calc(var(--page-padding) * .7); left: calc(var(--page-padding) * .7); }
.corner--bl { bottom: calc(var(--page-padding) * .7); left: calc(var(--page-padding) * .7); }
.corner--br { bottom: calc(var(--page-padding) * .7); right: calc(var(--page-padding) * .7); }
.corner--dark { color: var(--dark-muted); }

/* ---------- header ---------- */
.site-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: var(--z-header);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: calc(var(--card-gap) + 10px) calc(var(--card-gap) + var(--page-padding) * .7) 0;
  color: var(--fg);
  /* alone carta (come le parole dell'hero): separa il testo dalla λ scura;
     invisibile sul fondo chiaro */
  text-shadow: 0 0 2px rgba(232, 230, 223, .9), 0 0 10px rgba(232, 230, 223, .5);
  transition: color .4s var(--ease-out-quart), text-shadow .4s var(--ease-out-quart);
}
/* chapter scuri (homelab / exit): chrome chiaro, alone scuro */
body.on-dark .site-header {
  color: var(--dark-fg);
  text-shadow: 0 0 2px rgba(17, 17, 17, .9), 0 0 10px rgba(17, 17, 17, .5);
}
/* senza JS non c'è il toggle .on-dark: striscia carta per restare
   leggibile anche sopra i capitoli scuri */
html.no-js .site-header {
  background: var(--bg);
  padding-bottom: 10px;
  border-bottom: 1px solid var(--line);
}
.brand {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1rem;
  letter-spacing: -.02em;
}
.brand sup { font-size: .55em; }
.header-center { letter-spacing: .12em; }
.header-right {
  display: flex;
  align-items: center;
  gap: var(--space-md);
}
.status {
  display: inline-flex;
  align-items: center;
  gap: .5em;
  letter-spacing: .12em;
}
.status-dot {
  display: inline-block;
  width: .55em; height: .55em;
  border-radius: 50%;
  background: var(--accent);
  animation: status-pulse 4s ease-in-out infinite;
}
.menu-btn {
  letter-spacing: .12em;
  padding: .5em 0;
}
.menu-btn:hover { color: var(--accent); }

.lang-switcher {
  display: inline-flex;
  align-items: center;
  gap: .35em;
}
.lang-btn {
  color: inherit;
  opacity: .45;
  letter-spacing: .08em;
  padding: .5em 0;
  transition: opacity .3s var(--ease-out-quart), color .3s;
}
.lang-btn:hover,
.lang-btn:focus-visible,
.lang-btn.is-active { opacity: 1; }
.lang-btn:hover,
.lang-btn:focus-visible { color: var(--accent); }
.lang-sep { opacity: .3; }

/* ---------- rail destro = the wire ---------- */
.rail {
  position: fixed;
  right: calc(var(--card-gap) + 8px);
  top: 50%;
  transform: translateY(-50%);
  z-index: var(--z-rail);
  display: flex;
  flex-direction: column;
  gap: .55em;
  padding-right: 1.1em; /* spazio per il wire */
  color: var(--fg);
  text-shadow: 0 0 2px rgba(232, 230, 223, .9), 0 0 10px rgba(232, 230, 223, .5);
  transition: color .4s var(--ease-out-quart), text-shadow .4s var(--ease-out-quart);
}
body.on-dark .rail {
  color: var(--dark-fg);
  text-shadow: 0 0 2px rgba(17, 17, 17, .9), 0 0 10px rgba(17, 17, 17, .5);
}
html.no-js .rail {
  background: var(--bg);
  border: 1px solid var(--line);
  padding: .6em .8em;
}
/* la traccia: hairline verticale per tutta l'altezza del rail */
.rail__wire {
  position: absolute;
  top: 0;
  bottom: 0;
  right: .5em;
  width: 1px;
  background: currentColor;
  opacity: .22;
  pointer-events: none;
}
/* i nodi: un marker per chapter, centrato sulla sua riga del rail */
.rail a { position: relative; }
.rail__node {
  position: absolute;
  top: 50%;
  right: -.6em;
  width: 5px;
  height: 5px;
  background: currentColor;
  transform: translate(50%, -50%);
  pointer-events: none;
}
.rail a.is-active .rail__node { background: var(--accent); }
/* il pacchetto accento che scende lungo il wire (posizionato da scroll.js);
   resta nascosto finché JS non lo attiva (classe .is-on) */
.rail__packet {
  display: none;
  position: absolute;
  top: 0;
  right: .5em;
  width: 6px;
  height: 6px;
  background: var(--accent);
  transform: translate(50%, 0);
  pointer-events: none;
}
.rail__packet.is-on { display: block; }
html.no-js .rail__wire,
html.no-js .rail__node { display: none; }
.rail a {
  display: flex;
  align-items: baseline;
  justify-content: flex-end;
  gap: .6em;
  opacity: .45;
  transition: opacity .3s var(--ease-out-quart);
}
.rail a:hover { opacity: .9; }
.rail a.is-active { opacity: 1; }
.rail__num { font-size: .625rem; }
.rail__name {
  font-size: .625rem;
  max-width: 0;
  overflow: hidden;
  white-space: nowrap;
  transition: max-width .5s var(--ease-out-expo);
}
.rail a.is-active .rail__name { max-width: 8em; }

/* ---------- progress ---------- */
.progress {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  height: 2px;
  z-index: var(--z-header);
  background: transparent;
  pointer-events: none;
}
.progress__bar {
  display: block;
  height: 100%;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left center;
}

/* ---------- λ canvas fisso ---------- */
#lambda-canvas {
  position: fixed;
  inset: 0;
  z-index: var(--z-lambda);
  pointer-events: none;
}
.js #lambda-canvas { opacity: 0; } /* rivelato da JS dopo il boot */

/* ---------- micro system labels ---------- */
.sys-label {
  position: absolute;
  color: var(--muted);
  font-size: .625rem;
  pointer-events: none;
}
.sys-label--3 { bottom: calc(var(--page-padding) * .7); left: 50%; transform: translateX(-50%); color: var(--dark-muted); }

/* ---------- skip link ---------- */
.skip-link {
  position: fixed;
  top: -100%;
  left: var(--space-sm);
  z-index: var(--z-boot);
  background: var(--fg);
  color: var(--bg);
  padding: .6em 1em;
  font-family: var(--font-mono);
  font-size: .75rem;
  transition: top .2s;
}
.skip-link:focus-visible { top: var(--space-sm); }