/* =========================================================
   Ottica Belguardo (attività di fantasia), strato "lux"
   Motion, cursore, grana, transizioni di alto livello
   Attivo solo quando lux.js aggiunge .lux su <html>
   ========================================================= */

/* ---------- stato iniziale degli elementi animati ---------- */
.lux [data-anim="riga"] > span,
.lux [data-anim="parola"] .parola > span{will-change:transform}
.lux [data-mask]{clip-path:inset(0 0 100% 0)}
.lux [data-fade]{opacity:0;transform:translateY(28px)}
.lux .hero-img img{transform:scale(1.16)}
.lux .hero-box > *{opacity:0}

/* la vecchia rivela la gestisce gsap */
.lux .rivela{opacity:1;transform:none;transition:none}

/* ---------- preloader ---------- */
.pre{
  position:fixed;inset:0;z-index:999;background:var(--nero);
  display:flex;align-items:center;justify-content:center;flex-direction:column;gap:26px;
}
.pre__logo{width:118px;opacity:.96}
.pre__barra{width:min(320px,52vw);height:2px;background:rgba(255,255,255,.16);position:relative;overflow:hidden}
.pre__barra i{position:absolute;inset:0;transform-origin:left;transform:scaleX(0);background:var(--rosso);display:block}
.pre__n{
  font-family:var(--display);font-size:11px;font-weight:600;letter-spacing:.3em;text-transform:uppercase;
  color:rgba(255,255,255,.55);
}
.pre__tenda{position:fixed;inset:0;z-index:998;background:var(--nero);transform-origin:top;pointer-events:none;display:none}
html:not(.lux) .pre,html:not(.lux) .pre__tenda{display:none}

