/* =========================================================
   F.ARTE — Gesto ceramico
   Nero materico + i colori delle opere di Paolo Nannini
   ========================================================= */

@font-face{font-family:"Bodoni Moda";font-weight:500;font-style:normal;font-display:swap;src:url(../fonts/bodoni-moda-latin-500-normal.woff2) format("woff2")}
@font-face{font-family:"Bodoni Moda";font-weight:600;font-style:normal;font-display:swap;src:url(../fonts/bodoni-moda-latin-600-normal.woff2) format("woff2")}
@font-face{font-family:"Bodoni Moda";font-weight:500;font-style:italic;font-display:swap;src:url(../fonts/bodoni-moda-latin-500-italic.woff2) format("woff2")}
@font-face{font-family:"Cormorant Garamond";font-weight:400;font-style:italic;font-display:swap;src:url(../fonts/cormorant-garamond-latin-400-italic.woff2) format("woff2")}
@font-face{font-family:"Cormorant Garamond";font-weight:500;font-style:italic;font-display:swap;src:url(../fonts/cormorant-garamond-latin-500-italic.woff2) format("woff2")}
@font-face{font-family:"Cormorant Garamond";font-weight:500;font-style:normal;font-display:swap;src:url(../fonts/cormorant-garamond-latin-500-normal.woff2) format("woff2")}
@font-face{font-family:"Jost";font-weight:400;font-style:normal;font-display:swap;src:url(../fonts/jost-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:"Jost";font-weight:500;font-style:normal;font-display:swap;src:url(../fonts/jost-latin-500-normal.woff2) format("woff2")}
@font-face{font-family:"Jost";font-weight:600;font-style:normal;font-display:swap;src:url(../fonts/jost-latin-600-normal.woff2) format("woff2")}

:root{
  --nero:#0e0b09;
  --carbone:#1a1410;
  --avorio:#f2eadc;
  --sabbia:#cbbfab;
  --rosso:#d7372a;
  --ocra:#d99a3b;
  --giallo:#f2bc3d;
  --blu:#4a72de;
  --blu-chiaro:#aab9f0;
  --linea:rgba(242,234,220,.14);
  --ease:cubic-bezier(.2,.7,.2,1);
  --f-display:"Bodoni Moda","Didot","Times New Roman",serif;
  --f-corsivo:"Cormorant Garamond","Georgia",serif;
  --f-testo:"Jost","Helvetica Neue",Arial,sans-serif;
  --wrap:min(1180px,calc(100% - 2.5rem));
  --h-header:76px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth;background:var(--nero);-webkit-text-size-adjust:100%}
body{
  margin:0;color:var(--avorio);font:400 1.0625rem/1.68 var(--f-testo);
  overflow-x:hidden;min-height:100vh;position:relative;
}
/* sfondo materico fisso */
body::before{
  content:"";position:fixed;inset:0;z-index:-2;
  background:var(--nero) url(../img/materico.webp) center/cover no-repeat;
}
body::after{
  content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:
    radial-gradient(120% 80% at 50% 110%,rgba(217,154,59,.16),transparent 60%),
    linear-gradient(180deg,rgba(14,11,9,.55),rgba(14,11,9,.25) 40%,rgba(14,11,9,.55));
}
img{max-width:100%;display:block}
a{color:inherit}
::selection{background:var(--ocra);color:var(--nero)}
:focus-visible{outline:2px solid var(--giallo);outline-offset:4px;border-radius:2px}

.wrap{width:var(--wrap);margin-inline:auto}
.skip{position:absolute;left:-999px;top:0;background:var(--avorio);color:var(--nero);padding:.7rem 1rem;z-index:200}
.skip:focus{left:1rem;top:1rem}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------- tipografia ---------- */
.display{font-family:var(--f-display);font-weight:500;letter-spacing:-.012em;line-height:1.04;margin:0;text-wrap:balance}
.display--xl{font-size:clamp(2.5rem,6.4vw,5.6rem)}
.display--l{font-size:clamp(2.1rem,4.6vw,3.9rem)}
.display--m{font-size:clamp(1.6rem,3vw,2.4rem)}
.display em,.corsivo{font-family:var(--f-corsivo);font-style:italic;font-weight:500;letter-spacing:0}
.corsivo{color:var(--blu-chiaro)}
.eyebrow{
  display:inline-flex;align-items:center;gap:.7rem;margin:0 0 1.4rem;
  font:500 .78rem/1 var(--f-testo);letter-spacing:.26em;text-transform:uppercase;color:var(--ocra);
}
.eyebrow::before{
  content:"";width:.5rem;height:.5rem;border-radius:50%;background:var(--ocra);
  box-shadow:0 0 12px 2px rgba(217,154,59,.7);
}
.lead{font-size:clamp(1.1rem,1.6vw,1.3rem);color:var(--avorio);max-width:46ch}
.muted{color:var(--sabbia)}
p{margin:0 0 1.1em}
.prose p{max-width:58ch}

/* ---------- header ---------- */
.site-header{
  position:fixed;inset:0 0 auto 0;z-index:100;height:var(--h-header);
  display:flex;align-items:center;transition:background .4s,border-color .4s,transform .5s var(--ease);
  border-bottom:1px solid transparent;
}
.site-header.scrolled{background:rgba(14,11,9,.78);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-color:var(--linea)}
.site-header .wrap{display:flex;align-items:center;justify-content:space-between;gap:2rem}
.brand{display:flex;align-items:baseline;gap:.7rem;text-decoration:none}
.brand b{font:600 1.7rem/1 var(--f-display);letter-spacing:.01em}
.brand b i{font-style:normal;color:var(--ocra);display:inline-block;transform:translateY(-.06em);text-shadow:0 0 14px rgba(217,154,59,.9)}
.brand span{font:italic 500 1.05rem/1 var(--f-corsivo);color:var(--blu-chiaro)}
.nav{display:flex;align-items:center;gap:clamp(1.1rem,2.4vw,2.2rem)}
.nav a{position:relative;text-decoration:none;font:500 .82rem/1 var(--f-testo);letter-spacing:.16em;text-transform:uppercase;padding:.6rem 0;color:var(--avorio);opacity:.82;transition:opacity .3s}
.nav a:hover,.nav a[aria-current="page"]{opacity:1}
.nav a::after{
  content:"";position:absolute;left:50%;bottom:-3px;width:6px;height:6px;border-radius:50%;
  background:var(--ocra);box-shadow:0 0 10px 2px rgba(217,154,59,.8);
  transform:translateX(-50%) scale(0);transition:transform .45s var(--ease);
}
.nav a:hover::after,.nav a[aria-current="page"]::after{transform:translateX(-50%) scale(1)}
.nav a.nav-cta{
  opacity:1;padding:.8rem 1.25rem;border:1px solid rgba(242,234,220,.45);border-radius:99px;
  transition:background .35s,color .35s,border-color .35s;
}
.nav a.nav-cta::after{display:none}
.nav a.nav-cta:hover,.nav a.nav-cta[aria-current="page"]{background:var(--avorio);color:var(--nero);border-color:var(--avorio)}
.burger{display:none;width:46px;height:46px;border:1px solid var(--linea);border-radius:50%;background:rgba(14,11,9,.4);color:var(--avorio);cursor:pointer;position:relative}
.burger i{position:absolute;left:14px;right:14px;height:1.5px;background:currentColor;transition:transform .4s var(--ease),opacity .3s}
.burger i:nth-child(1){top:18px}.burger i:nth-child(2){top:27px}
.menu-open .burger i:nth-child(1){transform:translateY(4.5px) rotate(45deg)}
.menu-open .burger i:nth-child(2){transform:translateY(-4.5px) rotate(-45deg)}

@media (max-width:920px){
  .burger{display:block;z-index:130}
  .brand span{display:none}
  .nav{
    position:fixed;inset:0;z-index:120;flex-direction:column;justify-content:center;align-items:flex-start;gap:.4rem;
    padding:6rem 2rem 3rem;background:rgba(14,11,9,.97);
    clip-path:circle(0 at calc(100% - 2.5rem) 2.4rem);transition:clip-path .7s var(--ease);visibility:hidden;
  }
  .menu-open .nav{clip-path:circle(150% at calc(100% - 2.5rem) 2.4rem);visibility:visible}
  .nav a{font:500 clamp(2rem,9vw,3rem)/1.15 var(--f-display);letter-spacing:0;text-transform:none;opacity:0;transform:translateY(18px);transition:opacity .5s,transform .6s var(--ease)}
  .menu-open .nav a{opacity:1;transform:none}
  .menu-open .nav a:nth-child(1){transition-delay:.18s}.menu-open .nav a:nth-child(2){transition-delay:.24s}
  .menu-open .nav a:nth-child(3){transition-delay:.30s}.menu-open .nav a:nth-child(4){transition-delay:.36s}
  .menu-open .nav a:nth-child(5){transition-delay:.42s}.menu-open .nav a:nth-child(6){transition-delay:.48s}
  .nav a.nav-cta{margin-top:1.4rem;font:500 1rem/1 var(--f-testo);letter-spacing:.16em;text-transform:uppercase}
  .nav a::after{bottom:.15em;left:-1.1rem;transform:translateY(0) scale(0)}
  .nav a:hover::after,.nav a[aria-current="page"]::after{transform:scale(1)}
  body.menu-open{overflow:hidden}
}

/* ---------- bottoni ---------- */
.btn{
  --bg:var(--avorio);--fg:var(--nero);
  display:inline-flex;align-items:center;gap:.8rem;padding:1.05rem 1.7rem;border-radius:99px;border:1px solid var(--avorio);
  background:var(--bg);color:var(--fg);text-decoration:none;font:500 .86rem/1 var(--f-testo);letter-spacing:.16em;text-transform:uppercase;
  position:relative;overflow:hidden;cursor:pointer;isolation:isolate;
  transition:transform .4s var(--ease),color .4s,border-color .4s;
}
.btn::before{
  content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(100deg,var(--rosso),var(--ocra),var(--giallo));
  transform:translateX(-101%);transition:transform .6s var(--ease);
}
.btn:hover{transform:translateY(-2px);color:var(--nero);border-color:transparent}
.btn:hover::before{transform:none}
.btn .arr{transition:transform .4s var(--ease)}
.btn:hover .arr{transform:translateX(5px)}
.btn--ghost{--bg:transparent;--fg:var(--avorio);border-color:rgba(242,234,220,.5)}
.btn--ghost:hover{color:var(--nero)}

/* ---------- sezioni ---------- */
.section{padding:clamp(4.5rem,10vw,9rem) 0;position:relative}
.section--tight{padding:clamp(3rem,6vw,5rem) 0}
.band{background:rgba(14,11,9,.62);border-block:1px solid var(--linea);backdrop-filter:blur(2px)}
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,6vw,6rem);align-items:center}
.split--top{align-items:start}
@media (max-width:860px){.split{grid-template-columns:1fr}}
.head{max-width:62rem;margin-bottom:clamp(2.4rem,5vw,4rem)}

