/* ==========================================================================
   Animazione "La tua valutazione" — hero della home.
   Coordinate = pixel CSS delle reference (origine: angolo in alto a sinistra
   dello screenshot). Tutto vive dentro .eg-stage, scalato da gauge.js.
   ========================================================================== */
@font-face{font-family:'Nunito';font-style:normal;font-weight:400;font-display:swap;src:url('../fonts/nunito-latin-400-normal.woff2') format('woff2');}
@font-face{font-family:'Nunito';font-style:normal;font-weight:500;font-display:swap;src:url('../fonts/nunito-latin-500-normal.woff2') format('woff2');}
@font-face{font-family:'Nunito';font-style:normal;font-weight:600;font-display:swap;src:url('../fonts/nunito-latin-600-normal.woff2') format('woff2');}
@font-face{font-family:'Nunito';font-style:normal;font-weight:700;font-display:swap;src:url('../fonts/nunito-latin-700-normal.woff2') format('woff2');}
@font-face{font-family:'Nunito';font-style:normal;font-weight:800;font-display:swap;src:url('../fonts/nunito-latin-800-normal.woff2') format('woff2');}

.esgi-gauge,.esgi-gauge *{box-sizing:content-box}
.esgi-gauge{
  --eg-scale:1;
  position:relative;width:100%;max-width:560px;margin-inline:auto;
  aspect-ratio:460.5/299;overflow:hidden;
  background:#EFEFF2;border-radius:14px;
  font-family:'Nunito',system-ui,-apple-system,'Segoe UI',sans-serif;
  -webkit-font-smoothing:antialiased;text-rendering:geometricPrecision;
  box-shadow:0 30px 70px rgba(0,0,0,.30);
  /* Inclinazione 3D: --eg-tilt in gradi, negativo = girata verso sinistra. Si imposta dal Personalizza. */
  transform:perspective(1600px) rotateY(calc(var(--eg-tilt,-12)*1deg));
  transform-origin:50% 50%;backface-visibility:hidden;
}
@media (max-width:620px){.esgi-gauge{transform:none}}
.eg-stage{
  position:absolute;left:0;top:0;width:470px;height:310px;
  transform:translate(calc(-5px*var(--eg-scale)),calc(-5px*var(--eg-scale))) scale(var(--eg-scale));
  transform-origin:0 0;
}
.eg-stage::before{content:"";position:absolute;left:7px;top:7px;width:456.5px;height:295px;
  background:linear-gradient(to right,#FAFAFA 0 273px,#EFEFF2 273px 275px,#FAFAFA 275px)}
.eg-stage>*{position:absolute}

/* Baseline-based placement: top = baseline - fs*.829 (Nunito, line-height 1) */
.eg-title,.eg-score,.eg-pill span,.eg-idle,.eg-lbl,.eg-sub,.eg-status-txt{white-space:nowrap}
.eg-title{
  --fs:10.5;--bl:45;
  font-size:calc(var(--fs)*1px);line-height:1;font-weight:800;letter-spacing:.0625em;color:#606B60;
  top:calc(var(--bl)*1px - var(--fs)*.829px);
}
.eg-t-left{left:6px;width:273px;text-align:center;padding-left:.06em}
.eg-t-right{left:305.5px}

.eg-status{left:7px;width:273px;height:12px;display:flex;align-items:center;justify-content:center;gap:6.5px;top:59px;transform:translateX(-.5px)}
.eg-dot{width:8px;height:8px;border-radius:50%;background:#9AA49A;flex:none;transition:background-color .3s}
.eg-status-txt{font-size:10.3px;line-height:12px;font-weight:800;color:#317345}

.eg-svg{left:0;top:0;overflow:visible}
.eg-track,.eg-prog{fill:none;stroke-width:2;stroke-linecap:round}
.eg-track{stroke:#E5E6DF}
.eg-prog{stroke:#ABC74A;stroke-dasharray:0 100}
.eg-needle{fill:#1F2822}
.eg-hub{fill:#1F2822}
.eg-hub-in{fill:#FAFAFA}
.eg-lab{fill:#fff;font-family:inherit;font-weight:800;font-size:7.4px;letter-spacing:.08em}

.eg-score{left:7px;width:273px;text-align:center;display:flex;justify-content:center;align-items:baseline;gap:3px;--fs:30.6;--bl:235.25;
  top:calc(var(--bl)*1px - var(--fs)*.829px);line-height:1;font-size:calc(var(--fs)*1px)}
.eg-num{font-weight:800;color:#1F2822;font-variant-numeric:tabular-nums}
.eg-of{font-size:12.3px;font-weight:700;color:#606B60}

.eg-pill{left:7px;width:273px;top:247.5px;height:30px;display:flex;justify-content:center}
.eg-pill span{display:inline-flex;align-items:center;justify-content:center;height:30px;padding:0 12.4px;box-sizing:border-box;
  border:1px solid #64742E;border-radius:999px;background:#F3F7E5;color:#64742E;
  font-size:10.1px;font-weight:800;letter-spacing:.04em;line-height:1}

.eg-idle{left:6.75px;width:273px;text-align:center;top:260px;font-size:14.3px;line-height:1;font-weight:500;color:#6C717F}

/* ---- Percorso ---- */
.eg-steps{left:0;top:0;width:470px;height:310px;pointer-events:none}
.eg-step{position:absolute;left:305.5px;top:0;height:24px;width:150px;transition:top .45s cubic-bezier(.4,0,.2,1)}
.eg-circ{position:absolute;left:0;top:0;width:24px;height:24px;border-radius:50%;background:#E5E6EA;display:block;
  transition:box-shadow .35s}
.eg-on{position:absolute;inset:0;border-radius:50%;background:linear-gradient(135deg,#1F5A3F,#83BA3F);opacity:0;transition:opacity .35s}
.eg-n{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-style:normal;font-size:10px;font-weight:800;color:#9CA1AD;
  line-height:1;transition:color .3s,opacity .25s}
.eg-chk{position:absolute;left:5px;top:5px;width:14px;height:14px;fill:none;stroke:#fff;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;opacity:0;transition:opacity .25s}
.eg-lbl{position:absolute;left:34px;top:6.7px;font-size:12.5px;line-height:1;font-weight:500;color:#9CA1AD;transition:color .3s;
  --fs:12.4}
.eg-sub{position:absolute;left:34px;top:27px;font-size:10.5px;line-height:1;font-weight:400;color:#6C717F;opacity:0;transition:opacity .25s}
.eg-step.is-done .eg-on,.eg-step.is-active .eg-on{opacity:1}
.eg-step.is-done .eg-n,.eg-step.is-active .eg-n{color:#fff}
.eg-step.is-done .eg-n{opacity:0}
.eg-step.is-done .eg-chk{opacity:1}
.eg-step.is-done .eg-lbl,.eg-step.is-active .eg-lbl{color:#3C4352}
.eg-step.is-active .eg-circ{box-shadow:0 0 0 2px rgba(49,104,62,.2)}
.eg-step.is-active .eg-sub{opacity:1}
.eg-conn{position:absolute;left:316.5px;width:2px;background:#E5E6EA;overflow:hidden;transition:top .45s cubic-bezier(.4,0,.2,1),height .45s cubic-bezier(.4,0,.2,1)}
.eg-conn i{position:absolute;inset:0;background:#317345;transform:scaleY(0);transform-origin:top;transition:transform .35s}
.eg-conn.is-on i{transform:scaleY(1)}

/* Transizioni disattivate mentre si riavvia il ciclo */
.esgi-gauge.is-reset *{transition:none!important}
.esgi-gauge .eg-stage{transition:opacity .3s}
.esgi-gauge.is-fading .eg-stage>*{opacity:0!important;transition:opacity .3s}

@keyframes egIn{from{opacity:0;transform:translateY(2px)}to{opacity:1;transform:none}}
.eg-swap{animation:egIn .3s ease-out backwards}
.esgi-gauge.is-static *{transition:none!important;animation:none!important}
@media (prefers-reduced-motion:reduce){.esgi-gauge *{transition:none!important;animation:none!important}}