/* =============================================================================
   RADA · style.css

   Le variabili qui sotto sono l'unica fonte della palette: anche il canvas
   le legge (js/frasi.js → readPalette). Cambiarle qui cambia tutto.
============================================================================= */

:root{
  --paper:#e7e7e4;   /* fondo, grigio chiarissimo appena caldo */
  --ink:#20211c;     /* inchiostro, nero morbido verdastro */
  --ink-2:#4a4b42;   /* inchiostro secondario */
  --dust:#8f9084;    /* etichette tenui */
  --hair:#c3c2b4;    /* linee inattive */
  --scelto:#55564c;  /* fondo dei bottoni scelti: scuro, ma non inchiostro */
  --amber:#c25a2b;   /* unico accento */
  --glow:rgba(194,90,43,.18);
  --sans:"Helvetica Neue",-apple-system,system-ui,"Segoe UI",Roboto,Arial,sans-serif;
}

/* --------------------------------------------------------- la grana della carta
   Rumore frattale generato dal browser, non un'immagine da scaricare: è un
   SVG scritto qui dentro come data URI, quindi la pagina continua ad aprirsi
   senza rete — che è una regola del progetto, non una comodità.

   `feTurbulence` fa il grano, `feColorMatrix` gli toglie il colore (di suo
   il rumore è a chiazze rosse, verdi e blu), e `stitchTiles` fa combaciare i
   bordi della piastrella, altrimenti a ogni ripetizione si vedrebbe la
   cucitura. Il rettangolo è nero a opacità 0,08: appena un velo, e su un
   fondo chiaro basta a togliere la sensazione di superficie piatta.

   Il browser lo rasterizza una volta e lo ripete: non costa un fotogramma.
   Il `#` dell'`url(#g)` va scritto %23, o l'indirizzo si tronca lì.       */
:root{
  --carta:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23g)' opacity='.08'/%3E%3C/svg%3E");
}

*{box-sizing:border-box}
html,body{margin:0;height:100%}
body{
  background-color:var(--paper);
  background-image:var(--carta);
  color:var(--ink);
  font-family:var(--sans);
  font-weight:300;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

/* etichette minute: peso pieno e tracking ampio, perché reggano al corpo piccolo */
.status,.ctl label,.loopHint,.realign{
  font-family:var(--sans);
  font-weight:400;
  letter-spacing:.18em;
}

/* --------------------------------------------------------- impaginazione */
.stage{
  min-height:100vh;
  min-height:100dvh;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  padding:26px 20px 34px;
}
.wrap{width:100%;max-width:1000px}

/* --------------------------------------------------------------- testata */
.head{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:16px;
  flex-wrap:wrap;
  margin-bottom:26px;
}
h1{
  margin:0;
  font-weight:300;
  font-size:clamp(21px,4.6vw,26px);
  letter-spacing:.62em;
  line-height:1;
  text-transform:uppercase;
}
h1 em{font-style:normal;font-weight:600;color:var(--amber)}

.status{
  display:flex;
  align-items:center;
  gap:9px;
  font-size:9.5px;
  letter-spacing:.15em;
  text-transform:uppercase;
  color:var(--ink-2);
}
.pulse{
  width:7px;height:7px;border-radius:50%;
  background:var(--hair);flex:none;transition:.4s;
}
.status.live{color:var(--ink)}
.status.live .pulse{background:var(--amber);animation:pulse 2.6s ease-in-out infinite}

/* ------------------------------------------------- lingua, accanto allo stato
   Quattro sigle sulla stessa riga della riga di stato: c'è spazio per tutte
   e quattro le lingue fino a ~665px di finestra, sotto i quali la testata va
   a capo da sé — come già faceva prima.                                     */
.headRight{
  display:flex;align-items:center;gap:14px;
  flex-wrap:wrap;justify-content:flex-end;
}
.langs{display:flex;gap:10px}
.lang{
  appearance:none;border:0;background:transparent;padding:0;
  font-family:var(--sans);font-weight:400;
  font-size:9.5px;letter-spacing:.15em;text-transform:uppercase;
  color:var(--hair);cursor:pointer;transition:.2s;
}
.lang:hover{color:var(--ink-2)}
.lang.sel{color:var(--amber)}
.lang:focus-visible{outline:1.5px solid var(--amber);outline-offset:3px;border-radius:2px}
.langSep{width:1px;height:10px;background:var(--hair);flex:none}
@keyframes pulse{
  0%,100%{opacity:.35;transform:scale(.85)}
  50%{opacity:1;transform:scale(1.15)}
}

/* ------------------------------------------------------------ i quadranti */
/* Il bordo è lo stesso grigio del fondo dei bottoni scelti: i due riquadri e
   il bottone che li governa sono la stessa cornice, e il nero pieno resta ai
   segni che contano — le gocce che suonano e i trattini della zona attiva. */
.loopCard{border:1.5px solid var(--scelto);border-radius:24px;padding:16px 14px 18px}
.cardHead{
  display:flex;
  justify-content:space-between;
  align-items:baseline;
  gap:12px;
  margin:0 8px 6px;
  flex-wrap:wrap;
}
.cardHead .t{font-weight:200;font-size:16px;letter-spacing:.1em}
.realign{font-size:8.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--amber)}
.loopHint{
  font-size:8px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--dust);margin:0 8px 6px;
}

