:root{
  --bg:#0a0908;
  --bg2:#100d0a;
  --cream:#efe9df;
  --muted:#8c8378;
  --brass:#b08d57;
  --brass-soft:#cdab78;
  --line:rgba(239,233,223,.10);
  --serif:"Cormorant Garamond",Georgia,serif;
  --sans:"Inter",system-ui,sans-serif;
}
*{margin:0;padding:0;box-sizing:border-box}
body{
  background:var(--bg);color:var(--cream);font-family:var(--sans);font-weight:300;
  overflow-x:hidden;-webkit-font-smoothing:antialiased;
}
img,video{display:block;max-width:100%}
em{font-style:italic}
section{position:relative}
::selection{background:var(--brass);color:#000}

/* film grain + vignette overlays (cinema feel, non invasivi) */
.grain{position:fixed;inset:0;z-index:60;pointer-events:none;opacity:.05;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");}
.vignette{position:fixed;inset:0;z-index:59;pointer-events:none;
  background:radial-gradient(120% 100% at 50% 45%,transparent 55%,rgba(0,0,0,.55));}

/* ---------- PRELOADER ---------- */
.loader{position:fixed;inset:0;z-index:1000;background:var(--bg);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:30px}
.loader__word{display:flex;gap:.05em;font-family:var(--serif);font-size:clamp(2rem,8vw,5rem);font-weight:500;letter-spacing:.24em;padding-left:.24em}
.loader__word span{opacity:0;transform:translateY(110%);display:inline-block}
.loader__line{width:min(220px,48vw);height:1px;background:rgba(239,233,223,.14);overflow:hidden}
.loader__line i{display:block;height:100%;width:0;background:var(--brass)}

/* ---------- NAV ---------- */
.nav{position:fixed;top:0;left:0;right:0;z-index:90;display:flex;align-items:center;justify-content:space-between;
  padding:24px clamp(20px,5vw,64px);transform:translateY(-120%)}
.nav__brand{font-family:var(--serif);font-size:1.45rem;font-weight:600;letter-spacing:.26em}
.nav__links{display:flex;gap:36px}
.nav__links a{color:var(--cream);text-decoration:none;font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;opacity:.8;transition:opacity .3s}
.nav__links a:hover{opacity:1;color:var(--brass-soft)}

/* ---------- HERO (video) ---------- */
.hero{height:100svh;min-height:560px;overflow:hidden;display:flex;align-items:flex-end}
.hero__video,.hero__poster{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
.hero__poster{z-index:0}
.hero__video{z-index:1}
.hero__scrim{position:absolute;inset:0;z-index:2;
  background:linear-gradient(180deg,rgba(10,9,8,.55) 0%,transparent 28%,transparent 45%,rgba(10,9,8,.85) 100%),
             linear-gradient(90deg,rgba(10,9,8,.7) 0%,transparent 50%)}
.hero__inner{position:relative;z-index:3;padding:0 clamp(20px,5vw,64px) clamp(50px,9vh,110px);width:100%}
.hero__eyebrow{font-size:.72rem;letter-spacing:.34em;text-transform:uppercase;color:var(--brass-soft);margin-bottom:18px;overflow:hidden}
.hero__title{font-family:var(--serif);font-weight:400;font-size:clamp(3rem,11vw,9.5rem);line-height:.9;letter-spacing:.005em}
.hero__title .line{display:block;overflow:hidden}
.hero__title em{color:var(--brass-soft)}
.hero__sub{margin-top:24px;max-width:42ch;color:#cfc8bd;font-size:clamp(.95rem,1.4vw,1.1rem);line-height:1.7;opacity:.92}
.hero__inner--center{text-align:center}
.hero__inner--center .hero__sub{margin-left:auto;margin-right:auto;max-width:56ch}
.hero__inner--center .hero__title{font-size:clamp(3.4rem,12vw,10rem)}
.hero__scroll{position:absolute;z-index:3;right:clamp(20px,5vw,64px);bottom:clamp(40px,8vh,90px);
  display:flex;flex-direction:column;align-items:center;gap:12px;font-size:.62rem;letter-spacing:.3em;text-transform:uppercase;color:var(--muted)}
.hero__scroll span{width:1px;height:50px;background:linear-gradient(var(--brass),transparent);animation:drop 2.2s infinite}
@keyframes drop{0%{transform:scaleY(0);transform-origin:top}45%{transform:scaleY(1);transform-origin:top}55%{transform:scaleY(1);transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}

/* ---------- IL PAIO ---------- */
.paio{height:130vh;position:relative}
.paio__bg{position:sticky;top:0;height:100svh;background-image:url("assets/gen/pair.png");background-size:cover;background-position:center;will-change:transform}
.paio__scrim{position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,rgba(10,9,8,.6),transparent 22%,transparent 55%,rgba(10,9,8,.9))}
.paio__inner{position:absolute;left:0;right:0;bottom:12vh;z-index:3;text-align:center;padding:0 6vw}
.paio__title{font-family:var(--serif);font-weight:400;font-size:clamp(3rem,10vw,8rem);line-height:.95;margin:.15em 0 .3em}
.paio__title em{color:var(--brass-soft)}
.paio__sub{color:#cfc8bd;max-width:52ch;margin:0 auto;line-height:1.7;font-size:clamp(.95rem,1.4vw,1.08rem)}

/* ---------- UOMINI: scarpe che seguono + due uomini (flusso normale) ---------- */
.uomini{background:linear-gradient(180deg,#0a0908,#100d0a 45%,#0a0908);padding:16vh clamp(20px,6vw,90px) 14vh;overflow:hidden}
.uomini__intro{text-align:center;margin-bottom:12vh}
.uomini__title{font-family:var(--serif);font-weight:400;font-size:clamp(2.6rem,7vw,6rem);line-height:.98;margin-top:.2em}
.uomini__title em{color:var(--brass-soft)}
.uomini__shoes{display:flex;justify-content:center;align-items:flex-end;gap:clamp(20px,6vw,90px);margin-top:6vh}
.uomini__shoes .ushoe{margin:0;position:relative;width:clamp(190px,26vw,360px);display:flex;flex-direction:column;align-items:center;will-change:transform}
.uomini__shoes .ushoe img{width:100%;filter:drop-shadow(0 26px 30px rgba(0,0,0,.55));animation:levita 4.5s ease-in-out infinite}
.uomini__shoes .ushoe:nth-child(2) img{animation-delay:-2.2s}
.ushoe__base{width:66%;height:26px;margin-top:2px;border-radius:50%;
  background:radial-gradient(ellipse at center,rgba(0,0,0,.6),transparent 70%);filter:blur(6px)}
@keyframes levita{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}}
.uomini__grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(20px,4vw,64px);max-width:1100px;margin:0 auto}
.uomo{margin:0}
.uomo__ph{position:relative;border-radius:4px;overflow:hidden;border:1px solid var(--line);background:#0c0a08}
.uomo__ph img{width:100%;display:block}
.uomo__ph::after{content:"";position:absolute;inset:0;pointer-events:none;
  box-shadow:inset 0 0 70px 30px rgba(10,9,8,.55)}
.uomo figcaption{display:flex;flex-direction:column;gap:3px;padding:20px 4px 0;text-align:center}
.uomo__name{font-family:var(--serif);font-size:1.7rem;color:var(--cream)}
.uomo__role{font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;color:var(--brass-soft)}
.uomini__teaser{text-align:center;margin-top:12vh;font-family:var(--serif);font-size:clamp(1.4rem,3vw,2.4rem);color:#cfc8bd}
.uomini__teaser em{color:var(--brass-soft)}

/* ---------- ATTO (marmo, scarpa integrata) ---------- */
.atto{height:300vh;position:relative}
.atto__sticky{position:sticky;top:0;height:100svh;overflow:hidden;display:flex;align-items:center}
.atto__bg{position:absolute;inset:0;background-size:cover;background-position:center;z-index:0}
.atto__bg::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(10,9,8,.6),transparent 55%),linear-gradient(0deg,rgba(10,9,8,.5),transparent 40%)}
.atto__stage{position:absolute;z-index:2;left:7%;bottom:18%;width:clamp(300px,42vw,620px);will-change:transform}
.atto__stage img{width:100%;filter:drop-shadow(0 30px 40px rgba(0,0,0,.7))}
.atto__reflection{position:absolute;left:0;top:100%;width:100%;transform:scaleY(-1);
  -webkit-mask-image:linear-gradient(to bottom,rgba(0,0,0,.5),transparent 55%);
          mask-image:linear-gradient(to bottom,rgba(0,0,0,.5),transparent 55%);opacity:.5}
.atto__contact{position:absolute;left:8%;bottom:16%;width:34%;height:34px;z-index:1;
  background:radial-gradient(ellipse at center,rgba(0,0,0,.75),transparent 70%);filter:blur(7px)}
.atto__steps{position:absolute;right:7%;z-index:3;width:min(440px,42vw)}
.atto__step{position:absolute;top:50%;translate:0 -50%;opacity:0;will-change:transform,opacity}
.atto__num{font-family:var(--serif);font-size:1rem;color:var(--brass);letter-spacing:.3em}
.atto__step h2{font-family:var(--serif);font-weight:500;font-size:clamp(2rem,4.4vw,3.6rem);line-height:1.04;margin:.3em 0 .5em}
.atto__step p{color:#bdb5a9;font-size:1rem;line-height:1.7;max-width:38ch}

/* ---------- TOTEM (collezione orbitante) ---------- */
.totem{height:400vh;position:relative;background:#0a0908}
.totem__pin{position:sticky;top:0;height:100svh;overflow:hidden}
.totem__bg{position:absolute;inset:-6% 0;z-index:1;background:url("assets/gen/trunk.png") center top/cover no-repeat;will-change:transform}
.totem__fx{position:absolute;inset:0;z-index:3;width:100%;height:100%;pointer-events:none;mix-blend-mode:screen;opacity:.55}
.totem__veil{position:absolute;inset:0;z-index:2;pointer-events:none;
  background:radial-gradient(78% 70% at 50% 46%,transparent 42%,rgba(10,9,8,.6)),linear-gradient(180deg,rgba(10,9,8,.55),transparent 18%,transparent 66%,rgba(10,9,8,.9))}
.totem__head{position:absolute;top:9%;left:0;right:0;text-align:center;z-index:60;padding:0 6vw}
.totem__head h2{font-family:var(--serif);font-weight:400;font-size:clamp(2.4rem,6vw,5rem);line-height:1;margin-top:.15em}
.totem__head em{color:var(--brass-soft)}
.totem__orbit{position:absolute;inset:0;z-index:40;transform-style:preserve-3d}
.orbitItem{position:absolute;left:50%;top:52%;width:clamp(160px,20vw,300px);margin:0;text-align:center;will-change:transform,opacity;pointer-events:none}
.orbitItem img{width:100%;filter:drop-shadow(0 24px 30px rgba(0,0,0,.75))}
.orbitItem figcaption{margin-top:10px;display:flex;flex-direction:column;gap:2px}
.orbitItem b{font-family:var(--serif);font-weight:500;font-size:1.2rem;color:var(--cream)}
.orbitItem span{font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;color:var(--brass-soft)}
.totem__hint{position:absolute;bottom:5%;left:0;right:0;text-align:center;z-index:60;font-size:.64rem;letter-spacing:.3em;text-transform:uppercase;color:var(--muted)}

/* ---------- COLLEZIONE (vecchia, non usata) ---------- */
.coll{padding:16vh clamp(20px,6vw,90px) 12vh}
.eyebrow{font-size:.72rem;letter-spacing:.28em;text-transform:uppercase;color:var(--brass)}
.coll__head{display:flex;justify-content:space-between;align-items:flex-end;gap:30px;margin-bottom:8vh;flex-wrap:wrap}
.coll__head h2{font-family:var(--serif);font-weight:400;font-size:clamp(2.6rem,7vw,6rem);line-height:1}
.coll__head p{color:var(--muted);max-width:34ch;font-size:.95rem;line-height:1.6}
.coll__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,2.4vw,38px)}
.card{position:relative}
.card__img{aspect-ratio:4/5;border-radius:3px;overflow:hidden;position:relative;
  background:radial-gradient(120% 80% at 50% 18%,rgba(176,141,87,.14),transparent 60%),linear-gradient(165deg,#181410,#0c0a08);
  display:flex;align-items:center;justify-content:center;border:1px solid var(--line)}
.card__img img{width:80%;transition:transform 1.1s cubic-bezier(.2,.7,.2,1);filter:drop-shadow(0 24px 30px rgba(0,0,0,.6))}
.card__img::after{content:"";position:absolute;left:18%;right:18%;bottom:14%;height:22px;border-radius:50%;
  background:radial-gradient(ellipse at center,rgba(0,0,0,.6),transparent 70%);filter:blur(5px)}
.card:hover .card__img img{transform:scale(1.07) translateY(-6px)}
.card__meta{display:flex;flex-direction:column;gap:5px;padding:20px 4px 0}
.card__meta h3{font-family:var(--serif);font-weight:500;font-size:1.55rem}
.card__meta p{color:var(--muted);font-size:.84rem;letter-spacing:.02em}
.card__price{color:var(--brass-soft);font-size:1rem;margin-top:6px;letter-spacing:.02em}

/* ---------- STATS ---------- */
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:30px;padding:13vh clamp(20px,6vw,90px);border-top:1px solid var(--line)}
.stat{text-align:center}
.stat b{display:block;font-family:var(--serif);font-weight:400;font-size:clamp(3rem,8vw,7rem);line-height:1;color:var(--cream)}
.stat span{color:var(--muted);font-size:.9rem;letter-spacing:.03em}

/* ---------- CTA ---------- */
.cta{min-height:84vh;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:26px;padding:0 6vw;
  background:radial-gradient(80% 60% at 50% 42%,rgba(176,141,87,.13),transparent 62%)}
.cta h2{font-family:var(--serif);font-weight:400;font-size:clamp(2.6rem,8.5vw,7.5rem);line-height:.95}
.cta p{color:var(--muted);max-width:44ch;line-height:1.7}
.cta__btn{margin-top:14px;display:inline-block;padding:18px 46px;border:1px solid var(--brass);color:var(--cream);text-decoration:none;
  font-size:.76rem;letter-spacing:.22em;text-transform:uppercase;border-radius:40px;position:relative;overflow:hidden;transition:color .4s}
.cta__btn::before{content:"";position:absolute;inset:0;background:var(--brass);translate:0 101%;transition:translate .45s cubic-bezier(.2,.7,.2,1);z-index:-1}
.cta__btn:hover{color:#000}
.cta__btn:hover::before{translate:0 0}

/* ---------- FOOTER ---------- */
.foot{padding:9vh clamp(20px,6vw,90px) 6vh;border-top:1px solid var(--line);display:flex;flex-direction:column;gap:26px}
.foot__brand{font-family:var(--serif);font-size:clamp(3rem,14vw,11rem);letter-spacing:.12em;line-height:.8;color:#16120d;-webkit-text-stroke:1px rgba(176,141,87,.4)}
.foot__cols{display:flex;gap:40px;flex-wrap:wrap;color:var(--muted);font-size:.85rem}
.foot__fine{color:#544e45;font-size:.72rem;letter-spacing:.06em}

/* ---------- RESPONSIVE ---------- */
@media(max-width:820px){
  .nav__links{display:none}
  .atto{height:auto}
  .atto__sticky{position:relative;height:auto;flex-direction:column;padding:14vh 0;gap:36px}
  .atto__stage{position:relative;left:0;bottom:0;width:70vw;margin:0 auto}
  .atto__reflection,.atto__contact{display:none}
  .atto__steps{position:relative;right:0;width:86vw;margin:0 auto}
  .atto__step{position:relative;top:0;translate:0;opacity:1;margin-bottom:8vh}
  .coll__grid{grid-template-columns:1fr;gap:42px}
  .stats{grid-template-columns:1fr;gap:48px}
  .hero__title{font-size:clamp(2.8rem,15vw,5rem)}
  .uomini__grid{grid-template-columns:1fr;gap:8vh;max-width:420px}
  .uomini__shoes{gap:8vw}
  .uomini__shoes .ushoe{width:34vw}
}
@media(prefers-reduced-motion:reduce){
  .hero__scroll span{animation:none}
}