/* ============================================================
   PAGE — Home · CASO STUDIO IN APERTURA (posa pavimenti)
   Gancio, non approfondimento: l'imbuto tridimensionale sta a
   sinistra, il percorso dei soldi scende in colonna a destra.
   Composizione diversa dal caso su Da Lead a Cash (li' e' centrato
   con le annotazioni sui due lati), stesso linguaggio visivo.

   Geometria: --box e' l'unica misura, tutto il resto e' un suo
   multiplo. rotateX 62deg · passo di profondita' .215*box ·
   fuga 3.2*box. Se cambi rx o zs, ricontrolla l'altezza del palco.
   ============================================================ */

.hcase{
  --lit:5;                       /* fallback senza JS: tutto acceso */
  position:relative;
  overflow-x:clip;
}
.hcase.section-pad{padding:clamp(64px,7vw,96px) 0}

/* ─────────────────────────────────────────────
   1. TESTATA — allineata a sinistra, corta
   ───────────────────────────────────────────── */
.hcase-head{max-width:900px;margin-bottom:clamp(26px,3.4vw,44px)}
.hcase-head h2{
  font-family:var(--font-display);font-weight:600;
  font-size:clamp(1.9rem,3.9vw,3.05rem);letter-spacing:-.044em;line-height:1.02;
  margin:16px 0 14px;text-wrap:balance;
}
.hcase-head h2 .hc-cash{color:var(--green);font-variant-numeric:tabular-nums}
.hcase-head p{
  font-size:clamp(.98rem,1.2vw,1.08rem);line-height:1.6;
  color:var(--text-dim);max-width:66ch;text-wrap:pretty;margin:0;
}

/* ─────────────────────────────────────────────
   2. CORPO — imbuto a sinistra, percorso a destra
   ───────────────────────────────────────────── */
.hcase-body{
  display:grid;
  grid-template-columns:minmax(0,.96fr) minmax(0,1.04fr);
  gap:clamp(20px,3.6vw,58px);
  align-items:center;
}

/* ── Il palco 3D ── */
.hcase-scene{
  --box:clamp(240px,29vw,428px);
  --zs:calc(var(--box) * .215);
  --persp:calc(var(--box) * 3.2);
  --rx:62deg;
  position:relative;
  height:calc(var(--box) * 1.16);
  margin:0 auto;
  width:100%;
}
.hcase-3d{
  position:absolute;left:50%;top:50%;
  width:var(--box);aspect-ratio:1;
  transform:translate(-50%,-50%);
  perspective:var(--persp);
  perspective-origin:50% 50%;
}
.hcase-world{
  --tx:0deg;--tz:0deg;
  position:absolute;inset:0;
  transform-style:preserve-3d;
  transform:rotateX(calc(var(--rx) + var(--tx))) rotateZ(var(--tz));
  transition:transform .55s var(--ease);
  will-change:transform;
}

/* Asse: controruotato per restare in piedi dentro la scena */
.hcase-axis{
  position:absolute;left:50%;top:50%;
  width:1px;height:calc(var(--box) * .8);
  transform:
    translate(-50%,-50%)
    rotateZ(calc(var(--tz) * -1))
    rotateX(calc((var(--rx) + var(--tx)) * -1));
  background:linear-gradient(180deg,
    rgba(12,12,16,0) 0%,
    rgba(12,12,16,.18) 16%,
    rgba(10,111,69,.5) 84%,
    rgba(10,111,69,0) 100%);
}

/* ── I piani ── */
.hcase-plate{
  --on:clamp(0, calc(var(--lit) - var(--i)), 1);
  position:absolute;left:50%;top:50%;
  width:var(--w);aspect-ratio:1;
  transform-style:preserve-3d;
  transform:translate(-50%,-50%) translateZ(calc((2 - var(--i)) * var(--zs)));
  border-radius:50%;
  border:1px solid rgba(12,12,16, calc(.18 + .34 * var(--on)));
  /* Anello, non disco: i piani sovrapposti restano leggibili */
  background:radial-gradient(closest-side,
    rgba(255,255,255,0) 57%,
    rgba(255,255,255,.44) 83%,
    rgba(255,255,255,.74) 95%,
    rgba(255,255,255,.3) 100%);
  box-shadow:
    0 0 0 1px rgba(10,111,69, calc(.3 * var(--on))),
    0 22px 38px -34px rgba(12,12,16,.5);
  transition:box-shadow .8s var(--ease),border-color .8s var(--ease);
}
/* Spessore del piano */
.hcase-plate::before{
  content:"";position:absolute;inset:0;border-radius:50%;
  border:1px solid rgba(12,12,16,.12);
  transform:translateZ(-12px);
}
/* Il riempimento: cresce quando lo stadio si accende */
.hcase-plate::after{
  content:"";position:absolute;inset:2%;border-radius:50%;
  background:radial-gradient(closest-side,
    rgba(10,111,69, calc(.05 * var(--on))) 0%,
    rgba(10,111,69, calc(.11 * var(--on))) 72%,
    rgba(10,111,69, calc(.34 * var(--on))) 94%,
    rgba(10,111,69,0) 100%);
  opacity:var(--on);
  transform:scale(calc(.8 + .2 * var(--on)));
  transition:opacity .85s var(--ease),transform .95s var(--ease);
}
/* L'ultimo piano non e' un passaggio: e' la vasca che raccoglie */
.hcase-plate.is-basin{
  border-color:rgba(10,111,69, calc(.3 + .45 * var(--on)));
  background:radial-gradient(closest-side,
    rgba(255,255,255,.72) 0%,
    rgba(255,255,255,.82) 74%,
    rgba(255,255,255,.44) 100%);
  box-shadow:
    0 0 0 1px rgba(10,111,69, calc(.34 * var(--on))),
    0 28px 42px -30px rgba(12,12,16,.45),
    0 24px 46px -28px rgba(10,111,69, calc(.5 * var(--on)));
}
.hcase-plate.is-basin::after{
  inset:5%;
  background:radial-gradient(closest-side,
    rgba(10,111,69, calc(.4 * var(--on))) 0%,
    rgba(10,111,69, calc(.3 * var(--on))) 72%,
    rgba(10,111,69, calc(.16 * var(--on))) 100%);
  transform:scale(calc(.68 + .32 * var(--on)));
}

