/* Landing nuova · ingresso animato: tre pacchi (scarpe, vestiti, carte) -> ripiani con cartellino -> vendita e profitto -> "Vendi. Registra. Guadagni." -> serranda sulla hero.
   Attivo SOLO con html.intro-on (landing-nuova-boot.js). Nei keyframes si animano solo transform e opacity. Palette = quella della landing (verde scuro, crema, verde acceso, un solo oro).
   Tempi (s): 0.05 magazzino · 0.25-1.35 pacco 1 (scarpe) · 1.5-2.45 pacco 2 (vestiti) · 2.35-3.2 pacco 3 (carte) · cartellini accesi 1.35 / 2.43 / 3.2
   · 3.3 riquadro Profitto · 3.5/3.95/4.4 "Venduto" + pezzo che esce · salti del profitto 4.0 / 4.45 / 4.9 (il numero conta in JS)
   · parole: Vendi 3.45, Registra 4.1, Guadagni 4.95 · 6.3-7.1 l'intera scena sale come una serranda e scopre la hero. */
.intro { display: none; }
.intro-on .intro { display: block; position: fixed; inset: 0; z-index: 400; color: var(--on-dark); will-change: transform; }
html.intro-lock { overflow: hidden; }

.i-panel { position: absolute; inset: 0; overflow: hidden; background: radial-gradient(ellipse 80% 60% at 50% 66%, var(--forest-l) 0, var(--forest) 58%, var(--forest-d) 100%); }
.i-bar { position: absolute; left: 0; right: 0; top: 100%; height: 34px; background: repeating-linear-gradient(180deg, var(--forest-l) 0 8px, var(--forest-d) 8px 11px); border-bottom: 4px solid var(--gold); }

.i-svg { max-width: none; position: absolute; left: 50%; top: 46%; width: min(100vw, 84vh, 980px); aspect-ratio: 1; margin: calc(min(100vw, 84vh, 980px) / -2) 0 0 calc(min(100vw, 84vh, 980px) / -2); overflow: visible; transform-origin: 58% 62%; }
@media (orientation: portrait) { .i-svg { top: 51%; width: min(128vw, 78vh); margin: calc(min(128vw, 78vh) / -2) 0 0 calc(min(128vw, 78vh) / -2); } }

