/* ============================================================
   MOTION — lo strato "wow".
   Tutto in CSS/JS nativo: niente GSAP, niente Lenis, niente Locomotive.
   Regola: pieno su desktop, alleggerito su mobile, spento con
   prefers-reduced-motion.
   ============================================================ */

:root {
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --ease-io:  cubic-bezier(.65, 0, .35, 1);
}

/* ---------- 1. sipario d'ingresso e di passaggio fra le pagine ----------

   Il marchio entra, si ferma un istante, esce, e solo dopo il sipario sale.
   Prima era uno pseudo-elemento DENTRO il pannello che veniva schiacciato
   con scaleY: ogni movimento del sipario deformava e spostava il marchio.
   Ora il pannello TRASLA — che non deforma i figli — e il marchio ha una
   sua animazione, indipendente. */

.curtain {
  /* la durata dell'intera intro sta qui e da nessun'altra parte */
  --intro: 1900ms;
  position: fixed; inset: 0; z-index: 300; pointer-events: none;
  background: var(--c-dark);
  /* rete di sicurezza in puro CSS: se il JS non parte o si rompe, il sipario
     se ne va lo stesso e il sito non resta invisibile */
  animation: sipario-sicurezza 1ms linear 4s forwards;
}
/* dalla seconda pagina della sessione l'intro si accorcia: rivederla intera
   a ogni clic sarebbe una tassa, non un benvenuto */
html.intro-breve .curtain { --intro: 1000ms; }

@keyframes sipario-sicurezza { to { opacity: 0; visibility: hidden; } }

.curtain-logo {
  position: absolute; left: 50%;
  top: 50%;
  /* svh, non vh: e' l'altezza "piccola" del viewport e NON cambia quando la
     barra degli indirizzi del telefono si ritira. Con una misura dinamica il
     marchio, essendo centrato, scattava mentre la pagina finiva di caricare. */
  top: 50svh;
  width: min(64vw, 268px); height: auto;
  transform: translate(-50%, -50%);
  opacity: 0;
}

html.is-loaded .curtain      { animation: intro-sipario var(--intro) both; }
html.is-loaded .curtain-logo { animation: intro-marchio var(--intro) both; }

@keyframes intro-marchio {
  /* entra salendo di un soffio */
  0%   { opacity: 0; transform: translate(-50%, calc(-50% + 16px)) scale(.955);
         animation-timing-function: cubic-bezier(.16, 1, .3, 1); }
  26%  { opacity: 1; transform: translate(-50%, -50%) scale(1);
         animation-timing-function: linear; }
  /* si ferma */
  60%  { opacity: 1; transform: translate(-50%, -50%) scale(1);
         animation-timing-function: cubic-bezier(.65, 0, .35, 1); }
  /* esce continuando a salire, cosi' il movimento non si spezza */
  84%  { opacity: 0; transform: translate(-50%, calc(-50% - 12px)) scale(1.035); }
  100% { opacity: 0; }
}

@keyframes intro-sipario {
  0%   { transform: translateY(0); animation-timing-function: cubic-bezier(.76, 0, .24, 1); }
  74%  { transform: translateY(0); animation-timing-function: cubic-bezier(.76, 0, .24, 1); }
  100% { transform: translateY(-100%); visibility: hidden; }
}

/* passaggio fra le pagine: il pannello ridiscende, senza marchio */
html.is-leaving .curtain { animation: sipario-scende .44s var(--ease-io) both; }
html.is-leaving .curtain-logo { animation: none; opacity: 0; }
@keyframes sipario-scende {
  from { transform: translateY(-100%); visibility: visible; }
  to   { transform: translateY(0); visibility: visible; }
}

