/* =====================================================================
   Apertura della home - "Il segno" con lo slide (14/10/2026).
   Caricato solo sulla home e sulle sue varianti.

   Tutto vale solo con .lir-hx sull'apertura, che mette hero.js: senza lo
   script l'apertura resta quella di prima (marchio in ::after e slideshow di
   Elementor). Il contenuto non e' stato toccato in Elementor: per tornare
   indietro basta togliere 'hero' dall'elenco in functions.php. Copia dei
   dati delle home nel campo _lir_backup_20261014_apertura.

   Da 1100px in su:
     - il marchio della categoria e' un SVG che si disegna tratto dopo
       tratto, con dentro la foto in duotono petrolio;
     - lo slide: la foto dentro il marchio si allarga fino a tutto schermo
       (il marchio si apre come una finestra), resta qualche secondo con uno
       zoom lento, poi si richiude e al giro dopo arriva la foto seguente.
       Le foto sono quelle della presentazione di Elementor dell'apertura;
     - a sinistra titolo, preventivo e telefono, e le due scelte diventano
       una riga sottile.
   Sotto i 1100px resta il marchio tenue di prima, senza slide.
   ===================================================================== */

/* -- Testo ------------------------------------------------------------- */
/* Titolo su due righe, costruite da hero.js ("Consulenti del lavoro /
   a Martellago - Venezia"). --lir-hx-em e' la larghezza della riga piu'
   lunga in em, misurata dallo script: il carattere e' il piu' piccolo fra
   il valore fluido e quello che fa stare quella riga nello spazio libero
   (lo schermo su telefono e tablet, la colonna prima del marchio da 1100px).
   Cosi' le righe restano due in ogni lingua e non entrano mai nel marchio.
   --lir-hx-scala riduce tutto in proporzione rispetto al massimo che
   starebbe: .78 scelto il 14/10/2026 (circa 52px a 1366). Per ritoccare la
   misura del titolo si cambia solo quel numero. */
