/* ============================================================
   Lavora con noi (candidature.html dal 20 ott 2026): la bacheca a flusso (assets/js/bacheca-flusso.js).
   Idea dal pannello "flusso di lavoro" del reel di thearseniodev (20 ott 2026): a destra del titolo un pannello scuro inclinato in 3D,
   che si gira seguendo il mouse; dentro le 7 voci collegate da linee che si accendono una dopo l'altra.
   - I chip (le voci) stanno in rilievo sopra il pannello e quelli ai lati escono dai suoi bordi; nome + frase d'anteprima + "+".
   - In fondo al pannello una fascia fissa mostra la voce scelta (all'inizio Formazione): titolo e testo del retro dei pass.
   - Su telefono la stessa bacheca in piccolo, con il percorso ad albero simmetrico dall'alto in basso (chip col solo nome), inclinata dallo scorrimento.
   - Al posto delle scie di luce del video ci sono le barre vere del logo.
   Per fotogramma solo transform (pannello, barre) e opacity (linee e chip accesi, ognuno sul suo livello).
   Il pannello 3D non prende i clic (pointer-events: none): solo chip, fascia e bottoni.
   ============================================================ */
.fl { position: relative; display: grid; grid-template-columns: minmax(0, .62fr) minmax(0, 1.38fr); gap: clamp(32px, 5vw, 96px); align-items: center;
  min-height: 100svh; padding: clamp(104px, 13vh, 140px) 0 clamp(40px, 6vh, 80px); }
/* le barre (left/right -10%) uscivano dal bordo dello schermo e la pagina scorreva di lato (18px su telefono): si taglia al bordo della pagina,
   non della sezione, così i chip ai lati restano interi. clip e non hidden: lo sticky della sezione app continua a funzionare */
main:has(> .fl) { overflow-x: clip; }
/* titolo sempre su "Hai mai / lavorato nelle / pubbliche / relazioni?": largo 9,3em (ci sta "lavorato nelle", 8,4em, non "Hai mai lavorato", 10,2em),
   e il carattere non supera la colonna (100cqi / 9,3). Prima cresceva con l'altezza dello schermo più della colonna e da 1536px "nelle" andava a capo */
.fl__head { container-type: inline-size; }
.fl__head h1 { font-size: min(clamp(1.9rem, min(3vw, 5.6vh), 3.3rem), 100cqi / 9.3); width: 9.3em; max-width: 100%; text-wrap: wrap; }
.fl__head .lead { margin-top: 18px; max-width: 32ch; text-wrap: pretty; }
.fl__head .btn { margin-top: 28px; }

/* la scena: misura fissa dal CSS (niente salti quando lo script crea il pannello) */
.fl__scene { --bar: 46px; --dock: 30%; position: relative; aspect-ratio: 1000 / 780; perspective: 1600px; perspective-origin: 28% 40%; pointer-events: none; }
/* barre del logo dietro al pannello, al posto delle scie di luce: ferme, si spostano appena (parallasse) */
.fl-bars { position: absolute; left: -10%; right: -10%; bottom: -8%; height: 70%; opacity: .42;
  background: linear-gradient(0deg, rgba(85,26,142,0) 0%, var(--viola) 22%, var(--viola-chiaro) 62%, rgba(155,92,240,0) 100%);   /* sfumate sopra e sotto: niente bordo netto */
  -webkit-mask: url("../img/barre.svg") 50% 100% / 100% auto no-repeat; mask: url("../img/barre.svg") 50% 100% / 100% auto no-repeat; will-change: transform; }
.fl-in, .fl-panel { position: absolute; inset: 0; transform-style: preserve-3d; }
.fl-panel { transform-origin: 40% 50%; will-change: transform; transform: rotateY(-15deg) rotateX(7deg); }   /* la stessa inclinazione a riposo che scrive lo script: niente scatto al primo fotogramma */
/* il fondo del pannello: vetro scuro (senza sfocatura, che in 3D costa) */
.fl-glass { position: absolute; inset: 0; border-radius: 22px; background: linear-gradient(160deg, rgba(36,16,62,.92), rgba(16,7,28,.94));
  border: 1px solid rgba(255,255,255,.12); box-shadow: 0 70px 120px -50px rgba(0,0,0,.95), inset 0 1px 0 rgba(255,255,255,.08); }
