/*
 * Pharos People – sistema visivo condiviso (card, ritmo, movimento).
 * Caricato in tutte le pagine: <link rel="stylesheet" href="/eclipse-ui.css"> + <script src="/eclipse-motion.js" defer></script>
 *
 * Regole (dalla ricerca UX/UI di ottobre 2026):
 * - Si animano solo transform e opacity. Durate: interazioni 100-200 ms, ingressi 300-500 ms.
 * - Il movimento è "opt-in": esiste solo con prefers-reduced-motion: no-preference e con JS attivo (html.ec-js).
 * - Pagine o sezioni delicate (perdita del lavoro, supporto psicologico, recesso): classe .ec-calm → solo dissolvenze.
 * - Una card, un'idea, un'azione: tutta la card è cliccabile tramite un solo link (.ec-stretch).
 * - Zig-zag a passo fisso: immagine a destra (default) o a sinistra (.ec-zz--flip); su mobile l'immagine va sempre sopra.
 */

:root{
  /* palette "Black and Gold Elegance": #FFFFFF #E5E5E5 #FCA311 #14213D #000000 (+ tinte derivate per stati e superfici) */
  --ec-ink:#14213D; --ec-aura:#14213D; --ec-aura-d:#0D1730; --ec-sun:#FCA311; --ec-bliss:#FCA311;
  --ec-ardent:#E5E5E5; --ec-sand:#EDF1F7; --ec-line:#E5E5E5; --ec-muted:#4A5468; --ec-white:#FFFFFF; --ec-night:#1F2F52;
  --ec-black:#000000; --ec-gold:#FCA311; --ec-gold-deep:#946000; --ec-gold-tint:#FEF3DD; --ec-on-dark:#C9CED8;
  --ec-r-card:28px; --ec-r-sm:16px; --ec-r-pill:999px;
  --ec-s1:8px; --ec-s2:16px; --ec-s3:24px; --ec-s4:32px; --ec-s5:48px; --ec-s6:64px; --ec-s7:96px; --ec-s8:120px;
  --ec-d-press:100ms; --ec-d-hover:180ms; --ec-d-in:400ms; --ec-d-page:280ms;
  --ec-ease:cubic-bezier(.2,0,0,1);           /* standard */
  --ec-ease-in:cubic-bezier(.05,.7,.1,1);     /* emphasized decelerate: elementi che entrano */
  --ec-ease-out:cubic-bezier(.3,0,.8,.15);    /* emphasized accelerate: elementi che escono */
  --ec-shadow-1:0 1px 2px rgba(20,33,61,.06),0 8px 24px -16px rgba(20,33,61,.25);
  --ec-shadow-2:0 2px 4px rgba(20,33,61,.06),0 30px 60px -30px rgba(20,33,61,.45);
}

/* ---------- Ritmo e tipografia ---------- */
.ec-wrap{max-width:1344px;margin:0 auto;padding:0 52px;box-sizing:border-box}
.ec-section{padding:var(--ec-s8) 0}
.ec-section--tight{padding:var(--ec-s7) 0}
.ec-section--sand{background:var(--ec-sand)}
.ec-section--night{background:var(--ec-ink);color:var(--ec-white)}
.ec-section--aura{background:var(--ec-black);color:var(--ec-white)}
.ec-eyebrow{font-size:13px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--ec-aura)}
.ec-section--night .ec-eyebrow,.ec-section--aura .ec-eyebrow{color:var(--ec-gold)}
.ec-h1{margin:0;font-weight:800;font-stretch:88%;font-size:clamp(40px,5.4vw,76px);line-height:.98;letter-spacing:-.04em}
.ec-h2{margin:0;font-weight:800;font-stretch:88%;font-size:clamp(32px,3.6vw,52px);line-height:1.02;letter-spacing:-.03em}
.ec-h3{margin:0;font-weight:800;font-stretch:90%;font-size:clamp(21px,1.8vw,26px);line-height:1.15;letter-spacing:-.01em}
.ec-lead{margin:0;font-size:clamp(18px,1.4vw,20px);line-height:1.6;color:var(--ec-muted);max-width:62ch}
.ec-section--night .ec-lead,.ec-section--aura .ec-lead{color:#E5E5E5}
.ec-text{font-size:17px;line-height:1.6;max-width:68ch}
.ec-cta-note{font-size:14px;line-height:1.4;color:var(--ec-muted);margin-top:10px}
.ec-head{display:flex;justify-content:space-between;align-items:flex-end;gap:32px 64px;flex-wrap:wrap;margin-bottom:var(--ec-s5)}
.ec-head > :first-child{flex:1 1 520px;display:flex;flex-direction:column;gap:16px}
.ec-head > :last-child:not(:first-child){flex:0 1 420px}

/* ---------- Pulsanti ---------- */
.ec-btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:56px;padding:0 28px;border-radius:var(--ec-r-pill);font:inherit;font-size:17px;font-weight:700;text-decoration:none;cursor:pointer;border:0;box-sizing:border-box;transition:transform var(--ec-d-hover) var(--ec-ease),background-color var(--ec-d-hover) var(--ec-ease),box-shadow var(--ec-d-hover) var(--ec-ease)}
.ec-btn--primary{background:var(--ec-aura);color:var(--ec-white)}
.ec-btn--primary:hover{background:var(--ec-aura-d);color:var(--ec-white);box-shadow:0 14px 30px -12px rgba(20,33,61,.45)}
.ec-btn--ghost{background:transparent;color:var(--ec-ink);border:1.5px solid var(--ec-ardent)}
.ec-btn--ghost:hover{background:var(--ec-sand)}
.ec-btn--light{background:var(--ec-white);color:var(--ec-aura)}
.ec-btn .ec-arr{transition:transform var(--ec-d-hover) var(--ec-ease)}
.ec-btn:hover .ec-arr{transform:translateX(4px)}
.ec-btn:active{transform:scale(.98)}

