/* Progetto 3: Esperimento 1, task force offline.
   Tutte le animazioni partono quando il blocco entra in vista (classe .in). */

.esp { display: grid; gap: 18px; }
.esp .eyebrow { font-size: 12px; text-transform: uppercase; letter-spacing: .12em; font-weight: 800; color: var(--ink-mute); }
.esp h3 { margin: 4px 0 6px; font-size: 20px; font-weight: 800; letter-spacing: -.015em; }
.esp .lead-p { margin: 0; color: var(--ink-soft); max-width: 62ch; }
.esp-reveal { opacity: 0; transform: translateY(14px); transition: opacity .6s ease, transform .6s ease; }
.esp-reveal.in { opacity: 1; transform: none; }

/* richiamo in barra laterale su Progetti ed Esperimenti: riflesso che scorre,
   pallino che pulsa e icona che si muove, finche' la sezione non e' stata aperta */
.nav-item.spot { position: relative; overflow: hidden; isolation: isolate; }
.nav-item.spot:not(.active):not(.seen) { color: var(--ink); font-weight: 700; box-shadow: inset 0 0 0 1.5px var(--lime); animation: spotGlow 2.8s ease-in-out infinite; }
.nav-item.spot:not(.active):not(.seen)::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(100deg, transparent 20%, rgba(223,235,87,.75) 50%, transparent 80%); transform: translateX(-120%); animation: spotSweep 2.8s ease-in-out infinite; }
.nav-item.spot:not(.active):not(.seen)::after { content: ""; margin-left: auto; width: 9px; height: 9px; border-radius: 50%; background: var(--ink); box-shadow: 0 0 0 0 rgba(17,21,10,.5); animation: spotDot 1.4s ease-out infinite; }
.nav-item.spot:not(.active):not(.seen) svg.i { animation: spotNudge 2.8s ease-in-out infinite; }
.nav-item.spot[data-go="esperimenti"], .nav-item.spot[data-go="esperimenti"]::before, .nav-item.spot[data-go="esperimenti"] svg.i { animation-delay: 1.4s; }
@keyframes spotSweep { 0%, 35% { transform: translateX(-120%); } 75%, 100% { transform: translateX(120%); } }
@keyframes spotGlow { 0%, 100% { background: transparent; } 50% { background: var(--lime-soft); } }
@keyframes spotDot { 0% { box-shadow: 0 0 0 0 rgba(17,21,10,.45); } 100% { box-shadow: 0 0 0 9px rgba(17,21,10,0); } }
@keyframes spotNudge { 0%, 60%, 100% { transform: none; } 68% { transform: rotate(-14deg) scale(1.15); } 76% { transform: rotate(10deg) scale(1.15); } 84% { transform: none; } }