.fl-bar { position: absolute; left: 0; right: 0; top: 0; height: var(--bar); display: flex; align-items: center; gap: 8px; padding: 0 18px;
  border-bottom: 1px solid rgba(255,255,255,.08); transform: translateZ(1px); }
.fl-bar i { width: 9px; height: 9px; border-radius: 50%; background: rgba(255,255,255,.18); }
.fl-bar b { margin-left: 10px; font: 700 .78rem/1 var(--font-display); letter-spacing: .02em; color: rgba(247,243,255,.7); }

/* il grafico, tra la barra in alto e la fascia in fondo: linee un filo sollevate dal vetro, chip ancora più su (in rilievo) */
.fl-graph { position: absolute; left: 0; right: 0; top: var(--bar); bottom: var(--dock); transform: translateZ(30px); transform-style: preserve-3d; }
.fl-links { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.fl-links path { fill: none; stroke-linecap: round; }
.fl-links--base path { stroke: rgba(247,243,255,.16); stroke-width: 1.5; }
.fl-links--on { opacity: 0; will-change: opacity; }
.fl-links--on path { stroke: #c4a1ff; stroke-width: 2.2; filter: drop-shadow(0 0 6px rgba(155,92,240,.9)); }

.fl-node { position: absolute; left: var(--x); top: var(--y); width: min(184px, 22%); transform: translate(-50%, -50%) translateZ(44px); pointer-events: auto; cursor: pointer;
  display: grid; gap: 6px; padding: 12px 14px 13px; border-radius: 14px; text-align: left;
  background: #1f0e35; border: 1px solid rgba(255,255,255,.16); color: var(--bianco); font: inherit;
  box-shadow: 0 22px 34px -16px rgba(0,0,0,.9), inset 0 1px 0 rgba(255,255,255,.08);   /* ombra sul vetro: il chip sta sollevato */
  transition: border-color .25s, background .25s; }
.fl-node__t { display: flex; align-items: center; gap: 9px; padding-right: 22px; font: 800 .9rem/1.15 "Sora", var(--font-display); letter-spacing: -.02em; }
.fl-node__t::before { content: ""; flex: none; width: 9px; height: 9px; border-radius: 3px; background: var(--paper); box-shadow: 0 0 0 1px rgba(255,255,255,.3); }
/* l'anteprima: la frase del fronte del pass, su due righe al massimo */
.fl-node__s { font-size: .74rem; line-height: 1.35; color: rgba(247,243,255,.62);
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; }
/* "+": dice che dietro c'è altro; con la voce aperta diventa "−" */
.fl-node__plus { position: absolute; top: 10px; right: 10px; width: 20px; height: 20px; border-radius: 50%; border: 1.5px solid rgba(247,243,255,.45); }
.fl-node__plus::before, .fl-node__plus::after { content: ""; position: absolute; left: 50%; top: 50%; width: 8px; height: 1.5px; margin: -.75px 0 0 -4px; border-radius: 2px; background: currentColor; transition: transform .3s var(--ease); }
.fl-node__plus::after { transform: rotate(90deg); }
.fl-node.is-on .fl-node__plus { border-color: #c4a1ff; }
.fl-node.is-on .fl-node__plus::after { transform: rotate(0deg); }
.fl-node__glow { position: absolute; inset: -1px; border-radius: inherit; pointer-events: none; opacity: 0; will-change: opacity;
  box-shadow: 0 0 0 1.5px #c4a1ff, 0 0 26px -2px rgba(155,92,240,.75); }
@media (hover: hover) and (pointer: fine) { .fl-node:hover { border-color: rgba(196,161,255,.6); background: #29133f; } }
.fl-node.is-on { border-color: #c4a1ff; background: #2c1549; }
.fl-node:focus-visible { outline: 2px solid var(--accento); outline-offset: 3px; }

/* la fascia in fondo al pannello: la voce scelta. Sempre lo stesso stile dei chip (vetro scuro, bordo, ombra) e in rilievo come loro:
   niente più colori del pass che cambiavano a ogni voce (non piacevano) */
.fl-detail { position: absolute; left: 2.5%; right: 2.5%; bottom: 3%; height: calc(var(--dock) - 6%); pointer-events: auto; overflow: hidden; isolation: isolate;
  display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 6px 28px; align-content: center; padding: 18px 26px; border-radius: 16px;
  background: #1f0e35; color: var(--bianco); border: 1px solid rgba(255,255,255,.16); transform: translateZ(44px);
  box-shadow: 0 30px 50px -22px rgba(0,0,0,.9), inset 0 1px 0 rgba(255,255,255,.08); }
.fl-detail__head { align-self: center; }
.fl-detail .rk-k { font: 700 .72rem/1.2 var(--font-body); letter-spacing: .12em; text-transform: uppercase; color: #c4a1ff; }
.fl-detail h3 { margin-top: 8px; font: 800 1.35rem/1.1 "Sora", var(--font-display); letter-spacing: -.03em; text-wrap: balance; }
.fl-detail__body { align-self: center; }
.fl-detail__body p { font-size: .9rem; line-height: 1.5; color: rgba(247,243,255,.72); text-wrap: pretty; }
.fl-detail__body .btn { margin-top: 12px; }

@media (max-width: 860px) {
  /* telefono: titolo sopra, sotto la stessa bacheca del computer in piccolo; l'inclinazione segue lo scorrimento */
  .fl { grid-template-columns: minmax(0, 1fr); gap: 28px; min-height: 0; padding: 92px 0 40px; }
  .fl__head h1 { width: auto; max-width: none; font-size: var(--m-h2); line-height: 1.05; letter-spacing: var(--m-track); text-wrap: balance; }
  .fl__head .lead { margin-top: 12px; font-size: var(--m-body); line-height: 1.5; }
  .fl__head .btn { margin-top: 20px; padding: .8rem 1.4rem; }
  .fl__scene { --bar: 36px; --dock: 38%; aspect-ratio: 358 / 530; perspective: 1100px; perspective-origin: 50% 20%; }
  .fl-bars { height: 46%; bottom: -4%; }
  .fl-panel { transform: rotateX(16deg); }   /* come lo script quando la bacheca entra dal basso */
  .fl-glass { border-radius: 18px; }
  .fl-bar { padding: 0 12px; gap: 6px; }
  .fl-bar i { width: 7px; height: 7px; }
  .fl-bar b { margin-left: 6px; font-size: .68rem; }
  .fl-node { width: auto; max-width: 108px; text-align: center; padding: 7px 9px 8px; border-radius: 10px; gap: 0; transform: translate(-50%, -50%) translateZ(16px);
    box-shadow: 0 14px 22px -12px rgba(0,0,0,.9), inset 0 1px 0 rgba(255,255,255,.08); }
  .fl-node__t { justify-content: center; gap: 6px; padding-right: 0; font-size: var(--m-label); line-height: 1.15; }
  .fl-node__t::before { width: 7px; height: 7px; border-radius: 2px; }
  .fl-node__s { display: none; }   /* sul telefono il chip tiene solo il nome; il "+" dice che si apre */
  .fl-node__plus { top: -7px; right: -7px; width: 17px; height: 17px; background: #1f0e35; }
  .fl-node__plus::before, .fl-node__plus::after { width: 7px; margin-left: -3.5px; }
  .fl-detail { left: 3%; right: 3%; bottom: 3%; height: auto;   /* alta quanto il suo testo; se la voce più lunga non ci sta, bacheca-flusso.js (fitDock) allunga il pannello */ grid-template-columns: minmax(0, 1fr); gap: 4px; align-content: start; padding: 16px 16px 14px; border-radius: 14px; transform: translateZ(16px); }   /* in rilievo come i chip del telefono */
  .fl-detail h3 { margin-top: 4px; font-size: var(--m-h3); }
  .fl-detail__body p { margin-top: 6px; font-size: var(--m-small); }
  .fl-detail .rk-k { font-size: var(--m-label); }
  .fl-detail__body .btn { margin-top: 10px; }
}
@media (prefers-reduced-motion: reduce) { .fl-links--on { opacity: .6; } }