/* ============================================================
   GLS · HERO DELLE PAGINE SERVIZIO (variante Asse) · 1.0 · child theme 1.1.70
   Due meta uguali su bianco. A sinistra H1, sommario, pulsanti; a destra la
   visual propria della pagina. Un asse verticale divide le due meta, un
   orizzonte le attraversa: sotto, allineati sulla stessa riga, i crediti e
   l esito della visual. All incrocio un quadrato Royal.
   Dietro la visual una scena diversa per pagina (punti, quadretti con mirino,
   retino, cornici, diagonale, costellazione, ritmo), costruita da gls-hero.js.
   SEO e prestazioni: testo, titolo e visual sono visibili dal primo paint
   (nessuna dissolvenza sull elemento LCP, nessun testo toccato da script);
   si animano solo le linee e la scena, che sono aria-hidden e fuori dal flusso.
   Le linee si disegnano al caricamento in solo CSS; la scena la crea lo script.
   Senza script: linee in posizione, nessuna scena. Con reduced motion: tutto fermo.
   ============================================================ */
.gls-hx { position: relative; padding: 24px 0 104px; background: var(--gls-surface-base); overflow-x: clip; }
.gls-hx .hx-grid { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: 1fr auto; column-gap: 128px; row-gap: 56px;
  grid-template-areas: "top field" "cred out"; }
.gls-hx .hx-top { grid-area: top; position: relative; z-index: 1; padding-top: 12px; }
.gls-hx .hx-top .gls-h1 { margin: 0; font-family: var(--gls-font-display); font-weight: var(--gls-weight-light); font-size: clamp(42px, 5vw, 72px); line-height: 1.03;
  letter-spacing: -.025em; color: var(--gls-primary); max-width: 13ch; text-wrap: balance; }
.gls-hx .hx-top .hx-lead { margin: 32px 0 0; font-size: 18px; line-height: 1.66; color: var(--gls-ink-muted); max-width: 50ch; text-wrap: pretty; }
.gls-hx .hx-top .b2b-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 40px; }
.gls-hx .hx-top .gls-btn { min-height: 52px; padding-inline: 28px; text-decoration: none; }
.gls-hx .hx-top .gls-btn:focus-visible { outline: 2px solid var(--gls-royal); outline-offset: 3px; }

/* riga dell orizzonte: crediti a sinistra, esito della visual a destra */
.gls-hx .hx-cred { grid-area: cred; position: relative; z-index: 1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; align-items: end; margin: 0; padding: 32px 0 0; list-style: none; }
.gls-hx .hx-cred li { margin: 0; list-style: none; }
.gls-hx .hx-cred .gls-figure { font-family: var(--gls-font-display); font-weight: var(--gls-weight-light); font-size: 30px; line-height: 1.05; letter-spacing: -.015em; color: var(--gls-primary);
  font-variant-numeric: tabular-nums; white-space: nowrap; }
.gls-hx .hx-cred p { margin: 8px 0 0; font-size: 12.5px; line-height: 1.45; color: var(--gls-ink-muted); }
.gls-hx .hx-out.b2b-outcome { grid-area: out; position: relative; z-index: 1; align-self: end; margin: 0; padding-top: 32px; border-top: 0; }

/* visual: resta quella della pagina, senza fondo, centrata nella meta destra */
.gls-hx .hx-field.b2b-field { grid-area: field; position: relative; z-index: 1; width: 100%; max-width: none; margin: 0; padding-top: 20px; gap: 24px; }
.gls-hx .hx-field > .b2b-field-head + * { margin-top: auto; }
.gls-hx .hx-field > :last-child { margin-bottom: auto; }

/* asse, orizzonte, fulcro */
.gls-hx .hx-axis { grid-column: 1 / -1; grid-row: 1 / -1; justify-self: center; width: 1px; background: var(--gls-line-strong); transform-origin: top; pointer-events: none; }
.gls-hx .hx-hor { grid-column: 1 / -1; grid-row: 2; align-self: start; height: 1px; background: var(--gls-primary); transform-origin: center; pointer-events: none; }
.gls-hx .hx-ful { grid-column: 1 / -1; grid-row: 2; align-self: start; justify-self: center; position: relative; z-index: 2; width: 11px; height: 11px; margin-top: -5px; background: var(--gls-royal); pointer-events: none; }
.gls-hx .hx-ful.is-vuoto { background: var(--gls-surface-base); box-shadow: none; border: 1.5px solid var(--gls-royal); }
.gls-hx .hx-ful.is-doppio::before { content: ""; position: absolute; inset: -6px; border: 1px solid var(--gls-royal); }
.gls-hx .hx-ful::after { content: ""; position: absolute; inset: -9px; border: 1px solid var(--gls-royal); opacity: 0; }
@keyframes hx-x { from { transform: scaleX(0); } to { transform: none; } }
@keyframes hx-y { from { transform: scaleY(0); } to { transform: none; } }
@keyframes hx-pop { from { transform: scale(0); } to { transform: none; } }
@keyframes hx-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes hx-ring { 0% { opacity: .6; transform: scale(.4); } 70%, 100% { opacity: 0; transform: scale(1.8); } }
.gls-hx .hx-axis { animation: hx-y 1.6s var(--gls-ease-in) both; }
.gls-hx .hx-hor { animation: hx-x 1.6s var(--gls-ease-in) .4s both; }
.gls-hx .hx-ful { animation: hx-pop .6s var(--gls-ease-in) 1.5s both; }
.gls-hx .hx-ful::after { animation: hx-ring 4.5s var(--gls-ease) 2.4s infinite; }