/* reveal */
.js .reveal{opacity:0;transform:translateY(34px);transition:opacity 1s var(--ease),transform 1.1s var(--ease);transition-delay:var(--d,0s)}
.js .reveal.in{opacity:1;transform:none}
.js .reveal--blur{filter:blur(10px)}
.js .reveal--blur.in{filter:none}

/* page enter/leave */
@keyframes pageIn{from{opacity:0}to{opacity:1}}
body{animation:pageIn .7s var(--ease) both}
body.is-leaving{opacity:0;transition:opacity .28s ease}

/* ---------- hero (home) ---------- */
.hero{
  min-height:100svh;display:grid;place-items:center;text-align:center;position:relative;
  padding:calc(var(--h-header) + 2rem) 0 5.5rem;overflow:hidden;
}
.hero canvas{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.hero::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(520px circle at var(--mx,50%) var(--my,62%),rgba(217,154,59,.2),rgba(215,55,42,.08) 45%,transparent 70%);
  transition:background .2s;
}
.hero-inner{position:relative;z-index:2;width:var(--wrap)}
.hero-kicker{margin:0 0 clamp(1.4rem,4vh,2.6rem)}
.lockup{
  --lh:min(clamp(120px,31vh,330px),calc((100vw - 2.5rem)/3.2));
  display:flex;justify-content:center;align-items:flex-end;gap:calc(var(--lh)*.012);height:var(--lh);margin:0 auto;
  perspective:900px;
}
.lockup .lt{height:100%;display:block;flex:none}
.lockup .lt img{height:100%;width:auto;max-width:none}
.lockup .dot{flex:none;height:calc(var(--lh)*.2);margin:0 calc(var(--lh)*-.1288) 0 calc(var(--lh)*-.0224);display:block;position:relative;align-self:center}
.lockup .dot img{height:100%;width:auto}
.lockup .dot::after{content:"";position:absolute;inset:-70%;border-radius:50%;background:radial-gradient(circle,rgba(242,188,61,.55),transparent 65%);opacity:0;pointer-events:none}
.lockup .dot.in::after{animation:spark 1.6s ease-out 1}
.lockup.done .dot::after{animation:pulse 3.4s ease-in-out infinite}
@keyframes spark{0%{opacity:0;transform:scale(.2)}25%{opacity:1}100%{opacity:0;transform:scale(2.2)}}
@keyframes pulse{0%,100%{opacity:.0;transform:scale(.7)}50%{opacity:.75;transform:scale(1.15)}}
.js .lockup .lt,.js .lockup .dot{opacity:0;transform:translateY(46px) scale(.94);filter:blur(16px);transition:opacity 1s var(--ease),transform 1.2s var(--ease),filter 1s var(--ease)}
.js .lockup .in{opacity:1;transform:none;filter:none}
.lockup.done .lt img{animation:breathe 6s ease-in-out infinite}
.lockup.done .lt:nth-of-type(2) img{animation-delay:-1.2s}.lockup.done .lt:nth-of-type(3) img{animation-delay:-2.4s}
.lockup.done .lt:nth-of-type(4) img{animation-delay:-3.6s}.lockup.done .lt:nth-of-type(5) img{animation-delay:-4.8s}
@keyframes breathe{0%,100%{filter:brightness(1)}50%{filter:brightness(1.18) saturate(1.15)}}