#canvas-holder{width:100%;display:flex;justify-content:center;position:relative}
#drone-holder{width:100%;display:flex;justify-content:center;position:relative}

/* LE DUE TELE LASCIANO SCORRERE LA PAGINA; sono i quattro riquadri qui sotto
   — uno per quadrante — a trattenere il dito dove c'è davvero qualcosa da
   trascinare. Con `touch-action:none` sull'intera tela, su un telefono non si
   riuscirebbe a scorrere passando sopra mezza schermata di quadranti.

   Qui c'era un `!important` per entrambe, e non era pigrizia: p5 scriveva
   `touch-action:none` direttamente nell'attributo style di ogni canvas
   esistente — la propria tela e anche quella dei tessuti, che pure non aveva
   creato — e una regola normale del foglio perde contro lo stile in linea.
   Tolta la libreria non lo scrive più nessuno, e le due righe tornano a
   essere due righe normali.                                                */
#canvas-holder canvas,
.droneCanvas{display:block;touch-action:pan-y pinch-zoom}

/* Il riquadro delle tenute è la stessa scatola dei quadranti, staccata da
   quella sopra e dai suoi mood. Lo stacco però lo prende la riga della
   stagione, che gli sta appena sopra.                                    */
.statusDroni{display:flex;justify-content:flex-end;margin:26px 8px 8px}
.droneCard{margin-top:0}
.barDroni{margin-top:14px}
.controlsTessuti{margin-top:22px}

/* Trasparenti e senza dimensioni proprie: le riceve frasi.js, che li
   ricalcola solo quando il canvas cambia misura. Coprono il quadrante e il
   suo ↻, non l'intera cella: gli spazi fra un quadrante e l'altro, e la
   fascia temporale, restano al dito per scorrere la pagina.               */
.dialZone{
  position:absolute;
  touch-action:none;
  cursor:ns-resize;
  -webkit-tap-highlight-color:transparent;
}

/* -------------------------------------------------------------- controlli */
.controls{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:14px 26px;
  margin-top:24px;
}
.ctl label{
  display:flex;justify-content:space-between;gap:8px;
  font-size:9px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--ink-2);margin-bottom:7px;
}
.ctl label b{color:var(--amber);font-weight:400;font-variant-numeric:tabular-nums}

input[type=range]{
  -webkit-appearance:none;appearance:none;
  width:100%;height:1.5px;
  background:var(--hair);outline:none;border-radius:2px;cursor:pointer;
}
input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none;
  width:15px;height:15px;border-radius:50%;
  background:var(--paper);border:1.5px solid var(--ink);
  cursor:pointer;transition:.15s;
}
input[type=range]::-webkit-slider-thumb:hover{background:var(--ink)}
input[type=range]::-moz-range-thumb{
  width:15px;height:15px;border-radius:50%;
  background:var(--paper);border:1.5px solid var(--ink);cursor:pointer;
}

/* --------------------------------------------------------- barra inferiore */
.bar{
  display:flex;align-items:center;justify-content:space-between;
  gap:14px;flex-wrap:wrap;margin-top:26px;
}
/* otto mood: una sola riga su schermo largo, due righe da quattro su
   cellulare. La soglia ricalca quella del canvas in frasi.js (avail>=720),
   così i due layout cambiano registro nello stesso punto.                  */
.moods{
  display:grid;
  grid-template-columns:repeat(8,1fr);
  gap:7px;
  min-width:0;
}
.mood{
  appearance:none;
  border:1.5px solid var(--hair);
  background:transparent;color:var(--ink-2);
  font-family:var(--sans);font-weight:400;
  font-size:8px;letter-spacing:.09em;text-transform:uppercase;text-align:center;
  padding:6px 8px;border-radius:999px;cursor:pointer;transition:.2s;
}
.mood:hover{border-color:var(--ink);color:var(--ink)}
/* Lo stato scelto è un grigio scuro, non l'inchiostro pieno: il nero massimo
   in pagina resta quello dei bordi dei riquadri e delle gocce che suonano.  */
.mood.sel{color:var(--paper);background:var(--scelto);border-color:var(--scelto)}