/* ─────────────────────────────────────────────
   3. IL PERCORSO — colonna con binario verticale
   ───────────────────────────────────────────── */
.hcase-steps{
  position:relative;
  padding-left:clamp(22px,2.2vw,30px);
}
/* Il binario */
.hcase-steps::before{
  content:"";position:absolute;left:4px;top:10px;bottom:14px;width:1px;
  background:linear-gradient(180deg,
    rgba(12,12,16,.16) 0%,
    rgba(10,111,69,.4) 78%,
    rgba(10,111,69,0) 100%);
}

.hcase-step,.hcase-jump{
  --on:clamp(0, calc(var(--lit) - var(--i)), 1);
  position:relative;
  opacity:calc(.3 + .7 * var(--on));
  transition:opacity .7s var(--ease);
}

.hcase-step{padding:2px 0 3px}
.hcase-step + .hcase-jump{margin-top:9px}
.hcase-jump + .hcase-step{margin-top:9px}

/* Pallino di stadio sul binario */
.hcase-step::before{
  content:"";position:absolute;
  left:calc(-1 * clamp(22px,2.2vw,30px));top:.62em;
  width:9px;height:9px;margin-left:.5px;border-radius:50%;
  background:var(--bg);
  border:1.5px solid rgba(10,111,69, calc(.28 + .52 * var(--on)));
  box-shadow:0 0 0 calc(3px * var(--on)) rgba(10,111,69,.08);
  transition:border-color .7s var(--ease),box-shadow .7s var(--ease);
}
.hcase-step.is-cash::before{
  background:var(--green);border-color:var(--green);
}

.hs-n{
  display:block;
  font-family:var(--font-display);font-weight:600;
  font-size:clamp(1.55rem,2.6vw,2.2rem);letter-spacing:-.046em;line-height:1;
  color:var(--text);font-variant-numeric:tabular-nums;
}
.hcase-step.is-cash .hs-n{color:var(--green)}
.hs-l{
  display:block;margin-top:5px;
  font-size:clamp(.88rem,1vw,.95rem);font-weight:600;
  letter-spacing:-.01em;line-height:1.3;color:var(--text);
}
.hs-s{
  display:block;margin-top:3px;
  font-size:.8rem;line-height:1.45;color:var(--text-faint);text-wrap:pretty;
}

/* Il passaggio da uno stadio all'altro */
.hcase-jump{
  display:flex;align-items:baseline;gap:9px;flex-wrap:wrap;
  padding:7px 13px;border-radius:var(--r-sm,12px);
  border:1px solid var(--green-line);
  background:rgba(10,111,69,.05);
  width:max-content;max-width:100%;
}
.hcase-jump::before{
  content:"";position:absolute;
  left:calc(-1 * clamp(22px,2.2vw,30px) + 5px);top:-11px;bottom:-11px;width:1px;
  background:rgba(10,111,69,.3);
}
.hcase-jump i{
  color:var(--green);font-size:.95rem;line-height:1;
  transform:translateY(1px);
}
.hcase-jump b{
  font-family:var(--font-display);font-weight:600;
  font-size:1.02rem;letter-spacing:-.03em;color:var(--green);
  font-variant-numeric:tabular-nums;
}
.hcase-jump span{font-size:.79rem;line-height:1.35;color:var(--text-dim)}

/* ─────────────────────────────────────────────
   4. CHIUSURA — scala reale in una barra sola + rimando
   ───────────────────────────────────────────── */
.hcase-foot{
  margin-top:clamp(30px,4vw,52px);
  display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,.85fr);
  gap:clamp(20px,3vw,44px);align-items:center;
}