.hero-word{
  height:2.4rem;margin:1.6rem 0 0;font:italic 500 clamp(1.4rem,2.4vw,2rem)/1 var(--f-corsivo);letter-spacing:.34em;text-transform:uppercase;color:var(--ocra);
  transition:opacity .35s;
}
.hero-word.swap{opacity:0}
.hero-final{margin-top:.4rem}
.js .hero-final > *{opacity:0;transform:translateY(22px);transition:opacity 1s var(--ease),transform 1s var(--ease)}
.js .hero-final.in > *{opacity:1;transform:none}
.js .hero-final.in > *:nth-child(2){transition-delay:.15s}.js .hero-final.in > *:nth-child(3){transition-delay:.3s}.js .hero-final.in > *:nth-child(4){transition-delay:.45s}
.gesto{font:italic 400 clamp(2rem,4.2vw,3.4rem)/1.1 var(--f-corsivo);color:var(--blu-chiaro);margin:0}
.claim{font:400 .8rem/1.4 var(--f-testo);letter-spacing:.3em;text-transform:uppercase;color:var(--sabbia);margin:.5rem 0 2rem}
.hero-cta{display:flex;gap:1rem;justify-content:center;flex-wrap:wrap}
.hero-meta{margin:2.4rem 0 0;display:inline-flex;align-items:center;gap:.9rem;font-size:.92rem;color:var(--sabbia)}
.hero-meta img{height:34px;width:auto}
.scroll-hint{
  position:absolute;left:50%;bottom:1.6rem;z-index:2;width:1px;height:54px;background:linear-gradient(var(--ocra),transparent);transform-origin:top;
  animation:drip 2.4s ease-in-out infinite;
}
@keyframes drip{0%{transform:scaleY(0)}50%{transform:scaleY(1)}100%{transform:scaleY(1);opacity:0}}

/* ---------- ticker ---------- */
.ticker{overflow:hidden;border-block:1px solid var(--linea);background:rgba(14,11,9,.6);padding:1.2rem 0;display:flex}
.ticker-track{display:flex;flex:none;align-items:center;gap:2.4rem;padding-right:2.4rem;animation:marquee 46s linear infinite;white-space:nowrap}
.ticker:hover .ticker-track{animation-play-state:paused}
.ticker span{font:italic 500 clamp(1.4rem,2.6vw,2.2rem)/1 var(--f-display);color:var(--avorio)}
.ticker span:nth-child(4n+1){color:var(--giallo)}
.ticker i{width:9px;height:9px;border-radius:50%;background:var(--rosso);box-shadow:0 0 12px 2px rgba(215,55,42,.7);flex:none}
@keyframes marquee{to{transform:translateX(-100%)}}

/* ---------- enunciato ---------- */
.statement{font-family:var(--f-display);font-weight:500;font-size:clamp(1.9rem,4.4vw,3.8rem);line-height:1.14;letter-spacing:-.01em;max-width:24ch;margin:0 0 2.4rem}
.js .scrub .w{opacity:.16;transition:opacity .35s}
.js .scrub .w.on{opacity:1}
.statement .hl{color:var(--giallo)}

/* ---------- contatori ---------- */
.counters{display:grid;grid-template-columns:repeat(4,1fr);gap:0}
.counter{padding:2.2rem 1.4rem;border-left:1px solid var(--linea)}
.counter:first-child{border-left:0}
.counter b{display:block;font:500 clamp(3.2rem,7vw,6rem)/1 var(--f-display);color:var(--avorio);letter-spacing:-.02em}
.counter span{display:block;margin-top:.7rem;font:500 .8rem/1.4 var(--f-testo);letter-spacing:.22em;text-transform:uppercase;color:var(--sabbia)}
@media (max-width:760px){.counters{grid-template-columns:1fr 1fr}.counter:nth-child(3){border-left:0}.counter:nth-child(n+3){border-top:1px solid var(--linea)}}