.c-wall { fill: var(--cream); } .c-roof { fill: var(--forest-l); }
.i-far { fill: var(--forest-l); opacity: .45; }
.i-sign { font-family: var(--display); font-weight: 600; font-size: 27px; letter-spacing: .06em; fill: var(--on-dark); }
.i-lbl { font-family: var(--display); font-weight: 700; font-size: 12.5px; fill: #033a2d; }
.i-st { font-family: var(--sans); font-weight: 800; font-size: 13px; fill: #03261d; }
.i-ct { font-family: var(--display); font-weight: 700; font-size: 14px; fill: #2a1c00; }
.i-sh { fill: #0b5543; stroke: rgba(244, 239, 227, .14); stroke-width: 1; }
.i-plk { opacity: 0; }
.i-pillg { opacity: .45; }
.i-tick, .i-sold, .i-chip, .i-glow { opacity: 0; }

/* ----- animazioni (partono con .go) ----- */
.intro.go .i-bld { animation: i-rise .8s cubic-bezier(.2, .7, .2, 1) .05s both; }
.intro.go .i-far { animation: i-fade-in .9s ease .05s both; }
.intro.go .i-shutter { animation: i-shutter .6s cubic-bezier(.6, 0, .25, 1) .2s both; }
.intro.go .i-lamp, .intro.go .i-cone { animation: i-fade-in .5s ease .6s both; }
.intro.go .p1 .i-roll { animation: i-arrive 0.65s cubic-bezier(.12, .75, .25, 1) 0.25s both; }
.intro.go .p1 .i-lean { animation: i-lean 0.65s ease-in-out 0.25s both; }
.intro.go .p1 .i-wheel-in { animation: i-spin-in 0.65s cubic-bezier(.12, .75, .25, 1) 0.25s both; }
.intro.go .p1 .i-hop { animation: i-hop1 0.45s linear 0.9s both; }
.intro.go .p1 .i-squash { animation: i-squash .3s ease-out 1.35s both; }
.intro.go .p1 .i-leave { animation: i-leave 0.45s cubic-bezier(.55, 0, .85, .6) 1.15s both; }
.intro.go .p1 .i-wheel-out { animation: i-spin-out 0.45s cubic-bezier(.55, 0, .85, .6) 1.15s both; }
.intro.go .p1 .i-sold { animation: i-pop .3s cubic-bezier(.2, 1.6, .4, 1) 3.5s both; }
.intro.go .p1 .i-exit { animation: i-exit .42s cubic-bezier(.5, 0, .9, .5) 3.8s both; }
.intro.go .pl1 { animation: i-fade-in .4s ease 1.35s both; }
.intro.go .pg1 .i-pillg { animation: i-lit .35s ease 1.35s both; }
.intro.go .pg1 .i-tick { animation: i-pop .4s cubic-bezier(.2, 1.6, .4, 1) 1.45s both; }
.intro.go .pg1 .i-glow { animation: i-glow .9s ease 1.35s both; }
.intro.go .ch1 { animation: i-chip .85s ease-out 3.85s both; }
.intro.go .p2 .i-roll { animation: i-arrive 0.55s cubic-bezier(.12, .75, .25, 1) 1.5s both; }
.intro.go .p2 .i-lean { animation: i-lean 0.55s ease-in-out 1.5s both; }
.intro.go .p2 .i-wheel-in { animation: i-spin-in 0.55s cubic-bezier(.12, .75, .25, 1) 1.5s both; }
.intro.go .p2 .i-hop { animation: i-hop2 0.38s linear 2.05s both; }
.intro.go .p2 .i-squash { animation: i-squash .3s ease-out 2.43s both; }
.intro.go .p2 .i-leave { animation: i-leave 0.4s cubic-bezier(.55, 0, .85, .6) 2.25s both; }
.intro.go .p2 .i-wheel-out { animation: i-spin-out 0.4s cubic-bezier(.55, 0, .85, .6) 2.25s both; }
.intro.go .p2 .i-sold { animation: i-pop .3s cubic-bezier(.2, 1.6, .4, 1) 3.95s both; }
.intro.go .p2 .i-exit { animation: i-exit .42s cubic-bezier(.5, 0, .9, .5) 4.25s both; }
.intro.go .pl2 { animation: i-fade-in .4s ease 2.43s both; }
.intro.go .pg2 .i-pillg { animation: i-lit .35s ease 2.43s both; }
.intro.go .pg2 .i-tick { animation: i-pop .4s cubic-bezier(.2, 1.6, .4, 1) 2.53s both; }
.intro.go .pg2 .i-glow { animation: i-glow .9s ease 2.43s both; }
.intro.go .ch2 { animation: i-chip .85s ease-out 4.3s both; }
.intro.go .p3 .i-roll { animation: i-arrive 0.5s cubic-bezier(.12, .75, .25, 1) 2.35s both; }
.intro.go .p3 .i-lean { animation: i-lean 0.5s ease-in-out 2.35s both; }
.intro.go .p3 .i-wheel-in { animation: i-spin-in 0.5s cubic-bezier(.12, .75, .25, 1) 2.35s both; }
.intro.go .p3 .i-hop { animation: i-hop3 0.35s linear 2.85s both; }
.intro.go .p3 .i-squash { animation: i-squash .3s ease-out 3.2s both; }
.intro.go .p3 .i-leave { animation: i-leave 0.4s cubic-bezier(.55, 0, .85, .6) 3s both; }
.intro.go .p3 .i-wheel-out { animation: i-spin-out 0.4s cubic-bezier(.55, 0, .85, .6) 3s both; }
.intro.go .p3 .i-sold { animation: i-pop .3s cubic-bezier(.2, 1.6, .4, 1) 4.4s both; }
.intro.go .p3 .i-exit { animation: i-exit .42s cubic-bezier(.5, 0, .9, .5) 4.7s both; }
.intro.go .pl3 { animation: i-fade-in .4s ease 3.2s both; }
.intro.go .pg3 .i-pillg { animation: i-lit .35s ease 3.2s both; }
.intro.go .pg3 .i-tick { animation: i-pop .4s cubic-bezier(.2, 1.6, .4, 1) 3.3s both; }
.intro.go .pg3 .i-glow { animation: i-glow .9s ease 3.2s both; }
.intro.go .ch3 { animation: i-chip .85s ease-out 4.75s both; }
.intro.go .i-skip { animation: i-fade-in .5s ease .2s both; }
.intro.go .i-profit { animation: i-card .45s cubic-bezier(.2, .7, .2, 1) 3.3s both; }
.intro.go .i-pv { animation: i-bump 1.5s ease 3.95s both; }
.intro.go .i-bars i { animation: i-bar .45s cubic-bezier(.2, 1.4, .4, 1) 4s both; }
.intro.go .i-bars i:nth-child(2) { animation-delay: 4.45s; }
.intro.go .i-bars i:nth-child(3) { animation-delay: 4.9s; }
.intro.go .i-w1 { animation: i-word .42s cubic-bezier(.2, 1.2, .3, 1) 3.45s both; }
.intro.go .i-w2 { animation: i-word .42s cubic-bezier(.2, 1.2, .3, 1) 4.1s both; }
.intro.go .i-w3 { animation: i-word .45s cubic-bezier(.2, 1.2, .3, 1) 4.95s both; }
.intro.go { animation: i-lift .8s cubic-bezier(.7, 0, .2, 1) 6.3s both; }
@media (orientation: portrait) { .intro.go .i-svg { animation: i-cam 1s cubic-bezier(.55, 0, .25, 1) .1s both; } }
/* salto: dissolvenza rapida, e subito niente che intercetti i tocchi */
.intro.skipped { animation: i-out .28s ease forwards !important; pointer-events: none; }
.intro.out { pointer-events: none; }

@keyframes i-rise { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: none; } }
@keyframes i-fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes i-lit { from { opacity: .45; } to { opacity: 1; } }
@keyframes i-glow { 0% { opacity: 0; } 25% { opacity: 1; } 100% { opacity: .35; } }
@keyframes i-arrive { from { transform: translateX(-640px); } to { transform: none; } }
@keyframes i-lean { 0% { transform: rotate(-9deg); } 55% { transform: rotate(-9deg); } 100% { transform: none; } }
@keyframes i-spin-in { from { transform: rotate(0); } to { transform: rotate(2820deg); } }
@keyframes i-spin-out { from { transform: rotate(0); } to { transform: rotate(2820deg); } }
@keyframes i-shutter { from { transform: none; } to { transform: translateY(-224px); } }
@keyframes i-hop1 {
  0% { transform: translate(0, 0) scale(1) rotate(0); animation-timing-function: cubic-bezier(.2, .7, .4, 1); }
  50% { transform: translate(-40.35px, -34px) scale(.78) rotate(-6deg); animation-timing-function: cubic-bezier(.5, 0, .8, .4); }
  100% { transform: translate(-80.71px, 1.5px) scale(0.56) rotate(0); }
}
@keyframes i-hop2 {
  0% { transform: translate(0, 0) scale(1) rotate(0); animation-timing-function: cubic-bezier(.2, .7, .4, 1); }
  50% { transform: translate(-40.35px, -81.1px) scale(.78) rotate(-6deg); animation-timing-function: cubic-bezier(.5, 0, .8, .4); }
  100% { transform: translate(-80.71px, -47.1px) scale(0.56) rotate(0); }
}
@keyframes i-hop3 {
  0% { transform: translate(0, 0) scale(1) rotate(0); animation-timing-function: cubic-bezier(.2, .7, .4, 1); }
  50% { transform: translate(-40.35px, -129.7px) scale(.78) rotate(-6deg); animation-timing-function: cubic-bezier(.5, 0, .8, .4); }
  100% { transform: translate(-80.71px, -95.7px) scale(0.56) rotate(0); }
}
@keyframes i-squash { 0% { transform: scale(1.07, .88); } 55% { transform: scale(.98, 1.04); } 100% { transform: none; } }
@keyframes i-leave { from { transform: none; } to { transform: translateX(640px); } }
@keyframes i-pop { from { opacity: 0; transform: scale(0); } to { opacity: 1; transform: scale(1); } }
@keyframes i-exit { from { opacity: 1; transform: none; } to { opacity: 0; transform: translate(26px, 30px) scale(1.7); } }
@keyframes i-chip { 0% { opacity: 0; transform: translateY(0) scale(.7); } 18% { opacity: 1; transform: translateY(-14px) scale(1); } 75% { opacity: 1; } 100% { opacity: 0; transform: translateY(-100px) scale(1); } }
@keyframes i-card { from { opacity: 0; transform: translateY(-18px) scale(.96); } to { opacity: 1; transform: none; } }
@keyframes i-bar { from { transform: scaleY(0); } to { transform: scaleY(1); } }
@keyframes i-bump { 0%, 6.7% { transform: none; } 16% { transform: scale(1.1); } 26.7%, 36.7% { transform: none; } 46% { transform: scale(1.1); } 56.7%, 66.7% { transform: none; } 76% { transform: scale(1.14); } 86.7%, 100% { transform: none; } }
@keyframes i-word { from { opacity: 0; transform: translateY(.45em) scale(.9); } to { opacity: 1; transform: none; } }
@keyframes i-cam { from { transform: none; } to { transform: translateX(-6%) scale(1.3); } }
@keyframes i-lift { from { transform: none; } to { transform: translateY(calc(-100% - 40px)); } }
@keyframes i-out { to { opacity: 0; } }

/* trasformazioni degli elementi SVG: origine locale (0 0) = punto di appoggio */
.i-roll, .i-lean, .i-wheel-in, .i-wheel-out, .i-hop, .i-squash, .i-exit, .i-sold, .i-tick, .i-chip, .i-leave { transform-box: view-box; transform-origin: 0 0; }
.i-bld, .i-shutter { transform-box: view-box; }

/* riquadro Profitto: stile della Dashboard (crema, bordo, numero grande verde scuro) */
.i-profit { position: absolute; z-index: 2; left: 50%; top: calc(env(safe-area-inset-top, 0px) + 14px); width: min(86vw, 330px); margin-left: calc(min(86vw, 330px) / -2); box-sizing: border-box; display: flex; align-items: flex-end; justify-content: space-between; gap: 14px; padding: 12px 16px; border-radius: 16px; background: var(--cream); color: var(--forest-d); border: 1px solid rgba(3, 58, 45, .18); box-shadow: 0 14px 34px rgba(1, 26, 20, .45); opacity: 0; }
.i-pl { display: flex; flex-direction: column; min-width: 0; }
.i-pk { font: 800 11.5px/1.2 var(--sans); letter-spacing: .12em; text-transform: uppercase; color: #5b6b63; }
.i-pv { display: inline-block; transform-origin: 0 60%; font-family: var(--display); font-weight: 700; font-size: clamp(34px, 5vw, 46px); line-height: 1.05; color: var(--forest); font-variant-numeric: tabular-nums; }
.i-bars { display: flex; align-items: flex-end; gap: 6px; height: 30px; padding-bottom: 2px; margin-top: 14px; } /* margine in alto: la barra più alta non deve toccare la scritta "esempio" */
.i-bars i { display: block; width: 12px; border-radius: 3px 3px 0 0; background: #10b981; transform: scaleY(0); transform-origin: 50% 100%; }
.i-bars i:nth-child(1) { height: 27%; } .i-bars i:nth-child(2) { height: 51%; } .i-bars i:nth-child(3) { height: 100%; background: var(--forest); }
.i-ex { position: absolute; right: 12px; top: 6px; font: 600 10px/1 var(--sans); letter-spacing: .06em; text-transform: uppercase; color: #6b7a72; }

/* "Vendi. Registra. Guadagni." */
.i-words { position: absolute; z-index: 2; left: 0; right: 0; bottom: max(4vh, 18px); margin: 0; padding: 0 16px; display: flex; justify-content: center; align-items: baseline; gap: .12em .5em; font-family: var(--display); font-weight: 700; font-size: clamp(30px, 5.4vw, 84px); line-height: 1; letter-spacing: -.02em; color: var(--on-dark); text-shadow: 0 2px 16px rgba(1, 26, 20, .7); }
.i-w { display: inline-block; opacity: 0; }
.i-w::after { content: '.'; color: var(--gold); }
.i-w3 { color: var(--gold); }
@media (orientation: portrait) { .i-profit { top: calc(env(safe-area-inset-top, 0px) + 68px); } .i-words { flex-direction: column; align-items: center; gap: 0; font-size: min(14.5vw, 7.6vh); bottom: max(3.5vh, 16px); } }

.i-skip { position: absolute; z-index: 5; top: calc(env(safe-area-inset-top, 0px) + 16px); right: 16px; min-height: 44px; min-width: 44px; padding: 0 20px; border-radius: 999px; border: 1.5px solid rgba(244, 239, 227, .55); background: rgba(3, 58, 45, .88); color: var(--on-dark); font: 700 15px/1 var(--sans); letter-spacing: .02em; cursor: pointer; transition: background .15s, border-color .15s; opacity: 0; }
.i-skip:hover { background: var(--forest-l); border-color: rgba(244, 239, 227, .85); }
.i-skip:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; }

/* barra in alto: scende alla fine */
.intro-reveal .site-head { animation: i-head .7s cubic-bezier(.2, .7, .2, 1) .4s backwards; }
@keyframes i-head { from { transform: translateY(-100%); opacity: 0; } to { transform: none; opacity: 1; } }

@media (prefers-reduced-motion: reduce) { .intro { display: none !important; } html.intro-lock { overflow: auto; } }