/* ===== Logo a livelli + Proposta A (comparsa, costruzione, versioni) ===== */
:root{ --spg:#355C5A; --spb:#E0E1CE; --spw:#FFFFFF; --spp:#F3F3EA; }

/* logo composto da livelli PNG usati come maschere: ogni parte si colora e si anima da sola */
.sp{position:relative;display:block;width:100%}
.sp.full{aspect-ratio:1245/660} .sp.mark{aspect-ratio:362/346} .sp.words{aspect-ratio:1245/250}
.sp i{position:absolute;inset:0;-webkit-mask:var(--m) center/100% 100% no-repeat;mask:var(--m) center/100% 100% no-repeat}
.sp .part{position:absolute}
.sp.full .part.m{left:35.34%;top:.6%;width:29.08%}
.sp.full .part.w{left:0;top:62.12%;width:100%}

/* ---------- comparsa animata ---------- */
.a-hero{position:relative;min-height:100svh;background:var(--spg);overflow:hidden;display:flex;flex-direction:column;justify-content:center;align-items:center;padding:96px var(--pad) 96px var(--left);border-top:0}
.a-hero .kick{position:absolute;left:var(--left);top:clamp(40px,7vh,72px);color:var(--spb);margin:0}
.a-hero .kick+.n{position:absolute;right:var(--pad);top:clamp(40px,7vh,72px);font-weight:500;font-size:clamp(20px,2.3vw,36px);letter-spacing:-.035em;color:var(--spb);opacity:.55}
.a-hero .logo{position:relative;width:min(62vw,860px)}
.guides{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.guides *{fill:none;stroke:var(--spb);stroke-width:1;vector-effect:non-scaling-stroke}
.guides .g{opacity:.16}
.guides .draw{stroke-dasharray:1;stroke-dashoffset:1}
.a-hero.play .guides .draw{animation:draw 2.2s cubic-bezier(.6,0,.2,1) forwards}
.a-hero.play .guides .draw:nth-of-type(2n){animation-delay:.25s}
.a-hero .scroll{position:absolute;left:var(--left);bottom:clamp(24px,5vh,48px);color:#ffffffb3}
@keyframes draw{to{stroke-dashoffset:0}}

/* parti del marchio che si "disegnano" */
.reveal-s,.reveal-p,.reveal-r{clip-path:inset(0 100% 0 0)}
.reveal-p{clip-path:inset(0 0 100% 0)}
.reveal-w{opacity:0;transform:translateY(18px)}
.play .reveal-s{animation:wipeX 1.1s cubic-bezier(.65,0,.25,1) .2s forwards}
.play .reveal-p{animation:wipeY 1.1s cubic-bezier(.65,0,.25,1) .8s forwards}
.play .reveal-r{animation:wipeX 1s cubic-bezier(.65,0,.25,1) 1.35s forwards}
.play .reveal-w{animation:rise .9s cubic-bezier(.2,.7,.2,1) 2s forwards}
.play .reveal-w.t{animation-delay:2.25s}
@keyframes wipeX{to{clip-path:inset(0 0 0 0)}}
@keyframes wipeY{to{clip-path:inset(0 0 0 0)}}
@keyframes rise{to{opacity:1;transform:none}}

/* ---------- come nasce il segno (scorrimento a passi) ---------- */
.story{position:relative;height:420svh;background:var(--spg)}
.story .stick{position:sticky;top:0;height:100svh;display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);align-items:center;gap:clamp(24px,4vw,64px);padding:0 var(--pad) 0 var(--left);overflow:hidden}
.story .stage{position:relative;width:min(100%,520px);justify-self:center}
.story .sp i{transition:opacity .6s ease}
.story .ann{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}
.story .ann *{vector-effect:non-scaling-stroke}
.story .ann g{opacity:0;transition:opacity .3s ease}
.story[data-step="1"] .k-s,.story[data-step="2"] .k-p,.story[data-step="3"] .k-r{opacity:1}
.story .ann .ln{fill:none;stroke:var(--spb);stroke-width:1.5;stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 1s cubic-bezier(.6,0,.2,1)}
.story .ann .dot{fill:var(--spb);opacity:0;transition:opacity .4s ease .7s}
.story .ann .tooth{fill:none;stroke:#F26A1B;stroke-width:2;stroke-dasharray:6 7;opacity:0;transition:opacity .8s ease}
.story .ann text{font-family:Unica,'Helvetica Neue',Helvetica,Arial,sans-serif;font-weight:700;font-size:15px;letter-spacing:-.02em;fill:var(--spb);opacity:0;transition:opacity .5s ease .8s}
.story[data-step="1"] .k-s .ln,.story[data-step="2"] .k-p .ln,.story[data-step="3"] .k-r .ln{stroke-dashoffset:0}
.story[data-step="1"] .k-s .dot,.story[data-step="2"] .k-p .dot,.story[data-step="3"] .k-r .dot,
.story[data-step="1"] .k-s text,.story[data-step="2"] .k-p text,.story[data-step="3"] .k-r text{opacity:1}
.story[data-step="3"] .tooth{opacity:1} .story[data-step="4"] .tooth{opacity:.55}
.story[data-step="1"] .sp i:not(.S),.story[data-step="2"] .sp i:not(.P),.story[data-step="3"] .sp i:not(.R){opacity:.16}
.story .txt{position:relative;min-height:15em}
.story .count{font-weight:500;font-size:clamp(20px,2.3vw,36px);letter-spacing:-.035em;color:var(--spb);opacity:.6;margin-bottom:clamp(12px,1.4vw,20px)}
.story .count b{color:#F26A1B;font-weight:500}
.story .st{position:absolute;left:0;right:0;top:3.2em;opacity:0;transform:translateY(14px);transition:opacity .6s ease,transform .6s ease}
.story .st.on{opacity:1;transform:none}
.story .st h3{font-weight:700;font-size:clamp(40px,5vw,84px);line-height:.95;letter-spacing:-.045em;color:#fff;margin-left:-.03em}
.story .st p{margin-top:clamp(14px,1.6vw,22px);font-size:clamp(18px,1.6vw,24px);line-height:1.22;letter-spacing:-.02em;color:var(--spb);max-width:24ch}
.story .bar{position:absolute;left:var(--left);right:var(--pad);bottom:clamp(24px,5vh,48px);height:2px;background:#ffffff26}
.story .bar i{position:absolute;left:0;top:0;bottom:0;width:0;background:#F26A1B}

/* ---------- versioni e colori ---------- */
.vers{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(16px,1.6vw,24px);margin-top:clamp(40px,5vw,72px)}
.ver{position:relative;aspect-ratio:4/3;border-radius:6px;overflow:hidden;display:flex;align-items:center;justify-content:center}
.ver > .sp{width:58%}
.ver .lab{position:absolute;left:18px;bottom:14px;font-size:15px;letter-spacing:-.01em;opacity:.7}
.ver.pos{background:var(--spp);color:#1c1f1e} .ver.neg{background:var(--spg);color:var(--spb)}
.ver.foto{background:#222 url(img/facciata-pc.jpg) center/cover;color:#fff}
.ver.foto::before{content:"";position:absolute;inset:0;background:rgba(14,14,14,.45)}
.ver.foto > .sp{position:relative}
.ver.icone{background:#1b1b1b;color:#fff;gap:clamp(16px,2.4vw,40px)}
.ver.icone .ic{background:var(--spg);display:flex;align-items:center;justify-content:center;flex:none}
.ver.icone .ic .sp{width:62%}
.pal{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(16px,1.6vw,24px);margin-top:clamp(16px,1.6vw,24px)}
.sw{border-radius:6px;padding:20px;min-height:clamp(120px,12vw,180px);display:flex;flex-direction:column;justify-content:flex-end;font-size:16px;line-height:1.22;letter-spacing:-.01em}
.sw b{font-weight:700;font-size:clamp(20px,1.8vw,28px);letter-spacing:-.03em;display:block;margin-bottom:4px}

/* ---------- apparizione allo scorrimento ---------- */
.rv{opacity:0;transform:translateY(28px);transition:opacity .9s cubic-bezier(.2,.7,.2,1),transform .9s cubic-bezier(.2,.7,.2,1)}
.rv.in{opacity:1;transform:none}
.list li{position:relative;border-top-color:transparent!important}
.list li::before{content:"";position:absolute;left:0;right:0;top:-1px;height:1px;background:var(--line);transform:scaleX(0);transform-origin:left;transition:transform 1.1s cubic-bezier(.6,0,.2,1)}
.list li.in::before{transform:none}

/* faccina Ikone in trasparenza */
#ikone{position:relative;overflow:hidden}
#ikone > *{position:relative}
#ikone .faccina{position:absolute;right:-6vw;top:50%;width:min(52vw,760px);aspect-ratio:240/242;transform:translateY(-50%);opacity:.07;pointer-events:none;
  background:#F26A1B;-webkit-mask:url(ikone-faccina.svg) center/contain no-repeat;mask:url(ikone-faccina.svg) center/contain no-repeat;animation:float 14s ease-in-out infinite}
@keyframes float{0%,100%{transform:translateY(-50%) rotate(-3deg)}50%{transform:translateY(calc(-50% - 18px)) rotate(3deg)}}

/* movimento leggero sull'apertura */
.cover .bg{animation:kb 14s ease-out forwards;transform-origin:70% 50%}
@keyframes kb{from{transform:scale(1.08)}to{transform:scale(1)}}

@media (max-width:760px){
  .a-hero .logo{width:86vw}
  .story .stick{grid-template-columns:1fr;align-content:center;gap:28px;padding:0 24px 0 var(--left)}
  .story .stage{width:min(76vw,340px)}
  .story .txt{min-height:11em}
  .story .st h3{font-size:clamp(34px,10vw,48px)}
  .vers,.pal{grid-template-columns:1fr}
  #ikone .faccina{width:90vw;right:-30vw;top:30%}
}
@media (prefers-reduced-motion:reduce){
  .rv,.reveal-s,.reveal-p,.reveal-r,.reveal-w{opacity:1!important;transform:none!important;clip-path:none!important;animation:none!important}
  .cover .bg,#ikone .faccina{animation:none}
}
/* retro del biglietto: solo il marchio, il nome è già scritto sotto */
.bc .f2 .bc-mark{display:block;width:16%}
.bc .f2 .bc-mark .lg{width:100%}
/* mockup fotografici */
.mf{position:relative;aspect-ratio:2048/1152;border-radius:6px;overflow:hidden;background:#ddd6cb}
.mf-bg{position:absolute;inset:0;width:100%;height:100%;display:block}
.mf-el{position:absolute;left:0;top:0;transform-origin:0 0;display:flex;align-items:center;justify-content:center}
.mf-c{display:block}
.mf-ink{mix-blend-mode:multiply;opacity:.93}
.mf-fillq{background:#355C5A;mix-blend-mode:multiply}
.mf-light{opacity:.94}
.mf-note{position:absolute;left:1.6%;bottom:2.6%;font-size:clamp(11px,1vw,14px);letter-spacing:-.01em;color:#fff;background:rgba(18,18,18,.55);padding:4px 10px;border-radius:99px}
.mf-fillb{background:#183F3F} .mf-dot{background:#F1CFBE;border-radius:50%}
.mf-round{border-radius:48px}