/* ---------- valori (tab) ---------- */
.values{display:grid;grid-template-columns:minmax(220px,.8fr) 1.2fr;gap:clamp(2rem,6vw,5rem);align-items:center}
.values-stage{position:relative;aspect-ratio:1/1.15;display:grid;place-items:center}
.values-stage::before{content:"";position:absolute;inset:8%;border-radius:50%;background:radial-gradient(circle,rgba(217,154,59,.28),transparent 68%);filter:blur(6px);animation:pulse2 5s ease-in-out infinite}
@keyframes pulse2{0%,100%{transform:scale(.92);opacity:.7}50%{transform:scale(1.06);opacity:1}}
.values-stage img{position:absolute;max-height:88%;width:auto;opacity:0;transform:translateY(24px) scale(.96);filter:blur(10px);transition:opacity .7s var(--ease),transform .9s var(--ease),filter .7s var(--ease)}
.values-stage img.on{opacity:1;transform:none;filter:none}
.tabs{display:flex;gap:.6rem;margin:0 0 2rem;flex-wrap:wrap}
.tab{
  border:1px solid var(--linea);background:transparent;color:var(--avorio);border-radius:99px;padding:.7rem 1.15rem;cursor:pointer;
  font:500 .78rem/1 var(--f-testo);letter-spacing:.18em;text-transform:uppercase;transition:background .3s,color .3s,border-color .3s;
}
.tab:hover{border-color:var(--ocra)}
.tab[aria-selected="true"]{background:var(--avorio);color:var(--nero);border-color:var(--avorio)}
.tab-progress{display:block;height:2px;margin-top:-1.2rem;margin-bottom:2rem;background:var(--linea);overflow:hidden}
.tab-progress i{display:block;height:100%;width:100%;background:linear-gradient(90deg,var(--rosso),var(--ocra),var(--giallo));transform:scaleX(0);transform-origin:left}
.tab-progress i.run{animation:fill 5.5s linear forwards}
@keyframes fill{to{transform:scaleX(1)}}
.js .panel:not(.on){display:none}
.panel{animation:panelIn .8s var(--ease) both}
@keyframes panelIn{from{opacity:0;transform:translateY(16px)}}
.panel h3{margin:0 0 .4rem;font:500 clamp(2.2rem,4.4vw,3.6rem)/1.05 var(--f-display)}
.panel .val{font:italic 500 1.5rem/1.2 var(--f-corsivo);color:var(--ocra);margin:0 0 1.3rem}
@media (max-width:860px){.values{grid-template-columns:1fr}.values-stage{aspect-ratio:auto;height:290px}}

/* ---------- prima / ora ---------- */
.ba{position:relative;max-width:520px;width:100%;margin-inline:auto;aspect-ratio:3/4;overflow:hidden;border-radius:4px;user-select:none;box-shadow:0 30px 80px -20px rgba(0,0,0,.8);border:1px solid var(--linea)}
.ba img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.ba .top{position:absolute;inset:0;clip-path:inset(0 calc(100% - var(--p,50%)) 0 0)}
.ba .bar{position:absolute;top:0;bottom:0;left:var(--p,50%);width:2px;background:var(--avorio);transform:translateX(-1px);pointer-events:none;box-shadow:0 0 14px rgba(0,0,0,.6)}
.ba .knob{position:absolute;top:50%;left:var(--p,50%);width:54px;height:54px;border-radius:50%;background:var(--avorio);color:var(--nero);display:grid;place-items:center;transform:translate(-50%,-50%);pointer-events:none;font-size:1rem;letter-spacing:.1em;box-shadow:0 10px 30px rgba(0,0,0,.6)}
.ba input{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:ew-resize;margin:0}
.ba input:focus-visible + .bar{box-shadow:0 0 0 3px var(--giallo)}
.ba .tag{position:absolute;bottom:1rem;padding:.45rem .8rem;background:rgba(14,11,9,.72);border-radius:99px;font:500 .7rem/1 var(--f-testo);letter-spacing:.16em;text-transform:uppercase;pointer-events:none}
.ba .tag.l{left:1rem}.ba .tag.r{right:1rem}
.ba-cap{max-width:520px;margin:1rem auto 0;text-align:center;font:italic 400 1.15rem/1.4 var(--f-corsivo);color:var(--sabbia)}

/* ---------- tre direzioni ---------- */
.dirs{display:grid;grid-template-columns:repeat(3,1fr);gap:1.4rem;position:relative}
.dir{
  position:relative;padding:2.4rem 2rem 2.2rem;border:1px solid var(--linea);border-radius:6px;background:rgba(20,15,12,.66);overflow:hidden;isolation:isolate;
  transition:transform .6s var(--ease),border-color .4s;
}
.dir::before,.glowcard::before{
  content:"";position:absolute;inset:0;z-index:-1;opacity:0;transition:opacity .4s;
  background:radial-gradient(380px circle at var(--mx,50%) var(--my,50%),rgba(217,154,59,.22),transparent 65%);
}
.dir:hover::before,.glowcard:hover::before{opacity:1}
.dir:hover{transform:translateY(-6px);border-color:rgba(217,154,59,.55)}
.dir .n{display:block;font:500 clamp(4rem,7vw,6rem)/1 var(--f-display);color:transparent;-webkit-text-stroke:1.2px var(--ocra);margin-bottom:1.2rem}
.dir h3{margin:0 0 .8rem;font:500 1.8rem/1.1 var(--f-display)}
.dir p{margin:0;color:var(--sabbia)}
.dirs-line{height:2px;margin-top:2.4rem;background:var(--linea);position:relative;overflow:hidden}
.dirs-line i{position:absolute;inset:0;background:linear-gradient(90deg,var(--rosso),var(--ocra),var(--giallo));transform:scaleX(0);transform-origin:left;transition:transform 2.2s var(--ease)}
.dirs-line.in i{transform:none}
@media (max-width:860px){.dirs{grid-template-columns:1fr}}