/* ---------- Card ---------- */
.ec-cards{display:grid;gap:20px;grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.ec-card{position:relative;display:flex;flex-direction:column;background:var(--ec-white);color:var(--ec-ink);border:1.5px solid var(--ec-line);border-radius:var(--ec-r-card);overflow:hidden;box-shadow:var(--ec-shadow-1);transition:transform var(--ec-d-hover) var(--ec-ease),box-shadow var(--ec-d-hover) var(--ec-ease),border-color var(--ec-d-hover) var(--ec-ease)}
.ec-card__media{position:relative;aspect-ratio:4/3;overflow:hidden;background:var(--ec-sand)}
.ec-card__media img{width:100%;height:100%;object-fit:cover;display:block;transition:transform 700ms var(--ec-ease)}
.ec-card__media--tall{aspect-ratio:3/4}
.ec-card__media--wide{aspect-ratio:16/9}
.ec-card__body{display:flex;flex-direction:column;gap:10px;padding:24px 26px 26px;flex:1}
.ec-card__eyebrow{font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--ec-aura)}
.ec-card__title{margin:0;font-size:24px;font-weight:800;font-stretch:90%;line-height:1.15;letter-spacing:-.01em}
.ec-card__text{margin:0;font-size:16px;line-height:1.55;color:var(--ec-muted)}
.ec-card__meta{display:flex;flex-wrap:wrap;gap:8px 16px;align-items:baseline;margin-top:auto;padding-top:16px;border-top:1px solid var(--ec-line);font-size:15px;color:var(--ec-muted)}
.ec-card__meta strong{font-size:20px;color:var(--ec-ink);white-space:nowrap}
.ec-card__action{display:inline-flex;align-items:center;justify-content:flex-start;gap:8px;font-weight:700;color:var(--ec-aura);text-decoration:none;min-height:44px}
.ec-card__action .ec-arr{flex-shrink:0;transition:transform var(--ec-d-hover) var(--ec-ease)}
.ec-tag{display:inline-flex;align-items:center;gap:6px;align-self:flex-start;font-size:12px;font-weight:700;border-radius:var(--ec-r-pill);padding:5px 10px;background:var(--ec-sand);color:var(--ec-aura-d)}
.ec-tag--on{background:var(--ec-aura);color:var(--ec-white)}
/* tutta la card cliccabile con un solo link */
.ec-stretch::after{content:"";position:absolute;inset:0;z-index:1;border-radius:inherit}
.ec-card :is(a,button):not(.ec-stretch){position:relative;z-index:2}
.ec-card:focus-within{border-color:var(--ec-aura);outline:3px solid var(--ec-ink);outline-offset:3px}
.ec-card:has(.ec-stretch:focus-visible) .ec-stretch:focus-visible{outline:none}
@media (hover:hover) and (pointer:fine){
  .ec-card:has(.ec-stretch):hover{transform:translateY(-4px);box-shadow:var(--ec-shadow-2);border-color:var(--ec-ardent)}
  .ec-card:has(.ec-stretch):hover .ec-card__media img{transform:scale(1.04)}
  .ec-card:has(.ec-stretch):hover .ec-card__action .ec-arr{transform:translateX(4px)}
}
.ec-card:has(.ec-stretch):active{transform:scale(.985);transition-duration:var(--ec-d-press)}
/* varianti */
.ec-card--featured{background:var(--ec-ink);color:var(--ec-white);border-color:var(--ec-ink)}
.ec-card--featured .ec-card__text,.ec-card--featured .ec-card__meta{color:#C9CED8;border-color:rgba(255,255,255,.14)}
.ec-card--featured .ec-card__meta strong,.ec-card--featured .ec-card__title{color:var(--ec-white)}
.ec-card--featured .ec-card__eyebrow,.ec-card--featured .ec-card__action{color:var(--ec-gold)}
.ec-card--soon{background:var(--ec-sand);box-shadow:none}
.ec-card--soon .ec-card__media img{filter:saturate(.55)}
/* card-situazione: foto grande con titolo sovrapposto */
.ec-card--situation .ec-card__media{aspect-ratio:4/5}
.ec-card--situation .ec-card__overlay{position:absolute;inset:auto 0 0 0;padding:22px 24px;background:linear-gradient(180deg,rgba(20,33,61,0) 0%,rgba(20,33,61,.82) 70%);color:var(--ec-white);display:flex;flex-direction:column;gap:6px}
.ec-card--situation .ec-card__overlay .ec-card__title{color:var(--ec-white);font-size:28px}
/* card-professionista */
.ec-avatar{width:56px;height:56px;border-radius:999px;background:var(--ec-ardent);color:var(--ec-aura-d);display:inline-flex;align-items:center;justify-content:center;font-weight:800;font-size:18px;flex-shrink:0}

/* ---------- Bento ---------- */
.ec-bento{display:grid;gap:20px;grid-template-columns:repeat(12,minmax(0,1fr))}
.ec-span-12{grid-column:span 12}.ec-span-8{grid-column:span 8}.ec-span-7{grid-column:span 7}.ec-span-6{grid-column:span 6}.ec-span-5{grid-column:span 5}.ec-span-4{grid-column:span 4}.ec-span-3{grid-column:span 3}
@media (max-width:1100px){.ec-span-3{grid-column:span 6}.ec-span-4,.ec-span-5,.ec-span-7,.ec-span-8{grid-column:span 6}}
@media (max-width:720px){.ec-bento > *{grid-column:1/-1}}

/* ---------- Zig-zag a passo fisso ---------- */
.ec-zz{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(32px,6vw,88px);align-items:start}
.ec-zz__media{position:relative;border-radius:40px;overflow:hidden;background:var(--ec-sand);aspect-ratio:5/4}
.ec-zz__media img{width:100%;height:100%;object-fit:cover;display:block}
.ec-zz__body{display:flex;flex-direction:column;gap:20px;padding-top:8px}
.ec-zz--flip .ec-zz__media{order:-1}
@media (max-width:900px){.ec-zz{grid-template-columns:1fr}.ec-zz .ec-zz__media{order:-1;border-radius:28px;aspect-ratio:16/11}}

/* ---------- Passi con linea ---------- */
.ec-steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(var(--ec-steps,4),minmax(0,1fr));gap:20px;position:relative}
.ec-steps::before{content:"";position:absolute;left:0;right:0;top:30px;height:3px;background:var(--ec-ardent)}
.ec-steps::after{content:"";position:absolute;left:0;right:0;top:30px;height:3px;background:var(--ec-sun);transform-origin:left center}
.ec-steps > li{position:relative;z-index:1;display:flex;flex-direction:column;gap:12px}
.ec-step__n{position:relative;z-index:1;width:62px;height:62px;border-radius:999px;background:var(--ec-white);color:var(--ec-aura);border:3px solid var(--ec-sun);box-sizing:border-box;display:flex;align-items:center;justify-content:center;font-size:22px;font-weight:800}
.ec-steps > li:last-child .ec-step__n{background:var(--ec-sun);color:var(--ec-ink)}
@media (max-width:900px){.ec-steps{grid-template-columns:1fr}.ec-steps::before,.ec-steps::after{left:30px;right:auto;top:0;bottom:0;width:3px;height:auto}.ec-steps > li{padding-left:84px;min-height:62px}.ec-step__n{position:absolute;left:0;top:0}}

/* ---------- Nastro di situazioni ---------- */
.ec-marquee{position:relative;overflow:hidden;background:var(--ec-ink);color:var(--ec-white);padding:20px 0}
.ec-marquee__track{display:flex;gap:0;width:max-content;font-size:clamp(20px,2vw,26px);font-weight:800;font-stretch:90%;white-space:nowrap}
.ec-marquee__track > *{display:inline-flex;align-items:center;gap:40px;padding-right:40px}
.ec-marquee__track > *::after{content:"";width:8px;height:8px;border-radius:999px;background:var(--ec-sun)}
.ec-marquee::after{content:"";position:absolute;top:0;bottom:0;right:0;width:96px;background:linear-gradient(to right,rgba(20,33,61,0),var(--ec-ink) 60%);pointer-events:none;z-index:1}
.ec-marquee a{color:inherit;text-decoration:none}.ec-marquee a:hover{color:var(--ec-gold)}
.ec-marquee__toggle{position:absolute;right:16px;top:50%;transform:translateY(-50%);z-index:2;width:44px;height:44px;border-radius:999px;border:1.5px solid rgba(255,255,255,.4);background:var(--ec-ink);color:var(--ec-white);cursor:pointer;font:inherit;font-weight:800}

