/* Pagina iniziale. Concetto: la platea vista dal palco. Un arco di posti si accende dal palco verso le ultime file; uno solo resta terracotta. */
:root{--band-bg:#1F1B2E;--band-fg:#F4EEE4;--band-muted:#B9B3CC;--band-accent:#E8A090;--band-line:#3A3450}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--band-bg:#241F36;--band-line:#3D3754}}
:root[data-theme="dark"]{--band-bg:#241F36;--band-line:#3D3754}

.land{margin:0;line-height:1.6}
.skip{position:absolute;left:-9999px;top:0;background:var(--accent);color:var(--accent-fg);padding:.6rem 1rem;z-index:10}
.skip:focus{left:1rem;top:1rem}
.grow{flex:1}
.row{display:flex;gap:.7rem;flex-wrap:wrap;align-items:center}
.top-wrap{position:sticky;top:0;z-index:6;background:var(--glass);-webkit-backdrop-filter:saturate(1.4) blur(16px);backdrop-filter:saturate(1.4) blur(16px);border-bottom:1px solid var(--glass-line)}
.l-top{display:flex;align-items:center;gap:1rem;padding:.8rem clamp(16px,4vw,48px);max-width:78rem;margin:0 auto}
.l-nav{display:flex;gap:1.4rem;margin-left:1.5rem}
.l-nav a{color:var(--muted);text-decoration:none;font-weight:500}.l-nav a:hover{color:var(--fg)}
@media (max-width:760px){.l-nav{display:none}}

.btn{position:relative;display:inline-flex;align-items:center;justify-content:center;font:inherit;font-weight:600;padding:.8rem 1.5rem;min-height:48px;border-radius:999px;border:1px solid transparent;background:var(--grad-accent);color:var(--accent-fg);cursor:pointer;text-decoration:none;box-shadow:0 1px 1px rgba(0,0,0,.12),0 10px 22px -8px var(--accent),inset 0 1px 0 rgba(255,255,255,.3);transition:transform .2s cubic-bezier(.2,.8,.2,1),box-shadow .2s,background .2s}
.btn:hover{transform:translateY(-2px);box-shadow:0 1px 1px rgba(0,0,0,.12),0 16px 28px -8px var(--accent),inset 0 1px 0 rgba(255,255,255,.35)}
.btn:active{transform:translateY(1px) scale(.98)}
.btn.sec{background:var(--glass);color:var(--accent);border-color:color-mix(in srgb,var(--accent) 50%,transparent);box-shadow:none;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.btn.sec:hover{background:var(--accent-soft);box-shadow:none}
.btn.ghost{background:transparent;color:var(--fg);border-color:var(--line);box-shadow:none}.btn.ghost:hover{background:var(--soft);box-shadow:none}
.btn.small{min-height:40px;padding:.45rem 1.1rem;font-size:.92rem}
button.link{background:none;border:0;color:var(--muted);text-decoration:underline;cursor:pointer;font:inherit;padding:.4rem 0}

/* apertura */
.hero{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:clamp(1.5rem,5vw,4rem);align-items:center;max-width:78rem;margin:0 auto;padding:clamp(2rem,6vw,5rem) clamp(16px,4vw,48px) clamp(2.5rem,6vw,5rem)}
.hero h1{font-size:clamp(2.5rem,6.2vw,4.7rem);line-height:1.02;margin:.6rem 0 1.2rem;font-weight:700;font-optical-sizing:auto}
.lead{font-size:clamp(1.05rem,1.6vw,1.22rem);color:var(--muted);max-width:36rem;margin:0 0 1.6rem}
.cta{margin-top:.4rem}
.hero-art{position:relative;margin:0;display:flex;flex-direction:column;align-items:center;gap:.9rem;isolation:isolate}
.hero-art::before{content:"";position:absolute;inset:-12% -8% 4%;z-index:-1;background:radial-gradient(60% 55% at 50% 100%,var(--glow),transparent 70%);filter:blur(8px)}
.hero-art svg,.demo svg{width:100%;height:auto;max-width:34rem;overflow:visible}
.hero-art figcaption{display:inline-flex;align-items:center;gap:.55rem;color:var(--muted);font-size:.92rem;padding:.4rem .9rem;border-radius:999px;background:var(--glass);border:1px solid var(--glass-line);box-shadow:var(--elev);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.dot-hot{width:.8rem;height:.8rem;border-radius:50%;background:var(--grad-accent);display:inline-block;box-shadow:0 0 0 4px var(--accent-soft)}
@media (max-width:860px){.hero{grid-template-columns:minmax(0,1fr)}.hero-art{order:-1}.hero-art svg{max-width:26rem}}
.hero h1 em{font-style:italic;background:var(--grad-accent);-webkit-background-clip:text;background-clip:text;color:transparent}

/* posti: stato a riposo = visibile; ogni posto ruota su se stesso (transform-box) in tutti gli stati */
:root{--seat-hi:#58527A;--seat-lo:#1F1B2E}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--seat-hi:#FFFFFF;--seat-lo:#CFC6B6}}
:root[data-theme="dark"]{--seat-hi:#FFFFFF;--seat-lo:#CFC6B6}
.gi0{stop-color:var(--seat-hi)}.gi1{stop-color:var(--seat-lo)}.gh0{stop-color:#F08A68}.gh1{stop-color:#A93C23}
.s{fill:url(#g-ink);transform-box:fill-box;transform-origin:center;transition:transform .35s cubic-bezier(.34,1.56,.64,1),fill .2s,filter .2s}
.s.hot{fill:url(#g-hot);filter:drop-shadow(0 0 7px var(--accent))}
.stage{fill:var(--stage)}.stage-label{fill:var(--muted);font:600 9px var(--font-body);letter-spacing:.3em}
.hero-art .s{animation:seat-in .7s cubic-bezier(.2,.9,.25,1) both}
.hero-art .s.hot{animation:seat-in .7s cubic-bezier(.2,.9,.25,1) both,seat-pulse 3.2s ease-in-out 1.8s infinite}
.hero-art .stage{transform-box:fill-box;transform-origin:center;animation:stage-in .6s ease-out both}
.hero-art::after{content:"";position:absolute;left:50%;bottom:2.4rem;width:70%;height:78%;transform:translateX(-50%);background:conic-gradient(from 180deg at 50% 100%,transparent 128deg,color-mix(in srgb,var(--accent) 16%,transparent) 160deg,transparent 180deg,color-mix(in srgb,var(--accent) 16%,transparent) 200deg,transparent 232deg);filter:blur(14px);z-index:-1;opacity:0;animation:beam 1.6s ease-out .9s forwards;pointer-events:none;mask-image:linear-gradient(to top,#000 20%,transparent)}
@keyframes beam{to{opacity:1}}
@keyframes seat-in{from{opacity:0;transform:scale(.3) translateY(14px)}to{opacity:1;transform:none}}
@keyframes stage-in{from{opacity:0;transform:scaleX(.4)}to{opacity:1;transform:scaleX(1)}}
@keyframes seat-pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.2)}}

/* dimostrazione */
.band{background:var(--soft);border-block:1px solid var(--line)}
.band-in{max-width:78rem;margin:0 auto;padding:clamp(2.5rem,6vw,5rem) clamp(16px,4vw,48px);display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(1.5rem,4vw,3.5rem);align-items:center}
.band h2{font-size:clamp(1.8rem,3.6vw,2.7rem);line-height:1.1;margin:.4rem 0 1rem}
.band-text p{color:var(--muted);max-width:30rem}
@media (max-width:860px){.band-in{grid-template-columns:minmax(0,1fr)}}
.legend{display:flex;gap:1.2rem;flex-wrap:wrap;margin-top:1.2rem;color:var(--muted);font-size:.9rem}
.legend span{display:inline-flex;align-items:center;gap:.45rem}.lg{display:inline-block;width:.85rem;height:.85rem;border-radius:50%}
.lg.free{background:var(--fg)}.lg.taken{background:var(--taken)}.lg.mine{background:var(--accent)}
.demo{display:grid;gap:1.2rem;justify-items:center}
.demo svg{filter:drop-shadow(0 20px 24px rgba(31,27,46,.12))}
.demo .s{animation:none;outline:none}
.demo .s.free{cursor:pointer}
.demo .s.free:hover{transform:scale(1.28);filter:drop-shadow(0 0 5px var(--accent))}
.demo .s.taken{fill:var(--taken);filter:none}
.demo .s.mine{fill:url(#g-hot);transform:scale(1.32);stroke:var(--bg);stroke-width:2.2;filter:drop-shadow(0 0 9px var(--accent));animation:pick .5s cubic-bezier(.34,1.56,.64,1)}
.demo .s:focus-visible{stroke:var(--accent);stroke-width:3.5;paint-order:stroke}
.demo .ring{fill:none;stroke:var(--accent);stroke-width:2;pointer-events:none;transform-box:fill-box;transform-origin:center;animation:ripple .75s ease-out forwards}
@keyframes pick{0%{transform:scale(.8)}100%{transform:scale(1.32)}}
@keyframes ripple{from{opacity:.9;transform:scale(1)}to{opacity:0;transform:scale(3.2)}}
.demo-panel{width:100%;max-width:34rem;min-height:11.5rem;background:var(--glass);border:1px solid var(--glass-line);border-radius:1.2rem;padding:1.2rem 1.4rem;box-shadow:var(--elev);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}
.demo-panel>*{animation:panel-in .35s cubic-bezier(.2,.8,.2,1) both}
@keyframes panel-in{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.demo-panel p{margin:.2rem 0}.demo-empty{color:var(--muted)}
.demo-seat{font-family:var(--font-display);font-size:1.45rem;font-weight:650}
.demo-timer{color:var(--muted);font-size:.95rem;margin-bottom:.9rem!important;font-variant-numeric:tabular-nums}
.demo-timer strong{color:var(--fg)}.demo-done{color:var(--fg)}
.demo-meter{height:4px;border-radius:4px;background:var(--line);overflow:hidden;margin:.2rem 0 1rem}
.demo-meter i{display:block;height:100%;width:100%;background:var(--grad-accent);transform-origin:left;transition:transform 1s linear}

/* sezioni */
.sec{max-width:78rem;margin:0 auto;padding:clamp(2.5rem,6vw,5rem) clamp(16px,4vw,48px)}
.sec h2{font-size:clamp(1.8rem,3.6vw,2.7rem);line-height:1.1;margin:.4rem 0 1.4rem;max-width:34rem}
.steps{list-style:none;counter-reset:passo;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(1rem,3vw,2.5rem);padding:0;margin:0}
.steps li{counter-increment:passo;border-top:2px solid var(--fg);padding-top:1rem}
.steps li::before{content:counter(passo);font-family:var(--font-display);font-weight:700;font-size:2.4rem;line-height:1;color:var(--accent);display:block;margin-bottom:.6rem}
.steps h3{font-size:1.3rem;margin:0 0 .4rem}.steps p{color:var(--muted);margin:0;max-width:24rem}
@media (max-width:860px){.steps{grid-template-columns:minmax(0,1fr)}}
.split{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(1.5rem,4vw,4rem);align-items:start}
.split h2{max-width:26rem}.lead2{color:var(--muted);max-width:30rem}
@media (max-width:900px){.split{grid-template-columns:minmax(0,1fr)}}
.feat{margin:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.4rem 2rem}
.feat div{border-top:1px solid var(--line);padding-top:.8rem}
.feat dt{font-family:var(--font-display);font-weight:650;font-size:1.12rem;margin-bottom:.25rem}.feat dd{margin:0;color:var(--muted);font-size:.97rem}
@media (max-width:560px){.feat{grid-template-columns:minmax(0,1fr)}}

.band.quiet{background:var(--band-bg);color:var(--band-fg);border:0}
.band.quiet .tagline{color:var(--band-muted)}.band.quiet h2{color:var(--band-fg)}
.band-in.cols{grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);align-items:start}
.plain{list-style:none;padding:0;margin:0;display:grid;gap:.9rem}
.plain li{padding:0 0 .9rem;border-bottom:1px solid var(--band-line);color:var(--band-fg);max-width:36rem}
.plain li:last-child{border:0}

.faq details{border-top:1px solid var(--line);padding:1rem 0;max-width:46rem}
.faq details:last-of-type{border-bottom:1px solid var(--line)}
.faq summary{cursor:pointer;font-family:var(--font-display);font-weight:650;font-size:1.15rem;list-style:none;display:flex;justify-content:space-between;gap:1rem}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";color:var(--accent);font-family:var(--font-body);font-size:1.5rem;line-height:1}
.faq details[open] summary::after{content:"−"}
.faq p{color:var(--muted);margin:.7rem 0 0;max-width:38rem}
.faq a{color:var(--accent)}

.close{max-width:78rem;margin:0 auto;padding:clamp(2.5rem,6vw,4.5rem) clamp(16px,4vw,48px)}
.close h2{font-size:clamp(2rem,4.4vw,3.4rem);line-height:1.05;margin:0 0 1.4rem;max-width:30rem}
.l-foot{display:flex;align-items:center;gap:1.2rem;flex-wrap:wrap;max-width:78rem;margin:0 auto;padding:1.6rem clamp(16px,4vw,48px) 2.4rem;border-top:1px solid var(--line);color:var(--muted)}
.l-foot a{color:var(--muted)}.l-foot .logo{color:var(--fg)}

.btn .short{display:none}
@media (max-width:520px){.l-top{gap:.6rem}.btn .long{display:none}.btn .short{display:inline}.logo .wordmark{font-size:1.35rem}}
html,body.land{overflow-x:clip}

/* rilievo e rivelazione allo scorrimento (senza JS tutto resta visibile) */
.steps li{border:1px solid var(--glass-line);border-radius:1.2rem;padding:1.3rem 1.3rem 1.5rem;background:linear-gradient(180deg,var(--card),color-mix(in srgb,var(--card) 90%,var(--soft)));box-shadow:var(--elev);transition:transform .25s cubic-bezier(.2,.8,.2,1),box-shadow .25s}
.steps li:hover{transform:translateY(-4px)}
.steps li::before{width:2.8rem;height:2.8rem;border-radius:50%;display:grid;place-items:center;font-size:1.3rem;margin-bottom:.9rem;background:var(--accent-soft);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--accent) 30%,transparent)}
.feat div{border:1px solid var(--glass-line);border-radius:1rem;padding:1rem 1.1rem;background:var(--glass);box-shadow:var(--elev);transition:transform .25s cubic-bezier(.2,.8,.2,1)}
.feat div:hover{transform:translateY(-3px)}
.band{background:linear-gradient(180deg,var(--soft),color-mix(in srgb,var(--soft) 70%,var(--bg)))}
.band.quiet{background:radial-gradient(40rem 20rem at 85% 0%,color-mix(in srgb,var(--accent) 22%,transparent),transparent 70%),var(--band-bg)}
.faq details{transition:background .2s;border-radius:.2rem}.faq details[open]{background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--soft) 50%,transparent))}
.close{text-align:center}.close h2{margin-inline:auto}.close .cta{justify-content:center}
.close{margin:0 auto;background:radial-gradient(34rem 14rem at 50% 100%,var(--glow),transparent 70%)}
.js .rv{opacity:0;transform:translateY(22px);transition:opacity .7s cubic-bezier(.2,.8,.2,1),transform .7s cubic-bezier(.2,.8,.2,1)}
.js .rv.in{opacity:1;transform:none}
.js .rv.d1{transition-delay:.08s}.js .rv.d2{transition-delay:.16s}.js .rv.d3{transition-delay:.24s}
@media (prefers-reduced-motion:reduce){.js .rv{opacity:1;transform:none}.hero-art::after{animation:none;opacity:1}}