/* ---------- CTA finale ---------- */
.cta{text-align:center;padding:clamp(5rem,12vw,10rem) 0;position:relative;overflow:hidden}
.cta .display{max-width:16ch;margin-inline:auto}
.cta p{max-width:48ch;margin:1.6rem auto 2.4rem;color:var(--sabbia)}
.cta::before{content:"";position:absolute;left:50%;top:50%;width:70vmin;height:70vmin;transform:translate(-50%,-50%);border-radius:50%;background:radial-gradient(circle,rgba(215,55,42,.18),rgba(217,154,59,.08) 45%,transparent 70%);animation:pulse2 7s ease-in-out infinite;pointer-events:none}
.cta > *{position:relative}
.dateline{display:inline-flex;gap:.8rem;align-items:center;font:500 .8rem/1 var(--f-testo);letter-spacing:.24em;text-transform:uppercase;color:var(--giallo)}

/* ---------- page hero (pagine interne) ---------- */
.phero{padding:calc(var(--h-header) + clamp(4rem,10vw,8rem)) 0 clamp(3rem,6vw,5rem);position:relative;overflow:hidden}
.phero canvas{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;opacity:.8}
.phero .wrap{position:relative}
.phero .lead{margin-top:1.8rem}
.breadcrumb{font:500 .75rem/1 var(--f-testo);letter-spacing:.2em;text-transform:uppercase;color:var(--sabbia);margin-bottom:2rem}
.breadcrumb a{text-decoration:none}.breadcrumb a:hover{color:var(--ocra)}

/* ---------- formula del nome ---------- */
.formula{display:flex;flex-wrap:wrap;align-items:baseline;gap:.4em 1.1rem;font:500 clamp(2rem,5.6vw,4.8rem)/1.1 var(--f-display)}
.formula .op{color:var(--ocra);font-family:var(--f-corsivo);font-style:italic}
.formula .res{background:linear-gradient(100deg,var(--rosso),var(--ocra) 50%,var(--giallo));-webkit-background-clip:text;background-clip:text;color:transparent}

/* attributi */
.attrs{display:grid;grid-template-columns:repeat(4,1fr);gap:1.2rem}
.attr{padding:1.6rem 1.4rem;border-top:1px solid var(--ocra)}
.attr b{display:block;font:500 1.55rem/1.1 var(--f-display);margin-bottom:.5rem}
.attr span{color:var(--sabbia);font-size:.95rem;line-height:1.5;display:block}
@media (max-width:860px){.attrs{grid-template-columns:1fr 1fr}}

/* lettere estese */
.lettera{display:grid;grid-template-columns:minmax(150px,.55fr) 1fr;gap:clamp(1.5rem,5vw,5rem);align-items:center;padding:clamp(2.4rem,5vw,4.4rem) 0;border-top:1px solid var(--linea)}
.lettera:nth-child(even){grid-template-columns:1fr minmax(150px,.55fr)}
.lettera:nth-child(even) .lettera-img{order:2}
.lettera-img{display:grid;place-items:center;position:relative}
.lettera-img::before{content:"";position:absolute;width:90%;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,rgba(217,154,59,.22),transparent 68%)}
.lettera-img img{height:clamp(220px,36vw,380px);width:auto;position:relative;transition:transform 1.2s var(--ease)}
.lettera:hover .lettera-img img{transform:rotate(-2deg) scale(1.04)}
.lettera h3{margin:0;font:500 clamp(2.4rem,5vw,4rem)/1.05 var(--f-display)}
.lettera .val{font:italic 500 1.6rem/1.2 var(--f-corsivo);color:var(--ocra);margin:.4rem 0 1.2rem}
@media (max-width:700px){.lettera,.lettera:nth-child(even){grid-template-columns:1fr}.lettera:nth-child(even) .lettera-img{order:0}.lettera-img img{height:230px}}