/* ---------- Titoli riga per riga ---------- */
.ec-line{display:block;overflow:hidden;padding-bottom:.1em;margin-bottom:-.1em}
.ec-line > span{display:inline-block}

/* ---------- Fascio del faro (elemento ricorrente: parte dall'angolo in alto a destra) ---------- */
.ec-orb{position:relative}
/* il fascio va solo su fondi scuri; da telefono è più piccolo per non coprire i titoli */
@media (max-width:720px){.ec-orb::after{width:120px;height:70px;right:-12px;top:-12px}}
/* i valori {{…}} diventano <span class="sc-interp">: non devono prendere bordi o sfondi pensati per altri span */
.sc-interp{display:contents}
.ec-orb::after{content:"";position:absolute;width:170px;height:96px;right:-16px;top:-16px;border-radius:0;-webkit-clip-path:polygon(100% 0,0 34%,0 100%);clip-path:polygon(100% 0,0 34%,0 100%);transform-origin:100% 0;background:linear-gradient(to left,#FFD27A 0,var(--ec-sun) 18%,rgba(252,163,17,0) 82%);opacity:.5;pointer-events:none}

/* ---------- Focus ---------- */
:where(a,button,input,select,textarea,summary,[tabindex]):focus-visible{outline:3px solid var(--ec-ink);outline-offset:3px}
.ec-section--night :where(a,button):focus-visible,.ec-section--aura :where(a,button):focus-visible{outline-color:var(--ec-gold)}

/* ---------- Mobile ---------- */
@media (max-width:720px){
  .ec-wrap{padding:0 20px}
  .ec-section{padding:var(--ec-s6) 0}
  .ec-section--tight{padding:var(--ec-s5) 0}
  .ec-card__body{padding:20px}
  .ec-card__title{font-size:22px}
  .ec-btn{width:100%}
  .ec-zz__media{border-radius:24px}
}

/* =====================================================================
   MOVIMENTO – solo con no-preference e JS attivo. Senza: tutto statico e visibile.
   ===================================================================== */
@media (prefers-reduced-motion:no-preference){
  @view-transition{navigation:auto}
  ::view-transition-old(root),::view-transition-new(root){animation-duration:var(--ec-d-page);animation-timing-function:var(--ec-ease)}

  /* ingresso blocchi: animazione con fill "backwards", finita la quale valgono di nuovo gli stili normali (hover compreso).
     Partono quando il bordo alto supera l'85% dello schermo (eclipse-motion.js); 500 ms per essere notati anche da telefono */
  @keyframes ecUp{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}
  @keyframes ecFade{from{opacity:0}to{opacity:1}}
  html.ec-js .ec-reveal:not(.is-in),html.ec-js .ec-stagger > :not(.is-in){opacity:0}
  html.ec-js .ec-reveal.is-in{animation:ecUp 500ms var(--ec-ease-in) var(--ec-delay,0ms) backwards}
  /* card in sequenza: ognuna entra da sola; quelle sulla stessa riga a 90 ms l'una dall'altra (--ec-sd, dal JS) */
  html.ec-js .ec-stagger > .is-in{animation:ecUp 500ms var(--ec-ease-in) var(--ec-sd,0ms) backwards}
  /* titoli riga per riga (hero: .ec-lines.ec-now parte subito) */
  html.ec-js .ec-lines .ec-line > span{transform:translateY(110%);transition:transform 600ms var(--ec-ease-in)}
  html.ec-js .ec-lines.is-in .ec-line > span{transform:none}
  html.ec-js .ec-lines.is-in .ec-line:nth-child(2) > span{transition-delay:90ms}
  html.ec-js .ec-lines.is-in .ec-line:nth-child(3) > span{transition-delay:180ms}
  html.ec-js .ec-lines.is-in .ec-line:nth-child(4) > span{transition-delay:270ms}
  /* immagine che si apre (-webkit-clip-path per Safari iOS meno recenti) */
  html.ec-js .ec-reveal-img{-webkit-clip-path:inset(12% 8% 12% 8% round 40px);clip-path:inset(12% 8% 12% 8% round 40px);opacity:.35;transition:-webkit-clip-path 1100ms var(--ec-ease-in),clip-path 1100ms var(--ec-ease-in),opacity 700ms var(--ec-ease)}
  html.ec-js .ec-reveal-img.is-in{-webkit-clip-path:inset(0 0 0 0 round 0);clip-path:inset(0 0 0 0 round 0);opacity:1}
  /* passi: la linea corre da un cerchio al successivo (480 ms a tratto, --ec-seg); la posizione (0-1) la mette eclipse-motion.js in --ec-sp.
     Solo con .ec-armed (messa dal JS): senza, linea e cerchi restano disegnati per intero */
  html.ec-js .ec-steps.ec-armed::after{transform:scaleX(var(--ec-sp,0));transition:transform var(--ec-seg,480ms) cubic-bezier(.45,0,.3,1)}
  @media (max-width:900px){html.ec-js .ec-steps.ec-armed::after{transform:scaleY(var(--ec-sp,0));transform-origin:center top}}
  /* cerchi numerati: grigi e un po' più piccoli finché la linea non li raggiunge, poi si accendono con un piccolo rimbalzo.
     Il numero resta sempre leggibile: da spenti non sono mai trasparenti */
  html.ec-js .ec-steps.ec-armed > li .ec-step__n{transition:filter 320ms var(--ec-ease),transform 520ms cubic-bezier(.34,1.56,.64,1)}
  html.ec-js .ec-steps.ec-armed > li:not(.is-lit) .ec-step__n{-webkit-filter:grayscale(1);filter:grayscale(1);transform:scale(.86)}
  /* Ken Burns: lento, solo foto chiave */
  .ec-kb{animation:ecKb 18s ease-in-out infinite alternate;transform-origin:60% 40%}
  @keyframes ecKb{from{transform:scale(1)}to{transform:scale(1.06) translate(-1%,-1%)}}
  /* nastro */
  .ec-marquee__track{animation:ecMarquee var(--ec-marquee-dur,48s) linear infinite}
  .ec-marquee:hover .ec-marquee__track,.ec-marquee:focus-within .ec-marquee__track,.ec-marquee.is-paused .ec-marquee__track{animation-play-state:paused}
  @keyframes ecMarquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}
  /* respiro del cerchio */
  .ec-orb::after{animation:ecOrb 9s ease-in-out infinite alternate}
  @keyframes ecOrb{from{transform:rotate(-5deg)}to{transform:rotate(4deg)}}

  /* pagine/sezioni delicate: solo dissolvenze, niente zoom né spostamenti */
  html.ec-js .ec-calm .ec-reveal.is-in,html.ec-js .ec-calm .ec-stagger > .is-in,html.ec-calm.ec-js .ec-reveal.is-in,html.ec-calm.ec-js .ec-stagger > .is-in{animation-name:ecFade}
  .ec-calm .ec-kb,html.ec-calm .ec-kb{animation:none}
  html.ec-js .ec-calm .ec-reveal-img,html.ec-calm.ec-js .ec-reveal-img{-webkit-clip-path:none;clip-path:none}
  html.ec-js .ec-calm .ec-lines .ec-line > span,html.ec-calm.ec-js .ec-lines .ec-line > span{transform:none}
  html.ec-calm .ec-orb::after,.ec-calm .ec-orb::after{animation:none}
}
/* nessun movimento: nastro diventa elenco che va a capo; niente scorrimento morbido, niente card che si alzano o foto che si ingrandiscono */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto!important}
  .ec-marquee__track{flex-wrap:wrap;width:auto;white-space:normal;padding:0 20px;gap:16px 32px}
  .ec-marquee__track > [aria-hidden="true"]{display:none}
  .ec-marquee__toggle{display:none}
  .ec-btn,.ec-card{transition-property:background-color,border-color,box-shadow,color}
  .ec-btn:active,.ec-btn:hover .ec-arr,.ec-card:has(.ec-stretch):hover,.ec-card:has(.ec-stretch):active,.ec-card:has(.ec-stretch):hover .ec-card__media img,.ec-card:has(.ec-stretch):hover .ec-card__action .ec-arr{transform:none}
}
/* elementi già visti (scorrimento veloce, ritorno indietro, nuovo disegno della pagina): compaiono senza animazione.
   Si spegne solo l'ingresso, non le transizioni di hover dentro le card */
