/* Colori e font: modifica qui. Per un font vostro, aggiungi @font-face
   puntando a un file nella cartella del sito (niente Google Fonts). */
:root{
  --bg:#f4f4f2;
  --ink:#000;
  --font:Helvetica,"Helvetica Neue",Arial,sans-serif;
  --pad:clamp(1.25rem,4vw,3rem);
  --logo-w:400px;   /* logo: 400 x 74 px (rapporto del file, 654x121) */
  --ico:30px;       /* altezza icona X */
  --about:32px;     /* testo About */
  --ease:cubic-bezier(.32,.72,0,1);      /* curva morbida stile iOS */
  --spring:cubic-bezier(.34,1.45,.5,1);  /* piccolo rimbalzo elastico */
  --slide:cubic-bezier(.76,0,.24,1);     /* scorrimento landing ⇄ About */
  --slide-t:.95s;
  --fade:cubic-bezier(.4,0,.2,1);        /* dissolvenza verso Contacts */
  --fade-t:.9s;                          /* durata della dissolvenza */
}
@media (max-width:768px){:root{--logo-w:200px;--about:20px}}
*{box-sizing:border-box}
html{background:var(--bg);color:var(--ink)}
body{margin:0;font-family:var(--font);-webkit-font-smoothing:antialiased}
a{color:inherit}
:focus-visible{outline:2px solid var(--ink);outline-offset:4px}

/* Toggle in alto a destra: "i" e X si scambiano con una rotazione elastica */
.bar{position:fixed;top:0;right:0;z-index:10;padding:var(--pad);display:flex;flex-direction:column;align-items:flex-end;gap:.9rem}
.toggle{position:relative;display:block;width:var(--ico);height:var(--ico);margin:0;padding:0;border:0;background:none;color:inherit;cursor:pointer;
  -webkit-tap-highlight-color:transparent;appearance:none}
.toggle::after{content:'';position:absolute;inset:-9px}   /* area di tocco più ampia dell'icona */
.toggle:focus:not(:focus-visible){outline:none}   /* niente alone al clic, resta per la tastiera */
.toggle svg{position:absolute;left:50%;top:50%;display:block;transform-origin:center;
  transition:opacity .4s var(--ease),transform .75s var(--spring)}
/* la i misura 45x121 nel viewBox: larghezza = altezza x 45/121 */
.ico-i{height:var(--ico);width:calc(var(--ico)*45/121);margin:calc(var(--ico)/-2) 0 0 calc(var(--ico)*-45/242)}
.ico-x{height:var(--ico);width:var(--ico);margin:calc(var(--ico)/-2) 0 0 calc(var(--ico)/-2)}
.toggle[data-state="i"] .ico-x{opacity:0;transform:rotate(-90deg) scale(.4)}
.toggle[data-state="x"] .ico-i{opacity:0;transform:rotate(90deg) scale(.4)}

/* Menu: appare sopra il pallino (posizione impostata da main.js) */
.menu{position:fixed;z-index:9;padding-bottom:14px;display:flex;flex-direction:column;align-items:center;gap:.35rem;font-size:1.125rem;visibility:hidden;transition:visibility 0s .5s}
.menu.open{visibility:visible;transition-delay:0s}
.menu a{text-decoration:none;opacity:0;transform:translateY(8px);transition:opacity .35s var(--ease),transform .6s var(--ease)}
.menu a:focus:not(:focus-visible){outline:none}
.menu.open a{opacity:1;transform:none}
.menu.open a:nth-child(2){transition-delay:.04s}
.menu.open a:nth-child(1){transition-delay:.1s}
.menu a:hover{text-decoration:underline;text-underline-offset:.2em}

/* La pallina: sta sopra le pagine; è un pulsante solo quando è ferma */
.ball{position:fixed;left:0;top:0;z-index:5;border-radius:50%;background:currentColor;pointer-events:none;visibility:hidden;will-change:transform;-webkit-tap-highlight-color:transparent}
.ball.live{visibility:visible}
.ball::after{content:'';position:absolute;inset:-14px;border-radius:50%}   /* area di tocco più ampia */
.ball.ready{pointer-events:auto;cursor:pointer}
.ball:focus{outline:none}
.ball:focus-visible{outline:2px solid var(--ink);outline-offset:6px}

