/* =====================================================================
   FF Theme · elementi comuni delle scene (home e pagine interne, dopo guscio.css)
   Occhiello, titoli, testo d'apertura, righe di azioni e di etichette, dati in riga, contatti,
   scheda del disegno su mobile, testi che scorrono al passaggio del mouse, easter egg del disegno.
   Spostati da home.css nella 0.4.0: la disposizione delle scene resta nei file delle pagine
   (home.css = scroll a scene, pagina.css = pagine interne a scroll naturale).
   ===================================================================== */

/* niente selezione su disegno e schede; i testi veri restano selezionabili */
.ff-scene,.ff-slot,.ff-readout{-webkit-user-select:none;user-select:none}
.ff-scene h1,.ff-scene h2,.ff-lead,.ff-answer p,.ff-contact dd,.ff-legal span,.ff-works button span{-webkit-user-select:text;user-select:text}

/* ===== Canvas dell'oggetto narrativo: fisso, non intercetta mai il mouse ===== */
#ff-obj{position:fixed;inset:0;width:100%;height:100%;z-index:0;pointer-events:none}

/* ===== Contenuto delle scene ===== */
.ff-slot{display:none}
.ff-in{max-width:min(46rem,46vw);display:grid;gap:var(--ff-vgap);min-width:0}
.ff-eyebrow{display:flex;flex-wrap:wrap;gap:6px 16px;color:var(--muted);margin:0}
.ff-eyebrow b{color:var(--accent);font-weight:500}
.ff-scene h1,.ff-scene h2{margin:0;font-weight:600;letter-spacing:-.035em;line-height:.96;text-wrap:balance}
/* misura massima dei titoli: scala su larghezza e altezza. Il JS la riduce quanto basta per stare in due righe */
.ff-scene h1{font-size:clamp(2.5rem,min(6.1vw,8.6vh),6.6rem)}
.ff-scene h2{font-size:clamp(2.2rem,min(4.9vw,7.4vh),5.2rem)}
.ff-lead{margin:0;max-width:46ch;font-size:clamp(1rem,2.1vh,1.15rem);line-height:1.5}
.ff-actions{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.ff-tags{display:flex;flex-wrap:wrap;gap:6px;margin:0;padding:0;list-style:none}
.ff-tags li{border:1px solid var(--line);padding:7px 10px;font:400 .74rem/1 var(--ff-mono);letter-spacing:.04em;text-transform:uppercase}
.ff-facts{display:flex;flex-wrap:wrap;margin:0;border-top:1px solid var(--line);max-width:34rem}
.ff-facts div{flex:1 1 0;padding:clamp(8px,1.6vh,14px) 18px 0 0;min-width:7rem}
.ff-facts dt{font:400 .7rem/1 var(--ff-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.ff-facts dd{margin:8px 0 0;font-size:clamp(1.4rem,3.4vh,1.9rem);font-weight:600;letter-spacing:-.03em;line-height:1;font-variant-numeric:tabular-nums}

/* la lettura tecnica lampeggia in magenta quando cambia spostando l'elemento magenta del disegno */
.ff-flash{animation:ff-flash 900ms var(--ff-ease-out)}
@keyframes ff-flash{0%,35%{color:var(--accent)}}

/* testo troncato che scorre al passaggio del mouse (solo l'elemento sotto il puntatore) */
.ff-mq i{font-style:normal}
.ff-mq.is-run{text-overflow:clip}
.ff-mq.is-run i{display:inline-block;will-change:transform}

/* interruttore a due o tre voci (home: Lavori / Mockup; prezzi: listini e Con WordPress / Senza CMS) */
.ff-switch{display:inline-flex;gap:3px;padding:3px;border:1px solid var(--line);justify-self:start}
.ff-switch button{border:0;background:none;padding:7px 14px;font:500 .92rem/1 var(--ff-sans);color:var(--muted);cursor:pointer;display:inline-flex;gap:8px;align-items:baseline;transition:background-color var(--ff-t-fast),color var(--ff-t-fast)}
.ff-switch button small{font:400 .68rem/1 var(--ff-mono)}
.ff-switch button:hover{color:var(--fg)}
.ff-switch button[aria-pressed="true"]{background:var(--fg);color:var(--bg)}

/* ===== Easter egg: l'elemento magenta del disegno si prende e si sposta (desktop col mouse) ===== */
body.ff-grab{cursor:grab}
body.ff-grabbing,body.ff-grabbing *{cursor:grabbing!important;-webkit-user-select:none;user-select:none}

/* ===== Contatti (ultima scena) ===== */
.ff-contact{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 28px;border-top:1px solid var(--line);max-width:40rem;margin:0}
.ff-contact div{padding:clamp(8px,1.6vh,14px) 0;border-bottom:1px solid var(--line);min-width:0}
.ff-contact dt{color:var(--muted)}
.ff-contact dd{margin:6px 0 0;font-size:1.05rem;display:flex;flex-wrap:wrap;align-items:center;gap:10px;min-width:0}
.ff-contact dd a{text-decoration:none;overflow-wrap:anywhere}
.ff-contact dd a:hover{color:var(--accent)}

/* ===== Tablet e mobile ===== */
@media (max-width:899px){
  .ff-in{max-width:100%;gap:16px}
  /* l'occhiello passa nella scheda del disegno: un livello di testo in meno (le pagine interne lo rimettono) */
  .ff-eyebrow{display:none}
  /* scheda del disegno: numero e nome in alto, lettura tecnica in basso, reticolo appena percettibile dentro
     (3,5% sulle sezioni chiare, 1,5% sulle scure). Il canvas disegna solo dentro l'area <i> */
  .ff-slot{--grid:color-mix(in srgb,var(--fg) 3.5%,transparent);
    position:relative;display:block;width:100%;margin-bottom:22px;padding:38px 14px 36px;flex:none;
    background-color:var(--surface);border:1px solid var(--line);
    background-image:linear-gradient(var(--grid) 1px,transparent 1px),linear-gradient(90deg,var(--grid) 1px,transparent 1px);
    background-size:24px 24px;background-position:-1px -1px}
  .ff-scene[data-tone="dark"] .ff-slot{--grid:color-mix(in srgb,var(--fg) 1.5%,transparent)}
  .ff-slot i{display:block;width:100%;max-width:560px;margin-inline:auto;height:min(48vw,24svh)}
  .ff-slot b{position:absolute;top:13px;left:14px;font-weight:400;color:var(--fg)}
  .ff-slot b span{color:var(--accent)}
  .ff-slot p{position:absolute;left:14px;right:14px;bottom:12px;margin:0;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .ff-scene h1{font-size:clamp(2.3rem,10vw,3.1rem)}
  .ff-scene h2{font-size:clamp(2rem,8.6vw,2.7rem)}
  .ff-lead{font-size:1rem}
  .ff-contact{grid-template-columns:1fr}
}
/* tablet: la scheda del disegno cresce, paragrafi più larghi (circa 70 caratteri per riga) */
@media (min-width:600px) and (max-width:899px){
  .ff-slot i{height:min(48vw,34svh)}
  .ff-lead{max-width:70ch}
  .ff-lead{font-size:1.075rem}
}