/* ───────────────────────────────────────────────────────────
   Hero: impianto da onenil.com (Snellenberg), CULTURA/web/onenil/SPEC.md,
   con lo sfondo d'acqua in codice al posto della foto (direzione dell'art director, 14/10/2026).
   ─────────────────────────────────────────────────────────── */
@font-face {                                   /* Archivo variabile con l'asse della larghezza, ospitato in locale */
  font-family: 'Archivo Wide'; font-style: normal; font-weight: 100 900; font-stretch: 62% 125%; font-display: swap;
  src: url(./fonts/archivo-var-latin.woff2) format('woff2');
}

.fa-hero { position: relative; min-height: 100svh; overflow: hidden; isolation: isolate; }
#fa-water { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 0; display: block; pointer-events: none; }
.fa-hero-in {
  position: relative; z-index: 2; min-height: 100svh;
  display: flex; flex-direction: column; justify-content: center;
  padding: 0 12vw; will-change: transform;
}

/* titolo: grottesco largo, maiuscolo, a sinistra; parole che salgono da sotto una maschera */
.fa-h1 {
  margin: 0; max-width: 68%;
  font-family: 'Archivo Wide', Archivo, 'Helvetica Neue', Helvetica, sans-serif;
  font-weight: 800; font-stretch: 116%; text-transform: uppercase;
  font-size: clamp(40px, 5.2vw, 96px); line-height: .9; letter-spacing: -.01em; color: #fff;
}
.fa-l { display: block; overflow: hidden; padding-bottom: .04em; }
@media (min-width: 761px) { .fa-h1 { max-width: none; } .fa-l { white-space: nowrap; } }   /* tre righe esatte: INTO THE BLUE, / WHERE IDENTITIES / take depth. */
.fa-w { display: inline-block; }
/* il gesto a mano: minuscolo, bianco, 1.3x, inclinato, morde la riga sopra; sale per ultimo */
.fa-l-hand { overflow: visible; margin-top: -.1em; }
.fa-hand {
  font-family: 'Caveat', cursive; font-style: normal; font-weight: 600; text-transform: none;
  font-stretch: 100%; font-size: 1.3em; line-height: .8; letter-spacing: 0; color: #fff;
  transform: rotate(-3deg); transform-origin: left bottom;
}
/* nome e ruolo: maiuscoletto spaziato, il nome pieno, una barretta, il ruolo al 60% */
.fa-sub {
  display: flex; align-items: center; gap: 16px; margin: 36px 0 0;
  font-family: Archivo, 'Helvetica Neue', Helvetica, sans-serif; font-size: 12px; font-weight: 600; line-height: 1.3;
  letter-spacing: .22em; text-transform: uppercase; color: #fff;
}
.fa-sub b { font-weight: 600; }
.fa-sub em { display: block; flex: none; width: 1px; height: 14px; background: rgba(255, 255, 255, .35); }
.fa-sub span { opacity: .6; }

/* il bollino: testo che gira, metri al centro, si tiene premuto */
#fa-badge {
  position: absolute; z-index: 3; right: 12vw; top: 50%; width: 180px; height: 180px; margin-top: -90px;
  padding: 0; border: 0; border-radius: 50%; background: none; color: #fff; cursor: pointer;
  -webkit-tap-highlight-color: transparent; touch-action: none; user-select: none; -webkit-user-select: none;
}
.fa-ring-slot { position: absolute; inset: 0; pointer-events: none; }
.fa-badge-ring { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; animation: fa-spin 15s linear infinite reverse; }
#fa-badge.is-holding .fa-badge-ring { animation-play-state: paused; }
.fa-badge-ring text {
  font-family: Archivo, 'Helvetica Neue', Helvetica, sans-serif; font-weight: 600; font-size: 11px;
  letter-spacing: .18em; text-transform: uppercase; fill: #fff;
}
.fa-badge-num {
  position: absolute; inset: 0; display: flex; align-items: baseline; justify-content: center; padding-top: 74px;
  font-family: 'Archivo Wide', Archivo, sans-serif; font-stretch: 116%; font-weight: 800; font-size: 26px; line-height: 1;
  font-variant-numeric: tabular-nums;
}
.fa-badge-num i { font-style: normal; font-weight: 400; font-size: 11px; margin-left: 3px; opacity: .7; }
#fa-badge::after {                     /* anello che si chiude mentre si tiene premuto */
  content: ""; position: absolute; inset: 34px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .25);
  transition: border-color .4s ease;
}
#fa-badge:hover::after, #fa-badge.is-holding::after { border-color: rgba(123, 224, 255, .8); }
#fa-badge:focus-visible { outline: 2px solid #fff; outline-offset: 6px; }
@keyframes fa-spin { to { transform: rotate(360deg); } }