.power{
  appearance:none;
  border:1.5px solid var(--ink);background:transparent;color:var(--ink);
  font-family:var(--sans);font-weight:300;
  font-size:12px;letter-spacing:.08em;
  padding:9px 22px;border-radius:999px;cursor:pointer;transition:.25s;
  display:flex;align-items:center;gap:9px;justify-content:center;
  flex:none;
}
/* rimando alla guida, sotto i mood: deve esserci senza contendere l'attenzione
   ai comandi, quindi ha il corpo delle etichette minute e il grigio tenue.  */
.foot{margin-top:15px}

/* --------------------------------------------------------------- la firma
   Un filo alto un pixel, e sotto i crediti centrati. Il filo separa senza
   chiudere: a chiudere ci pensano i bordi dei due riquadri, e un terzo
   rettangolo qui dentro sarebbe un riquadro che non contiene nulla.

   Il testo resta in tondo minuscolo, non nel MAIUSCOLO delle etichette
   minute: quelle nominano un comando, questa è una frase, e una frase lunga
   in maiuscolo si legge peggio. Vale anche per l'indirizzo, come nel
   colophon della guida.                                                   */
.firma{
  margin-top:26px;
  padding-top:16px;
  border-top:1px solid var(--hair);
  text-align:center;
}
.firma p{
  margin:0;
  font-family:var(--sans);font-weight:400;
  font-size:10px;letter-spacing:.1em;
  color:var(--dust);
}
.firma .recapiti{
  display:flex;align-items:center;justify-content:center;
  gap:14px;flex-wrap:wrap;margin-top:9px;
}
.firma a,
.firma .posta{
  font-family:var(--sans);font-weight:400;
  font-size:10px;letter-spacing:.1em;color:var(--dust);
  text-decoration:none;padding-bottom:2px;
  border-bottom:1px solid transparent;
}
.firma a{transition:.2s}
.firma a:hover{color:var(--ink);border-bottom-color:var(--hair)}
.firma a:focus-visible{outline:1.5px solid var(--amber);outline-offset:3px;border-radius:2px}
.firma .sep{width:1px;height:10px;background:var(--hair);flex:none}
@media (max-width:479px){
  .firma .sep{display:none}          /* a capo, il trattino resterebbe appeso */
  .firma .recapiti{gap:8px;flex-direction:column}
}
.docLink{
  font-family:var(--sans);font-weight:400;
  font-size:9px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--dust);text-decoration:none;transition:.2s;
  border-bottom:1px solid transparent;padding-bottom:2px;
}
.docLink:hover{color:var(--ink);border-bottom-color:var(--hair)}
.docLink:focus-visible{outline:1.5px solid var(--amber);outline-offset:3px;border-radius:2px}

.power:hover{background:rgba(32,33,28,.06)}
.power.on{background:var(--scelto);border-color:var(--scelto);color:var(--paper)}
.dot{width:6px;height:6px;border-radius:50%;background:var(--dust);transition:.3s;flex:none}
.power.on .dot{
  background:var(--amber);
  box-shadow:0 0 12px 2px var(--glow);
  animation:breathe 4s ease-in-out infinite;
}
@keyframes breathe{0%,100%{opacity:.55}50%{opacity:1}}

/* ---------------------------------------------------- soglia d'ingresso */
.gate{
  position:fixed;inset:0;z-index:40;
  /* la stessa grana del fondo, e alla stessa origine: la soglia copre la
     pagina senza che si veda il passaggio da una superficie all'altra */
  background-color:var(--paper);
  background-image:var(--carta);
  display:flex;flex-direction:column;
  align-items:center;justify-content:center;
  gap:24px;padding:30px;text-align:center;
  cursor:pointer;
  /* la visibilità scatta a dissolvenza finita: serve a togliere il bottone
     dall'ordine di tabulazione, perché `opacity:0` da sola lo lascia
     raggiungibile e si finirebbe a dare fuoco a un comando invisibile.   */
  transition:opacity .6s, visibility 0s .6s;
}
.gate.off{opacity:0;pointer-events:none;visibility:hidden}
.gate h2{
  margin:0;font-weight:300;
  font-size:clamp(24px,6vw,34px);
  letter-spacing:.62em;text-transform:uppercase;line-height:1;
}
.gate h2 em{font-style:normal;font-weight:600;color:var(--amber)}
.gate p{
  margin:0;max-width:34ch;
  font-size:14px;line-height:1.6;font-weight:300;
  color:var(--ink-2);letter-spacing:.02em;
}
.gate .enter{
  appearance:none;
  background:transparent;color:var(--ink);
  font-family:var(--sans);
  border:1.5px solid var(--ink);border-radius:999px;
  padding:11px 27px;
  font-size:12px;letter-spacing:.2em;text-transform:uppercase;
  font-weight:400;transition:.25s;cursor:pointer;
}
.gate:hover .enter,
.gate .enter:hover{background:var(--ink);color:var(--paper)}
.gate .enter:focus-visible{outline:2px solid var(--amber);outline-offset:4px}

