/* ===== ELY E BLIZZARD · livello MOTION (additivo, non tocca il layout) ===== */

/* Intro */
.intro{position:fixed;inset:0;z-index:100;background:var(--ink);display:grid;place-items:center;overflow:hidden}
.intro img{width:min(46vw,260px);animation:introLogo 1.1s cubic-bezier(.2,.9,.3,1.3) both}
.intro .word{position:absolute;bottom:14%;font-family:var(--display);font-weight:700;font-size:clamp(1.2rem,3vw,2rem);color:#fff;letter-spacing:.08em;text-transform:uppercase;opacity:0;animation:introWord .6s .5s ease both}
.intro .word i{display:inline-block;width:.5em;height:.5em;border-radius:50%;background:var(--a);margin:0 .4em;vertical-align:middle}
.intro.out{animation:curtain .8s cubic-bezier(.7,0,.2,1) both;pointer-events:none}
@keyframes introLogo{0%{opacity:0;transform:scale(.3) rotate(-20deg)}70%{opacity:1;transform:scale(1.08) rotate(3deg)}100%{transform:none}}
@keyframes introWord{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
@keyframes curtain{to{clip-path:inset(0 0 100% 0)}}
.intro{clip-path:inset(0 0 0 0)}

/* Cursore */
@media(hover:hover) and (pointer:fine){
  body{cursor:none}
  a,button,.ph,.vid,.card,.track figure,.photo,.draw{cursor:none}
  .cur{position:fixed;left:0;top:0;width:12px;height:12px;border-radius:50%;background:var(--a);pointer-events:none;z-index:200;transform:translate(-50%,-50%);mix-blend-mode:multiply;transition:width .25s,height .25s,background .25s,opacity .3s}
  .cur2{position:fixed;left:0;top:0;width:44px;height:44px;border-radius:50%;border:2px solid var(--p);pointer-events:none;z-index:199;transform:translate(-50%,-50%);opacity:.7;transition:width .3s,height .3s,border-color .3s,opacity .3s}
  body.hovering .cur{width:6px;height:6px;background:var(--p)}
  body.hovering .cur2{width:72px;height:72px;border-color:var(--a);opacity:1}
  body.on-photo .cur2{width:96px;height:96px;border-width:0;background:rgba(255,255,255,.18);backdrop-filter:blur(2px)}
  body.on-photo .cur2::after{content:"guarda";position:absolute;inset:0;display:grid;place-items:center;color:#fff;font:800 .65rem/1 var(--body);letter-spacing:.14em;text-transform:uppercase;text-shadow:0 1px 6px rgba(0,0,0,.5)}
}
.cur,.cur2{display:none}
@media(hover:hover) and (pointer:fine){.cur,.cur2{display:block}}

/* Nav che si nasconde */
.nav{transition:transform .45s cubic-bezier(.2,.8,.2,1),box-shadow .3s}
.nav.hide{transform:translateY(-110%)}
.nav.scrolled{box-shadow:0 10px 30px rgba(0,0,0,.08)}

/* Hero: sfondo vivo + 3D */
.hero{perspective:1200px}
.hero .wrap{position:relative;z-index:2}
.hero canvas.blobs{position:absolute;inset:0;width:100%;height:100%;z-index:0;pointer-events:none;opacity:.9}
.draw{transform-style:preserve-3d;transition:transform .15s ease-out;will-change:transform}
.draw .color{transform:translateZ(40px)}
.draw .shine{transform:translateZ(41px)}
.draw svg{transform:translateZ(-30px)}
.draw .spark{transform:translateZ(70px)}
.hero h1 .w{transform-style:preserve-3d}
.hero h1 .w:hover{color:var(--p);transform:translateY(-4px) rotate(-3deg);transition:transform .25s cubic-bezier(.2,.9,.3,1.4),color .25s}
.hero .pill{transition:transform .25s cubic-bezier(.2,.9,.3,1.4)}
.hero .pill:hover{transform:translateY(-4px) rotate(-2deg) scale(1.06)}

/* Titoli: lettere 3D quando entrano */
h2 .w{transform-style:preserve-3d}
h2.in .w{animation:flip3d .7s cubic-bezier(.2,.9,.3,1.2) both}
@keyframes flip3d{from{opacity:0;transform:rotateX(-90deg) translateY(.4em);transform-origin:bottom}to{opacity:1;transform:none}}
h2{perspective:600px}

/* Testo che si accende scorrendo */
.lit{color:color-mix(in srgb,var(--ink2) 28%,transparent);transition:color .25s}
.lit.on{color:var(--ink2)}
blockquote .lit{color:color-mix(in srgb,var(--ink) 22%,transparent)}
blockquote .lit.on{color:var(--ink)}
blockquote span .lit.on{color:var(--p)}

/* Striscia di parole cinetiche */
.kinetic{overflow:hidden;background:var(--ink);color:#fff;padding-block:9px;border-block:3px solid var(--a);position:relative}
.kinetic .row{display:flex;gap:0;white-space:nowrap;will-change:transform;font-family:var(--display);font-weight:700;font-size:clamp(.85rem,1.6vw,1.15rem);line-height:1.1;letter-spacing:.14em;text-transform:uppercase}
.kinetic .row span{padding-inline:.5em}
.kinetic .row span:nth-child(odd){color:var(--a)}
.kinetic .row span:nth-child(3n){color:var(--s)}
.kinetic .row.r2{margin-top:6px;font-size:clamp(1.1rem,3vw,2rem);opacity:.85}
.kinetic .row.r2 span:nth-child(odd){color:var(--s)}

/* Card 3D con riflesso */
.card,.news-item,.feat,.vid,.quote,.step{transform-style:preserve-3d;will-change:transform}
.tilt{transition:transform .12s ease-out,box-shadow .3s;position:relative}
.tilt::before{content:"";position:absolute;inset:0;border-radius:inherit;background:radial-gradient(circle at var(--gx,50%) var(--gy,50%),rgba(255,255,255,.55),transparent 55%);opacity:0;transition:opacity .3s;pointer-events:none;z-index:2}
.tilt.active::before{opacity:1}
.tilt.active{box-shadow:0 26px 50px rgba(0,0,0,.16)}
.card .ico,.card h3,.card p{transform:translateZ(30px)}
.feat h3,.feat .date,.feat .btn{transform:translateZ(24px)}

/* Reveal con profondità */
.rv-pop{transform:scale(.88) rotateY(18deg) translateZ(-40px);transform-origin:center}
.rv-pop.in{transform:none}
.rv{transform:translateY(40px) rotateX(12deg);transform-origin:top}
.rv.in{transform:none}
section{perspective:1000px}

/* Full screen: parallasse + testo */
.full .slide img{will-change:transform}
.full .cap h2{perspective:600px}
.full .cap h2 .w{display:inline-block}
.album .photo img{will-change:transform}

/* Album: skew con la velocità di scroll */
.strip{will-change:transform;transition:transform .2s ease-out}

/* Bottoni magnetici */
.btn{will-change:transform}
.btn.mag{transition:transform .18s ease-out,box-shadow .15s}

/* Numeri/pulse sul dot della timeline */
.step .dot{transform:translateZ(20px)}

/* Scroll hint */
.scroll-hint{position:absolute;left:50%;bottom:18px;transform:translateX(-50%);z-index:3;width:26px;height:42px;border:2px solid var(--ink);border-radius:14px;opacity:.55}
.scroll-hint::after{content:"";position:absolute;left:50%;top:8px;width:4px;height:8px;border-radius:2px;background:var(--ink);transform:translateX(-50%);animation:wheel 1.6s ease-in-out infinite}
@keyframes wheel{0%{transform:translate(-50%,0);opacity:1}100%{transform:translate(-50%,14px);opacity:0}}
@media(max-width:860px){.scroll-hint{display:none}}

/* Band: onda */
.band{position:relative;overflow:hidden}
.band::before{content:"";position:absolute;inset:-40% -10%;background:radial-gradient(circle at 20% 30%,rgba(255,255,255,.18),transparent 40%),radial-gradient(circle at 80% 70%,rgba(255,255,255,.14),transparent 40%);animation:drift 14s ease-in-out infinite alternate;pointer-events:none}
@keyframes drift{to{transform:translate(6%,8%) rotate(6deg)}}

@media(prefers-reduced-motion:reduce){
  .intro{display:none}
  .cur,.cur2{display:none!important}
  body,a,button{cursor:auto!important}
  .kinetic .row{animation:none!important}
  .lit{color:inherit}
  h2.in .w{animation:none}
}

/* ===================== SCROLL SCRUB ===================== */
/* Sezioni impilate come carte */
main>section:not(.hero):not(.full):not(.band){border-radius:36px 36px 0 0;box-shadow:0 -18px 40px rgba(0,0,0,.08);position:relative;z-index:1;margin-top:-36px;padding-top:calc(64px + 36px)}
main>section.frame{border-radius:36px 36px 0 0;margin-top:-36px;position:relative;z-index:1}
.kinetic{position:relative;z-index:2}
@media(max-width:860px){main>section:not(.hero):not(.full):not(.band){border-radius:24px 24px 0 0;margin-top:-24px;padding-top:calc(48px + 24px)}}

/* Hero: scrub */
.hero .wrap>div:first-child{transform:translateY(calc(var(--hp,0) * 120px));opacity:calc(1 - var(--hp,0) * 1.4);will-change:transform,opacity}
.hero .draw{transform:translateY(calc(var(--hp,0) * -60px)) scale(calc(1 - var(--hp,0) * .35)) rotate(calc(var(--hp,0) * 25deg));will-change:transform}

/* Card: volano dalla profondità */
.scrub{opacity:calc(.15 + var(--sp,0) * .85);transform:perspective(900px) translateY(calc((1 - var(--sp,0)) * 110px)) rotateX(calc((1 - var(--sp,0)) * 40deg)) scale(calc(.82 + var(--sp,0) * .18));transform-origin:center top;will-change:transform,opacity}
.scrub.tilt.active{transform:perspective(900px) scale(1.02)}
.step.scrub{transform:perspective(900px) translateX(calc((1 - var(--sp,0)) * -120px)) rotateY(calc((1 - var(--sp,0)) * 35deg)) scale(calc(.85 + var(--sp,0) * .15))}
.news-item.scrub{transform:perspective(900px) translateX(calc((1 - var(--sp,0)) * 140px)) rotateY(calc((1 - var(--sp,0)) * -30deg))}
.quote.scrub{transform:perspective(900px) translateY(calc((1 - var(--sp,0)) * 80px)) rotate(calc((1 - var(--sp,0)) * -6deg)) scale(calc(.9 + var(--sp,0) * .1))}
.feat.scrub{transform:perspective(900px) translateY(calc((1 - var(--sp,0)) * 90px)) rotateX(calc((1 - var(--sp,0)) * -25deg)) scale(calc(.9 + var(--sp,0) * .1));transform-origin:center bottom}
h2.scrub{transform:translateX(calc((1 - var(--sp,0)) * -60px));opacity:calc(.1 + var(--sp,0) * .9)}
.eyebrow.scrub{transform:translateX(calc((1 - var(--sp,0)) * -30px));opacity:var(--sp,0)}
h2.scrub .w{animation:none!important;opacity:1;transform:none}

/* Full screen: zoom che segue lo scroll */
.full:not(.frame) .slide.on img{transform:scale(calc(1.12 - var(--fp,0) * .1))!important;transition:opacity 1.6s ease}
.full .cap{transform:translateY(calc((1 - var(--fp,0)) * 60px))}
.full .cap h2{opacity:calc(var(--fp,0) * 2);letter-spacing:calc((1 - var(--fp,0)) * .3em)}


/* Storia: scorrimento orizzontale bloccato (desktop) */
@media(min-width:861px){
  #storia.hscroll{padding-bottom:0;height:320vh}
  #storia.hscroll .wrap{position:sticky;top:0;height:100vh;display:grid;align-content:center;overflow:hidden;max-width:none;padding:0}
  #storia.hscroll .head{padding:84px 20px 0;max-width:1120px;margin:0 auto;width:100%}
  #storia.hscroll .story{display:flex;gap:28px;margin-top:28px;padding-inline:max(20px,calc((100vw - 1120px)/2));will-change:transform;width:max-content;align-items:stretch}
  #storia.hscroll .timeline{display:contents}
  #storia.hscroll .step{flex:0 0 420px;max-height:60vh;overflow:auto;background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:26px;display:grid;grid-template-columns:52px 1fr;gap:14px;align-content:start}
  #storia.hscroll .quote{flex:0 0 520px;margin-left:20px}
  #storia.hscroll .hint{display:block;padding:10px 20px 0;max-width:1120px;margin:0 auto;width:100%;opacity:.7}
  #storia.hscroll .hprog{height:4px;background:var(--line);border-radius:4px;margin:18px auto 0;max-width:1120px;width:calc(100% - 40px);overflow:hidden}
  #storia.hscroll .hprog i{display:block;height:100%;width:var(--w,0%);background:var(--p);border-radius:4px;transition:width .1s linear}
}

/* Video: cover flow */
.videos{perspective:1200px}
.vid{transform:rotateY(var(--ry,0deg)) scale(var(--sc,1));transform-origin:center;transition:transform .25s ease-out,box-shadow .25s;will-change:transform}

/* Pony sulla barra di avanzamento */
.progress{overflow:visible}
.progress .pony{position:absolute;right:-18px;top:6px;width:36px;height:36px;border-radius:50%;background:#fff;border:3px solid var(--a);box-shadow:0 6px 16px rgba(0,0,0,.25);display:grid;place-items:center;font-size:20px;line-height:1;animation:gallop .5s ease-in-out infinite alternate}
.progress .pony::after{content:"";position:absolute;right:100%;top:50%;width:26px;height:3px;margin-right:4px;border-radius:3px;background:linear-gradient(90deg,transparent,var(--a));transform:translateY(-50%);opacity:.9}
.progress .pony span{display:block;transform:scaleX(-1)}
@keyframes gallop{from{transform:translateY(0) rotate(-4deg)}to{transform:translateY(-4px) rotate(4deg)}}

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

/* Album: foto che si allargano al centro */
.track figure{transition:transform .35s ease,filter .35s ease}
.strip:hover .track figure:not(:hover){filter:saturate(.6) brightness(.85)}
.track figure:hover{transform:scale(1.08) rotate(-1.5deg);z-index:2}

/* Band: parole che rimbalzano al passaggio */
.band h2 .w{display:inline-block;transition:transform .3s cubic-bezier(.2,.9,.3,1.5)}
.band h2 .w:hover{transform:translateY(-8px) rotate(-4deg)}

@media(prefers-reduced-motion:reduce){
  .scrub,.step.scrub,.news-item.scrub,.quote.scrub,.feat.scrub,h2.scrub,.eyebrow.scrub{transform:none!important;opacity:1!important}
  .hero .wrap>div:first-child,.hero .draw,.full .cap,.frame .photo{transform:none!important;opacity:1!important}
  #storia.hscroll{height:auto}#storia.hscroll .wrap{position:static;height:auto}
  .progress .pony{animation:none}
}