body .lir-hero.lir-hx{--lir-hx-scala:.78}
body .lir-hero.lir-hx h1,
body .lir-hero.lir-hx h1.elementor-heading-title{
  font-size:calc(var(--lir-hx-scala) * min(clamp(2.4rem,1.2rem + 3.8vw,5.2rem),calc((100vw - 40px) / var(--lir-hx-em,9.6))));
  line-height:1.05;letter-spacing:-.026em;max-width:none;
}
@media (min-width:1100px){
  body .lir-hero.lir-hx h1,
  body .lir-hero.lir-hx h1.elementor-heading-title{
    font-size:calc(var(--lir-hx-scala) * min(clamp(2.4rem,1.2rem + 3.8vw,5.2rem),calc(44vw / var(--lir-hx-em,9.6))));
  }
}
body .lir-hero.lir-hx .lir-hx__riga{display:block;white-space:nowrap}
body .lir-hero.lir-hx h1 em{font-style:italic;color:var(--petrolio-chiaro);transition:color 1.4s ease}
body .lir-hero.lir-hx.is-pieno h1 em{color:#A9CCD9}

.lir-hx__azioni{display:flex;flex-wrap:wrap;align-items:center;gap:14px 22px;margin-top:clamp(26px,3vw,36px)}
body a.lir-hx__bottone{display:inline-flex;align-items:center;gap:12px;padding:15px 24px;border-radius:var(--raggio-comando);background:#fff;color:var(--petrolio-scuro);text-decoration:none;font-weight:600;line-height:1.2;transition:background 260ms ease}
body a.lir-hx__bottone:hover{background:var(--petrolio-velo);color:var(--petrolio-scuro)}
.lir-hx__bottone svg{width:12px;height:12px;transition:transform 260ms cubic-bezier(.2,.6,.3,1)}
.lir-hx__bottone:hover svg{transform:translateX(3px)}
/* Pulsanti con la freccia, in tutta la home: il segno della freccia lascia
   3px vuoti a destra nella sua scatola da 12 (viewBox 0 0 12 12, tratto da
   4 a 8 con spessore 1.8). Senza compenso il pulsante sembrava avere piu'
   spazio a destra che a sinistra: misurato 27 contro 24 qui, 23 contro 20
   in "Due pubblici" e nella fascia delle domande. Il margine negativo porta
   il segno della freccia alla stessa distanza dal bordo dell'inizio del
   testo. Qui per tutti e tre, perche' questo foglio c'e' su ogni home. */
.lir-hx__bottone svg,.lir-dp__bottone svg,.lir-fx__bottone svg{margin-right:-3px}
body a.lir-hx__tel{color:#fff;text-decoration:none;font-weight:600;font-variant-numeric:tabular-nums;border-bottom:1.5px solid rgba(255,255,255,.35);padding-bottom:2px;transition:border-color 260ms ease}
body a.lir-hx__tel:hover{color:#fff;border-bottom-color:#fff}
.lir-hx__tel span{color:var(--su-scuro-tenue,#8FA6AF);font-weight:400}

/* Le due scelte diventano una riga sottile di percorsi. flex-direction e
   width vanno ripetuti: il contenitore di Elementor li imposta a colonna e
   a tutta larghezza. */
body .lir-hero.lir-hx .lir-hero__scelte{display:flex;flex-direction:row;flex-wrap:wrap;gap:10px 32px;max-width:640px;margin-top:clamp(36px,4.6vw,58px);padding-top:18px;border-top:1px solid rgba(255,255,255,.1)}
body .lir-hero.lir-hx .lir-hero__scelte .lir-scelta{flex:none;width:auto;flex-direction:row;align-items:baseline;gap:10px;padding:0;background:none;border:0;border-radius:0;box-shadow:none;transform:none}
body .lir-hero.lir-hx .lir-hero__scelte .lir-scelta > .elementor-widget{width:auto}
body .lir-hero.lir-hx .lir-hero__scelte .lir-scelta:hover{background:none;transform:none}
body .lir-hero.lir-hx .lir-scelta__testo{display:none}
body .lir-hero.lir-hx .lir-scelta__nome,
body .lir-hero.lir-hx .lir-scelta__nome .elementor-heading-title{font-size:1.1rem;line-height:1.3}
body .lir-hero.lir-hx .lir-scelta .lir-scelta__vai{margin:0;padding:0;font-size:.82rem;font-weight:400;color:var(--su-scuro-tenue,#8FA6AF)}
body .lir-hero.lir-hx .lir-scelta .lir-scelta__vai::after{color:var(--petrolio-chiaro)}
body .lir-hero.lir-hx .lir-scelta:hover .lir-scelta__vai{color:#C3D2D8}

/* -- Il segno e lo slide (da 1100px) ----------------------------------- */
.lir-hx__segno,.lir-hx__varco,.lir-hx__velo,.lir-hx__passo{display:none}
@media (min-width:1100px){
  body .lir-hero.lir-hx::after{display:none}
  body .lir-hero.lir-hx > .elementor-background-slideshow{display:none}
  body .lir-hero.lir-hx{background:radial-gradient(120% 90% at 80% 45%,#12232B 0%,var(--grafite) 60%)}

  /* Il marchio sta intero nell'apertura: a destra resta meta' dello spazio
     che c'e' a sinistra prima del testo (--lir-hx-margine), cosi' non tocca
     il bordo ma non si stacca troppo verso il centro. La scatola dell'SVG
     ha un margine interno di 40 unita' su 500 (l'8%), che qui si compensa. */
  .lir-hx__segno{
    --lir-hx-w:min(640px,46vw);
    --lir-hx-margine:calc((100vw - min(100vw, var(--gabbia,1220px))) / 2 + var(--bordo-x,48px));
    display:block;position:absolute;z-index:0;top:50%;width:var(--lir-hx-w);aspect-ratio:1;
    right:calc(var(--lir-hx-margine) * .5 - var(--lir-hx-w) * .08);
    transform:translateY(-50%);pointer-events:none;transition:opacity 900ms ease;
  }
  .lir-hx__segno svg{display:block;width:100%;height:100%;overflow:visible}
  .lir-hx__strato{will-change:transform}
  .lir-hx__tratto{fill:none;stroke-linecap:round;stroke-linejoin:round}
  .lir-hx__fantasma{stroke:rgba(255,255,255,.07);stroke-width:1.2}
  .lir-hx__foto{transition:opacity 1.6s ease}

  /* La finestra a forma di marchio che si allarga: stessa geometria del
     segno, la foto dentro e' contro-scalata da hero.js e resta ferma */
  .lir-hx__varco{display:block;position:absolute;z-index:0;pointer-events:none;opacity:0;
    -webkit-mask:var(--lir-hx-marchio) center/100% 100% no-repeat;mask:var(--lir-hx-marchio) center/100% 100% no-repeat;
    will-change:transform}
  .lir-hx__varco-foto{position:absolute;background-size:cover;background-position:center;filter:url(#lir-hx-duo);will-change:transform}
  .lir-hx__varco-zoom{position:absolute;inset:0;background:inherit;background-size:cover;background-position:center;transform:scale(1);transition:transform 9s cubic-bezier(.25,.1,.25,1)}
  .lir-hx__varco.is-pieno .lir-hx__varco-zoom{transform:scale(1.06)}

  /* Velo per leggere il testo quando la foto e' a tutto schermo */
  .lir-hx__velo{display:block;position:absolute;inset:0;z-index:1;pointer-events:none;opacity:0;transition:opacity 1.6s ease;
    background:linear-gradient(90deg,rgba(12,20,24,.86) 0%,rgba(12,20,24,.6) 44%,rgba(13,55,70,.22) 100%)}
  body .lir-hero.lir-hx.is-pieno .lir-hx__velo{opacity:1}

  /* Indicatore delle due scene, sotto il bordo destro del marchio */
  .lir-hx__passo{display:flex;position:absolute;right:calc(((100vw - min(100vw, var(--gabbia,1220px))) / 2 + var(--bordo-x,48px)) * .5);bottom:26px;z-index:3;gap:8px}
  .lir-hx__passo i{display:block;width:26px;height:2px;border-radius:2px;background:rgba(255,255,255,.2);overflow:hidden;position:relative}
  .lir-hx__passo i::after{content:"";position:absolute;inset:0;background:#fff;transform:scaleX(0);transform-origin:left}
  .lir-hx__passo i.is-ora::after{animation:lir-hx-corre var(--lir-hx-durata,7s) linear forwards}
}
@keyframes lir-hx-corre{to{transform:scaleX(1)}}

@media (prefers-reduced-motion:reduce){
  .lir-hx__varco,.lir-hx__velo,.lir-hx__passo{display:none !important}
  .lir-hx__foto,.lir-hx__segno,body .lir-hero.lir-hx h1 em{transition:none}
}