/* style.css — base di pagina, grana di sfondo, selezione */

body {
  background: var(--bg);
  color: var(--fg);
  overflow-x: hidden;
}

/* grana quasi impercettibile */
body::after {
  content: "";
  position: fixed;
  inset: -50%;
  z-index: 999;
  pointer-events: none;
  opacity: .03;
  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='2'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}

::selection { background: var(--accent); color: var(--bg); }

/* con il custom cursor attivo nascondiamo quello nativo solo su elementi interattivi */
@media (hover: hover) and (pointer: fine) {
  .js body.has-cursor,
  .js body.has-cursor a,
  .js body.has-cursor button { cursor: none; }
}

/* le schede impilate devono sempre coprire il canvas λ */
main { position: relative; z-index: var(--z-chapter); }
.chapter--hello .chapter__inner { background: transparent; border-color: transparent; }
/* hero: il testo sta sopra la λ 3D; la card resta trasparente */
.js .chapter--hello .chapter__inner { background: transparent; }
html:not(.js) .chapter--hello .chapter__inner,
.no-js .chapter--hello .chapter__inner { background: var(--bg); }

/* quando il menu è aperto la pagina scala leggermente */
.menu-open main {
  transform: scale(.94);
  transform-origin: center top;
  transition: transform .9s var(--ease-in-out);
}
main { transition: transform .9s var(--ease-in-out); }

@media (prefers-reduced-motion: reduce) {
  .menu-open main, main { transition: none; transform: none; }
}