/* ---------- barra di avanzamento ---------- */
.progresso{
  position:fixed;top:0;left:0;height:2px;width:100%;transform:scaleX(0);transform-origin:left;
  background:linear-gradient(90deg,var(--rosso),#D8544F);z-index:200;
}
html:not(.lux) .progresso{display:none}

/* ---------- cursore ---------- */
.cur,.cur-anello{position:fixed;top:0;left:0;pointer-events:none;z-index:300;border-radius:50%;opacity:0}
.cur{width:6px;height:6px;background:var(--rosso);margin:-3px 0 0 -3px}
.cur-anello{
  width:38px;height:38px;margin:-19px 0 0 -19px;border:1px solid rgba(26,13,8,.35);
  display:flex;align-items:center;justify-content:center;
  transition:width .3s cubic-bezier(.2,.8,.3,1),height .3s cubic-bezier(.2,.8,.3,1),background .3s,border-color .3s;
}
.cur-anello span{
  font-family:var(--display);font-size:9px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;
  color:#fff;opacity:0;transition:opacity .2s;white-space:nowrap;
}
.cur-anello.is-attivo{width:86px;height:86px;background:var(--rosso);border-color:transparent}
.cur-anello.is-attivo span{opacity:1}
.cur-anello.su-scuro{border-color:rgba(255,255,255,.5)}
@media (hover:none),(pointer:coarse){.cur,.cur-anello{display:none}}
html:not(.lux) .cur,html:not(.lux) .cur-anello{display:none}

/* ---------- grana ---------- */
.grana{
  position:fixed;inset:-120%;z-index:150;pointer-events:none;opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:grana 1.1s steps(3) infinite;mix-blend-mode:multiply;
}
@keyframes grana{
  0%{transform:translate(0,0)}25%{transform:translate(-3%,2%)}
  50%{transform:translate(2%,-3%)}75%{transform:translate(-2%,-2%)}100%{transform:translate(0,0)}
}
html:not(.lux) .grana{display:none}

/* la marquee la muove gsap */
.lux .marchi-track{animation:none}

/* ---------- titoli a righe ---------- */
.riga{display:block;overflow:hidden}
.parola{display:inline-block;overflow:hidden;vertical-align:top;line-height:inherit}
.parola > span{display:inline-block}

/* ---------- hero rifinito ---------- */
.hero-img{will-change:transform}
.lux .hero-box h1{letter-spacing:-.01em}
.hero-scroll{
  position:absolute;left:50%;bottom:22px;transform:translateX(-50%);z-index:4;
  display:flex;flex-direction:column;align-items:center;gap:10px;color:rgba(255,255,255,.8);
  font-family:var(--display);font-size:9.5px;font-weight:600;letter-spacing:.28em;text-transform:uppercase;
}
.hero-scroll i{display:block;width:1px;height:44px;background:linear-gradient(to bottom,rgba(255,255,255,.7),transparent);position:relative;overflow:hidden}
.hero-scroll i::after{content:"";position:absolute;left:0;top:-60%;width:1px;height:60%;background:#fff;animation:giu 1.9s ease-in-out infinite}
@keyframes giu{0%{top:-60%}70%{top:100%}100%{top:100%}}
@media (max-width:900px){.hero-scroll{display:none}}

/* ---------- bottoni magnetici e riempimento ---------- */
.btn{position:relative;overflow:hidden;isolation:isolate;will-change:transform}
.btn::before{
  content:"";position:absolute;inset:0;z-index:-1;background:var(--rosso);
  transform:translateY(101%);transition:transform .45s cubic-bezier(.2,.8,.3,1);
}
.btn:hover::before{transform:translateY(0)}
.btn:hover{color:#fff;border-color:var(--rosso)}
.btn--rosso::before{background:var(--nero)}
.btn--chiaro::before{background:var(--rosso)}
.btn--chiaro:hover{color:#fff;border-color:var(--rosso)}

.link-u{position:relative;border-bottom-color:transparent}
.link-u::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:currentColor;
  transform:scaleX(1);transform-origin:right;transition:transform .4s cubic-bezier(.2,.8,.3,1);
}
.link-u:hover::after{transform:scaleX(0)}
.link-u::before{
  content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--rosso);
  transform:scaleX(0);transform-origin:left;transition:transform .4s cubic-bezier(.2,.8,.3,1) .08s;
}
.link-u:hover::before{transform:scaleX(1)}

/* ---------- card prodotto, tilt e luce ---------- */
.prod{transform-style:preserve-3d;will-change:transform;transition:box-shadow .4s}
.prod .prod-foto::before{
  content:"";position:absolute;inset:0;z-index:3;pointer-events:none;opacity:0;
  background:radial-gradient(340px circle at var(--mx,50%) var(--my,50%),rgba(255,255,255,.55),transparent 60%);
  transition:opacity .4s;mix-blend-mode:overlay;
}
.prod:hover .prod-foto::before{opacity:1}
.prod-foto img{transition:opacity .5s cubic-bezier(.4,0,.2,1),transform .9s cubic-bezier(.2,.8,.3,1)}
.prod:hover .prod-foto img{transform:scale(1.06)}

/* ---------- categorie, maschera ---------- */
.cat{will-change:transform}
.cat-testo{transform:translateY(0);transition:transform .5s cubic-bezier(.2,.8,.3,1)}
.cat:hover .cat-testo{transform:translateY(-6px)}
.cat::before{
  content:"";position:absolute;inset:0;z-index:2;background:var(--rosso);mix-blend-mode:color;
  opacity:0;transition:opacity .5s;
}
.cat:hover::before{opacity:.12}

/* ---------- spotlight, parola verticale ---------- */
.spot{position:relative}
.spot__vert{
  position:absolute;right:calc(56% - 14px);top:50%;z-index:5;
  transform:translateY(-50%) rotate(90deg);transform-origin:center;
  font-family:var(--display);font-size:10px;font-weight:600;letter-spacing:.4em;text-transform:uppercase;
  color:rgba(255,255,255,.42);white-space:nowrap;pointer-events:none;
}
@media (max-width:900px){.spot__vert{display:none}}
.spot-foto img{will-change:transform}

/* ---------- laboratorio, numeri ---------- */
.dati div b{font-variant-numeric:tabular-nums}

/* ---------- mosaico, effetto scala ---------- */
.tessera{will-change:transform}
.tessera b{transform:translateY(6px);opacity:.9;transition:transform .4s cubic-bezier(.2,.8,.3,1),opacity .4s}
.tessera:hover b{transform:translateY(0);opacity:1}

/* ---------- marquee di chiusura ---------- */
.chiusura{background:var(--nero);color:#fff;overflow:hidden;padding:clamp(28px,4vw,56px) 0}
.chiusura__pista{display:flex;width:max-content;will-change:transform}
.chiusura__pista span{
  font-family:var(--display);font-weight:700;font-size:clamp(46px,9vw,140px);letter-spacing:-.03em;
  text-transform:uppercase;padding:0 .18em;white-space:nowrap;line-height:1;
  color:transparent;-webkit-text-stroke:1px rgba(255,255,255,.45);
}
.chiusura__pista span.pieno{color:#fff;-webkit-text-stroke:0}

/* ---------- footer, colonne che salgono ---------- */
.footer-grid > div{will-change:transform}

/* ---------- transizione fra sezioni chiare e scure ---------- */
.sez,.spot,.split,.contatto,.footer{position:relative}

/* ---------- riduzione movimento ---------- */
@media (prefers-reduced-motion:reduce){
  .lux [data-mask]{clip-path:none}
  .lux [data-fade]{opacity:1;transform:none}
  .lux .hero-img img{transform:none}
  .lux .hero-box > *{opacity:1}
  .grana,.hero-scroll i::after{animation:none}
  .pre,.pre__tenda{display:none}
}