html.ec-js .ec-instant{animation:none!important}
html.ec-js .ec-reveal-img.ec-instant,html.ec-js .ec-instant .ec-line > span,html.ec-js .ec-steps > li.ec-instant .ec-step__n{transition:none!important;animation:none!important}
html.ec-js .ec-steps.ec-instant::after{transition:none!important}
/* prop "animate" spenta in alcune pagine (.no-motion): cerchi dei passi sempre accesi */
.no-motion .ec-steps > li .ec-step__n{-webkit-filter:none!important;filter:none!important;transform:none!important}
/* logo: animazione solo alla prima pagina della sessione */
html.ec-logo-seen .eclipse-logo,html.ec-logo-seen .eclipse-logo *{animation:none!important}
html.ec-logo-seen .eclipse-logo .e-moon,html.ec-logo-seen .eclipse-logo .e-corona,html.ec-logo-seen .eclipse-logo .e-sun,html.ec-logo-seen .eclipse-logo .e-dia,html.ec-logo-seen .eclipse-logo .e-word{opacity:1!important;transform:none!important}
html.ec-logo-seen .eclipse-logo .pp-tower,html.ec-logo-seen .eclipse-logo .pp-lamp,html.ec-logo-seen .eclipse-logo .pp-word{opacity:1!important;transform:none!important}
html.ec-logo-seen .eclipse-logo .pp-ring{stroke-dashoffset:0!important}

/* =====================================================================
 * RESTYLE "Autorità operativa" (ottobre 2026): stessa struttura, tavolozza e luce nuove.
 * Bruma al posto del grigio neutro, notte profonda per le sezioni piene, occhielli in tondo
 * (niente maiuscoletto spaziato), arancio faro solo come luce su fondo scuro.
 * Contrasti verificati: #946000 su bruma 4,7:1 · #4A5468 su bruma 6,7:1 · #FCA311 su notte 9,1:1 · #C9D2E3 su notte 12,1:1.
 * ===================================================================== */