.hcase-ratio{
  padding:clamp(18px,2.2vw,26px) clamp(18px,2.4vw,28px);
  border:1px solid var(--line);border-radius:var(--r,16px);
  background:var(--bg-2);
  box-shadow:0 1px 2px rgba(12,12,16,.04),0 22px 46px -34px rgba(12,12,16,.28);
}
.hr-top{
  display:flex;align-items:baseline;justify-content:space-between;gap:14px;
  margin-bottom:14px;
}
.hr-lab{
  font-size:.76rem;font-weight:700;letter-spacing:.13em;
  text-transform:uppercase;color:var(--text-faint);
}
.hr-x{
  font-family:var(--font-display);font-weight:600;
  font-size:clamp(1.25rem,2.1vw,1.7rem);letter-spacing:-.04em;
  color:var(--green);font-variant-numeric:tabular-nums;white-space:nowrap;
}
.hr-track{
  position:relative;height:clamp(26px,2.8vw,34px);
  border-radius:6px;overflow:hidden;
  background:rgba(12,12,16,.07);
}
.hr-fill{
  position:absolute;inset:0;background:var(--green);
  transform-origin:left center;transform:scaleX(0);
  transition:transform 1.4s var(--ease);
}
.hcase-foot.in .hr-fill{transform:scaleX(1)}
/* La spesa: la scheggia chiara dentro l'incassato, stessa scala */
.hr-spend{
  position:absolute;left:0;top:0;bottom:0;width:6.3272%;
  background:#f7f7f4;
  border-right:1px solid rgba(12,12,16,.34);
  opacity:0;transition:opacity .5s var(--ease) 1.15s;
}
.hcase-foot.in .hr-spend{opacity:1}
.hr-legend{
  display:flex;align-items:baseline;justify-content:space-between;gap:14px;
  margin-top:10px;font-size:.79rem;line-height:1.4;color:var(--text-faint);
}
.hr-legend b{
  font-weight:600;color:var(--text);font-variant-numeric:tabular-nums;
}
.hr-legend .is-green b{color:var(--green)}

.hcase-cta{display:flex;flex-direction:column;align-items:flex-start;gap:12px}
.hcase-cta .btn{min-height:48px}
.hcase-cta p{
  margin:0;font-size:.85rem;line-height:1.5;color:var(--text-faint);
  text-wrap:pretty;
}

/* ─────────────────────────────────────────────
   5. ADATTAMENTI
   ───────────────────────────────────────────── */

/* Sotto 1180px la colonna dei numeri si stringe: via i sottotitoli lunghi */
@media(max-width:1179px){
  .hcase-body{gap:clamp(16px,2.6vw,32px)}
  .hcase-scene{--box:clamp(220px,25vw,300px)}
  .hs-s{display:none}
}

/* Sotto 980px: una colonna sola. Il 3D si semplifica — piu' piatto,
   piu' piccolo, senza spessore dei piani — e passa sopra ai numeri. */
@media(max-width:979px){
  .hcase-body{grid-template-columns:1fr;gap:clamp(18px,3vw,30px)}
  .hcase-scene{
    --box:clamp(230px,42vw,320px);
    --rx:58deg;
    height:calc(var(--box) * 1.05);
    max-width:var(--box);
  }
  .hcase-world{transform:rotateX(var(--rx)) scale(.94)}
  .hcase-axis{transform:translate(-50%,-50%) rotateX(calc(var(--rx) * -1));height:calc(var(--box) * .7)}
  .hcase-plate::before{transform:translateZ(-8px)}
  .hs-s{display:block}
  .hcase-foot{grid-template-columns:1fr;gap:22px}
  .hcase-cta{align-items:stretch}
  .hcase-cta .btn{justify-content:center;width:100%}
}

/* Sotto 640px: colonna stretta, il volume resta ma minimo */
@media(max-width:639px){
  .hcase.section-pad{padding:clamp(52px,11vw,72px) 0}
  .hcase-scene{--box:clamp(196px,62vw,270px);height:calc(var(--box) * .98)}
  .hcase-plate::before{display:none}
  .hcase-plate{box-shadow:0 0 0 1px rgba(10,111,69, calc(.28 * var(--on)))}
  .hcase-axis{height:calc(var(--box) * .58)}
  .hcase-steps{padding-left:22px}
  .hcase-jump{width:auto}
  .hr-top{flex-direction:column;align-items:flex-start;gap:5px}
  .hr-legend{flex-direction:column;gap:4px}
}

/* Niente hover: il volume resta fermo */
@media(hover:none){
  .hcase-world{transition:none}
}

/* Risparmio movimento: la scena e' gia' accesa e ferma */
@media(prefers-reduced-motion:reduce){
  .hcase{--lit:5}
  .hcase-world,.hcase-plate,.hcase-plate::after,
  .hcase-step,.hcase-jump,.hcase-step::before{transition:none}
  .hr-fill{transform:scaleX(1);transition:none}
  .hr-spend{opacity:1;transition:none}
}