/* L'icona X c'è solo su Contacts */
.js body:not([data-page="contacts"]) .toggle{opacity:0;visibility:hidden;pointer-events:none;transition:opacity .35s var(--ease),visibility 0s .35s}
.js body[data-page="contacts"] .toggle{transition:opacity .6s var(--fade) .4s}

/* Landing */
.landing{height:100svh;display:grid;place-items:center;padding:var(--pad)}

.logo{width:var(--logo-w);height:auto;overflow:visible;display:block}
.js .logo .l{opacity:0}   /* le lettere compaiono via main.js */

/* About e Contacts: testo al centro, safe space 190px ai lati e 247px sopra e sotto (desktop) */
.about,.contacts{--safe-x:190px;--safe-y:min(247px,max(40px,calc((100svh - 380px) / 2)));   /* 247px, ma si restringe sulle finestre basse così il testo resta centrato */
  min-height:100svh;padding:var(--safe-y) var(--safe-x);display:flex;flex-direction:column;font-family:Helvetica,"Helvetica Neue",Arial,sans-serif}
.about{gap:1.6em}
.about>:first-child{margin-top:auto}
.about>:last-child{margin-bottom:auto}
.about p{margin:0;font-size:var(--about);line-height:1.2;letter-spacing:-.015em}
.contacts ul{list-style:none;margin:auto 0;padding:0;font-size:var(--about);line-height:1.2;letter-spacing:-.015em}
.contacts a{text-decoration:none}
.contacts a:hover{text-decoration:underline;text-underline-offset:.15em}
.contacts .legal{position:absolute;left:var(--safe-x);right:var(--safe-x);bottom:var(--pad);margin:0;font-size:12px;line-height:1.4}
/* mobile: stesse proporzioni del desktop finché non mi dai le misure vere */
@media (max-width:768px){.about,.contacts{--safe-x:13.2vw;--safe-y:12svh}}

/* Landing e About sono due blocchi uno sopra l'altro: scorrono insieme, senza sovrapporsi.
   Contacts è una pagina a parte che compare con una dissolvenza (solo con JavaScript attivo). */
.js body.app{position:fixed;inset:0;overflow:hidden}
.js .landing,.js .about,.js .contacts{position:absolute;inset:0;min-height:0}
.js .landing{height:auto;z-index:1;transition:transform var(--slide-t) var(--slide);will-change:transform}
.js .about{z-index:1;overflow-y:auto;overscroll-behavior:contain;background:var(--bg);-webkit-overflow-scrolling:touch;
  transform:translateY(100%);visibility:hidden;transition:transform var(--slide-t) var(--slide),visibility 0s var(--slide-t);will-change:transform}
.js body[data-under="about"] .landing{transform:translateY(-100%)}
.js body[data-under="about"] .about{transform:none;visibility:visible;transition-delay:0s}
.js .contacts{z-index:3;overflow-y:auto;overscroll-behavior:contain;background:var(--bg);opacity:0;visibility:hidden;
  transition:opacity var(--fade-t) var(--fade),visibility 0s var(--fade-t);-webkit-overflow-scrolling:touch}
.js .about:focus,.js .contacts:focus{outline:none}
.js .about,.js .contacts{scrollbar-width:none}
.js .about::-webkit-scrollbar,.js .contacts::-webkit-scrollbar{display:none}   /* niente barra di scorrimento (Windows) */
.js body[data-page="contacts"] .contacts{opacity:1;visibility:visible;transition-delay:0s}
.js body.drag .landing,.js body.drag .about,.js body.drag .contacts,.js body.snap .landing,.js body.snap .about{transition:none}

@media (prefers-reduced-motion:reduce){*{transition-duration:.01ms!important;transition-delay:0s!important}}