/* ================= la scena dietro la visual ================= */
.gls-hx .hx-scene { grid-area: field; position: relative; z-index: 0; pointer-events: none; }
.gls-hx .hx-sb { position: absolute; top: -24px; bottom: -28px; left: -64px; right: 0; overflow: hidden; }
.gls-hx .hx-sb i, .gls-hx .hx-sb b, .gls-hx .hx-sb em { position: absolute; display: block; font-style: normal; }
.gls-hx .hx-sb { animation: hx-in 1.4s var(--gls-ease) .3s both; }
/* punti */
.gls-hx .sc-punti i { left: calc(var(--x) * 1px); top: calc(var(--y) * 1px); width: 3px; height: 3px; margin: -1.5px 0 0 -1.5px; background: var(--gls-blue-200); opacity: .6;
  transform: scale(var(--s, 1)); transition: transform .6s var(--gls-ease-in), background-color .6s var(--gls-ease), opacity .6s var(--gls-ease); }
.gls-hx .sc-punti i.hot { background: var(--gls-royal); opacity: .55; }
/* quadretti con mirino */
.gls-hx .sc-quadretti b { background: var(--gls-blue-050); transform-origin: top left; }
.gls-hx .sc-quadretti b.v { top: 0; bottom: 0; width: 1px; left: calc(var(--x) * 1px); }
.gls-hx .sc-quadretti b.h { left: 0; right: 0; height: 1px; top: calc(var(--y) * 1px); }
.gls-hx .sc-quadretti b.m { background: var(--gls-blue-200); }
.gls-hx .sc-quadretti b.v { animation: hx-y 1.3s var(--gls-ease-in) both; animation-delay: calc(var(--k) * 35ms); }
.gls-hx .sc-quadretti b.h { animation: hx-x 1.3s var(--gls-ease-in) both; animation-delay: calc(var(--k) * 45ms); }
.gls-hx .sc-quadretti em { opacity: 0; transition: opacity .4s var(--gls-ease); background: var(--gls-royal); }
.gls-hx .sc-quadretti em.mv { top: 0; bottom: 0; width: 1px; left: 0; transform: translateX(calc(var(--px, 0) * 1px)); opacity: 0; }
.gls-hx .sc-quadretti em.mh { left: 0; right: 0; height: 1px; top: 0; transform: translateY(calc(var(--py, 0) * 1px)); }
.gls-hx .sc-quadretti em.mq { left: 0; top: 0; width: 9px; height: 9px; margin: -4px 0 0 -4px; transform: translate(calc(var(--px, 0) * 1px), calc(var(--py, 0) * 1px)); }
.gls-hx .sc-quadretti.is-on em.mv, .gls-hx .sc-quadretti.is-on em.mh { opacity: .28; }
.gls-hx .sc-quadretti.is-on em.mq { opacity: .9; }
.gls-hx .sc-quadretti em { transition: opacity .4s var(--gls-ease), transform .25s var(--gls-ease-in); }
/* retino: quadrati che crescono allontanandosi dal fulcro, un onda parte dal fulcro */
.gls-hx .sc-retino i { left: calc(var(--x) * 1px); top: calc(var(--y) * 1px); width: calc(var(--z) * 1px); height: calc(var(--z) * 1px); margin: calc(var(--z) * -.5px) 0 0 calc(var(--z) * -.5px);
  background: var(--gls-blue-050); transition: background-color .6s var(--gls-ease); }
.gls-hx .sc-retino i.r { background: var(--gls-blue-200); }
.gls-hx .sc-retino i.hot { background: var(--gls-blue-200); }
.gls-hx .sc-retino i { animation: hx-rip 8s var(--gls-ease) infinite; animation-delay: calc(1.5s + var(--d) * 3ms); }
@keyframes hx-rip { 0%, 26%, 100% { transform: scale(1); } 10% { transform: scale(1.6); } }
/* cornici concentriche attorno alla visual, profondita al puntatore */
.gls-hx .sc-cornici { overflow: visible; top: 0; bottom: 0; left: 0; right: 0; }
.gls-hx .sc-cornici i { inset: calc(var(--k) * -11px); border: 1px solid var(--gls-primary); opacity: calc(.34 - var(--k) * .05);
  transform: translate(calc(var(--mx, 0) * var(--k) * 3px), calc(var(--my, 0) * var(--k) * 3px)); transition: transform 1s var(--gls-ease-in); }