/* ---------- 2. barra di avanzamento scroll ---------- */
.progress {
  position: fixed; top: 0; left: 0; height: 3px; z-index: 200;
  width: 100%; transform: scaleX(0); transform-origin: left;
  background: linear-gradient(90deg, var(--c-brand), var(--c-brand-on-dark, #9fd8a4));
  will-change: transform;
}

/* ---------- 3. cursore custom (solo desktop con mouse) ---------- */
.cursor, .cursor-ring { position: fixed; top: 0; left: 0; z-index: 250; pointer-events: none; border-radius: 50%; opacity: 0; }
.cursor { width: 7px; height: 7px; background: var(--c-brand); transition: opacity .3s, transform .12s; }
.cursor-ring {
  width: 42px; height: 42px; border: 1px solid var(--c-brand);
  transition: opacity .3s, width .3s var(--ease-out), height .3s var(--ease-out), background .3s, border-color .3s;
  will-change: transform;
}
html.has-cursor .cursor, html.has-cursor .cursor-ring { opacity: 1; }
html.cursor-hot .cursor-ring { width: 68px; height: 68px; background: rgba(90,169,95,.16); }
html.cursor-hot .cursor { transform: translate(-50%, -50%) scale(0); }
html.has-cursor, html.has-cursor a, html.has-cursor button { cursor: none; }

/* ---------- 4. hero cinematografico ---------- */
.hero-bg img { will-change: transform; }
html.is-loaded .hero-bg img { animation: kenburns 26s ease-out .2s both; }
@keyframes kenburns {
  from { transform: scale(1.01) translate3d(0,0,0); }
  to   { transform: scale(1.085) translate3d(-1%, -1%, 0); }
}
.hero-bg img, .phero .hero-bg img { object-position: center 52%; }

/* righe del titolo che salgono da sotto una maschera */
.line { display: block; overflow: hidden; }
.line > span { display: block; transform: translateY(112%); transition: transform 1.05s var(--ease-out); }
html.is-loaded .line > span { transform: none; }
.hero h1 .line:nth-child(1) > span { transition-delay: .30s; }
.hero h1 .line:nth-child(2) > span { transition-delay: .40s; }
.hero h1 .line:nth-child(3) > span { transition-delay: .50s; }

.hero .eyebrow, .hero p, .hero .btn-row, .hero-in { }
.hero .eyebrow { opacity: 0; transform: translateY(18px); transition: opacity .8s var(--ease-out) .18s, transform .8s var(--ease-out) .18s; }
.hero > .wrap p  { opacity: 0; transform: translateY(22px); transition: opacity .9s var(--ease-out) .68s, transform .9s var(--ease-out) .68s; }
.hero .btn-row   { opacity: 0; transform: translateY(22px); transition: opacity .9s var(--ease-out) .82s, transform .9s var(--ease-out) .82s; }
.scroll-hint     { opacity: 0; transition: opacity .8s 1.3s; }
html.is-loaded .hero .eyebrow,
html.is-loaded .hero > .wrap p,
html.is-loaded .hero .btn-row { opacity: 1; transform: none; }
html.is-loaded .scroll-hint { opacity: .75; }

/* il filetto verticale del tema A cresce */
.hero-in { --line-h: 0%; }
.hero-in::before { content: none; }
@media (min-width: 768px) {
  .hero-in { position: relative; border-left-color: transparent !important; }
  .hero-in::before {
    content: ''; position: absolute; left: -2px; top: 0; width: 2px; height: 100%;
    background: var(--c-brand); transform: scaleY(0); transform-origin: top;
    transition: transform 1.1s var(--ease-out) .25s;
  }
  html.is-loaded .hero-in::before { transform: scaleY(1); }
}

/* la striscia badge entra dopo l'hero */
.strip ul { opacity: 0; transform: translateY(26px); transition: opacity .9s var(--ease-out) 1.05s, transform .9s var(--ease-out) 1.05s; }
html.is-loaded .strip ul { opacity: 1; transform: none; }

/* ---------- 5. reveal delle immagini con maschera ---------- */
.media {
  clip-path: inset(0 0 100% 0);
  transition: clip-path .5s var(--ease-out);
}
.media > img { transform: scale(1.06); transition: transform .6s var(--ease-out); }
.media.is-shown { clip-path: inset(0 0 0 0); }
.media.is-shown > img { transform: scale(1); }
.hero-bg, .phero .hero-bg, .band .hero-bg, .cta-band .hero-bg { clip-path: none; }
.hero-bg img, .phero .hero-bg img { transform: none; }
.media--zoom:hover > img, .tile:hover > .media > img, .gitem:hover .media > img { transform: scale(1.06); }

/* ---------- 6. titoli parola per parola ---------- */
.split-w { display: inline-block; overflow: hidden; vertical-align: bottom; }
.split-w > i {
  display: inline-block; font-style: inherit;
  transform: translateY(105%); opacity: 0;
  transition: transform .9s var(--ease-out), opacity .9s var(--ease-out);
}
.is-in .split-w > i, .split-done .split-w > i { transform: none; opacity: 1; }

/* ---------- 7. parallasse ---------- */
[data-parallax] { will-change: transform; }

/* ---------- 8. marquee infinito ---------- */
/* Il tema ruota e ingrandisce la fascia (tema.css): il suo riquadro sborda
   di qualche pixel e faceva scrollare la home di lato. Si ritaglia qui, su un
   contenitore dedicato, e NON su html o body: li' anche "clip" ammazza la
   sezione sticky delle specialita' (verificato: .sticky-left passa da ferma a
   802px di escursione). Solo overflow-x, cosi' i margini negativi verticali
   del tema continuano a sconfinare nelle sezioni vicine. */
.marquee-clip { overflow-x: clip; }
.marquee {
  overflow: hidden; background: var(--c-dark); color: #fff;
  padding-block: 1.1rem; border-block: 1px solid rgba(255,255,255,.1);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.marquee-track { display: flex; width: max-content; animation: marquee 38s linear infinite; }
.marquee:hover .marquee-track { animation-play-state: paused; }
.marquee-track > span {
  display: inline-flex; align-items: center; gap: 1.6rem; padding-inline: 1.6rem;
  font-family: var(--f-display); font-size: clamp(1.1rem, .9rem + .8vw, 1.7rem);
  white-space: nowrap; color: rgba(255,255,255,.92);
}
.marquee-track > span::after { content: '•'; color: var(--c-brand); font-size: 1.1em; }
@keyframes marquee { to { transform: translateX(-50%); } }

/* ---------- 9. sezione sticky "specialità" ---------- */
.sticky-sec { padding-block: var(--sec-y, 88px); }
.sticky-grid { display: grid; gap: 2.4rem; }
.sticky-left { position: relative; }
.sticky-nav { list-style: none; margin: 2rem 0 0; padding: 0; counter-reset: sn; }
.sticky-nav li {
  display: flex; gap: 1.1rem; padding: 1.1rem 0; border-top: 1px solid var(--c-line);
  opacity: .38; transition: opacity .45s var(--ease-out), transform .45s var(--ease-out);
}
.sticky-nav li:last-child { border-bottom: 1px solid var(--c-line); }
.sticky-nav li.is-on { opacity: 1; transform: translateX(6px); }
.sticky-nav b {
  font-family: var(--f-display); font-size: .82rem; letter-spacing: .1em;
  color: var(--c-brand-strong); padding-top: .35rem; flex: none; width: 2rem;
}
.sticky-nav h3 { font-size: 1.24rem; margin: 0 0 .18rem; }
.sticky-nav p { font-size: .88rem; color: var(--c-ink-soft); margin: 0; }
.sticky-nav li.is-on h3 { color: var(--c-brand-strong); }
.sticky-right { display: grid; gap: clamp(1.2rem, 3vw, 2.4rem); }
.sticky-right a { display: block; position: relative; overflow: hidden; border-radius: var(--r-media, var(--r-md)); }
.sticky-cap { position: absolute; inset: auto 0 0 0; z-index: 3; padding: 1.4rem 1.5rem; background: linear-gradient(180deg, transparent, rgba(0,0,0,.8)); color: #fff; }
.sticky-cap h3 { color: #fff; font-size: 1.16rem; margin: 0; }
.sticky-cap span { font-size: .84rem; opacity: .85; }

@media (min-width: 900px) {
  .sticky-grid { grid-template-columns: .82fr 1.18fr; gap: clamp(3rem, 6vw, 6rem); }
  .sticky-left { position: sticky; top: calc(var(--nav-h, 88px) + 4.5rem); align-self: start; height: fit-content; }
  .sticky-right { gap: 22vh; padding-block: 8vh 14vh; }
}

/* ---------- 10. contatori ---------- */
.rating b { font-variant-numeric: tabular-nums; }

/* ---------- 11. bottoni magnetici ---------- */
.magnetic { transition: transform .35s var(--ease-out); }

/* ---------- 12. drawer ----------
   Niente wipe circolare: animare clip-path su un elemento a tutto schermo
   costringe il browser a ridisegnare mezza pagina a ogni fotogramma, e sul
   telefono si vede. Resta il translateX di base.css, che il compositore
   gestisce da solo. */
.drawer { transition: transform .34s var(--ease-out), visibility 0s .34s; }
.drawer.is-open { transition: transform .34s var(--ease-out), visibility 0s 0s; }

/* ---------- 13. header che si nasconde scendendo ---------- */
html.is-hidden-nav .site-header { transform: translateY(-100%); }
.site-header { transition: transform .42s var(--ease-out); }

/* La barra delle categorie deve seguire l'header, non restare indietro: e'
   ancorata a --catnav-top (l'altezza dell'header) e senza questa regola, quando
   l'header scorre via, resta appesa a meta' schermo con il contenuto del menu'
   che le passa sopra e sotto. Stessa durata e stessa curva dell'header, cosi'
   i due si muovono come un blocco unico e la barra si aggancia in cima. */
.catnav { transition: transform .42s var(--ease-out); }
html.is-hidden-nav .catnav { transform: translateY(calc(-1 * var(--catnav-top, 70px))); }

/* ---------- 14. righe del menù a cascata ---------- */
.mitem { opacity: 0; transform: translateY(14px); transition: opacity .55s var(--ease-out), transform .55s var(--ease-out); }
.mlist.is-in .mitem { opacity: 1; transform: none; }
.mlist.is-in .mitem:nth-child(1) { transition-delay: .02s; }
.mlist.is-in .mitem:nth-child(2) { transition-delay: .06s; }
.mlist.is-in .mitem:nth-child(3) { transition-delay: .10s; }
.mlist.is-in .mitem:nth-child(4) { transition-delay: .14s; }
.mlist.is-in .mitem:nth-child(5) { transition-delay: .18s; }
.mlist.is-in .mitem:nth-child(n+6) { transition-delay: .22s; }

/* ---------- 15. card che si sollevano con luce ---------- */
.card, .value, .ccard, .review { position: relative; }
.card::after, .ccard::after {
  content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 4;
  border-radius: inherit; opacity: 0; transition: opacity .4s;
  background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 50%), rgba(90,169,95,.13), transparent 62%);
}
.card:hover::after, .ccard:hover::after { opacity: 1; }

/* ---------- 16. lightbox in dissolvenza ---------- */
.lightbox { opacity: 0; transition: opacity .35s; }
.lightbox.is-open { opacity: 1; }
.lightbox img { animation: lbIn .5s var(--ease-out) both; }
@keyframes lbIn { from { opacity: 0; transform: scale(.96); } to { opacity: 1; transform: none; } }

/* ---------- mobile: alleggerimento ---------- */
@media (max-width: 767px) {
  .cursor, .cursor-ring { display: none; }
  html.is-loaded .hero-bg img { animation-duration: 34s; }
  .sticky-right { gap: 1.2rem; }
  [data-parallax] { transform: none !important; }
}

/* ---------- accessibilità: tutto spento ---------- */
@media (prefers-reduced-motion: reduce) {
  .curtain { display: none; }
  .cursor, .cursor-ring { display: none; }
  .media { clip-path: none !important; }
  .media > img { transform: none !important; }
  .line > span, .split-w > i { transform: none !important; opacity: 1 !important; }
  .hero .eyebrow, .hero > .wrap p, .hero .btn-row, .strip ul, .scroll-hint { opacity: 1 !important; transform: none !important; }
  html.is-loaded .hero-bg img { animation: none; }
  .marquee-track { animation: none; }
  .mitem { opacity: 1 !important; transform: none !important; }
  .drawer { clip-path: none !important; transition: none !important; }
  .site-header { transition: none; }
  html.is-hidden-nav .site-header { transform: none; }
  .catnav { transition: none; }
  html.is-hidden-nav .catnav { transform: none; }
}