/* hero */
.esp-hero { background: var(--ink); color: #fff; border-radius: 18px; padding: 28px; position: relative; overflow: hidden; }
.esp-hero::after { content: ""; position: absolute; right: -80px; top: -80px; width: 260px; height: 260px; border-radius: 50%; background: radial-gradient(circle, rgba(223,235,87,.35), rgba(223,235,87,0) 70%); animation: espGlow 6s ease-in-out infinite; }
.esp-hero .eyebrow { color: var(--lime); }
.esp-hero h2 { margin: 6px 0 8px; font-size: 30px; line-height: 1.15; font-weight: 800; letter-spacing: -.025em; max-width: 26ch; }
.esp-hero h2 em { font-style: normal; color: var(--lime); }
.esp-hero p { margin: 0; color: #c9ccc2; max-width: 60ch; }
.esp-hero p b { color: #fff; }
.esp-kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 22px; position: relative; z-index: 1; }
.esp-kpi { background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12); border-radius: 14px; padding: 14px 16px; }
.esp-kpi .v { font-size: 30px; font-weight: 800; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.esp-kpi .l { font-size: 13px; color: #c9ccc2; }
.esp-kpi.hot { background: var(--lime); color: var(--ink); border-color: var(--lime); }
.esp-kpi.hot .l { color: var(--ink-soft); }
@keyframes espGlow { 0%, 100% { transform: scale(1); opacity: .8; } 50% { transform: scale(1.25); opacity: 1; } }

/* barra LTV: 5 anni di margine */
.ltv-bar { display: grid; grid-template-columns: repeat(5, 1fr); gap: 4px; margin: 26px 0 8px; position: relative; }
.ltv-seg { height: 54px; border-radius: 8px; background: var(--lime-soft); display: flex; flex-direction: column; justify-content: center; padding: 0 12px; transform-origin: left; transform: scaleX(0); transition: transform .5s cubic-bezier(.2,.8,.2,1); overflow: hidden; position: relative; }
.ltv-seg b { font-size: 15px; } .ltv-seg span { font-size: 12px; color: var(--ink-soft); }
.ltv-seg.y1 { padding: 0; flex-direction: row; background: var(--lime); }
.ltv-seg.y1 .h { flex: 1; display: flex; flex-direction: column; justify-content: center; padding: 0 10px; min-width: 0; }
.ltv-seg.y1 .h.cac { background: var(--ink); color: var(--lime); }
.ltv-seg.y1 .h.cac span { color: #c9ccc2; }
.in .ltv-seg { transform: scaleX(1); }
.in .ltv-seg:nth-child(2) { transition-delay: .25s; } .in .ltv-seg:nth-child(3) { transition-delay: .5s; }
.in .ltv-seg:nth-child(4) { transition-delay: .75s; } .in .ltv-seg:nth-child(5) { transition-delay: 1s; }
.ltv-brace { position: absolute; left: 0; width: 10%; top: -20px; font-size: 12px; font-weight: 800; white-space: nowrap; border-top: 2px solid var(--ink); padding-top: 2px; opacity: 0; transition: opacity .4s ease 1.4s; }
.in .ltv-brace { opacity: 1; }
.ltv-legend { display: flex; gap: 18px; flex-wrap: wrap; font-size: 13.5px; color: var(--ink-soft); margin-top: 10px; }
.ltv-legend i { display: inline-block; width: 12px; height: 12px; border-radius: 3px; margin-right: 6px; vertical-align: -1px; }

/* 20 titolari, uno diventa cliente */
.esp-split { display: grid; grid-template-columns: 1.1fr 1fr; gap: 24px; align-items: center; }
.people-grid { display: grid; grid-template-columns: repeat(10, 1fr); gap: 8px; max-width: 420px; }
.person { width: 100%; aspect-ratio: 1; color: #c4c8bc; opacity: 0; transform: scale(.5); transition: opacity .3s ease, transform .3s ease, color .4s ease; }
.person svg { width: 100%; height: 100%; fill: currentColor; }
.in .person { opacity: 1; transform: none; }
.in .person.win { color: var(--ink); animation: espWin 1.6s ease 1.6s both; }
@keyframes espWin { 0% { transform: scale(1); } 30% { transform: scale(1.5); color: var(--ok); } 100% { transform: scale(1.15); color: var(--ok); } }
.calc { display: grid; gap: 10px; }
.calc .row { display: flex; align-items: baseline; gap: 10px; font-size: 15px; }
.calc .row b { white-space: nowrap; font-size: 24px; font-weight: 800; letter-spacing: -.02em; font-variant-numeric: tabular-nums; min-width: 4ch; }
.calc .row.total { background: var(--lime); border-radius: 12px; padding: 10px 14px; }
.calc .row.total b { font-size: 30px; }

/* tre bracci del test */
.arms { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 18px; }
.arm { border: 1px solid var(--line); border-radius: 14px; padding: 18px; background: #fff; position: relative; transition: border-color .2s ease, transform .2s ease; }
.arm:hover { border-color: var(--ink); transform: translateY(-2px); }
.arm .tag { position: absolute; top: 14px; right: 14px; width: 26px; height: 26px; border-radius: 50%; background: var(--ink); color: var(--lime); display: grid; place-items: center; font-weight: 800; font-size: 13px; }
.arm .pic { height: 92px; display: flex; align-items: center; justify-content: flex-start; }
.arm .pic svg { height: 84px; width: auto; }
.arm .big { font-size: 36px; font-weight: 800; letter-spacing: -.03em; font-variant-numeric: tabular-nums; line-height: 1; margin-top: 8px; }
.arm .what { font-weight: 700; margin-top: 4px; }
.arm .d { color: var(--ink-soft); font-size: 14px; margin-top: 4px; }
.arm .meas { margin-top: 12px; padding-top: 10px; border-top: 1px dashed var(--line); font-size: 13px; color: var(--ink-soft); }
/* orologio */
.clock-hand { transform-origin: 40px 40px; }
.in .clock-hand { animation: espSpin 2.2s cubic-bezier(.3,.6,.3,1) both; }
@keyframes espSpin { from { transform: rotate(0); } to { transform: rotate(1800deg); } }
/* stelle */
.star { opacity: 0; transform-origin: center; transform-box: fill-box; }
.in .star { animation: espPop .5s ease both; }
@keyframes espPop { from { opacity: 0; transform: scale(0) rotate(-90deg); } to { opacity: 1; transform: none; } }
/* spritz */
.spritz-fill { transform: translateY(46px); transition: transform 2s cubic-bezier(.2,.8,.2,1) .3s; }
.in .spritz-fill { transform: translateY(0); }
.bubble { opacity: 0; }
.in .bubble { animation: espBubble 2.4s ease-in 2s infinite; }
.in .bubble.b2 { animation-delay: 2.7s; } .in .bubble.b3 { animation-delay: 3.3s; }
@keyframes espBubble { 0% { opacity: 0; transform: translateY(0); } 20% { opacity: .9; } 100% { opacity: 0; transform: translateY(-26px); } }

/* simulatore */
.sim { display: grid; grid-template-columns: 1fr 1.1fr; gap: 26px; }
.sliders { display: grid; gap: 16px; }
.sl label { display: flex; justify-content: space-between; font-weight: 700; font-size: 14px; }
.sl label output { font-variant-numeric: tabular-nums; background: var(--bg); border-radius: 6px; padding: 0 8px; }
.sl input { width: 100%; accent-color: var(--ink); margin-top: 6px; }
.sl .hint { font-size: 12.5px; color: var(--ink-mute); }
.sim-out { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; align-content: start; }
.so { background: var(--bg); border-radius: 12px; padding: 12px 14px; }
.so .v { font-size: 24px; font-weight: 800; letter-spacing: -.02em; font-variant-numeric: tabular-nums; transition: color .2s ease; }
.so .l { font-size: 13px; color: var(--ink-soft); }
.so.hot { background: var(--ink); color: #fff; }
.so.hot .l { color: #c9ccc2; }
.so.hot .v { color: var(--lime); }
.so.hot.bad .v { color: #ff8a7a; }
.so.wide { grid-column: 1 / -1; }
.buys { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 6px; }
.buys .pill { background: #fff; border: 1px solid var(--line); }
.sim-note { grid-column: 1 / -1; font-size: 13.5px; color: var(--ink-soft); border-top: 1px dashed var(--line); padding-top: 10px; margin: 0; }

/* piano 90 giorni */
.road { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-top: 22px; padding-top: 26px; }
.road::before { content: ""; position: absolute; top: 8px; left: 0; right: 0; height: 4px; border-radius: 4px; background: var(--line); }
.road::after { content: ""; position: absolute; top: 8px; left: 0; height: 4px; border-radius: 4px; background: var(--ink); width: 0; transition: width 2.4s ease .2s; }
.in .road::after { width: 100%; }
.stop { position: relative; background: var(--bg); border-radius: 12px; padding: 14px; }
.stop::before { content: ""; position: absolute; top: -24px; left: 14px; width: 14px; height: 14px; border-radius: 50%; background: #fff; border: 3px solid var(--line); transition: background .3s ease, border-color .3s ease; }
.in .stop::before { background: var(--lime); border-color: var(--ink); }
.in .stop:nth-child(2)::before { transition-delay: .8s; } .in .stop:nth-child(3)::before { transition-delay: 1.5s; } .in .stop:nth-child(4)::before { transition-delay: 2.2s; }
.stop .when { font-weight: 800; font-size: 13px; color: var(--ink-mute); text-transform: uppercase; letter-spacing: .06em; }
.stop .t { font-weight: 800; margin: 2px 0 4px; }
.stop p { margin: 0; font-size: 14px; color: var(--ink-soft); }
.stop .kill { display: block; margin-top: 8px; font-size: 12.5px; font-weight: 700; color: #b2412f; }

/* ICP e ipotesi */
.icp { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.icp .pill { font-size: 13.5px; padding: 6px 12px; }
.hyp { list-style: none; margin: 0; padding: 0; }
.hyp li { display: flex; gap: 12px; align-items: flex-start; padding: 12px 0; border-top: 1px solid var(--line); }
.hyp li:first-child { border-top: 0; }
.hyp .q { width: 28px; height: 28px; border-radius: 8px; background: var(--lime-soft); color: var(--ink); display: grid; place-items: center; font-weight: 800; flex: 0 0 auto; }
.hyp .t { font-weight: 700; }
.hyp .d { font-size: 14px; color: var(--ink-soft); }

@media (max-width: 1000px) {
  .esp-split, .sim { grid-template-columns: 1fr; }
  .arms { grid-template-columns: 1fr; }
  .road { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
  .esp-hero { padding: 22px 18px; }
  .esp-hero h2 { font-size: 24px; }
  .esp-kpis { grid-template-columns: 1fr; }
  .ltv-seg { padding: 0 6px; } .ltv-seg span { display: none; } .ltv-seg b { font-size: 12px; }
  .road { grid-template-columns: 1fr; }
  .sim-out { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .esp-reveal, .person, .ltv-seg { opacity: 1; transform: none; }
}