:root{
  --ec-sand:#EDF1F7;          /* bruma: il grigio freddo della nebbia di mare */
  --ec-black:#0B1426;         /* notte profonda: sezioni piene, hero */
  --ec-night:#1B2A4A;
  --ec-on-dark:#C9D2E3;
  --ph-notte:#0B1426; --ph-bruma:#EDF1F7; --ph-luce:#FCA311; --ph-oro:#946000; --ph-nebbia:#A9B4C8;
}
body{background:#FFFFFF}
.ec-eyebrow{font-size:15px;font-weight:700;letter-spacing:0;text-transform:none;color:var(--ph-oro);font-stretch:100%}
.ec-section--night .ec-eyebrow,.ec-section--aura .ec-eyebrow,.ph-night .ec-eyebrow{color:var(--ph-luce)}
.ec-card__eyebrow{font-size:14px;letter-spacing:0;text-transform:none;color:var(--ph-oro)}
.ec-h1{font-stretch:76%;letter-spacing:-.035em;line-height:.94}
.ec-h2{font-stretch:80%;letter-spacing:-.03em}
/* su fondo scuro il pulsante principale è la luce: arancio con testo blu notte (7,9:1) */
.ec-section--night .ec-btn--primary,.ec-section--aura .ec-btn--primary,.ph-night .ec-btn--primary{background:var(--ph-luce);color:var(--ec-ink)}
.ec-section--night .ec-btn--primary:hover,.ec-section--aura .ec-btn--primary:hover,.ph-night .ec-btn--primary:hover{background:#FFB83D;color:var(--ec-ink);box-shadow:0 0 0 6px rgba(252,163,17,.18)}
.ec-section--night .ec-btn--ghost,.ec-section--aura .ec-btn--ghost,.ph-night .ec-btn--ghost{color:#FFFFFF;border-color:rgba(255,255,255,.35)}
.ec-section--night .ec-btn--ghost:hover,.ec-section--aura .ec-btn--ghost:hover,.ph-night .ec-btn--ghost:hover{background:rgba(255,255,255,.08)}
.ph-night *:focus-visible,.ec-section--night *:focus-visible,.ec-section--aura *:focus-visible{outline-color:var(--ph-luce)}
.ec-marquee{background:var(--ph-notte)}
.ec-marquee::after{background:linear-gradient(to right,rgba(11,20,38,0),var(--ph-notte) 60%)}

/* ---------- HERO NOTTURNO con il fascio ---------- */
.ph-night{position:relative;background:var(--ph-notte);color:#FFFFFF;overflow:hidden;isolation:isolate}
.ph-night .ec-h1{color:#FFFFFF}
.ph-night .ec-lead{color:var(--ec-on-dark)}
.ph-night .ec-cta-note{color:var(--ph-nebbia)}
.ph-night a:not(.ec-btn){color:#FFFFFF}
/* orizzonte: una linea sottile di luce in basso */
.ph-night::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:linear-gradient(90deg,transparent,rgba(252,163,17,.55) 30%,rgba(252,163,17,.15) 70%,transparent);z-index:-1}
/* il fascio: un cono di luce che parte dalla sinistra, appena sopra il titolo */
.ph-fascio{position:absolute;left:-60vmax;top:-60vmax;width:120vmax;height:120vmax;pointer-events:none;z-index:-1;
  background:conic-gradient(from 90deg at 50% 50%,rgba(252,163,17,0) 0deg,rgba(252,163,17,.0) 2deg,rgba(252,163,17,.20) 9deg,rgba(255,214,140,.34) 12deg,rgba(252,163,17,.20) 15deg,rgba(252,163,17,0) 24deg,rgba(252,163,17,0) 360deg);
  -webkit-mask:radial-gradient(circle at 50% 50%,#000 0,#000 40%,transparent 72%);mask:radial-gradient(circle at 50% 50%,#000 0,#000 40%,transparent 72%);
  transform:rotate(var(--ph-rest,18deg));transform-origin:50% 50%;opacity:.95}
.ph-lampada{position:absolute;left:-14px;top:22px;width:28px;height:28px;border-radius:999px;background:radial-gradient(circle,#FFE3A8 0,#FCA311 40%,rgba(252,163,17,0) 72%);pointer-events:none;z-index:-1}
@media (prefers-reduced-motion:no-preference){
  html.ec-js .ph-fascio.is-sweep{animation:phSweep 2.2s cubic-bezier(.45,0,.25,1) both}
  html.ec-js .ph-night .ph-wide .ec-line > span{font-stretch:68%;transition:transform 600ms var(--ec-ease-in),font-stretch .9s cubic-bezier(.2,0,0,1)}
  html.ec-js .ph-night .ph-wide.is-lit .ec-line > span{font-stretch:76%}
  html.ec-js .ph-night .ph-wide.is-lit .ec-line:nth-child(2) > span{transition-delay:.18s}
  html.ec-js .ph-night .ph-wide.is-lit .ec-line:nth-child(3) > span{transition-delay:.36s}
}
@keyframes phSweep{0%{transform:rotate(-40deg);opacity:0}12%{opacity:1}100%{transform:rotate(var(--ph-rest,18deg));opacity:.95}}

/* ---------- SEGNALE: il ritmo luminoso di Pharos (due lampi brevi, pausa) ---------- */
.ph-segnale{display:inline-block;width:10px;height:10px;border-radius:999px;background:var(--ph-luce);vertical-align:middle}
@media (prefers-reduced-motion:no-preference){.ph-segnale{animation:phFl2 2.4s steps(1,end) infinite}}
@keyframes phFl2{0%,8%{opacity:1}8.01%,16%{opacity:.25}16.01%,24%{opacity:1}24.01%,100%{opacity:.25}}

/* ---------- MOMENTO: un solo nome, con il suo punteggio ---------- */
.ph-abb{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:48px 72px;align-items:center}
.ph-filtri{list-style:none;margin:8px 0 0;padding:0;display:flex;flex-direction:column}
.ph-filtri li{display:grid;grid-template-columns:28px minmax(0,1fr);gap:14px;align-items:start;padding:14px 0;border-top:1px solid rgba(255,255,255,.12);color:var(--ph-nebbia);transition:color .4s}
.ph-filtri li:last-child{border-bottom:1px solid rgba(255,255,255,.12)}
.ph-filtri b{display:block;color:#FFFFFF;font-size:17px;line-height:1.3}
.ph-filtri span{font-size:15px;line-height:1.5}
.ph-filtri i{font-style:normal;width:28px;height:28px;border-radius:999px;border:1.5px solid rgba(255,255,255,.3);display:inline-flex;align-items:center;justify-content:center;font-size:13px;font-weight:800;color:#FFFFFF;transition:background-color .4s,border-color .4s,color .4s}
.ph-filtri li.is-on i{background:var(--ph-luce);border-color:var(--ph-luce);color:var(--ec-ink)}
.ph-scena{position:relative;aspect-ratio:1/1;max-width:560px;width:100%;justify-self:end;border-radius:32px;background:radial-gradient(circle at 50% 45%,#16264A 0,#0E1A33 60%,#0B1426 100%);border:1px solid rgba(255,255,255,.08);overflow:hidden}
.ph-scena canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.ph-scheda{position:absolute;left:calc((100% - min(88%,420px)) / 2);bottom:22px;width:min(88%,420px);box-sizing:border-box;background:#FFFFFF;color:var(--ec-ink);border-radius:22px;padding:18px 20px;display:grid;grid-template-columns:96px minmax(0,1fr);gap:16px;align-items:center;box-shadow:0 30px 60px -24px rgba(0,0,0,.6)}
.ph-anello{position:relative;width:96px;height:96px}
.ph-anello svg{width:96px;height:96px;transform:rotate(-90deg)}
.ph-anello b{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:30px;font-weight:800;font-stretch:80%;letter-spacing:-.02em}
.ph-crit{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:5px}
.ph-crit li{display:grid;grid-template-columns:minmax(0,1fr) 72px;gap:8px;align-items:center;font-size:13px;line-height:1.2;color:#4A5468}
.ph-crit s{display:block;height:6px;border-radius:9px;background:#E3E8F1;overflow:hidden;text-decoration:none}
.ph-crit s::after{content:"";display:block;height:100%;width:var(--v,0%);background:var(--ec-ink);border-radius:9px}
.ph-scheda-t{grid-column:1/-1;display:flex;justify-content:space-between;gap:12px;font-size:14px;color:#4A5468;border-top:1px solid #E5E5E5;padding-top:10px}
.ph-scheda-t strong{color:var(--ec-ink)}
.ph-rifai{position:absolute;right:14px;top:14px;min-height:40px;padding:0 14px;border-radius:999px;border:1.5px solid rgba(255,255,255,.3);background:rgba(11,20,38,.6);color:#FFFFFF;font:inherit;font-size:14px;font-weight:700;cursor:pointer}
.ph-rifai:hover{border-color:var(--ph-luce)}
.ph-nota{margin:0;font-size:14px;line-height:1.5;color:var(--ph-nebbia)}
@media (prefers-reduced-motion:no-preference){
  html.ec-js .ph-scena .ph-crit s::after{transition:width .8s cubic-bezier(.2,0,0,1);transition-delay:inherit}
  html.ec-js .ph-scena .ph-anello circle.v{transition:stroke-dashoffset 1.1s cubic-bezier(.2,0,0,1)}
}
@media (prefers-reduced-motion:reduce){.ph-rifai{display:none}}
@media (max-width:900px){.ph-abb{grid-template-columns:minmax(0,1fr)}.ph-scena{justify-self:stretch;max-width:none;aspect-ratio:4/5}}
@media (max-width:480px){.ph-scheda{grid-template-columns:72px minmax(0,1fr);padding:14px;gap:12px;bottom:14px}.ph-anello,.ph-anello svg{width:72px;height:72px}.ph-anello b{font-size:24px}.ph-crit li{grid-template-columns:minmax(0,1fr) 54px;font-size:12px}}

/* ---------- MOMENTO: la luce si riaccende (garanzia) ---------- */
.ph-faro{width:100%;max-width:520px;height:auto;display:block}
.ph-faro .cono{transform-origin:62px 70px;transition:opacity .5s,transform .9s cubic-bezier(.2,0,0,1)}
.ph-faro .lamp{transition:opacity .3s}
.ph-faro-fasi{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
@media (prefers-reduced-motion:no-preference){
  html.ec-js .ph-faro.is-off .cono,html.ec-js .ph-faro.is-off .lamp{opacity:.08}
  html.ec-js .ph-faro.is-flick .cono,html.ec-js .ph-faro.is-flick .lamp{animation:phFlick .9s steps(1,end) both}
  html.ec-js .ph-faro.is-on .cono{transform:scaleY(1.35)}
}
@keyframes phFlick{0%{opacity:1}22%{opacity:.15}38%{opacity:.9}55%{opacity:.1}100%{opacity:.08}}
.ph-faro-stato{min-height:1.5em;margin:0;font-size:15px;font-weight:700;color:var(--ph-luce)}

/* ---------- Transizioni tra pagine: una lama di luce (browser che le supportano) ---------- */
@view-transition{navigation:auto}
@media (prefers-reduced-motion:no-preference){
  ::view-transition-old(root){animation:phOut .32s cubic-bezier(.3,0,.8,.15) both}
  ::view-transition-new(root){animation:phIn .5s cubic-bezier(.2,0,0,1) both}
}
@media (prefers-reduced-motion:reduce){::view-transition-group(*),::view-transition-old(*),::view-transition-new(*){animation:none!important}}
@keyframes phOut{to{opacity:0}}
@keyframes phIn{from{clip-path:polygon(0 0,0 0,-20% 100%,-20% 100%)}to{clip-path:polygon(0 0,120% 0,100% 100%,-20% 100%)}}
.ph-night .hero-box{color:var(--ec-ink)}
.ph-night .hero-box a{color:var(--ec-ink)}
/* elementi chiari dentro un hero notturno: diventano vetro scuro con testo chiaro */
.ph-night .two > div{background:rgba(255,255,255,.05)!important;border:1px solid rgba(255,255,255,.12)!important;color:#FFFFFF}
.ph-night .two > div b{color:#FFFFFF}
.ph-night .two > div span{color:var(--ph-nebbia)}
.ph-night .chip-l{background:rgba(255,255,255,.07)!important;border-color:rgba(255,255,255,.14)!important;color:#FFFFFF!important}
.ph-night .chip-l:hover{border-color:var(--ph-luce)!important}
.ph-night .crumb,.ph-night .crumb li,.ph-night .crumb [aria-current]{color:var(--ph-nebbia)}

/* ===================== LUCE, seconda versione ===================== */
/* il canvas WebGL disegna fondo e luce dietro al contenuto dell'hero */
.ph-luce{position:absolute;inset:0;width:100%;height:100%;display:block;z-index:-1;pointer-events:none}
.ph-night.has-gl{background:var(--ph-notte)}
/* il titolo: le righe si allargano e si accendono mentre il fascio le attraversa */
@media (prefers-reduced-motion:no-preference){
  html.ec-js .ph-night .ph-wide .ec-line > span{font-stretch:64%;opacity:.42;transition:transform 600ms var(--ec-ease-in),font-stretch 1.1s cubic-bezier(.16,1,.3,1),opacity .9s ease}
  html.ec-js .ph-night .ph-wide.is-lit .ec-line > span{font-stretch:76%;opacity:1}
  html.ec-js .ph-night .ph-wide.is-lit .ec-line:nth-child(2) > span{transition-delay:0s,.16s,.16s}
  html.ec-js .ph-night .ph-wide.is-lit .ec-line:nth-child(3) > span{transition-delay:0s,.32s,.32s}
  html.ec-js .ph-night .ph-wide.is-lit .ec-line:nth-child(4) > span{transition-delay:0s,.48s,.48s}
}
/* un solo nome: etichetta del filtro in corso e scheda che nasce dal punto di luce */
.ph-chip{position:absolute;left:16px;top:16px;max-width:calc(100% - 140px);padding:8px 14px;border-radius:999px;background:rgba(252,163,17,.12);border:1px solid rgba(252,163,17,.4);color:#FFD58A;font-size:14px;font-weight:700;line-height:1.2;opacity:0;transform:translateY(-6px);transition:opacity .35s,transform .35s cubic-bezier(.2,0,0,1);pointer-events:none}
.ph-chip.is-on{opacity:1;transform:none}
@media (prefers-reduced-motion:no-preference){
  html.ec-js .ph-scena .ph-scheda{opacity:0;transform:scale(.04);transition:opacity .35s ease,transform .95s cubic-bezier(.16,1,.3,1)}
  html.ec-js .ph-scena.is-born .ph-scheda{opacity:1;transform:none}
}
/* garanzia: la scena di luce e i tempi che si accendono */
.ph-faro-box{position:relative;height:clamp(150px,16vw,200px);border-radius:24px;overflow:hidden;background:var(--ph-notte);border:1px solid rgba(255,255,255,.08)}
.ph-faro-cv{position:absolute;inset:0;width:100%;height:100%;display:block}
.ph-faro-box.is-static{background:radial-gradient(ellipse 60% 120% at 6% 55%,rgba(252,163,17,.55),rgba(252,163,17,.08) 55%,transparent 75%),var(--ph-notte)}
.ph-faro-stato{min-height:1.5em}
@media (prefers-reduced-motion:no-preference){.ph-faro-stato.is-in{animation:phTxt .45s cubic-bezier(.2,0,0,1) both}}
@keyframes phTxt{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.ph-faro-fasi li{transition:border-color .45s,box-shadow .45s,background-color .45s}
.ph-faro-fasi li.is-lit{border-color:var(--ph-luce)!important;box-shadow:0 0 0 1px var(--ph-luce),0 0 32px -6px rgba(252,163,17,.65);background:rgba(252,163,17,.08)!important}
.ph-faro-fasi li.is-past{border-color:rgba(252,163,17,.45)!important}
/* titoli delle sezioni: la luce li attraversa da sinistra, piano, quando arrivano sullo schermo.
   Il colore del titolo non si tocca mai (resta quello scritto nella pagina): si muove solo una maschera di trasparenza,
   che non scende mai sotto il 22%, più un alone caldo che passa e si spegne. Così il titolo non può sparire su nessun fondo. */
@media (prefers-reduced-motion:no-preference){
  html.ec-js .ph-acceso{-webkit-mask-image:linear-gradient(100deg,#000 0,#000 38%,rgba(0,0,0,.22) 62%,rgba(0,0,0,.22) 100%);mask-image:linear-gradient(100deg,#000 0,#000 38%,rgba(0,0,0,.22) 62%,rgba(0,0,0,.22) 100%);-webkit-mask-size:300% 100%;mask-size:300% 100%;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:100% 0;mask-position:100% 0}
  html.ec-js .ph-acceso.is-acceso{-webkit-mask-position:0 0;mask-position:0 0;transition:-webkit-mask-position 2.8s cubic-bezier(.4,0,.2,1),mask-position 2.8s cubic-bezier(.4,0,.2,1);animation:phAlone 2.8s ease-out both}
}
@keyframes phAlone{0%{text-shadow:0 0 0 rgba(252,163,17,0)}40%{text-shadow:0 0 26px rgba(252,163,17,.5)}100%{text-shadow:0 0 0 rgba(252,163,17,0)}}
/* l'angolo luminoso dei riquadri: niente più spicchio a spigoli vivi né movimento infinito, solo una luce morbida dall'angolo */
.ec-orb.ec-orb::after,.cta-box.ec-orb.ec-orb::after{-webkit-clip-path:none;clip-path:none;border-radius:50%;width:420px;height:320px;right:-150px;top:-150px;background:radial-gradient(closest-side,rgba(255,210,122,.34),rgba(252,163,17,.14) 45%,rgba(252,163,17,0));opacity:1;animation:none!important}
@media (max-width:720px){.ec-orb.ec-orb::after,.cta-box.ec-orb.ec-orb::after{width:280px;height:220px;right:-110px;top:-100px}}
/* comparse delle sezioni: niente salto dal basso, solo una dissolvenza breve */
@media (prefers-reduced-motion:no-preference){
  html.ec-js .ec-reveal.is-in{animation:phFade 520ms cubic-bezier(.2,0,0,1) var(--ec-delay,0ms) backwards}
  html.ec-js .ec-stagger > .is-in{animation:phFade 520ms cubic-bezier(.2,0,0,1) var(--ec-sd,0ms) backwards}
}
@keyframes phFade{from{opacity:0}to{opacity:1}}
@media (max-width:520px){.ph-chip{font-size:12.5px;padding:7px 12px;max-width:calc(100% - 110px)}}

/* =========================================================================
   LUCE, terza versione: pannelli della piattaforma al posto delle foto, lampada, nebbia, fuori rotta
   ========================================================================= */
/* nessun movimento infinito: lo zoom lento sulle foto si ferma (era 18-22 s in ciclo continuo) */
html .ec-kb,html .kb{animation:none!important}
/* il pannello: un pezzo vero della piattaforma, in vetro scuro, che la luce accende */
.ph-pv{position:relative;box-sizing:border-box;width:100%;padding:26px 26px 104px;border-radius:32px;background:linear-gradient(180deg,rgba(255,255,255,.075),rgba(255,255,255,.03));border:1px solid rgba(255,255,255,.12);box-shadow:0 40px 90px -40px rgba(0,0,0,.85),inset 0 1px 0 rgba(255,255,255,.08);color:#FFFFFF;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);display:flex;flex-direction:column;gap:18px;transition:border-color 1.2s ease,box-shadow 1.2s ease}
.ph-pv .pv-top{display:flex;align-items:center;gap:10px;font-size:15px}
.ph-pv .pv-top b{font-weight:800}
.ph-pv .pv-top i{margin-left:auto;font-style:normal;font-size:12px;font-weight:700;color:var(--ph-nebbia);border:1px solid rgba(255,255,255,.18);border-radius:999px;padding:3px 10px}
.ph-pv .pv-dot{width:9px;height:9px;border-radius:999px;background:var(--ph-luce);box-shadow:0 0 12px rgba(252,163,17,.8)}
.ph-pv small{display:block;font-size:13.5px;line-height:1.35;color:var(--ph-nebbia);font-weight:500}
/* aziende: il percorso */
.pv-rows{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.pv-rows li{display:grid;grid-template-columns:34px minmax(0,1fr) auto;gap:12px;align-items:center;padding:14px 14px;border-radius:18px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08)}
.pv-rows b{display:block;font-size:16px;font-weight:800;line-height:1.25}
.pv-rows em{font-style:normal;font-size:12.5px;font-weight:700;color:var(--ph-nebbia);white-space:nowrap}
.pv-ic{width:34px;height:34px;border-radius:999px;display:inline-flex;align-items:center;justify-content:center;background:rgba(255,255,255,.08);color:var(--ph-nebbia);font-size:13px;font-weight:800}
.pv-rows li.is-done .pv-ic{background:rgba(252,163,17,.16);color:var(--ph-luce)}
.pv-rows li.is-done em{color:var(--ph-luce)}
.pv-rows li.is-now{background:rgba(252,163,17,.08);border-color:rgba(252,163,17,.55);box-shadow:0 0 34px -8px rgba(252,163,17,.55)}
.pv-rows li.is-now .pv-ic{background:var(--ph-luce);color:var(--ec-ink)}
.pv-rows li.is-now em{color:#FFD58A}
.pv-nome{grid-column:2 / 4;display:flex;align-items:center;gap:10px;margin-top:4px;padding-top:10px;border-top:1px dashed rgba(255,255,255,.16);font-size:13.5px;color:#FFFFFF}
.pv-nome span{color:var(--ph-nebbia)}
.pv-nome strong{margin-left:auto;font-size:15px;color:#FFD58A}
/* persone: la prima seduta */
.pv-chi{display:flex;align-items:center;gap:14px}
.pv-av{width:54px;height:54px;border-radius:999px;flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;font-weight:800;font-size:18px;color:#3B2205;background:radial-gradient(circle at 35% 30%,#FFE2B0,#F7B25A 60%,#C77B1F)}
.pv-chi b{display:block;font-size:18px;font-weight:800}
.pv-lab{font-size:13.5px;font-weight:700;color:var(--ph-nebbia)}
.pv-ore{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.pv-ore span{padding:13px 12px;border-radius:14px;border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.04);font-size:15px;font-weight:700;text-align:center;transition:background-color .8s ease,border-color .8s ease,color .8s ease,box-shadow .8s ease}
.pv-ore span.is-scelta{background:rgba(255,190,110,.14);border-color:rgba(255,190,110,.75);color:#FFE2B0;box-shadow:0 0 30px -8px rgba(255,170,80,.6)}
.pv-tot{display:flex;align-items:center;justify-content:space-between;gap:14px;padding-top:14px;border-top:1px solid rgba(255,255,255,.12)}
.pv-tot b{display:block;font-size:15px}
.pv-btn{flex-shrink:0;padding:12px 20px;border-radius:999px;background:#FFC37A;color:#2A1804;font-weight:800;font-size:15px}
/* il riquadro bianco si sovrappone all'angolo basso del pannello */
.ph-night .hero-vis.has-pv .hero-box{position:relative;left:auto;bottom:auto;margin:-84px 0 0 -48px;width:300px;z-index:2}
@media (max-width:1180px){.ph-night .hero-vis.has-pv .hero-box{margin-left:-24px}}
@media (max-width:900px){.ph-pv{padding:22px 20px 84px;border-radius:26px}.ph-night .hero-vis.has-pv .hero-box{margin:-64px 16px 0;width:auto}}
@media (max-width:420px){.pv-rows li{grid-template-columns:30px minmax(0,1fr);padding:12px}.pv-rows em{grid-column:2;justify-self:start}.pv-ic{width:30px;height:30px}.pv-nome{grid-column:1 / 3}}
/* ingresso: le righe aspettano la luce, poi si accendono una alla volta */
@media (prefers-reduced-motion:no-preference){
  html.ec-js .ph-night .ph-pv > *{opacity:.18;transform:translateY(6px);transition:opacity .9s ease,transform .9s cubic-bezier(.2,0,0,1)}
  html.ec-js .ph-night .pv-rows li{opacity:.18;transition:opacity .9s ease,border-color 1s ease,box-shadow 1s ease,background-color 1s ease}
  html.ec-js .ph-night.is-lit .ph-pv > *,html.ec-js .ph-night.is-lit .pv-rows li{opacity:1;transform:none}
  html.ec-js .ph-night.is-lit .ph-pv > :nth-child(2){transition-delay:.15s}
  html.ec-js .ph-night.is-lit .ph-pv > :nth-child(3){transition-delay:.3s}
  html.ec-js .ph-night.is-lit .ph-pv > :nth-child(4){transition-delay:.45s}
  html.ec-js .ph-night.is-lit .ph-pv > :nth-child(5){transition-delay:.6s}
  html.ec-js .ph-night.is-lit .pv-rows li:nth-child(2){transition-delay:.35s}
  html.ec-js .ph-night.is-lit .pv-rows li:nth-child(3){transition-delay:.7s}
  html.ec-js .ph-night.is-lit .pv-rows li:nth-child(4){transition-delay:1.05s}
  html.ec-js .ph-night .pv-rows li.is-now{border-color:rgba(255,255,255,.08);box-shadow:none;background:rgba(255,255,255,.04)}
  html.ec-js .ph-night.is-lit .pv-rows li.is-now{border-color:rgba(252,163,17,.55);box-shadow:0 0 34px -8px rgba(252,163,17,.55);background:rgba(252,163,17,.08)}
  html.ec-js .ph-night .pv-ore span.is-scelta{background:rgba(255,255,255,.04);border-color:rgba(255,255,255,.14);color:#FFFFFF;box-shadow:none}
  html.ec-js .ph-night.is-lit .pv-ore span.is-scelta{background:rgba(255,190,110,.14);border-color:rgba(255,190,110,.75);color:#FFE2B0;box-shadow:0 0 30px -8px rgba(255,170,80,.6);transition-delay:1.1s}
}
.ph-night.is-lit .ph-pv--pe{border-color:rgba(255,200,130,.32);box-shadow:0 40px 90px -40px rgba(0,0,0,.85),0 -30px 80px -40px rgba(255,170,80,.45),inset 0 1px 0 rgba(255,220,170,.25)}
/* lampada senza WebGL: un alone caldo in CSS */
.ph-lampada-css::before{content:"";position:absolute;right:8%;top:-120px;width:640px;height:640px;border-radius:50%;background:radial-gradient(closest-side,rgba(255,190,110,.32),rgba(255,160,70,.1) 55%,transparent);z-index:-1;pointer-events:none}
/* la nebbia sui passi */
.ph-nebbia{position:absolute;pointer-events:none;z-index:3;transition:opacity .9s ease}
.ph-nebbia.is-via{opacity:0}
/* fuori rotta */
.ph-404{min-height:100vh;min-height:100svh;display:flex;flex-direction:column}
.ph-404 .ec-wrap{position:relative;z-index:1}
.ph-404 header{padding:24px 0}
.ph-404 main{flex:1;display:flex;align-items:center;padding:24px 0 34vh}
.ph-404 .ec-h1{max-width:12ch}
.ph-404 .cosa{display:flex;flex-wrap:wrap;gap:12px;margin-top:8px}
/* la ricerca: il contatore dei profili e il filtro che li sta passando in rassegna */
.ph-conta{position:absolute;left:18px;top:16px;display:grid;grid-template-columns:auto auto;align-items:baseline;column-gap:8px;row-gap:2px;color:#FFFFFF;pointer-events:none;max-width:calc(100% - 130px)}
.ph-conta b{font-size:clamp(30px,4vw,40px);font-weight:800;font-stretch:76%;line-height:1;font-variant-numeric:tabular-nums;letter-spacing:-.01em}
.ph-conta span{font-size:14px;font-weight:700;color:var(--ph-nebbia)}
.ph-conta em{grid-column:1 / -1;font-style:normal;font-size:13.5px;font-weight:700;color:#FFD58A;min-height:1.3em;opacity:0;transform:translateY(-4px);transition:opacity .35s,transform .35s cubic-bezier(.2,0,0,1)}
.ph-conta.has-fil em{opacity:1;transform:none}
.ph-conta em::before{content:"Filtro: ";color:var(--ph-nebbia);font-weight:600}
.ph-scena.is-locked .ph-conta em::before{content:""}
@media (prefers-reduced-motion:no-preference){.ph-conta.is-tick b{animation:phTick .25s ease-out}}
@keyframes phTick{from{color:#FFD58A}to{color:#FFFFFF}}
.ph-scena.is-locked .ph-conta b{color:#FFD58A}
/* la foto in cui si trasforma l'ultima persona rimasta */
.ph-foto{position:absolute;left:50%;top:40%;width:clamp(84px,22%,124px);aspect-ratio:1/1;margin:0;transform:translate(-50%,-50%) scale(.12);opacity:0;border-radius:999px;overflow:hidden;box-shadow:0 0 0 3px #FCA311,0 0 46px 6px rgba(252,163,17,.45);pointer-events:none;z-index:1;transition:opacity .5s ease,transform .9s cubic-bezier(.16,1,.3,1)}
.ph-foto img{width:100%;height:100%;object-fit:cover;object-position:50% 22%;display:block}
.ph-scena.has-foto .ph-foto{opacity:1;transform:translate(-50%,-50%) scale(1)}
.ph-scena .ph-scheda{z-index:2}
@media (prefers-reduced-motion:reduce){.ph-foto{transition:none}}
/* il faro della garanzia: la torre al centro, la luce gira su se stessa */
.ph-torre{position:absolute;left:50%;bottom:-2px;height:62%;transform:translateX(-50%);pointer-events:none;z-index:1}
.ph-torre svg{height:100%;width:auto;display:block}
.ph-faro-box.is-static{background:radial-gradient(ellipse 45% 60% at 50% 22%,rgba(252,163,17,.4),rgba(252,163,17,.06) 60%,transparent 80%),var(--ph-notte)}
/* pausa del faro che gira */
.ph-faro-pausa{position:absolute;right:12px;top:12px;z-index:2;width:44px;height:44px;border-radius:999px;border:1.5px solid rgba(255,255,255,.28);background:rgba(11,20,38,.6);color:#FFFFFF;display:inline-flex;align-items:center;justify-content:center;cursor:pointer}
.ph-faro-pausa:hover{border-color:var(--ph-luce)}
@media (prefers-reduced-motion:reduce){.ph-faro-pausa{display:none}}