/* ------------------------------------------- i comandi per chi non vede
   Fuori dallo schermo ma dentro il documento: un lettore di schermo li
   annuncia e il Tab li raggiunge. Non `display:none`, che li toglierebbe
   anche a loro. Se però il fuoco entra qui, tornano visibili: chi naviga da
   tastiera senza lettore di schermo deve vedere dove si trova.            */
.srOnly{
  position:absolute;width:1px;height:1px;
  margin:-1px;padding:0;overflow:hidden;
  clip-path:inset(50%);white-space:nowrap;border:0;
}
.srOnly:focus-within{
  position:static;width:auto;height:auto;
  margin:18px 0 0;padding:16px 18px;overflow:visible;
  clip-path:none;white-space:normal;
  border:1.5px solid var(--hair);border-radius:16px;
}
.srOnly h2{
  margin:0 0 10px;font-weight:400;
  font-size:9px;letter-spacing:.2em;text-transform:uppercase;color:var(--dust);
}
.srOnly .a11yRow{
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:10px;
}
.srOnly label{
  font-size:9px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-2);font-weight:400;min-width:14ch;
}
.srOnly input[type=range]{width:150px}
.srOnly button{
  appearance:none;border:1.5px solid var(--hair);background:transparent;
  color:var(--ink-2);font-family:var(--sans);font-weight:400;
  font-size:8.5px;letter-spacing:.12em;text-transform:uppercase;
  padding:6px 12px;border-radius:999px;cursor:pointer;
}
.srOnly button:hover{border-color:var(--ink);color:var(--ink)}
.srOnly :focus-visible{outline:2px solid var(--amber);outline-offset:3px}

/* ------------------------------------------------------------ adattamenti */
@media (min-width:780px){
  .controls{grid-template-columns:repeat(5,1fr);gap:0 26px}
  .loopCard{padding:20px 20px 24px}
  .stage{padding:34px 28px}
}
@media (max-width:719px){
  /* quattro per riga, tutte uguali: la riga occupa la stessa larghezza del
     riquadro dei quadranti, così le due righe si allineano al bordo sopra. */
  .moods{
    grid-template-columns:repeat(4,1fr);
    width:100%;
  }
  /* qui la testata è ormai su due righe e le sigle non confinano più con lo
     stato: il trattino separatore resterebbe appeso nel vuoto.            */
  .langSep{display:none}
  .mood{
    padding:7px 4px;
    font-size:8.5px;
    letter-spacing:.09em;
    text-align:center;
  }
}
@media (max-width:400px){
  .controls{grid-template-columns:1fr}
  .bar{justify-content:center}
}

/* ------------------------------------ trattamento tipografico del giapponese
   Il giapponese non ha maiuscolo, quindi il dispositivo su cui poggia tutta
   la gerarchia minuta del progetto — MAIUSCOLO più tracking ampio — qui non
   esiste. Si ricostruisce con gli unici due strumenti che restano: il corpo
   e il 字間, la spaziatura fra i glifi, che in giapponese è una scelta
   tipografica legittima ma vuole valori molto più stretti del latino.
   I caratteri sono inoltre più fitti di tratti e reggono peggio il corpo
   piccolo: vanno alzati di circa un punto per restare leggibili.           */
:lang(ja) .status,
:lang(ja) .ctl label,
:lang(ja) .loopHint,
:lang(ja) .realign,
:lang(ja) .mood,
:lang(ja) .lang,
:lang(ja) .docLink,
:lang(ja) .srOnly h2,
:lang(ja) .srOnly label,
:lang(ja) .srOnly button{
  text-transform:none;
  letter-spacing:.08em;
}
:lang(ja) .status{font-size:10.5px}
:lang(ja) .ctl label{font-size:10px}
:lang(ja) .loopHint{font-size:9px}
:lang(ja) .realign{font-size:9.5px}
:lang(ja) .mood{font-size:9px;letter-spacing:.04em}
:lang(ja) .power{font-size:12.5px;letter-spacing:.04em}
:lang(ja) .cardHead .t{letter-spacing:.04em}
/* il giapponese va a capo fra qualunque coppia di caratteri: serve più aria
   fra le righe, e meno spaziatura di quella pensata per le parole latine  */
:lang(ja) .gate p{line-height:1.9;letter-spacing:.02em}
:lang(ja) .gate .enter{letter-spacing:.12em}

/* chi preferisce meno movimento: si fermano le animazioni decorative */
@media (prefers-reduced-motion:reduce){
  .status.live .pulse,.power.on .dot{animation:none}
  .gate{transition:none}
}