/* scintilla */
.scintilla{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,6vw,6rem);align-items:center}
.spark-demo{position:relative;display:grid;place-items:center;min-height:320px;border:1px solid var(--linea);border-radius:6px;background:rgba(14,11,9,.55);cursor:pointer;overflow:hidden}
.spark-demo canvas{position:absolute;inset:0;width:100%;height:100%}
.spark-demo .row{position:relative;display:flex;align-items:center;gap:1.2rem;font:500 clamp(1.4rem,3.4vw,2.4rem)/1 var(--f-display);letter-spacing:.08em}
.spark-demo .pt{width:22px;height:22px;border-radius:50%;background:radial-gradient(circle at 35% 35%,#fff3c2,var(--giallo) 40%,var(--rosso));box-shadow:0 0 28px 8px rgba(242,188,61,.6);animation:pt 2.8s ease-in-out infinite}
@keyframes pt{0%,100%{transform:scale(.85)}50%{transform:scale(1.3)}}
.spark-demo small{position:absolute;bottom:1rem;left:0;right:0;text-align:center;font:italic 400 1rem/1 var(--f-corsivo);color:var(--sabbia)}
@media (max-width:860px){.scintilla{grid-template-columns:1fr}}

/* colori */
.mix{position:relative;height:clamp(240px,34vw,380px);display:flex;justify-content:center;align-items:center;margin-bottom:2.4rem}
.blob{position:absolute;width:clamp(150px,24vw,270px);aspect-ratio:1;border-radius:50%;mix-blend-mode:lighten;filter:blur(1px);opacity:.9;transition:transform .8s var(--ease)}
.blob.b1{background:radial-gradient(circle at 40% 35%,#ff6a55,var(--rosso) 55%,#8c1f16);--x:-30%;animation:drift1 14s ease-in-out infinite}
.blob.b2{background:radial-gradient(circle at 40% 35%,#ffcc7a,var(--ocra) 55%,#8a5a1c);--x:-15%;animation:drift2 17s ease-in-out infinite}
.blob.b3{background:radial-gradient(circle at 40% 35%,#8aa6ff,#2347b5 55%,#13287a);--x:0%;animation:drift1 19s ease-in-out infinite reverse}
.blob.b4{background:radial-gradient(circle at 40% 35%,#fff8ea,var(--avorio) 55%,#bcae93);--x:15%;animation:drift2 16s ease-in-out infinite reverse}
.blob.b5{background:radial-gradient(circle at 40% 35%,#fff0a8,var(--giallo) 55%,#a87a12);--x:30%;animation:drift1 21s ease-in-out infinite}
.blob{transform:translateX(var(--x))}
@keyframes drift1{0%,100%{transform:translate(var(--x),0) scale(1)}50%{transform:translate(calc(var(--x) + 8%),-10%) scale(1.08)}}
@keyframes drift2{0%,100%{transform:translate(var(--x),0) scale(1)}50%{transform:translate(calc(var(--x) - 8%),9%) scale(.94)}}
.swatches{display:grid;grid-template-columns:repeat(5,1fr);gap:1rem}
.swatch{padding-top:1rem;border-top:3px solid var(--c)}
.swatch b{display:block;font:500 1.3rem/1.1 var(--f-display);letter-spacing:.04em;text-transform:uppercase}
.swatch span{display:block;font:italic 500 1.35rem/1.3 var(--f-corsivo);color:var(--sabbia);margin-top:.3rem}
@media (max-width:760px){.swatches{grid-template-columns:repeat(2,1fr)}}

/* ---------- elenchi ---------- */
.checks{list-style:none;padding:0;margin:0 0 1.4rem;display:grid;gap:.9rem}
.checks li{padding-left:2rem;position:relative}
.checks li::before{content:"";position:absolute;left:.2rem;top:.62em;width:.55rem;height:.55rem;border-radius:50%;background:var(--ocra);box-shadow:0 0 10px 2px rgba(217,154,59,.7)}
.finalita{display:grid;grid-template-columns:repeat(3,1fr);gap:1.2rem;counter-reset:f}
.fin{counter-increment:f;padding:1.8rem 1.6rem;border:1px solid var(--linea);border-radius:6px;background:rgba(20,15,12,.55);position:relative;overflow:hidden;isolation:isolate;transition:transform .5s var(--ease),border-color .4s}
.fin::after{content:"0" counter(f);position:absolute;right:1rem;top:.4rem;font:500 3.4rem/1 var(--f-display);color:rgba(242,234,220,.07)}
.fin:hover{transform:translateY(-4px);border-color:rgba(217,154,59,.5)}
.fin p{margin:0}
@media (max-width:860px){.finalita{grid-template-columns:1fr}}

/* timeline */
.timeline{list-style:none;margin:0;padding:0 0 0 2rem;position:relative}
.timeline::before{content:"";position:absolute;left:.55rem;top:.6rem;bottom:.6rem;width:2px;background:var(--linea)}
.timeline::after{content:"";position:absolute;left:.55rem;top:.6rem;width:2px;height:var(--prog,0%);background:linear-gradient(var(--rosso),var(--ocra));transition:height 2.4s var(--ease);max-height:calc(100% - 1.2rem)}
.timeline li{position:relative;padding:0 0 2.2rem}
.timeline li::before{content:"";position:absolute;left:-1.78rem;top:.45rem;width:.9rem;height:.9rem;border-radius:50%;background:var(--nero);border:2px solid var(--sabbia)}
.timeline li.done::before{background:var(--ocra);border-color:var(--ocra);box-shadow:0 0 14px 3px rgba(217,154,59,.7)}
.timeline li.next::before{border-color:var(--giallo);animation:pt 2.4s ease-in-out infinite}
.timeline b{display:block;font:500 1.5rem/1.2 var(--f-display)}
.timeline span{color:var(--sabbia)}
.timeline small{display:block;font:500 .72rem/1 var(--f-testo);letter-spacing:.22em;text-transform:uppercase;color:var(--ocra);margin-bottom:.5rem}

/* ---------- ritratti ---------- */
.portrait{position:relative;max-width:400px;margin-inline:auto}
.portrait img{width:100%;border-radius:4px;border:1px solid var(--linea);box-shadow:0 30px 80px -20px rgba(0,0,0,.85)}
.portrait::before{content:"";position:absolute;inset:-6% -8% -4% -4%;z-index:-1;background:radial-gradient(circle at 70% 60%,rgba(215,55,42,.35),rgba(217,154,59,.15) 50%,transparent 70%);filter:blur(10px)}
.frame{border-radius:4px;border:1px solid var(--linea);box-shadow:0 30px 80px -20px rgba(0,0,0,.85);max-width:420px;margin-inline:auto;width:100%}
.facts{display:grid;gap:1.4rem;margin:2rem 0 0}
.fact{display:grid;grid-template-columns:7rem 1fr;gap:1.2rem;padding-top:1.2rem;border-top:1px solid var(--linea)}
.fact b{font:500 1.5rem/1.1 var(--f-display);color:var(--giallo)}
.fact span{color:var(--sabbia)}
@media (max-width:560px){.fact{grid-template-columns:1fr;gap:.2rem}}

/* partner */
.partners{display:grid;grid-template-columns:repeat(3,1fr);gap:1.2rem}
.partner{padding:2rem 1.6rem;border:1px solid var(--linea);border-radius:6px;background:rgba(20,15,12,.6);position:relative;overflow:hidden;isolation:isolate}
.partner h3{margin:0 0 .6rem;font:500 1.6rem/1.15 var(--f-display)}
.partner p{margin:0;color:var(--sabbia)}
.partner small{display:block;font:500 .72rem/1 var(--f-testo);letter-spacing:.22em;text-transform:uppercase;color:var(--ocra);margin-bottom:1rem}
@media (max-width:860px){.partners{grid-template-columns:1fr}}
.duo{display:grid;grid-template-columns:1fr 1fr;gap:1.4rem}
.duo > div{padding:2.4rem 2rem;border:1px solid var(--linea);border-radius:6px;background:rgba(14,11,9,.6)}
.duo h3{margin:0 0 .7rem;font:500 1.9rem/1.1 var(--f-display);color:var(--ocra)}
.duo p{margin:0}
@media (max-width:700px){.duo{grid-template-columns:1fr}}

/* ---------- prendi parte ---------- */
.ways{display:grid;grid-template-columns:repeat(3,1fr);gap:1.2rem}
.way{padding:2.2rem 1.8rem;border:1px solid var(--linea);border-radius:6px;background:rgba(20,15,12,.66);position:relative;overflow:hidden;isolation:isolate;transition:transform .5s var(--ease),border-color .4s}
.way:hover{transform:translateY(-5px);border-color:rgba(217,154,59,.5)}
.way .ico{width:54px;height:54px;border-radius:50%;display:grid;place-items:center;margin-bottom:1.4rem;background:linear-gradient(135deg,var(--rosso),var(--ocra));color:var(--nero);font:600 1.3rem/1 var(--f-display)}
.way h3{margin:0 0 .6rem;font:500 1.6rem/1.15 var(--f-display)}
.way p{margin:0;color:var(--sabbia)}
@media (max-width:860px){.ways{grid-template-columns:1fr}}
.form{display:grid;gap:1.2rem;max-width:640px}
.field{display:grid;gap:.5rem}
.field label{font:500 .74rem/1 var(--f-testo);letter-spacing:.22em;text-transform:uppercase;color:var(--ocra)}
.field input,.field select,.field textarea{
  width:100%;padding:1rem 1.1rem;border:1px solid var(--linea);border-radius:4px;background:rgba(14,11,9,.7);color:var(--avorio);
  font:400 1rem/1.4 var(--f-testo);transition:border-color .3s,box-shadow .3s;
}
.field textarea{min-height:150px;resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--ocra);box-shadow:0 0 0 3px rgba(217,154,59,.25)}
.field select option{background:var(--carbone)}
.form-note{font-size:.9rem;color:var(--sabbia);margin:0}
.form-msg{min-height:1.4em;font-weight:500;color:var(--giallo)}
.contacts{list-style:none;margin:0;padding:0;display:grid;gap:.6rem}
.contacts b{font:500 .72rem/1 var(--f-testo);letter-spacing:.2em;text-transform:uppercase;color:var(--ocra);display:block;margin-bottom:.15rem}
.soon{font:italic 400 1.15rem/1.4 var(--f-corsivo);color:var(--sabbia)}

/* ---------- footer ---------- */
.site-footer{border-top:1px solid var(--linea);background:rgba(10,8,6,.82);padding:clamp(3.4rem,7vw,5.5rem) 0 2rem}
.foot{display:grid;grid-template-columns:1.4fr 1fr 1fr 1.2fr;gap:2.4rem}
.foot h4{margin:0 0 1.1rem;font:500 .74rem/1 var(--f-testo);letter-spacing:.24em;text-transform:uppercase;color:var(--ocra)}
.foot ul{list-style:none;margin:0;padding:0;display:grid;gap:.55rem}
.foot a{text-decoration:none;color:var(--sabbia);transition:color .3s}
.foot a:hover{color:var(--avorio)}
.foot .brand-big{font:600 2.6rem/1 var(--f-display)}
.foot .brand-big i{font-style:normal;color:var(--ocra);text-shadow:0 0 18px rgba(217,154,59,.9)}
.foot .tag{font:italic 400 1.35rem/1.3 var(--f-corsivo);color:var(--blu-chiaro);margin:.5rem 0 1.4rem}
.foot .stemma{display:flex;align-items:center;gap:.9rem;color:var(--sabbia);font-size:.92rem}
.foot .stemma img{height:46px;width:auto}
.subfoot{margin-top:3rem;padding-top:1.4rem;border-top:1px solid var(--linea);display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;font-size:.85rem;color:var(--sabbia)}
@media (max-width:860px){.foot{grid-template-columns:1fr 1fr}.foot > div:first-child{grid-column:1/-1}}

/* ---------- scintilla del cursore ---------- */
.cursor{position:fixed;left:0;top:0;width:12px;height:12px;border-radius:50%;pointer-events:none;z-index:300;margin:-6px 0 0 -6px;
  background:radial-gradient(circle,#fff3c2,var(--giallo) 45%,var(--rosso));box-shadow:0 0 18px 6px rgba(242,188,61,.45);opacity:0;transition:opacity .3s,width .3s var(--ease),height .3s var(--ease),margin .3s var(--ease)}
.cursor.on{opacity:.9}
.cursor.big{width:34px;height:34px;margin:-17px 0 0 -17px;opacity:.45}
@media (hover:none),(pointer:coarse){.cursor{display:none}}

/* ---------- movimento ridotto ---------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}
  .ticker-track{animation:none}
  .cursor{display:none}
}

/* respiro tra titoli e testo */
.display + p,.display + .lead{margin-top:1.5rem}
.phero .display + .lead{margin-top:1.8rem}

/* ---------- pagina video ---------- */
.vgrid{display:grid;grid-template-columns:repeat(2,1fr);gap:1.6rem}
.vgrid:empty{display:none}
.vcard{display:grid;gap:1rem}
.vframe{position:relative;aspect-ratio:16/9;border-radius:6px;overflow:hidden;border:1px solid var(--linea);background:var(--carbone);box-shadow:0 30px 80px -30px rgba(0,0,0,.85)}
.vframe iframe,.vframe video{position:absolute;inset:0;width:100%;height:100%;border:0}
.vposter{position:absolute;inset:0;width:100%;height:100%;display:grid;place-items:center;border:0;padding:0;cursor:pointer;color:var(--avorio);
  background:linear-gradient(135deg,rgba(215,55,42,.35),rgba(217,154,59,.18) 45%,rgba(74,114,222,.3)),var(--carbone) center/cover}
.vposter img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.75}
.vplay{width:84px;height:84px;border-radius:50%;background:var(--avorio);display:grid;place-items:center;position:relative;transition:transform .5s var(--ease)}
.vplay span{width:0;height:0;border-left:22px solid var(--nero);border-block:14px solid transparent;margin-left:6px}
.vposter:hover .vplay{transform:scale(1.1)}
.vposter .vplay{box-shadow:0 0 0 0 rgba(242,188,61,.5);animation:ring 2.8s ease-out infinite}
@keyframes ring{to{box-shadow:0 0 0 26px rgba(242,188,61,0)}}
.vcard h3{margin:0;font:500 1.6rem/1.15 var(--f-display)}
.vcard p{margin:0;color:var(--sabbia)}
.vcard small{font:500 .72rem/1 var(--f-testo);letter-spacing:.22em;text-transform:uppercase;color:var(--ocra)}
.vempty{text-align:center;padding:clamp(3rem,8vw,6rem) 1rem;border:1px dashed var(--linea);border-radius:6px;background:rgba(14,11,9,.45)}
.vempty .vplay{margin:0 auto 1.6rem;opacity:.9;animation:ring 3.2s ease-out infinite}
.vempty p{max-width:46ch;margin:1rem auto 1.8rem}
.vgrid:not(:empty) ~ .vempty{display:none}
@media (max-width:820px){.vgrid{grid-template-columns:1fr}}

/* pagina "prossimamente" */
.soon-date{margin:1.2rem 0 0}
.soon-contact{margin:1.4rem 0 0;font-size:.95rem}
.soon-contact a{color:var(--avorio)}
/* menu: più respiro con sette voci */
@media (min-width:921px) and (max-width:1180px){.nav{gap:1rem}.nav a{font-size:.74rem;letter-spacing:.12em}.brand span{display:none}}
.dateline{line-height:1.6;text-align:center;flex-wrap:wrap;justify-content:center}

/* ---------- dov'è Massignano ---------- */
.place-link{color:inherit;text-decoration:none;display:inline-flex;align-items:center;gap:.45em;padding:.5rem 0;border-bottom:1px solid rgba(217,154,59,.55);transition:color .3s,border-color .3s}
.place-link:hover{color:var(--giallo);border-color:var(--giallo)}
.place-link svg{flex:none;transition:transform .4s var(--ease)}
.place-link:hover svg{transform:translateY(-2px)}
.scroll-down{position:absolute;left:50%;bottom:1.1rem;z-index:2;transform:translateX(-50%);display:grid;justify-items:center;gap:.6rem;text-decoration:none;color:var(--sabbia);font:500 .68rem/1 var(--f-testo);letter-spacing:.24em;text-transform:uppercase;white-space:nowrap;transition:color .3s}
.scroll-down:hover{color:var(--avorio)}
.scroll-down i{width:1px;height:30px;background:linear-gradient(var(--ocra),transparent);transform-origin:top;animation:drip 2.4s ease-in-out infinite}
.dove{scroll-margin-top:0}
.dove-grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:clamp(2rem,5vw,4.5rem);align-items:start}
@media (max-width:860px){.dove-grid{grid-template-columns:1fr}}
.mappa{margin:0}
.mappa-frame{position:relative;border:1px solid var(--linea);border-radius:6px;overflow:hidden;background:rgba(14,11,9,.72);box-shadow:0 30px 80px -30px rgba(0,0,0,.85)}
.mappa-svg{display:block;width:100%;height:auto}
.mappa-live{position:absolute;inset:0}
.mappa-live iframe{width:100%;height:100%;border:0;display:block}
.mappa figcaption{margin-top:1.2rem}
.mappa-azioni{display:flex;flex-wrap:wrap;gap:.8rem;margin-bottom:.9rem}
.mappa small,.dove-foto figcaption{display:block;font-size:.82rem;line-height:1.5;color:var(--sabbia)}
.btn--s{padding:.85rem 1.3rem;font-size:.76rem}
.m-curve path{fill:none;stroke:rgba(242,234,220,.09);stroke-width:1.2}
.m-onde path{fill:none;stroke:rgba(170,185,240,.35);stroke-width:1.2;stroke-linecap:round}
.m-costa{fill:none;stroke:var(--blu-chiaro);stroke-width:2;stroke-linejoin:round;opacity:.85}
.m-sea{font:italic 500 21px var(--f-corsivo);fill:var(--blu-chiaro);letter-spacing:.14em}
.m-a14{fill:none;stroke:var(--ocra);stroke-width:2.2;stroke-dasharray:9 6;stroke-linejoin:round;opacity:.9}
.m-a14-box{fill:var(--nero);stroke:var(--ocra);stroke-width:1.2}
.m-a14-t{font:600 11px var(--f-testo);fill:var(--ocra);letter-spacing:.06em}
.m-strada{fill:none;stroke:var(--avorio);stroke-width:1.6;stroke-linecap:round;opacity:.75}
.m-dir{font:500 11.5px var(--f-testo);fill:var(--sabbia);letter-spacing:.16em;text-transform:uppercase}
.m-paese circle{fill:var(--nero);stroke:var(--avorio);stroke-width:1.8}
.m-paese text{font:500 15px var(--f-testo);fill:var(--avorio)}
.m-paese .m-nota{font:500 10.5px var(--f-testo);fill:var(--ocra);letter-spacing:.14em;text-transform:uppercase}
.m-paese--min circle{stroke:var(--sabbia);stroke-width:1.4}
.m-paese--min text{font-size:13px;fill:var(--sabbia)}
.m-qui text{font:600 30px var(--f-display);fill:var(--avorio);paint-order:stroke;stroke:var(--nero);stroke-width:5px;stroke-linejoin:round}
.m-alone{fill:rgba(242,188,61,.5);transform-box:fill-box;transform-origin:center;animation:alone 2.8s ease-out infinite}
@keyframes alone{0%{transform:scale(.7);opacity:.9}100%{transform:scale(3.2);opacity:0}}
.m-scala path{fill:none;stroke:var(--sabbia);stroke-width:1.2}
.m-scala text{font:500 10.5px var(--f-testo);fill:var(--sabbia);letter-spacing:.14em}
.dove-foto{margin:0 0 2rem}
.dove-foto img{width:100%;aspect-ratio:3/2;object-fit:cover;border-radius:6px;border:1px solid var(--linea);box-shadow:0 30px 80px -30px rgba(0,0,0,.85)}
.dove-foto figcaption{margin-top:.6rem}
.dove .facts{margin-top:0}
.dove .facts .fact:first-child{border-top:0;padding-top:0}
.dove .fact b{font-size:1.35rem}
@media (max-height:640px){.scroll-down span{display:none}}
.hero-kicker{flex-wrap:wrap;justify-content:center;row-gap:.2rem}
.kick-motto{white-space:nowrap}
@media (max-width:520px){.hero-kicker{font-size:.66rem;letter-spacing:.17em;gap:.5rem}}