/* ===================================================================
   AperUp · livello animazioni (si aggiunge allo stile esistente)
   =================================================================== */
:root{--head:82px}
@media(max-width:640px){:root{--head:72px}}
body{overflow-x:hidden}
main{overflow-x:clip}
.w{display:inline-block}

/* barra di avanzamento sotto l'intestazione */
.site-header .progress{position:absolute;left:0;right:0;bottom:-3px;height:3px;background:linear-gradient(90deg,var(--orange),#ffb057);transform-origin:left center;transform:scaleX(var(--p,0));pointer-events:none}

/* avviso «Riduci movimento» (solo anteprima) */
.motion-note{background:var(--brown);color:#fff;font-size:15px;line-height:1.4}
.motion-note .container{display:flex;flex-wrap:wrap;align-items:center;gap:10px 18px;padding:12px 0}
.motion-note p{flex:1 1 240px;margin:0}
.motion-note button{min-height:44px;padding:0 18px;border-radius:999px;border:0;background:var(--orange);color:#fff;font-weight:800;font-size:15px;font-family:inherit;cursor:pointer}

/* ---------- comparsa degli elementi ---------- */
.js .rv{opacity:0;translate:0 28px;transition:opacity .7s ease,translate .9s cubic-bezier(.2,.7,.2,1),scale .8s cubic-bezier(.3,1.35,.5,1);transition-delay:var(--d,0s)}
.js .rv.rv-r{translate:46px 0}
.js .rv.rv-l{translate:-46px 0}
.js .rv.rv-pop{translate:none;scale:.8}
.js .rv.in{opacity:1;translate:none;scale:1}

.js h2 .w{opacity:0;translate:0 .45em;filter:blur(6px);transition:opacity .7s ease,translate .8s cubic-bezier(.2,.7,.2,1),filter .7s ease;transition-delay:calc(var(--i) * 60ms)}
.js h2.in .w{opacity:1;translate:none;filter:none}

@keyframes rise{from{opacity:0;translate:0 26px}}
@keyframes popIn{from{opacity:0;scale:.35}}
@keyframes word{from{opacity:0;translate:0 .5em;rotate:3deg;filter:blur(8px)}}

/* ---------- luci di festa ---------- */
.fx{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.fx .blob{position:absolute;border-radius:50%;filter:blur(60px);opacity:.6}
.fx .b1{width:520px;height:520px;right:-120px;top:-150px;background:radial-gradient(circle,#ffb057,rgba(253,123,19,0) 70%);animation:blobA 13s ease-in-out infinite alternate}
.fx .b2{width:440px;height:440px;left:-170px;bottom:-140px;background:radial-gradient(circle,#ffd3a0,rgba(255,211,160,0) 70%);animation:blobB 17s ease-in-out infinite alternate}
@keyframes blobA{to{transform:translate(-110px,80px) scale(1.25)}}
@keyframes blobB{to{transform:translate(120px,-70px) scale(1.18)}}
.bokeh i{position:absolute;bottom:-30px;left:var(--x);width:var(--s);height:var(--s);border-radius:50%;background:radial-gradient(circle at 35% 35%,rgba(255,221,160,.95),rgba(253,150,50,.6) 58%,rgba(253,123,19,0) 72%);opacity:0;animation:bokeh var(--t) linear var(--dl) infinite}
@keyframes bokeh{0%{transform:translate3d(0,0,0) scale(.6);opacity:0}14%{opacity:var(--o)}78%{opacity:var(--o)}100%{transform:translate3d(var(--dx),var(--dy),0) scale(1.2);opacity:0}}
.hero .container,.voice .container,.cta .container{position:relative;z-index:1}

/* ---------- apertura ---------- */
.js .hero .eyebrow{animation:rise .8s cubic-bezier(.2,.7,.2,1) backwards}
.js .hero h1 .w{animation:word .85s cubic-bezier(.2,.7,.2,1) backwards;animation-delay:calc(.12s + var(--i) * 75ms)}
.js .hero .lead{animation:rise .9s cubic-bezier(.2,.7,.2,1) .95s backwards}
.js .hero .hero-actions{animation:rise .9s cubic-bezier(.2,.7,.2,1) 1.15s backwards}
.js .hero .micro-row span{animation:rise .7s cubic-bezier(.2,.7,.2,1) backwards;animation-delay:calc(1.35s + var(--i,0) * .13s)}
.micro-row span:nth-child(2){--i:1}
.micro-row span:nth-child(3){--i:2}
.micro-row span:nth-child(4){--i:3}
.micro-dot{animation:dot 2s ease-in-out infinite}
@keyframes dot{50%{transform:scale(1.7);opacity:.5}}

h1 .orange{position:relative;display:inline-block}
@media(min-width:360px){html[lang="it"] h1 .orange{white-space:nowrap}}
.swash{position:absolute;left:-1%;bottom:-.12em;width:102%;height:.24em;overflow:visible;pointer-events:none}
.swash path{fill:none;stroke:var(--orange);stroke-width:5px;stroke-linecap:round;vector-effect:non-scaling-stroke;opacity:.6}
.js .swash{animation:draw 1s cubic-bezier(.6,0,.2,1) 1.4s backwards}
@keyframes draw{from{clip-path:inset(-12px 101% -12px -12px)}to{clip-path:inset(-12px -12px -12px -12px)}}

.store-button{position:relative;overflow:hidden}
.apple-mark svg{display:block;width:27px;height:27px;fill:currentColor}
.play-mark svg{display:block;width:27px;height:27px}
.store-row{display:flex;flex-wrap:wrap;gap:12px}
.is-android .store-button.apple,.is-ios .store-button.play{display:none}
.store-button::after{content:"";position:absolute;top:0;bottom:0;left:-60%;width:40%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.3),transparent);transform:skewX(-18deg);animation:shine 5.5s ease-in-out 2.4s infinite;pointer-events:none}
@keyframes shine{0%,70%{left:-60%}100%{left:135%}}

.js .hero-visual>*{opacity:0}
.js .hero-visual.go>*{opacity:1}
.js .hero-visual.go .phone.one{animation:phoneIn 1.1s cubic-bezier(.2,.8,.2,1) .1s backwards,floatA 6s ease-in-out 1.2s infinite alternate}
.js .hero-visual.go .phone.two{animation:phoneIn 1.1s cubic-bezier(.2,.8,.2,1) .3s backwards,floatB 7s ease-in-out 1.4s infinite alternate}
.js .hero-visual.go .icon-float{animation:popIn .7s cubic-bezier(.3,1.5,.5,1) .8s backwards,floatI 5s ease-in-out 1.5s infinite alternate}
.js .hero-visual.go .hero-note{animation:rise .8s cubic-bezier(.2,.7,.2,1) 1s backwards}
.js .hero-visual.go .chip{animation:popIn .7s cubic-bezier(.3,1.4,.5,1) var(--cd) backwards,bob 5s ease-in-out calc(var(--cd) + .7s) infinite alternate}
@keyframes phoneIn{from{opacity:0;translate:0 110px;scale:.88}}
@keyframes floatA{from{transform:rotate(-5deg)}to{transform:rotate(-6.4deg) translateY(-14px)}}
@keyframes floatB{from{transform:rotate(6deg)}to{transform:rotate(7.3deg) translateY(-18px)}}
@keyframes floatI{from{transform:rotate(7deg)}to{transform:rotate(-5deg) translateY(-12px)}}
@keyframes bob{from{transform:rotate(var(--r)) translateY(4px)}to{transform:rotate(var(--r)) translateY(-9px)}}

.phone .shot{position:absolute;inset:0;background-size:cover;background-position:top center;opacity:0;transition:opacity .9s ease}
.phone .shot.on{opacity:1}

/* cartellini vino e musica */
.chip{position:absolute;z-index:5;display:flex;align-items:center;gap:10px;background:#fffdfa;border:1px solid var(--line);border-radius:18px;padding:10px 16px 10px 10px;box-shadow:0 18px 44px rgba(74,48,37,.18);--r:-4deg;transform:rotate(var(--r));white-space:nowrap;text-align:left}
.chip small{display:block;font-size:11px;font-weight:750;color:var(--muted);line-height:1.25}
.chip>span>b{display:block;font:700 15px/1.2 Georgia,"Times New Roman",serif;color:var(--ink)}
.chip .ci{flex:none;width:38px;height:38px;border-radius:12px;background:#ffead8;display:grid;place-items:center;color:var(--orange)}
.chip .ci svg{width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.chip-wine{left:-18px;top:118px;--r:-5deg;--cd:1.1s}
.chip-music{right:-6px;bottom:8px;--r:4deg;--cd:1.35s}
.eq{display:flex;align-items:flex-end;gap:3px;height:18px}
.eq b{display:block;width:3.5px;height:100%;border-radius:2px;background:var(--orange);transform-origin:center bottom;animation:eq .9s ease-in-out infinite alternate}
.eq b:nth-child(2){animation-duration:.6s;animation-delay:-.2s}
.eq b:nth-child(3){animation-duration:.75s;animation-delay:-.45s}
.eq b:nth-child(4){animation-duration:.5s;animation-delay:-.1s}
@keyframes eq{from{transform:scaleY(.22)}to{transform:scaleY(1)}}
@media(max-width:640px){
  .chip{padding:8px 12px 8px 8px;border-radius:15px;gap:8px}
  .chip>span>b{font-size:13px}
  .chip small{font-size:10px}
  .chip .ci{width:32px;height:32px;border-radius:10px}
  .chip-wine{left:-6px;top:auto;bottom:74px}
  .chip-music{right:-4px;bottom:-12px}
}

/* ---------- nastro che scorre ---------- */
.ribbon-wrap{position:relative;z-index:3;overflow:hidden;margin:-34px 0;padding:20px 0;pointer-events:none}
.ribbon{background:var(--orange);color:#fff;padding:13px 0;transform:rotate(-1.4deg) scale(1.04);box-shadow:0 14px 34px rgba(253,123,19,.3)}
.ribbon-track{display:flex;width:max-content;animation:marquee 34s linear infinite}
.ribbon-track span{flex:none;font:italic 700 21px/1 Georgia,"Times New Roman",serif;white-space:nowrap;padding-right:.2em}
.ribbon-track em{font-style:normal;opacity:.75;margin:0 .7em;font-size:.8em}
@keyframes marquee{to{transform:translateX(-50%)}}
@media(max-width:640px){.ribbon-track span{font-size:18px}.ribbon{padding:11px 0}}

/* ---------- voce: dimostrazione viva ---------- */
.voice-visual.rv.in .vd{animation:floatV 6s ease-in-out infinite alternate}
@keyframes floatV{from{transform:rotate(3deg)}to{transform:rotate(1.8deg) translateY(-12px)}}
.vd{width:300px;background:#f7f2ea;color:var(--ink);border:7px solid #161616;border-radius:38px;padding:24px 15px 18px;box-shadow:0 30px 80px rgba(0,0,0,.35);transform:rotate(3deg);text-align:left;font-size:15px;line-height:1.4}
.vd-count{font-size:11px;font-weight:800;color:#a8662f;letter-spacing:.16em}
.vd-title{font-weight:800;font-size:25px;line-height:1.1;letter-spacing:-.02em;margin:2px 0 5px}
.vd-sub{font-size:13px;color:var(--muted);margin-bottom:14px}
.vd-search{display:flex;align-items:center;gap:10px;margin-bottom:10px}
.vd-field{flex:1;display:flex;align-items:center;gap:8px;min-height:46px;padding:0 13px;border-radius:16px;background:#fff;box-shadow:0 6px 16px rgba(74,48,37,.1);color:#9a8c82;font-size:13px;white-space:nowrap;overflow:hidden}
.vd-field svg{width:18px;height:18px;stroke:#7a6a5f;fill:none;stroke-width:2.2;flex:none}
.vd-mic{position:relative;flex:none;width:48px;height:48px;border-radius:50%;border:0;background:#d8453b;cursor:pointer;display:grid;place-items:center;box-shadow:0 8px 18px rgba(216,69,59,.35);padding:0}
.vd-mic svg{width:22px;height:22px;fill:#fff}
.vd-mic::before,.vd-mic::after,.voice-quote i::before,.voice-quote i::after{content:"";position:absolute;inset:0;border-radius:50%;border:2px solid #d8453b;opacity:0}
.voice-quote i{position:relative}
.listening .vd-mic::before,.listening .voice-quote i::before{animation:ring 1.3s ease-out infinite}
.listening .vd-mic::after,.listening .voice-quote i::after{animation:ring 1.3s .45s ease-out infinite}
@keyframes ring{0%{transform:scale(1);opacity:.75}100%{transform:scale(1.8);opacity:0}}
.vd-heard{display:flex;align-items:center;gap:9px;min-height:44px;padding:6px 13px;border-radius:14px;background:#f3e6d8;border:1px solid #e6cfb8;font-weight:700;color:#6b3f22;font-size:13px;line-height:1.3}
.vd-bars{display:flex;align-items:center;gap:3px;height:18px;flex:none}
.vd-bars i{width:3px;height:100%;border-radius:2px;background:#b9652c;transform:scaleY(.25)}
.listening .vd-bars i{animation:bar .7s ease-in-out infinite}
.listening .vd-bars i:nth-child(2){animation-delay:.12s}
.listening .vd-bars i:nth-child(3){animation-delay:.24s}
.listening .vd-bars i:nth-child(4){animation-delay:.36s}
.listening .vd-bars i:nth-child(5){animation-delay:.48s}
@keyframes bar{0%,100%{transform:scaleY(.25)}50%{transform:scaleY(1)}}
.vd-hint{color:#9a8577;font-weight:500}
.vd-caret{display:inline-block;width:2px;height:1.05em;background:currentColor;margin-left:2px;vertical-align:-2px;animation:blink .8s steps(1) infinite}
@keyframes blink{50%{opacity:0}}
.vd-head{display:flex;justify-content:space-between;align-items:baseline;margin:16px 2px 8px}
.vd-head b{font-size:17px}
.vd-head span{font-size:12px;color:var(--muted)}
.vd-found{display:grid;gap:7px;min-height:194px;align-content:start;padding:0;margin:0;list-style:none}
.vd-found li{display:flex;align-items:center;gap:10px;min-height:42px;padding:0 12px;border-radius:14px;background:#fff;border:1.5px solid #b9703e;font-weight:700;color:#7a3f1c;font-size:14px;box-shadow:0 5px 12px rgba(74,48,37,.08);opacity:0;transform:translateY(10px) scale(.95);animation:vdpop .42s cubic-bezier(.2,.9,.3,1.3) forwards}
.vd-found li::before{content:"";flex:none;width:22px;height:22px;border-radius:50%;background:#a8622f url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4 8-9'/%3E%3C/svg%3E") center/14px no-repeat}
@keyframes vdpop{to{opacity:1;transform:none}}
.vd-add{min-height:46px;margin-top:10px;border-radius:15px;background:#e6dccd;color:#8d7f72;font-weight:800;font-size:14px;display:grid;place-items:center;transition:background .35s,color .35s,transform .35s cubic-bezier(.3,1.5,.5,1)}
.done .vd-add{background:#d4a84b;color:#3a2616;transform:scale(1.04)}
.voice-quote{left:auto;right:-112px;top:4px;z-index:3;max-width:250px}
@media(max-width:980px){.voice-visual{margin-top:44px}.voice-quote{left:-36px;right:auto;top:-34px}}
@media(max-width:640px){
  .vd{width:270px;border-radius:34px}
  .voice-visual{margin-top:84px}
  .voice-quote{left:-14px;top:-70px;bottom:auto;max-width:240px}
}

/* ---------- quattro esperienze ---------- */
.experience-card{background:#3a251b}
.js .experience-card.rv{translate:0 54px;scale:.94}
.js .experience-card.rv.in{translate:none;scale:1}
.js .experience-card.rv img{clip-path:inset(0 0 100% 0);transition:clip-path 1.1s cubic-bezier(.3,.7,.2,1);transition-delay:calc(var(--d,0s) + .15s)}
.js .experience-card.rv.in img{clip-path:inset(0 0 0 0)}
.experience-card.in img{animation:kb 15s ease-in-out 1.2s infinite alternate}
.experience-card:nth-child(2n).in img{animation-name:kb2}
@keyframes kb{from{transform:scale(1)}to{transform:scale(1.16) translate(-2%,-2%)}}
@keyframes kb2{from{transform:scale(1)}to{transform:scale(1.18) translate(2%,1.5%)}}
.js .experience-card.rv .exp-text>*{opacity:0;translate:0 20px;transition:opacity .6s ease,translate .7s cubic-bezier(.2,.7,.2,1)}
.js .experience-card.rv.in .exp-text>*{opacity:1;translate:none;transition-delay:calc(var(--d,0s) + .55s)}
.js .experience-card.rv.in .exp-text>:nth-child(2){transition-delay:calc(var(--d,0s) + .67s)}
.js .experience-card.rv.in .exp-text>:nth-child(3){transition-delay:calc(var(--d,0s) + .79s)}

/* ---------- tre passi: la scena resta ferma, tutto cambia scorrendo ---------- */
.walk{height:calc(100vh - var(--head) + 288vh);margin-top:10px}
.walk-scene{position:sticky;top:var(--head);height:calc(100vh - var(--head));display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.8fr);gap:64px;align-items:center;text-align:left}
.walk-phone{grid-column:2;grid-row:1;display:grid;justify-items:center;gap:22px}
.dev{position:relative;aspect-ratio:480/1039;width:min(300px,calc((100vh - var(--head) - 120px) * .462));border:7px solid #161616;border-radius:40px;background:#1c1816;overflow:hidden;box-shadow:0 30px 80px rgba(46,36,31,.22)}
.dev i{position:absolute;inset:0;background-size:cover;background-position:top center;transform:translateX(102%);transition:transform .6s cubic-bezier(.3,.8,.2,1),opacity .6s ease}
.dev i.prev{transform:translateX(-30%);opacity:0}
.dev i.on{transform:none;opacity:1}
.meter{display:flex;gap:6px;width:140px;list-style:none;padding:0;margin:0}
.meter li{flex:1;height:5px;border-radius:3px;background:var(--line);overflow:hidden}
.meter li::after{content:"";display:block;height:100%;background:var(--orange);transform-origin:left center;transform:scaleX(var(--f,0))}
.walk-list{grid-column:1;grid-row:1;display:grid;list-style:none;padding:0;margin:0}
.walk-step{grid-area:1/1;max-width:27em;opacity:0;translate:0 40px;transition:opacity .45s ease,translate .6s cubic-bezier(.2,.7,.2,1);pointer-events:none}
.walk-step.past{translate:0 -40px}
.walk-step.on{opacity:1;translate:none;pointer-events:auto}
.walk-num{font:700 clamp(72px,9vw,120px)/.9 Georgia,"Times New Roman",serif;color:var(--orange);letter-spacing:-.04em;margin-bottom:16px}
.walk-step h3{font-size:clamp(28px,3.4vw,42px);margin-bottom:12px}
.walk-step p{color:var(--muted);line-height:1.55;font-size:clamp(17px,1.5vw,20px);margin:0}
@media(max-width:980px){
  .walk{height:calc(100vh - var(--head) + 330vh);height:calc(100svh - var(--head) + 330svh)}
  .walk-scene{height:calc(100vh - var(--head));height:calc(100svh - var(--head));display:flex;flex-direction:column;justify-content:center;gap:16px;text-align:center}
  .walk-phone{gap:12px}
  .walk-crop{height:min(46vh,calc(100vh - var(--head) - 270px));height:min(46svh,calc(100svh - var(--head) - 270px));overflow:hidden;-webkit-mask-image:linear-gradient(#000 76%,transparent);mask-image:linear-gradient(#000 76%,transparent)}
  .dev{width:min(62vw,268px);border-radius:34px;box-shadow:none}
  .walk-step{max-width:none}
  .walk-num{font-size:58px;margin-bottom:8px}
}
html:not(.js) .walk{height:auto}
html:not(.js) .walk-scene{position:static;height:auto;padding:40px 0}
html:not(.js) .walk-step{grid-area:auto;opacity:1;translate:none;margin-bottom:36px}

/* ---------- cosa trovi, livelli, galleria, premium, chiusura ---------- */
.screen-stack.in .screen-card.a{animation:floatC 6.5s ease-in-out infinite alternate}
.screen-stack.in .screen-card.b{animation:floatD 7.5s ease-in-out infinite alternate}
@keyframes floatC{from{transform:rotate(-4deg)}to{transform:rotate(-5.3deg) translateY(-12px)}}
@keyframes floatD{from{transform:rotate(5deg)}to{transform:rotate(6.1deg) translateY(-16px)}}
.orange-chip{animation:wiggle 3.2s ease-in-out infinite}
@keyframes wiggle{0%,100%{transform:rotate(-2.5deg)}50%{transform:rotate(2.5deg) translateY(-5px)}}
.feature-item.in .feature-icon{animation:iconPop .6s cubic-bezier(.3,1.6,.5,1) calc(var(--d,0s) + .2s) backwards}
@keyframes iconPop{from{scale:.3;rotate:-25deg}}
.feature-icon .eq{height:16px}
.level.signature{position:relative;overflow:hidden}
.level.signature::after{content:"";position:absolute;inset:0;background:linear-gradient(110deg,transparent 32%,rgba(255,173,105,.24) 50%,transparent 68%);translate:-100% 0;animation:sweep 4.5s ease-in-out 1s infinite;pointer-events:none}
@keyframes sweep{0%,55%{translate:-100% 0}100%{translate:100% 0}}
.premium-shot.in{animation:bobS 6s ease-in-out 1s infinite alternate}
@keyframes bobS{to{transform:translateY(-12px)}}
.gallery-phone img{object-position:50% 0}
.gallery-card.in .gallery-phone img{animation:pan 9s ease-in-out 1.2s infinite alternate}
@keyframes pan{to{object-position:50% 100%}}
.qr-card{position:relative}
.qr-card::before{content:"";position:absolute;inset:-6px;border-radius:23px;border:2px solid #ffad69;opacity:0;animation:qr 2.6s ease-out infinite;pointer-events:none}
@keyframes qr{0%{opacity:.85;transform:scale(.96)}100%{opacity:0;transform:scale(1.13)}}
.cta-grid>img.in{animation:bobS 7s ease-in-out 1s infinite alternate}

/* ===================================================================
   PIÙ MOVIMENTO
   =================================================================== */
/* scritte arancioni che brillano */
h1 .orange .w,h2 .orange .w{background:linear-gradient(100deg,#fd7b13 0%,#ffc266 25%,#fd7b13 50%,#ffc266 75%,#fd7b13 100%);background-size:300% 100%;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.js .hero h1 .orange .w{animation:word .85s cubic-bezier(.2,.7,.2,1) backwards,shim 3.6s linear infinite;animation-delay:calc(.12s + var(--i) * 75ms),0s}
h2 .orange .w{animation:shim 3.6s linear infinite}
@keyframes shim{to{background-position:75% 0}}

/* intestazione: icona che saluta, pulsante che pulsa */
.nav-links .button.primary{animation:pulse 2.8s ease-out infinite}
@keyframes pulse{0%{box-shadow:0 12px 28px rgba(253,123,19,.25),0 0 0 0 rgba(253,123,19,.55)}70%,100%{box-shadow:0 12px 28px rgba(253,123,19,.25),0 0 0 14px rgba(253,123,19,0)}}
.brand img{animation:wig 6s ease-in-out infinite}
@keyframes wig{0%,86%,100%{transform:none}90%{transform:rotate(-12deg) scale(1.1)}94%{transform:rotate(9deg) scale(1.1)}97%{transform:rotate(-4deg)}}

/* apertura: telefoni che si muovono di più, luce che segue il puntatore, adesivi che ballano */
@keyframes floatA{from{transform:rotate(-5deg)}to{transform:rotate(-7.5deg) translateY(-24px)}}
@keyframes floatB{from{transform:rotate(6deg)}to{transform:rotate(8.5deg) translateY(-30px)}}
.js .hero-visual.go .phone.one{animation:phoneIn 1.1s cubic-bezier(.2,.8,.2,1) .1s backwards,floatA 4.6s ease-in-out 1.2s infinite alternate}
.js .hero-visual.go .phone.two{animation:phoneIn 1.1s cubic-bezier(.2,.8,.2,1) .3s backwards,floatB 5.3s ease-in-out 1.4s infinite alternate}
.fx .spot{position:absolute;left:0;top:0;width:420px;height:420px;margin:-210px 0 0 -210px;border-radius:50%;background:radial-gradient(circle,rgba(253,151,48,.3),rgba(253,151,48,0) 65%);translate:var(--px,-999px) var(--py,-999px);transition:translate .28s ease-out}
.stk{position:absolute;z-index:4;width:58px;height:58px;border-radius:50%;background:#fffdfa;border:1px solid var(--line);box-shadow:0 14px 34px rgba(74,48,37,.2);display:grid;place-items:center;font-size:29px;line-height:1;--r:-8deg;transform:rotate(var(--r))}
.js .hero-visual.go .stk{animation:popIn .7s cubic-bezier(.3,1.5,.5,1) var(--cd) backwards,sway var(--t,5s) ease-in-out calc(var(--cd) + .7s) infinite alternate}
@keyframes sway{from{transform:rotate(var(--r)) translateY(8px)}to{transform:rotate(calc(var(--r) * -1)) translateY(-16px)}}
.s1{left:1%;top:-22px;--r:-12deg;--cd:1.5s;--t:3.8s}
.s2{right:37%;top:-30px;--r:9deg;--cd:1.65s;--t:4.6s}
.s3{left:-32px;top:55%;--r:13deg;--cd:1.8s;--t:5.2s}
.s4{right:-24px;top:45%;--r:-10deg;--cd:1.95s;--t:4.2s}
@media(max-width:640px){
  .stk{width:44px;height:44px;font-size:22px}
  .s1{left:-4px;top:-18px}
  .s2{right:40%;top:-22px}
  .s3{left:-10px;top:43%}
  .s4{right:-8px;top:36%}
}

/* due nastri che si incrociano */
.ribbon-wrap{margin:-46px 0;padding:36px 0}
.ribbon{position:relative}
.ribbon.r2{position:absolute;left:0;right:0;top:50%;margin-top:-24px;background:var(--brown);color:#ffbf85;transform:rotate(1.7deg) scale(1.04);box-shadow:0 10px 26px rgba(74,48,37,.3);z-index:-1}
.ribbon.r2 .ribbon-track{animation-direction:reverse;animation-duration:44s}
@media(max-width:640px){.ribbon-wrap{margin:-52px 0;padding:44px 0}.ribbon{transform:rotate(-3deg) scale(1.08)}.ribbon.r2{transform:rotate(4.5deg) scale(1.08);margin-top:-21px}}

/* voce: onde sonore e cerchi */
.wave{position:absolute;left:0;right:0;bottom:0;height:120px;display:flex;align-items:flex-end;gap:3px;padding:0 2px;transform:scaleY(.3);transform-origin:center bottom;opacity:.45;transition:transform .6s cubic-bezier(.3,1.3,.5,1),opacity .6s}
.wave b{flex:1;height:100%;border-radius:3px 3px 0 0;background:linear-gradient(to top,rgba(253,123,19,.8),rgba(255,173,105,.12));transform-origin:center bottom;animation:eq var(--t) ease-in-out var(--dl) infinite alternate}
.voice.hot .wave{transform:scaleY(1);opacity:.95}
.voice-visual{isolation:isolate}
.voice-visual::before,.voice-visual::after{content:"";position:absolute;left:50%;top:50%;width:320px;height:320px;margin:-160px 0 0 -160px;border-radius:50%;border:2px solid rgba(255,173,105,.55);opacity:0;pointer-events:none;z-index:-1}
.voice-visual.listening::before{animation:bigring 1.9s ease-out infinite}
.voice-visual.listening::after{animation:bigring 1.9s .95s ease-out infinite}
@keyframes bigring{0%{transform:scale(.7);opacity:.75}100%{transform:scale(1.9);opacity:0}}

/* schede che si inclinano sotto il puntatore */
.js .rv{transition:opacity .7s ease,translate .9s cubic-bezier(.2,.7,.2,1),scale .8s cubic-bezier(.3,1.35,.5,1),transform .28s ease;transition-delay:var(--d,0s)}

/* esperienze su telefono: le schede si impilano una sull'altra mentre scorri */
@media(max-width:640px){
  .experience-grid{display:block}
  .experience-card{position:sticky;top:calc(var(--head) + 12px + var(--k,0) * 12px);margin-bottom:18px;transform-origin:center top}
  .experience-card:nth-child(2){--k:1}
  .experience-card:nth-child(3){--k:2}
  .experience-card:nth-child(4){--k:3}
  .experience-card:last-child{margin-bottom:0}
  .js .experience-card.rv{scale:1;transition:opacity .7s ease,translate .9s cubic-bezier(.2,.7,.2,1)}
  .js .experience-card.rv.in{scale:calc(1 - var(--cover,0) * .07);filter:brightness(calc(1 - var(--cover,0) * .45))}
}

/* tre passi: il telefono reagisce a ogni cambio, il numero entra girando */
.walk-scene{isolation:isolate}
.walk-scene::before{content:"";position:absolute;z-index:-1;right:4%;top:50%;width:460px;height:460px;margin-top:-230px;border-radius:50%;background:radial-gradient(circle,rgba(253,123,19,.2),rgba(253,123,19,0) 68%);filter:blur(20px);animation:blobB 8s ease-in-out infinite alternate;pointer-events:none}
.dev{transition:rotate .8s cubic-bezier(.3,1.5,.5,1)}
.walk-step.on .walk-num{animation:numIn .65s cubic-bezier(.3,1.5,.5,1)}
@keyframes numIn{from{opacity:0;scale:.35;rotate:-16deg}}
.walk-num{transform-origin:left center}
@media(max-width:980px){
  .walk-scene::before{right:50%;margin-right:-180px;width:360px;height:360px;top:26%;margin-top:-180px}
  .walk-num{transform-origin:center}
}

/* livelli che si aprono come cartoncini, schermate che arrivano storte e si raddrizzano */
.js .level.rv{transform:perspective(900px) rotateX(-55deg);transform-origin:center top;transition:opacity .7s ease,translate .9s cubic-bezier(.2,.7,.2,1),transform 1s cubic-bezier(.2,.9,.3,1.2);transition-delay:var(--d,0s)}
.js .level.rv.in{transform:none}
.js .gallery-card.rv{rotate:-6deg;transition:opacity .7s ease,translate .9s cubic-bezier(.2,.7,.2,1),rotate 1s cubic-bezier(.3,1.4,.5,1),transform .28s ease;transition-delay:var(--d,0s)}
.js .gallery-card.rv:nth-child(2n){rotate:6deg}
.js .gallery-card.rv.in{rotate:0deg}

/* coriandoli */
.confetti{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:60}

/* ---------- movimento ridotto ---------- */
.still{scroll-behavior:auto}
.still *,.still *::before,.still *::after{animation:none!important;transition:none!important}
.still .rv,.still h2 .w,.still .hero-visual>*,.still .experience-card .exp-text>*{opacity:1!important;translate:none!important;scale:1!important;filter:none!important}
.still .experience-card img{clip-path:none!important}
.still .vd-found li{opacity:1;transform:none}
.still .fx,.still .ribbon-track span:last-child,.still .stk{display:none}
.still .level.rv{transform:none!important}
.still .gallery-card.rv{rotate:0deg!important}