/* scendi: verticale in basso a sinistra */
.fa-explore {
  position: absolute; z-index: 3; left: clamp(24px, 4vw, 64px); bottom: clamp(26px, 5vh, 56px);
  display: flex; flex-direction: column; align-items: center; gap: 16px;
  font-family: Archivo, sans-serif; font-size: 12px; letter-spacing: 3px; text-transform: uppercase; color: rgba(255, 255, 255, .8);
}
.fa-explore span { writing-mode: vertical-rl; }
.fa-explore i { font-style: normal; font-size: 14px; letter-spacing: 0; }
@media (min-width: 1025px) {   /* computer: più piccola e più tenue, */
  html #hero .fa-explore { gap: 10px; font-size: 9px; letter-spacing: 1.8px; color: rgba(255, 255, 255, .6); }   /* html: batte il 10px di fa-motion.css */
  html #hero .fa-explore i { font-size: 11px; }
}

/* il lampeggio dei lavori, in fondo alla discesa */
#fa-flash { position: absolute; inset: 0; z-index: 1; pointer-events: none; opacity: 0; }
#fa-flash img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; }
#fa-flash img.on { opacity: 1; }
#fa-flash::after { content: ""; position: absolute; inset: 0; background: rgba(5, 10, 14, .35); }

/* pillola "Contattami" nella barra in alto: bianca, al passaggio dentro scorre il gradiente del fondo */
.fa-pill {
  position: relative; display: inline-flex; align-items: center; height: 48px; padding: 0 28px; border-radius: 100px; overflow: hidden;
  background: #fff; color: #050a0e; text-decoration: none;
  font-family: Archivo, 'Helvetica Neue', Helvetica, sans-serif; font-weight: 600; font-size: 16px; white-space: nowrap;
  transition: transform .4s cubic-bezier(.16, 1, .3, 1), color .4s ease;
}
.fa-pill::before {
  content: ""; position: absolute; inset: 0; opacity: 0; transition: opacity .4s ease;
  background: linear-gradient(110deg, #050a0e 0%, #0b3c5d 35%, #7be0ff 50%, #0b3c5d 65%, #050a0e 100%); background-size: 260% 100%;
  animation: fa-flow 3.2s linear infinite; animation-play-state: paused;
}
.fa-pill span { position: relative; }
@media (hover: hover) {
  .fa-pill:hover { transform: translateY(-2px); color: #fff; }
  .fa-pill:hover::before { opacity: 1; animation-play-state: running; }
}
@keyframes fa-flow { from { background-position: 100% 0; } to { background-position: -160% 0; } }
.fa-navright { gap: 12px !important; }
.fa-navright > div:first-child { margin-right: 32px; }   /* IT/EN più a sinistra */

@media (max-width: 760px) {
  .fa-hero-in { padding: 0 24px; justify-content: flex-end; padding-bottom: 30svh; }
  .fa-h1 { max-width: 100%; font-size: clamp(34px, 10.5vw, 56px); }
  .fa-sub { flex-direction: column; align-items: flex-start; gap: 8px; margin-top: 28px; font-size: 11px; }   /* telefono: nome sopra, ruolo sotto, senza barretta */
  .fa-sub em { display: none; }
  #fa-badge { width: 132px; height: 132px; right: 20px; top: auto; bottom: 7svh; margin-top: 0; }
  .fa-badge-num { padding-top: 54px; font-size: 20px; }
  #fa-badge::after { inset: 25px; }
  .fa-explore { display: none; }
  .fa-pill { height: 40px; padding: 0 18px; font-size: 14px; }
  .fa-navright > div:first-child { margin-right: 10px; }
}

@media (prefers-reduced-motion: reduce) {
  .fa-badge-ring, .fa-pill::before { animation: none !important; }
}

/* ───────────────────────────────────────────────────────────
   Resto del sito (14/10/2026, direzione dell'art director):
   nero #050a0e pieno, la luce cala scendendo, grana come nella hero.
   ─────────────────────────────────────────────────────────── */
#ambient-blob, #vignette { display: none !important; }   /* via la macchia sfocata fissa e il velo: erano le cose più pesanti */

/* ── La barra di scorrimento è il sub (16/10/2026, idea di Francesco) ──────────
   Niente metri: una linea sottile sul bordo destro, il sub che scende, la scia dietro di lui.
   È una barra vera (trascini il sub, clic sulla traccia per saltare); rotella, tastiera e
   trackpad restano del browser. La crea assets/fa-hero.js, è uguale su tutte le pagine. */
html { scrollbar-width: none; scrollbar-gutter: auto; }                 /* Firefox, Chrome, Edge, Safari 18.2+ */
html::-webkit-scrollbar, body::-webkit-scrollbar { display: none; width: 0; height: 0; }   /* Safari e Chrome più vecchi */

#fa-scroll {
  --sb-x: clamp(16px, 1.8vw, 26px);          /* distanza della linea dal bordo destro */
  --sb-w: 32px;                              /* larghezza della zona che si può prendere col mouse */
  --sb-top: clamp(104px, 14vh, 126px);       /* parte sotto la testata */
  --sb-bot: clamp(76px, 11vh, 104px);        /* sotto resta lo spazio per "Risali" */
  position: fixed; z-index: 40; top: 0; bottom: 0;
  right: max(0px, calc(var(--sb-x) - var(--sb-w) / 2)); width: var(--sb-w);
  color: #fff; pointer-events: none;
  transition: opacity .4s ease, color .6s cubic-bezier(.6,0,.1,1);
}
#fa-scroll .fa-sb-track { position: absolute; left: 0; right: 0; top: var(--sb-top); bottom: var(--sb-bot); pointer-events: auto; touch-action: none; transition: opacity .6s cubic-bezier(.16,1,.3,1); }
#fa-scroll .fa-sb-line { position: absolute; left: 50%; top: 0; bottom: 0; width: 1px; margin-left: -.5px; background: currentColor; opacity: .16; transition: opacity .3s ease; }
#fa-scroll .fa-sb-wake { position: absolute; left: 50%; top: 0; width: 1px; height: 0; margin-left: -.5px; background: linear-gradient(to bottom, transparent, currentColor); opacity: .5; transition: color .6s ease; }
#fa-scroll .fa-sb-floor { position: absolute; left: 50%; bottom: 0; width: 16px; height: 1px; margin-left: -8px; background: rgba(123,224,255,.85); opacity: 0; transform: scaleX(.2); transition: opacity .5s ease, transform .7s cubic-bezier(.16,1,.3,1); }
#fa-scroll .fa-sb-sub { position: absolute; left: 50%; top: 0; width: 7px; height: 7px; margin: -3.5px 0 0 -3.5px; border-radius: 50%; background: currentColor; box-shadow: 0 0 10px rgba(255,255,255,.55); cursor: grab; scale: 1; transition: scale .25s cubic-bezier(.16,1,.3,1); will-change: translate; }
#fa-scroll .fa-sb-sub::before { content: ''; position: absolute; inset: -11px; border-radius: 50%; }   /* il sub si prende anche un po' fuori dal pallino */
#fa-scroll .fa-sb-ring { position: absolute; left: 50%; top: 50%; width: 26px; height: 26px; border-radius: 50%; border: 1px solid rgba(123,224,255,.8); opacity: 0; transform: translate(-50%,-50%) scale(.4); pointer-events: none; }
@media (hover: hover) {
  #fa-scroll .fa-sb-track:hover .fa-sb-line { opacity: .32; }
  #fa-scroll .fa-sb-track:hover .fa-sb-sub { scale: 1.3; }
}
html.fa-sb-drag #fa-scroll .fa-sb-sub { scale: 1.45; opacity: 1 !important; }   /* mentre lo tieni non sparisce mai, neanche in Approccio */
html.fa-sb-drag, html.fa-sb-drag * { cursor: grabbing !important; user-select: none !important; -webkit-user-select: none !important; }

/* nella hero la barra c'è ma resta in secondo piano: lì parla il bollino. Tenendolo premuto torna piena */
html.fa-hashero:not(.fa-past-hero) #fa-scroll .fa-sb-track { opacity: .45; }
html.fa-hashero #fa-scroll.is-hold .fa-sb-track { opacity: 1; }

/* sui colori chiari delle pagine progetto la barra diventa scura, come il testo */
body.on-light #fa-scroll { color: #050a0e; }
body.on-light #fa-scroll .fa-sb-sub { box-shadow: none; }

/* il fondale: il sub si accende di azzurro e manda due anelli, la scia si colora, compare "Risali" */
#fa-scroll.at-floor .fa-sb-floor { opacity: 1; transform: scaleX(1); }
#fa-scroll.at-floor .fa-sb-sub { animation: bedReached .9s cubic-bezier(.16,1,.3,1) forwards; }
#fa-scroll.at-floor .fa-sb-ring { animation: bedRing 1.4s cubic-bezier(.16,1,.3,1) .05s 2 forwards; }
#fa-scroll.at-floor .fa-sb-wake { color: #7be0ff; }
#fa-scroll .fa-sb-splash { position: absolute; left: 50%; width: 22px; height: 22px; margin: -11px 0 0 -11px; border-radius: 50%; border: 1px solid rgba(123,224,255,.75); opacity: 0; pointer-events: none; }   /* il tuffo del sub */
#fa-scroll.is-sink .fa-sb-track { pointer-events: none; }
#fa-scroll .fa-sb-diver { position: absolute; left: 50%; width: 7px; height: 7px; margin: -3.5px 0 0 -3.5px; border-radius: 50%; background: currentColor; box-shadow: 0 0 10px rgba(255,255,255,.55); opacity: 0; pointer-events: none; }
#fa-scroll.is-sink .fa-sb-sub { visibility: hidden; }   /* mentre la copia si tuffa, il sub vero aspetta nascosto */
#fa-scroll.is-sink .fa-sb-track { -webkit-mask-image: linear-gradient(to bottom, transparent calc(var(--sb-k) - 24%), #000 var(--sb-k)); mask-image: linear-gradient(to bottom, transparent calc(var(--sb-k) - 24%), #000 var(--sb-k)); }
#fa-scroll.is-rise .fa-sb-track { -webkit-mask-image: linear-gradient(to bottom, #000 calc(var(--sb-k) - 24%), transparent var(--sb-k)); mask-image: linear-gradient(to bottom, #000 calc(var(--sb-k) - 24%), transparent var(--sb-k)); }
#fa-scroll .fa-sb-up { position: absolute; left: 50%; width: 80px; margin: 0 0 0 -40px; bottom: calc(var(--sb-bot) - 62px); display: flex; flex-direction: column; align-items: center; gap: 5px; background: none; border: 0; padding: 8px 6px; font-family: Archivo, 'Helvetica Neue', Helvetica, sans-serif; color: rgba(123,224,255,.9); cursor: pointer; opacity: 0; visibility: hidden; pointer-events: none; transition: color .35s ease; }
#fa-scroll .fa-sb-up .fa-sb-arrow { font-size: 13px; line-height: 1; }
#fa-scroll .fa-sb-up .fa-sb-lab { font-size: 9px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; white-space: nowrap; }
#fa-scroll.at-bed .fa-sb-up { visibility: visible; pointer-events: auto; animation: bedLabel .7s cubic-bezier(.16,1,.3,1) .25s both; }
#fa-scroll .fa-sb-up:focus-visible { outline: 1px solid #7be0ff; outline-offset: 2px; }
@media (hover: hover) { #fa-scroll .fa-sb-up:hover { color: #fff; } }
@keyframes bedReached { 0% { box-shadow: 0 0 10px rgba(255,255,255,.6); background: #fff; } 40% { box-shadow: 0 0 26px 6px rgba(123,224,255,.9); background: #bff0ff; } 100% { box-shadow: 0 0 16px 2px rgba(123,224,255,.8); background: #bff0ff; } }
@keyframes bedRing { 0% { opacity: .8; transform: translate(-50%,-50%) scale(.4); } 100% { opacity: 0; transform: translate(-50%,-50%) scale(3.4); } }
@keyframes bedLabel { from { opacity: 0; transform: translateY(6px); letter-spacing: .34em; } to { opacity: 1; transform: translateY(0); letter-spacing: .2em; } }

/* apertura e menu: la barra sfuma con la pagina e non si può toccare */
html.fa-diving #fa-scroll { opacity: 0 !important; }
html.fa-diving #fa-scroll *, html[data-fa-menu="open"] #fa-scroll * { pointer-events: none !important; }

/* telefono: solo indicatore, si vede mentre scorri e si spegne dopo un attimo; niente "Risali" (c'è il pollice) */
@media (hover: none) and (pointer: coarse) {
  #fa-scroll { --sb-x: 6px; --sb-w: 12px; --sb-top: 84px; --sb-bot: 28px; opacity: 0; }
  #fa-scroll.is-moving, #fa-scroll.is-hold, #fa-scroll.at-floor, #fa-scroll.is-sink, #fa-scroll.is-rise { opacity: 1; }
  #fa-scroll .fa-sb-track { pointer-events: none; }
  #fa-scroll .fa-sb-sub { width: 5px; height: 5px; margin: -2.5px 0 0 -2.5px; }
  #fa-scroll .fa-sb-up { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  #fa-scroll .fa-sb-ring { display: none; }
  #fa-scroll .fa-sb-sub, #fa-scroll .fa-sb-up { animation-duration: .01s !important; animation-delay: 0s !important; }
}
#fa-badge { right: 7vw; }

/* "Contattami": al passaggio colore pieno, il ciano della superficie */
.fa-pill { transition: background-color .2s ease; }
.fa-pill::before { display: none; }
@media (hover: hover) {
  .fa-pill:hover { background: #7be0ff; color: #050a0e; transform: none; }
}

/* apertura: trasparente, sotto c'è la stessa tela della hero; il gradiente fermo resta solo come riserva senza WebGL */
.fa-pre-bg { background: none; }
html.fa-nogl .fa-pre-bg {
  background:
    radial-gradient(ellipse 70% 55% at 24% -6%, rgba(123, 224, 255, .38) 0%, rgba(19, 96, 127, .32) 30%, rgba(11, 60, 93, 0) 70%),
    linear-gradient(to bottom, #0d3550 0%, #08213a 38%, #050a0e 78%);
}
html.fa-nogl #fa-pre { background: #050a0e !important; }

/* il nero di fondo; la tela sta sopra il fondo (z 0) e la pagina, che viene dopo nel documento, le sta sopra */
html, body { background: #050a0e !important; }

/* la barra sui fondi chiari (Dalen, Made In, i colori chiari dei prodotti): marchio, menu, IT/EN e Contattami scuri.
   !important: batte lo style="" delle linee del menu e quello che scrive navBox() */
html:not([data-fa-menu="open"]) body.on-light .nav .logo-l img { filter: invert(1); }
html:not([data-fa-menu="open"]) body.on-light #nav-burger span { background: #050a0e !important; }
html:not([data-fa-menu="open"]) body.on-light .nav .lang button { color: rgba(5,10,14,.5); }
html:not([data-fa-menu="open"]) body.on-light .nav .lang button.on { color: #050a0e; }
html:not([data-fa-menu="open"]) body.on-light .nav .lang span { color: rgba(5,10,14,.25); }
html:not([data-fa-menu="open"]) body.on-light .nav .fa-pill { background: #050a0e; color: #fff; }
html:not([data-fa-menu="open"]) body.on-light .nav { background: rgba(5,10,14,.04) !important; border-bottom-color: rgba(5,10,14,.12) !important; }
.nav .logo-l img { transition: filter .3s ease; }