.gls-hx .sc-cornici i::after { content: ""; position: absolute; inset: -1px; border: 1px solid var(--gls-royal); opacity: 0; }
.gls-hx .sc-cornici i::after { animation: hx-wave 6s var(--gls-ease) infinite; animation-delay: calc(2.2s + var(--k) * .28s); }
@keyframes hx-wave { 0%, 18%, 100% { opacity: 0; } 6% { opacity: .8; } }
/* diagonale: quadrati vuoti in progressione dal fulcro verso l angolo alto */
.gls-hx .sc-diagonale i { left: calc(var(--x) * 1%); top: calc(var(--y) * 1%); width: calc(var(--z) * 1px); height: calc(var(--z) * 1px); margin: calc(var(--z) * -.5px) 0 0 calc(var(--z) * -.5px);
  border: 1px solid var(--gls-blue-200); transform: translate(calc(var(--mx, 0) * var(--k) * 1.4px), calc(var(--my, 0) * var(--k) * 1.4px)); transition: transform 1.1s var(--gls-ease-in); }
.gls-hx .sc-diagonale i.a { border-color: var(--gls-royal); }
.gls-hx .sc-diagonale i.f { background: var(--gls-blue-050); }
.gls-hx .sc-diagonale i::after { content: ""; position: absolute; inset: -1px; background: var(--gls-blue-200); opacity: 0; }
.gls-hx .sc-diagonale i::after { animation: hx-wave 7s var(--gls-ease) infinite; animation-delay: calc(2s + var(--k) * .22s); }
.gls-hx .sc-diagonale i { animation: hx-pop .8s var(--gls-ease-in) both; animation-delay: calc(.8s + var(--k) * .1s); }
/* costellazione */
.gls-hx .sc-costellazione svg { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; }
.gls-hx .sc-costellazione line { stroke: var(--gls-blue-200); stroke-width: 1; vector-effect: non-scaling-stroke; }
.gls-hx .sc-costellazione i { left: calc(var(--x) * 1%); top: calc(var(--y) * 1%); width: 6px; height: 6px; margin: -3px 0 0 -3px; background: var(--gls-blue-200);
  transform: translate(calc(var(--mx, 0) * var(--k) * 2px), calc(var(--my, 0) * var(--k) * 2px)); transition: transform 1.2s var(--gls-ease-in); }
.gls-hx .sc-costellazione i.a { width: 10px; height: 10px; margin: -5px 0 0 -5px; background: var(--gls-royal); }
.gls-hx .sc-costellazione i.o { background: var(--gls-surface-base); border: 1px solid var(--gls-primary); }
.gls-hx .sc-costellazione i.tw { animation: hx-tw 5s var(--gls-ease) infinite; animation-delay: calc(var(--k) * -.7s); }
@keyframes hx-tw { 0%, 100% { opacity: 1; } 50% { opacity: .25; } }
.gls-hx .sc-costellazione svg { animation: hx-in 2s var(--gls-ease) 1s both; }
/* ritmo: filetti verticali che salgono dall orizzonte, il puntatore li alza */
.gls-hx .sc-ritmo { bottom: -56px; }
.gls-hx .sc-ritmo b { bottom: 0; left: calc(var(--x) * 1px); width: 1px; height: calc(var(--h) * 1%); background: var(--gls-blue-200); opacity: .7; transform-origin: bottom;
  transform: scaleY(var(--s, 1)); transition: transform .7s var(--gls-ease-in), background-color .5s var(--gls-ease); }
.gls-hx .sc-ritmo b.a { background: var(--gls-royal); }
.gls-hx .sc-ritmo b.hot { background: var(--gls-royal); }
.gls-hx .sc-ritmo b { animation: hx-y 1.2s var(--gls-ease-in) both; animation-delay: calc(.5s + var(--k) * 30ms); }
.gls-hx .sc-ritmo b::after { content: ""; position: absolute; left: -2px; top: -2px; width: 5px; height: 5px; background: inherit; }

@media (max-width: 1100px) { .gls-hx .hx-grid { column-gap: 72px; } .gls-hx .hx-sb { left: -36px; } }
@media (max-width: 900px) {
  .gls-hx { padding-bottom: 72px; }
  .gls-hx .hx-grid { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; row-gap: 0; grid-template-areas: "top" "cred" "field" "out"; }
  .gls-hx .hx-axis, .gls-hx .hx-hor, .gls-hx .hx-ful, .gls-hx .hx-scene { display: none; }
  .gls-hx .hx-cred { margin-top: 44px; padding-top: 24px; border-top: 1px solid var(--gls-primary); align-items: start; }
  .gls-hx .hx-field.b2b-field { margin-top: 56px; padding-top: 0; }
  .gls-hx .hx-out.b2b-outcome { margin-top: 24px; padding-top: 18px; border-top: var(--gls-rule-section); }
}
@media (max-width: 560px) {
  .gls-hx .hx-cred { gap: 14px; }
  .gls-hx .hx-cred .gls-figure { font-size: 22px; white-space: normal; }
  .gls-hx .hx-top .hx-lead { font-size: 17px; }
}
@media (hover: none) { .gls-hx .hx-sb i, .gls-hx .hx-sb b { transition: none; } }
@media (prefers-reduced-motion: reduce) {
  .gls-hx *, .gls-hx *::before, .gls-hx *::after { animation: none !important; transition: none !important; }
}