/* ════════════════════════════════════════════════════════════════════
   Mantra Social · pagina rifatta sul sistema della home "mix"
   (stessi token, caratteri, spazi e motore delle animazioni legate allo
   scroll). Accento della pagina: l'ambra del marchio (Amber Bright #E8893F,
   Amber #D4763A), testo scuro #0D0C11 sui fondi ambra. Fondo scuro quasi
   ovunque, una sezione su carta, due soli momenti ambra (Metodo e Contatto).
   Solo CSS proprio, nessuna libreria. Movimento: transform, opacity,
   clip-path, filter. Dove il browser non conosce animation-timeline, le
   animazioni le guida assets/social-nuovo.js (stessi keyframes).
   ════════════════════════════════════════════════════════════════════ */

@property --r   { syntax: '*'; inherits: false; }
@property --tl  { syntax: '*'; inherits: false; }
@property --ease{ syntax: '*'; inherits: false; }

:root{
  /* accento Social (gli altri gettoni sono in base.css) */
  --amber-ink:#A6501F;
  --k1:rgba(13,12,17,.84); --k2:rgba(13,12,17,.74); --krule:rgba(13,12,17,.22);
  --accent-t:var(--amber-b);
  --aura:rgba(232,137,63,.14);
}

.m3{ position:relative; overflow-x:clip; }

/* ════════ Motore delle animazioni legate allo scroll (come la home) ════════
   Lo stato "a riposo" scritto in CSS è quello leggibile: senza animazioni
   (movimento ridotto, versione ferma, niente JS) si vede tutto. */
.sd{ animation-duration:1ms; animation-fill-mode:both; animation-iteration-count:1; animation-timing-function:var(--ease, cubic-bezier(.25,1,.5,1)); }
@supports (animation-timeline: view()){
  .sd{ animation-duration:auto; animation-timeline:var(--tl, view()); animation-range:var(--r, cover 0% cover 100%); }
}
@supports not (animation-timeline: view()){
  .sd{ animation-duration:1000ms; animation-play-state:paused; }
  html:not(.m3-live) .sd{ animation-name:none !important; }
}

/* ── Animazioni riusate ── */
@keyframes m3-sx{ from{ transform:scaleX(0); } }
@keyframes m3-sy{ from{ transform:scaleY(0); } }
@keyframes m3-fadeup{ from{ opacity:0; transform:translateY(24px); } }
@keyframes m3-rise{ from{ transform:translateY(115%); } }
@keyframes m3-failsafe{ to{ opacity:1; } }

/* ── Testo scomposto in parole (creato da JS) ── */
.m3-w{ display:inline-block; }
.m3-w--rise{ animation-name:m3-wrise; }
@keyframes m3-wrise{ from{ transform:translateY(.55em); opacity:0; } }

/* ── Numeri contachilometri ── */
.m3-odo{ display:inline-block; color:var(--text); font-variant-numeric:tabular-nums; view-timeline:--odo block; font:var(--w-mono) var(--fs-h2)/1 var(--f-mono); letter-spacing:-.04em; }
.m3-odo__d{ display:inline-flex; height:1em; line-height:1; overflow:hidden; vertical-align:top; }
.m3-odo__col{ display:block; }
.m3-odo__col > span{ display:block; height:1em; line-height:1; }
.m3-odo__roll{ transform:translateY(calc(var(--steps) * -1em)); animation-name:m3-odo; --tl:--odo; --r:entry 0% cover 32%; --ease:cubic-bezier(.2,.9,.25,1); }
@keyframes m3-odo{ from{ transform:translateY(0); } }

.sx-h2{ text-wrap:balance; font:var(--w-title) var(--fs-display)/var(--lh-display) var(--f-title); letter-spacing:var(--ls-display); }
.sx-h2 em{ padding-right:.04em; font-family:var(--f-accent); font-style:italic; font-weight:var(--w-accent); letter-spacing:var(--ls-accent); }
/* parola d'accento in ambra: una per schermata, mai su fondo ambra */
.sx-accent{ color:var(--amber-b); padding-right:.06em; font-family:var(--f-accent); font-style:italic; font-weight:var(--w-accent); letter-spacing:var(--ls-accent); }
.sx-sec{ position:relative; }

.sx-btn--amber{ background:var(--amber-b); color:var(--ink); }
.sx-btn--amber::before{ content:''; position:absolute; inset:0; z-index:-1; background:#F7F7F8; opacity:0; transition:opacity 200ms ease; }
.sx-btn--line{ color:var(--text); box-shadow:inset 0 0 0 1px rgba(247,247,248,.42); transition:transform 160ms var(--e-out), box-shadow 200ms ease; }

@media (hover:hover) and (pointer:fine){
  .sx-btn--amber:hover::before{ opacity:1; }
  .sx-btn--amber:hover .sx-btn__arr{ transform:translateX(4px); }
  .sx-btn--line:hover{ box-shadow:inset 0 0 0 1px var(--amber-b); }
}

/* ════════════════════════════════════════════════════════════════
   1 · APERTURA — muro di 9 video verticali inclinato
   ════════════════════════════════════════════════════════════════ */
.sx-hero{ position:relative; height:190vh; view-timeline:--hero block; }
.sx-hero__stage{ position:sticky; top:0; height:100vh; height:100svh; overflow:clip; display:flex; align-items:center; justify-content:center; background:var(--ink); }

/* S1 · il muro si raddrizza e viene avanti mentre il titolo se ne va */
.sx-wall-wrap{ position:absolute; inset:-14vh -8vw; display:flex; align-items:center; justify-content:center; pointer-events:none; transform-origin:50% 46%;
  transform:perspective(1600px) rotateX(12deg) rotateZ(-4deg) scale(1.14);
  animation-name:sx-flat; --tl:--hero; --r:contain 0% contain 100%; --ease:cubic-bezier(.45,0,.25,1);
  -webkit-mask-image:radial-gradient(ellipse 78% 72% at 50% 50%,#000 46%,transparent 86%);
          mask-image:radial-gradient(ellipse 78% 72% at 50% 50%,#000 46%,transparent 86%); }
@keyframes sx-flat{ to{ transform:perspective(1600px) rotateX(0deg) rotateZ(0deg) scale(1.1); } }
.sx-wall{ --tw:clamp(160px,21vw,360px); --gap:clamp(12px,1.5vw,24px); display:flex; align-items:center; gap:var(--gap); }
.sx-col{ position:relative; top:var(--off,0); display:flex; flex-direction:column; gap:var(--gap); width:var(--tw); flex:none; }
/* S2 · le colonne scorrono in versi opposti, come un feed (legato allo scroll) */
.sx-col:nth-child(odd){ animation-name:sx-col-up; --tl:--hero; --r:contain 0% contain 100%; --ease:linear; }
.sx-col:nth-child(even){ animation-name:sx-col-down; --tl:--hero; --r:contain 0% contain 100%; --ease:linear; }
@keyframes sx-col-up{ to{ transform:translate3d(0,-7vh,0); } }
@keyframes sx-col-down{ to{ transform:translate3d(0,6vh,0); } }
.sx-tile{ position:relative; aspect-ratio:9/16; border-radius:10px; overflow:hidden; background:#16141b; box-shadow:inset 0 0 0 1px rgba(247,247,248,.08); opacity:.5; filter:saturate(.75); transition:opacity 700ms ease, filter 700ms ease; }
.sx-tile.is-live{ opacity:1; filter:none; }
.sx-tile video{ width:100%; height:100%; object-fit:cover; }

/* velo: il titolo si legge sempre; si schiarisce quando il titolo è uscito */
.sx-hero__veil{ position:absolute; inset:0; pointer-events:none; background:
  radial-gradient(ellipse 60% 54% at 50% 52%,rgba(13,12,17,.9) 0%,rgba(13,12,17,.7) 42%,rgba(13,12,17,.28) 74%,rgba(13,12,17,0) 100%),
  linear-gradient(180deg,rgba(13,12,17,.8) 0%,rgba(13,12,17,0) 24%,rgba(13,12,17,0) 72%,rgba(13,12,17,.95) 100%);
  animation-name:sx-veil; --tl:--hero; --r:contain 12% contain 62%; --ease:linear; }
@keyframes sx-veil{ to{ opacity:.42; } }

.sx-hero__inner{ position:relative; z-index:1; width:100%; max-width:1200px; padding:calc(var(--navh) * .7) var(--gut) 6vh; text-align:center; }
.sx-hero__sign{ color:var(--t1); margin-bottom:clamp(20px,3.4vh,36px); font:var(--w-mono) var(--fs-mono)/1.3 var(--f-mono); letter-spacing:var(--ls-label); text-transform:uppercase; }
.sx-hero__sign-in{ display:inline-block; animation-name:sx-out; --tl:--hero; --r:contain 0% contain 20%; --ease:cubic-bezier(.4,0,1,1); }
.sx-hero__title{ color:var(--text); font:var(--w-title) var(--fs-hero)/var(--lh-hero) var(--f-title); letter-spacing:var(--ls-hero); }
.sx-hl{ display:block; padding-bottom:.06em; }
/* S3 · le righe del titolo salgono e si sfocano una dopo l'altra */
.sx-hl__in{ display:inline-block; animation-name:sx-lift; --tl:--hero; --ease:cubic-bezier(.5,0,.75,0); }
.sx-hl__in--1{ --r:contain 6% contain 30%; }
.sx-hl__in--2{ --r:contain 10% contain 34%; }
.sx-hl__in--3{ --r:contain 14% contain 40%; }
@keyframes sx-lift{ to{ transform:translateY(-38%) scale(.96); opacity:0; filter:blur(8px); } }

/* all'apertura le righe salgono dalla loro linea (non legato allo scroll) */
/* ENTRATA DI SOCIAL (non legata allo scroll, diversa dalla home e da Productions):
   1) il muro si posa dall'inclinazione (1,6 s);
   2) le tessere si accendono una alla volta, in diagonale, ogni 55 ms;
   3) il titolo appare riga per riga con un taglio netto che sale dal basso. */
.sx-hl__rise{ display:inline-block; }
.js .sx-wall{ animation:sx-settle 1600ms cubic-bezier(.16,1,.3,1) backwards; }
@keyframes sx-settle{ from{ transform:perspective(1400px) rotateX(16deg) translate3d(0,7vh,0) scale(1.06); } }
.js .sx-tile{ animation:sx-tile-on 760ms cubic-bezier(.23,1,.32,1) backwards; animation-delay:calc(160ms + var(--i,0) * 55ms); }
@keyframes sx-tile-on{ from{ opacity:0; transform:scale(.94); } }
.js .sx-hl__rise{ animation:sx-cut 760ms cubic-bezier(.77,0,.175,1) backwards; }
.js .sx-hl:nth-child(1) .sx-hl__rise{ animation-delay:620ms; }
.js .sx-hl:nth-child(2) .sx-hl__rise{ animation-delay:800ms; }
.js .sx-hl:nth-child(3) .sx-hl__rise{ animation-delay:980ms; }
@keyframes sx-cut{ from{ clip-path:inset(130% -8% -30% -8%); } to{ clip-path:inset(-20% -8% -30% -8%); } }
/* S4 · sottotitolo e pulsanti escono per primi */
.sx-hero__foot{ animation-name:sx-out; --tl:--hero; --r:contain 0% contain 24%; --ease:cubic-bezier(.4,0,1,1); }
@keyframes sx-out{ to{ transform:translateY(-6vh); opacity:0; visibility:hidden; } }
.sx-hero__lead{ max-width:52ch; margin:clamp(22px,3.6vh,34px) auto 0; color:var(--t1); text-wrap:pretty; font-size:var(--fs-lead); line-height:var(--lh-lead); }
.sx-hero__cta{ margin-top:clamp(26px,4vh,40px); display:flex; gap:14px; justify-content:center; flex-wrap:wrap; }
.js .sx-load{ animation:m3-fadeup 520ms var(--e-out) backwards; }
.js .sx-hero__sign .sx-load{ display:inline-block; animation-delay:520ms; }
.js .sx-hero__lead.sx-load{ animation-delay:1320ms; }
.js .sx-hero__cta.sx-load{ animation-delay:1440ms; }
.js .sx-hero__scroll span{ animation:sx-fade-in 600ms ease-out 1600ms backwards; }
@keyframes sx-fade-in{ from{ opacity:0; } }
.sx-hero__scroll{ position:absolute; bottom:clamp(18px,3.4vh,32px); left:50%; translate:-50% 0; z-index:1; display:flex; flex-direction:column; align-items:center; gap:10px; color:var(--t2); animation-name:sx-fade-out; --tl:--hero; --r:contain 0% contain 8%; font:var(--w-mono) var(--fs-mono)/1.3 var(--f-mono); letter-spacing:var(--ls-label); text-transform:uppercase; }
.sx-hero__scroll i{ width:1px; height:34px; background:linear-gradient(var(--amber-b),rgba(232,137,63,0)); transform-origin:50% 0; animation:sx-cue 2.4s ease-in-out infinite; }
@keyframes sx-cue{ 0%,100%{ transform:scaleY(.35); opacity:.5; } 50%{ transform:scaleY(1); opacity:1; } }
@keyframes sx-fade-out{ to{ opacity:0; } }

/* ════════════════════════════════════════════════════════════════
   2 · NASTRO di parole (scorre di lato con lo scroll)
   ════════════════════════════════════════════════════════════════ */
.sx-ticker{ position:relative; z-index:1; overflow:hidden; background:var(--ink); border-top:1px solid var(--line-soft); border-bottom:1px solid var(--line-soft); padding:clamp(18px,2.4vw,30px) 0; }
.sx-ticker__row{ display:flex; width:max-content; animation-name:sx-tick; --r:cover 0% cover 100%; --ease:linear; }
@keyframes sx-tick{ from{ transform:translate3d(0,0,0); } to{ transform:translate3d(-34%,0,0); } }
.sx-ticker__set{ display:flex; list-style:none; }
.sx-ticker__set li{ display:inline-flex; align-items:center; white-space:nowrap; color:var(--t1); font:var(--w-sub) var(--fs-h2)/var(--lh-h2) var(--f-title); letter-spacing:var(--ls-h2); }
.sx-ticker__set li::after{ content:''; width:.22em; height:.22em; margin:0 .9em; border-radius:50%; background:var(--amber-b); flex:none; }

/* ════════════════════════════════════════════════════════════════
   3 · COSA FACCIAMO
   ════════════════════════════════════════════════════════════════ */
.sx-what{ --air:clamp(104px,15vh,168px); padding:var(--sec-y) 0 var(--air); }
.sx-what__grid{ display:grid; grid-template-columns:repeat(12,minmax(0,1fr)); column-gap:clamp(20px,2.4vw,40px); row-gap:36px; align-items:end; }
.sx-what__head{ grid-column:1 / span 7; }
.sx-what__title{ view-timeline:--wt block; }
.sx-what__title .m3-w--rise{ --tl:--wt; }
.sx-what__lead{ grid-column:9 / span 4; color:var(--t1); max-width:44ch; font-size:var(--fs-lead); line-height:var(--lh-lead); }
.sx-svc{ list-style:none; margin-top:clamp(80px,12vh,140px); }
.sx-svc__row{ position:relative; }
.sx-svc__row:last-child{ border-bottom:1px solid var(--rule); }
/* S5 · la linea di ogni riga si disegna da sinistra */
.sx-svc__rule{ position:absolute; left:0; right:0; top:0; height:1px; background:var(--rule); transform-origin:0 50%; animation-name:m3-sx; --r:entry 10% cover 34%; --ease:cubic-bezier(.65,0,.35,1); }
.sx-svc__in{ display:grid; grid-template-columns:minmax(0,2fr) minmax(0,4fr) minmax(0,6fr); column-gap:clamp(20px,2.4vw,40px); align-items:baseline; padding-top:clamp(30px,4vw,54px); padding-bottom:clamp(30px,4vw,54px); }
.sx-svc h3{ color:var(--text); font:var(--w-sub) var(--fs-h3)/var(--lh-h3) var(--f-title); letter-spacing:var(--ls-h3); }
.sx-svc p{ color:var(--t1); max-width:56ch; font-family:var(--f-text); font-weight:var(--w-text); font-size:var(--fs-body); line-height:var(--lh-body); }
/* la citazione finale: centrata, tutta sua, con la stessa aria sopra e sotto */
.sx-what__coda{ display:flex; flex-direction:column; align-items:center; margin-top:var(--air); text-align:center; view-timeline:--note block; }
.sx-what__rule{ display:block; width:clamp(120px,14vw,200px); height:1px; background:linear-gradient(90deg,rgba(232,137,63,0) 0%,#E8893F 30%,#D4763A 70%,rgba(212,118,58,0) 100%); transform-origin:50% 50%; animation-name:m3-sx; --tl:--note; --r:entry 10% cover 38%; --ease:cubic-bezier(.65,0,.35,1); }
.sx-what__note{ margin-top:clamp(40px,5vh,60px); max-width:29ch; color:var(--text); text-wrap:balance; font:var(--w-text) var(--fs-h2)/1.16 var(--f-title); letter-spacing:var(--ls-h2); }
.sx-what__note-in{ display:block; animation-name:sx-note; --tl:--note; --r:entry 30% cover 50%; }
@keyframes sx-note{ from{ opacity:0; transform:translateY(28px); filter:blur(6px); } }

/* ════════════════════════════════════════════════════════════════
   4 · FORMATI — "Nativi per lo scroll"
   ════════════════════════════════════════════════════════════════ */
.sx-native{ padding:var(--sec-y) 0; }
.sx-native__head{ text-align:center; max-width:1100px; margin:0 auto clamp(56px,8vw,100px); }
.sx-native__title{ view-timeline:--nt block; }
/* S6 · le due parti del titolo arrivano dai lati opposti e si incontrano */
.sx-native__w{ display:inline-block; }
.sx-native__w--a{ animation-name:sx-from-l; --tl:--nt; --r:entry 20% cover 46%; }
.sx-native__w--b{ animation-name:sx-from-r; --tl:--nt; --r:entry 30% cover 50%; }
@keyframes sx-from-l{ from{ transform:translateX(-14vw); opacity:0; } }
@keyframes sx-from-r{ from{ transform:translateX(14vw); opacity:0; } }
.sx-native__lead{ max-width:52ch; margin:clamp(24px,3vw,36px) auto 0; color:var(--t1); text-wrap:pretty; font-size:var(--fs-lead); line-height:var(--lh-lead); }
.sx-reels{ list-style:none; display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:clamp(28px,3vw,44px) clamp(14px,1.6vw,24px); }
.sx-reel{ min-width:0; }
/* S7 · le colonne salgono a velocità diverse e atterrano allineate (come un feed) */
.sx-reel__fig{ margin:0; animation-name:sx-feed; --r:entry 0% cover 42%; --ease:cubic-bezier(.25,1,.5,1); }
@keyframes sx-feed{ from{ transform:translateY(var(--lag,80px)); opacity:0; } }
.sx-reel:nth-child(6n+1){ --lag:70px; } .sx-reel:nth-child(6n+2){ --lag:150px; } .sx-reel:nth-child(6n+3){ --lag:40px; } .sx-reel:nth-child(6n+4){ --lag:120px; } .sx-reel:nth-child(6n+5){ --lag:90px; } .sx-reel:nth-child(6n+6){ --lag:110px; }
.sx-reel__media{ position:relative; aspect-ratio:9/16; border-radius:6px; overflow:hidden; background:#16141b; box-shadow:inset 0 0 0 1px rgba(247,247,248,.08); }
.sx-reel__media video{ width:100%; height:100%; object-fit:cover; }
.sx-reel figcaption{ display:flex; flex-wrap:wrap; align-items:baseline; gap:2px 9px; margin-top:14px; font:var(--w-mono) var(--fs-mono)/var(--lh-mono) var(--f-mono); letter-spacing:var(--ls-mono); }
.sx-reel__n{ color:var(--t2); }
.sx-reel__name{ color:var(--text); }
.sx-reel__sec{ color:var(--t2); }
/* "Ascolta": apre il video con l'audio nel lettore */
.sx-listen{ position:absolute; left:10px; bottom:10px; z-index:1; display:inline-flex; align-items:center; gap:8px; min-height:40px; padding:0 16px 0 13px; border:0; border-radius:999px; background:var(--amber-b); color:var(--ink); cursor:pointer; box-shadow:0 6px 18px rgba(13,12,17,.35); transition:transform 160ms var(--e-out), background-color 200ms ease; -webkit-tap-highlight-color:transparent; font:var(--w-ui) var(--fs-btn)/1 var(--f-title); letter-spacing:var(--ls-ui); }
.sx-listen svg{ flex:none; }
.sx-listen:active{ transform:scale(.97); }
@media (pointer:coarse){ .sx-listen{ min-height:44px; } }   /* (responsive 13/10) 44 px al tocco */
.sx-listen:focus-visible{ outline-color:#F7F7F8; }
@media (hover:hover) and (pointer:fine){ .sx-listen:hover{ background:#F7F7F8; } }
.sx-reels__noscript{ list-style:none; display:flex; flex-wrap:wrap; justify-content:center; gap:8px 24px; color:var(--t2); font:var(--w-mono) var(--fs-mono)/var(--lh-mono) var(--f-mono); letter-spacing:var(--ls-mono); }

/* ════════════════════════════════════════════════════════════════
   5 · PIATTAFORME — titolo fermo a sinistra, righe a destra
   ════════════════════════════════════════════════════════════════ */
.sx-plat{ padding:var(--sec-y) 0; background:var(--surface); }
.sx-plat__grid{ display:grid; grid-template-columns:repeat(12,minmax(0,1fr)); column-gap:clamp(20px,2.4vw,40px); row-gap:48px; align-items:start; }
.sx-plat__head{ grid-column:1 / span 5; position:sticky; top:calc(var(--navh) * .7 + 24px); }
.sx-plat__title{ view-timeline:--pt block; }
.sx-ln{ display:block; overflow:clip; padding-bottom:.16em; margin-bottom:-.16em; }
.sx-ln__in{ display:inline-block; animation-name:m3-rise; --tl:--pt; --r:entry 10% cover 40%; }
.sx-plat__lead{ margin-top:clamp(22px,2.6vw,32px); max-width:40ch; color:var(--t1); font-size:var(--fs-lead); line-height:var(--lh-lead); }
.sx-plat__list{ grid-column:7 / -1; list-style:none; border-bottom:1px solid var(--rule); }
.sx-plat__row{ border-top:1px solid var(--rule); view-timeline:--row block; }
/* S8 · ogni riga si disegna da sinistra a destra */
.sx-plat__a{ display:grid; grid-template-columns:minmax(0,6.5em) minmax(0,1fr); column-gap:clamp(16px,2vw,32px); row-gap:10px; align-items:baseline; padding:clamp(26px,3vw,40px) 0; animation-name:sx-draw; --tl:--row; --r:entry 10% cover 36%; --ease:cubic-bezier(.65,0,.35,1); }
@keyframes sx-draw{ from{ clip-path:inset(-10% 100% -10% 0); } to{ clip-path:inset(-10% -2% -10% 0); } }
.sx-plat__idx{ color:var(--t2); font:var(--w-mono) var(--fs-mono)/var(--lh-mono) var(--f-mono); letter-spacing:var(--ls-mono); }
.sx-plat__a h3{ color:var(--text); font:var(--w-sub) var(--fs-h3)/var(--lh-h3) var(--f-title); letter-spacing:var(--ls-h3); }
.sx-plat__a p{ grid-column:2; max-width:52ch; color:var(--t1); font-family:var(--f-text); font-weight:var(--w-text); font-size:var(--fs-body); line-height:var(--lh-body); }

/* ════════════════════════════════════════════════════════════════
   Momenti ambra (Metodo e Contatto): testo scuro, il fondo scivola
   da Amber Bright ad Amber mentre si scorre (come cremisi → viola in home)
   ════════════════════════════════════════════════════════════════ */
.sx-amber{ position:relative; isolation:isolate; overflow:clip; background:var(--amber-b); color:var(--ink); }
.sx-amber :focus-visible{ outline-color:var(--ink); }
.sx-band{ position:absolute; left:0; right:0; top:0; height:200%; z-index:-1; pointer-events:none; background:linear-gradient(180deg,#E8893F 0%,#E8893F 20%,#D4763A 80%,#D4763A 100%); transform:translate3d(0,-25%,0); }
.sx-band--met{ animation-name:sx-band; --tl:--met; --r:entry 30% exit 60%; --ease:linear; }
.sx-band--ct{ animation-name:sx-band; --tl:--ct; --r:entry 30% exit 30%; --ease:linear; }
@keyframes sx-band{ from{ transform:translate3d(0,0,0); } to{ transform:translate3d(0,-50%,0); } }
.sx-amber .sx-h2 em{ color:var(--ink); }

/* ════════════════════════════════════════════════════════════════
   6 · METODO — "Un motore, non un post." Una linea corre tra le 4 fasi
   ════════════════════════════════════════════════════════════════ */
.sx-method{ padding:var(--sec-y) 0; view-timeline:--met block; }
.sx-method__head{ display:grid; grid-template-columns:repeat(12,minmax(0,1fr)); column-gap:clamp(20px,2.4vw,40px); align-items:end; }
.sx-method__head .sx-tag{ grid-column:1 / -1; }
.sx-method__title{ grid-column:1 / span 7; view-timeline:--mt block; }
.sx-method__title .m3-w--rise{ --tl:--mt; }
.sx-method__lead{ grid-column:9 / span 4; color:var(--k1); max-width:42ch; font-size:var(--fs-lead); line-height:var(--lh-lead); }
.sx-engine{ position:relative; margin-top:clamp(80px,12vh,140px); view-timeline:--eng block; }
.sx-engine__track{ position:absolute; left:0; right:0; top:7px; height:1px; background:var(--krule); }
/* S9 · la linea del motore si riempie e accende una fase alla volta */
.sx-engine__fill{ position:absolute; left:0; right:0; top:-.5px; height:2px; display:block; background:var(--ink); transform-origin:0 50%; animation-name:m3-sx; --tl:--eng; --r:cover 14% cover 58%; --ease:linear; }
.sx-engine__steps{ list-style:none; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); column-gap:clamp(20px,2.4vw,40px); }
.sx-step{ position:relative; padding-top:42px; }
.sx-step__node{ position:absolute; left:0; top:0; width:15px; height:15px; border-radius:50%; background:var(--ink); box-shadow:inset 0 0 0 2px var(--ink); animation-name:sx-node; --tl:--eng; --ease:cubic-bezier(.23,1,.32,1); }
@keyframes sx-node{ from{ background:var(--amber-b); transform:scale(.7); } }
.sx-step__txt{ animation-name:m3-fadeup; --tl:--eng; }
/* la linea corre da cover 14% a cover 58%: ogni fase si accende quando la linea la raggiunge */
.sx-step--1 .sx-step__node{ --r:cover 13% cover 16%; } .sx-step--1 .sx-step__txt{ --r:cover 9% cover 21%; }
.sx-step--2 .sx-step__node{ --r:cover 25% cover 28%; } .sx-step--2 .sx-step__txt{ --r:cover 21% cover 33%; }
.sx-step--3 .sx-step__node{ --r:cover 36% cover 39%; } .sx-step--3 .sx-step__txt{ --r:cover 32% cover 44%; }
.sx-step--4 .sx-step__node{ --r:cover 47% cover 50%; } .sx-step--4 .sx-step__txt{ --r:cover 43% cover 55%; }
.sx-step__ph{ color:var(--k2); margin-bottom:14px; font:var(--w-mono) var(--fs-mono)/1.3 var(--f-mono); letter-spacing:var(--ls-label); text-transform:uppercase; }
.sx-step h3{ color:var(--ink); margin-bottom:12px; font:var(--w-sub) var(--fs-h3)/var(--lh-h3) var(--f-title); letter-spacing:var(--ls-h3); }
.sx-step p:not(.sx-step__ph){ color:var(--k1); max-width:34ch; font-family:var(--f-text); font-weight:var(--w-text); font-size:var(--fs-body); line-height:var(--lh-body); }

/* ════════════════════════════════════════════════════════════════
   7 · LAVORI RECENTI — su carta, due schede sfalsate
   ════════════════════════════════════════════════════════════════ */
.sx-paper{ background:var(--paper); color:var(--ink); animation-name:sx-sheet; --r:entry 0% entry 75%; }
@keyframes sx-sheet{ from{ clip-path:inset(0 4.5% 0 4.5% round 36px 36px 0 0); } to{ clip-path:inset(0 0 0 0 round 0px); } }
.sx-paper :focus-visible{ outline-color:var(--ink); }
.sx-works{ padding:var(--sec-y) 0; }
.sx-works__grid{ display:grid; grid-template-columns:repeat(12,minmax(0,1fr)); column-gap:clamp(20px,2.4vw,40px); row-gap:56px; align-items:start; }
.sx-works__head{ grid-column:1 / span 5; position:sticky; top:calc(var(--navh) * .7 + 24px); }

.sx-works__title em{ color:var(--amber-ink); }
.sx-works__lead{ margin-top:clamp(22px,2.6vw,32px); max-width:42ch; color:var(--k1); font-size:var(--fs-lead); line-height:var(--lh-lead); }
.sx-works__cards{ grid-column:7 / -1; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); column-gap:clamp(18px,2vw,32px); align-items:start; }
/* S10 · le due schede scorrono a velocità diverse */
.sx-case{ display:block; width:100%; padding:0; border:0; background:none; text-align:left; color:var(--ink); cursor:pointer; -webkit-tap-highlight-color:transparent; }
.sx-case--a{ animation-name:sx-par-a; --r:cover 0% cover 100%; --ease:linear; }
.sx-case--b{ margin-top:clamp(80px,14vw,200px); animation-name:sx-par-b; --r:cover 0% cover 100%; --ease:linear; }
@keyframes sx-par-a{ from{ transform:translateY(6vh); } to{ transform:translateY(-6vh); } }
@keyframes sx-par-b{ from{ transform:translateY(16vh); } to{ transform:translateY(-16vh); } }
.sx-case__media{ position:relative; display:block; aspect-ratio:4/5; overflow:hidden; border-radius:4px; background:#d9d6cf; }
.sx-case__media img{ width:100%; height:100%; object-fit:cover; transition:transform 600ms var(--e-out); }
.sx-case__play{ position:absolute; left:16px; bottom:16px; display:grid; place-items:center; width:52px; height:52px; border-radius:50%; background:var(--paper); color:var(--ink); box-shadow:0 6px 20px rgba(13,12,17,.28); transition:transform 200ms var(--e-out), background-color 200ms ease; }
.sx-case__play svg{ margin-left:2px; }
.sx-case__top{ display:flex; justify-content:space-between; gap:12px; margin-top:18px; color:var(--k2); font:var(--w-mono) var(--fs-mono)/var(--lh-mono) var(--f-mono); letter-spacing:var(--ls-mono); }
.sx-case__name{ display:block; margin-top:12px; color:var(--ink); font:var(--w-sub) var(--fs-h3)/var(--lh-h3) var(--f-title); letter-spacing:var(--ls-h3); }
.sx-case__meta{ display:block; margin-top:10px; color:var(--k2); font:var(--w-mono) var(--fs-mono)/var(--lh-mono) var(--f-mono); letter-spacing:var(--ls-mono); }
.sx-case:active .sx-case__media{ transform:scale(.99); }
@media (hover:hover) and (pointer:fine){
  .sx-case:hover .sx-case__media img{ transform:scale(1.03); }
  .sx-case:hover .sx-case__play{ background:var(--amber-b); transform:scale(1.06); }
}

/* ════════════════════════════════════════════════════════════════
   8 · LOGHI — striscia lenta, ferma al passaggio del mouse
   ════════════════════════════════════════════════════════════════ */
.sx-logos{ --lh:40px; padding:var(--sp-80) 0; background:var(--ink); overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 12%,#000 88%,transparent 100%);
          mask-image:linear-gradient(90deg,transparent 0,#000 12%,#000 88%,transparent 100%); }
.sx-logos__track{ display:flex; width:max-content; animation:sx-marquee 64s linear infinite; }
.sx-logos:hover .sx-logos__track{ animation-play-state:paused; }
@keyframes sx-marquee{ from{ transform:translate3d(0,0,0); } to{ transform:translate3d(-50%,0,0); } }
.sx-logos__set{ display:flex; align-items:center; list-style:none; }
.sx-logos__set li{ flex:none; display:flex; align-items:center; height:calc(var(--lh) * 1.2); padding:0 clamp(28px,3.4vw,56px); }
.sx-logos__set img{ height:calc(var(--lh) * var(--w,1)); width:auto; max-width:none; opacity:.8; user-select:none; -webkit-user-drag:none; }

/* ════════════════════════════════════════════════════════════════
   9 · CONTATTO — secondo momento ambra, il modulo su una carta scura
   ════════════════════════════════════════════════════════════════ */
.sx-contact{ padding:var(--sec-y) 0; view-timeline:--ct block; }
.sx-contact__title{ text-align:center; color:var(--ink); text-wrap:balance; font:var(--w-title) var(--fs-hero)/var(--lh-hero) var(--f-title); letter-spacing:var(--ls-hero); }
.sx-contact__title em{ padding-right:.04em; font-family:var(--f-accent); font-style:italic; font-weight:var(--w-accent); letter-spacing:var(--ls-accent); }
/* S11 · il titolo cresce fino alla sua misura */
.sx-contact__t{ display:inline-block; transform-origin:50% 100%; animation-name:sx-grow; --r:entry 30% cover 42%; }
@keyframes sx-grow{ from{ transform:scale(.8); opacity:0; } }
.sx-contact__lead{ max-width:52ch; margin:clamp(24px,3vw,34px) auto 0; text-align:center; color:var(--k1); text-wrap:pretty; font-size:var(--fs-lead); line-height:var(--lh-lead); }
.mform-wrap{ display:grid; grid-template-columns:minmax(0,5fr) minmax(0,7fr); column-gap:clamp(28px,5vw,88px); row-gap:36px; align-items:start; max-width:1180px; margin:clamp(56px,8vw,100px) auto 0; }
.sx-contact__aside{ padding-top:clamp(8px,2vw,30px); }
.sx-contact__aside h3{ color:var(--ink); margin-bottom:16px; font:var(--w-sub) var(--fs-h3)/var(--lh-h3) var(--f-title); letter-spacing:var(--ls-h3); }
.sx-contact__aside p{ color:var(--k1); max-width:40ch; font-family:var(--f-text); font-weight:var(--w-text); font-size:var(--fs-body); line-height:var(--lh-body); }
/* S12 · la carta del modulo sale e si posa */
.sx-contact__panel{ animation-name:sx-panel; --r:entry 0% cover 40%; }
@keyframes sx-panel{ from{ transform:translateY(80px) rotate(-1.2deg); } }

/* ── Modulo a domande: stesso codice, nuova veste (carta scura su ambra) ── */
.mform-panel{ background:var(--ink); color:var(--text); border-radius:18px; padding:clamp(28px,3.2vw,44px) clamp(22px,3.2vw,44px); min-height:460px; display:flex; flex-direction:column; justify-content:space-between; box-shadow:0 28px 60px -18px rgba(66,30,8,.55), 0 8px 18px rgba(66,30,8,.2); }
.mform-dots{ display:flex; gap:6px; margin-bottom:28px; }
.mform-dots i{ width:22px; height:3px; border-radius:3px; background:rgba(247,247,248,.18); display:block; }
.mform-dots i.on{ background:var(--amber-b); }
.mform-body{ flex:1; display:flex; flex-direction:column; justify-content:center; }
.mform-q-title{ color:var(--text); margin-bottom:10px; font:var(--w-sub) var(--fs-h3)/var(--lh-h3) var(--f-title); letter-spacing:var(--ls-h3); }
.mform-q-hint{ color:var(--text-dim); margin-bottom:18px; font-family:var(--f-text); font-size:var(--fs-small); line-height:1.5; }
.mform-opts{ display:flex; flex-direction:column; gap:10px; margin-top:14px; }
.mform-opt{ text-align:left; min-height:52px; padding:14px 18px; border-radius:12px; border:1px solid rgba(247,247,248,.2); background:transparent; color:var(--text); cursor:pointer; transition:border-color 200ms ease, background-color 200ms ease, transform 160ms var(--e-out); font-family:var(--f-text); font-weight:var(--w-text); font-size:var(--fs-body); line-height:var(--lh-body); }
.mform-opt:active{ transform:scale(.99); }
.mform-opt.sel{ border-color:var(--amber-b); background:rgba(232,137,63,.12); }
@media (hover:hover) and (pointer:fine){ .mform-opt:hover{ border-color:var(--amber-b); background:rgba(247,247,248,.03); } }
.mform-field{ width:100%; min-height:52px; padding:14px 16px; border-radius:12px; border:1px solid rgba(247,247,248,.2); background:rgba(247,247,248,.03); color:var(--text); margin-bottom:12px; caret-color:var(--amber-b); font-family:var(--f-text); font-weight:var(--w-text); font-size:var(--fs-body); line-height:var(--lh-body); }
.mform-field::placeholder{ color:rgba(247,247,248,.6); }
.mform-area{ min-height:110px; resize:vertical; }
.mform-field:focus{ outline:none; border-color:var(--amber-b); box-shadow:0 0 0 3px rgba(232,137,63,.25); }
.mform-next,.mform-submit{ align-self:flex-start; margin-top:18px; min-height:50px; padding:0 28px; border-radius:999px; border:none; background:var(--amber-b); color:var(--ink); cursor:pointer; transition:transform 160ms var(--e-out), background-color 200ms ease; font:var(--w-ui) var(--fs-btn)/1 var(--f-title); letter-spacing:var(--ls-ui); }
.mform-next:active,.mform-submit:active{ transform:scale(.97); }
.mform-submit:disabled{ opacity:.6; cursor:progress; }
@media (hover:hover) and (pointer:fine){ .mform-next:hover,.mform-submit:hover{ background:#F7F7F8; } }
.mform-back{ align-self:flex-start; margin-top:16px; min-height:44px; /* (responsive 13/10) 44 px */ background:none; border:none; color:var(--text-dim); cursor:pointer; font:var(--w-mono) var(--fs-mono)/var(--lh-mono) var(--f-mono); letter-spacing:var(--ls-mono); }
.mform-back:hover{ color:var(--text); }
.mform-sum-title{ margin-bottom:16px; color:var(--text); font:var(--w-sub) var(--fs-h3)/var(--lh-h3) var(--f-title); letter-spacing:var(--ls-h3); }
.mform-sum-list{ max-height:240px; overflow-y:auto; }
.mform-sum-row{ display:flex; justify-content:space-between; gap:14px; padding:10px 0; border-bottom:1px solid rgba(247,247,248,.1); font-family:var(--f-text); font-size:var(--fs-small); line-height:1.5; }
.mform-sum-row span{ color:var(--text-dim); } .mform-sum-row b{ text-align:right; font-weight:500; max-width:60%; }
.mform-done-title{ margin-bottom:12px; color:var(--text); font:var(--w-sub) var(--fs-h2)/var(--lh-h2) var(--f-title); letter-spacing:var(--ls-h2); }
.mform-done-p{ color:var(--t1); font-family:var(--f-text); font-weight:var(--w-text); font-size:var(--fs-body); line-height:var(--lh-body); }
.mform-panel :focus-visible{ outline-color:var(--amber-b); }
.mform-consent{ color:rgba(247,247,248,.8) !important; font-family:var(--f-text); font-size:var(--fs-small); line-height:1.5; }
.mform-consent input{ accent-color:var(--amber-b); }

@property --ang{ syntax:'<angle>'; initial-value:0deg; inherits:false; }
@keyframes sx-spin{ to{ --ang:360deg; } }

@media(max-width:900px){ :root{ --navh:84px; } }

/* ════════════════════════════════════════════════════════════════
   Schermi medi e telefono
   ════════════════════════════════════════════════════════════════ */
@media (max-width:1100px){
  .sx-what__head{ grid-column:1 / -1; }
  .sx-what__lead{ grid-column:1 / span 9; }
  .sx-reels{ grid-template-columns:repeat(6,minmax(0,1fr)); }
  .sx-reel{ grid-column:span 2; }
  .sx-reel:nth-child(3n+1){ --lag:60px; } .sx-reel:nth-child(3n+2){ --lag:140px; } .sx-reel:nth-child(3n+3){ --lag:90px; }
  .sx-plat__head,.sx-works__head{ grid-column:1 / span 5; }
  .sx-method__title{ grid-column:1 / -1; }
  .sx-method__lead{ grid-column:1 / span 9; margin-top:28px; }
  .sx-engine__steps{ grid-template-columns:repeat(2,minmax(0,1fr)); row-gap:56px; }
  .sx-engine__track{ display:none; }
  .sx-step__node{ animation-name:sx-node; }
  .sx-step--1 .sx-step__node,.sx-step--2 .sx-step__node,.sx-step--3 .sx-step__node,.sx-step--4 .sx-step__node{ --tl:view(); --r:entry 40% cover 40%; }
  .sx-step--1 .sx-step__txt,.sx-step--2 .sx-step__txt,.sx-step--3 .sx-step__txt,.sx-step--4 .sx-step__txt{ --tl:view(); --r:entry 10% cover 34%; }
  .sx-step{ border-top:1px solid var(--krule); padding-top:32px; }
  .sx-step__node{ top:-8px; }
}
@media (max-width:900px){
  .sx-plat__head,.sx-works__head{ position:static; grid-column:1 / -1; }
  .sx-plat__list,.sx-works__cards{ grid-column:1 / -1; }
  .mform-wrap{ grid-template-columns:minmax(0,1fr); }
}
@media (max-width:768px){

  .sx-hero{ height:165vh; }
  .sx-wall{ --tw:34vw; --gap:10px; }
  .sx-wall-wrap{ transform:perspective(1200px) rotateX(10deg) rotateZ(-4deg) scale(1.2); }
  @keyframes sx-flat{ to{ transform:perspective(1200px) rotateX(0deg) rotateZ(0deg) scale(1.18); } }
  .sx-tile{ border-radius:8px; }
  .sx-hero__inner{ padding-top:calc(var(--navh) + 8px); }

  .sx-hero__cta{ flex-direction:column; align-items:stretch; max-width:340px; margin-left:auto; margin-right:auto; }
  .sx-what__lead{ grid-column:1 / -1; }
  .sx-svc__in{ grid-template-columns:minmax(0,1fr); row-gap:14px; }


  .sx-reels{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:26px 12px; }
  .sx-reel,.sx-reel:nth-child(10){ grid-column:auto; }
  .sx-reel:nth-child(odd){ --lag:50px; } .sx-reel:nth-child(even){ --lag:110px; }
  .sx-reel figcaption{ gap:0 7px; }
  .sx-listen{ left:8px; bottom:8px; padding:0 14px 0 11px; }
  .sx-plat__a{ grid-template-columns:minmax(0,1fr); }
  .sx-plat__a p{ grid-column:1; }
  .sx-method__lead{ grid-column:1 / -1; }
  .sx-engine__steps{ grid-template-columns:minmax(0,1fr); row-gap:44px; }
  .sx-works__cards{ column-gap:14px; }
  .sx-case__play{ left:10px; bottom:10px; width:44px; height:44px; }
  .sx-case__top{ flex-direction:column; gap:4px; }

  @keyframes sx-par-b{ from{ transform:translateY(8vh); } to{ transform:translateY(-8vh); } }
  .sx-case--b{ margin-top:72px; }
  .sx-logos{ --lh:36px; }
  .mform-panel{ min-height:0; }
}

/* su schermi bassi o stretti la freccia "Scorri" toccherebbe i pulsanti */
@media (max-width:768px), (max-height:760px){ .sx-hero__scroll{ display:none; } }

/* ════════════════════════════════════════════════════════════════
   Movimento ridotto: niente si sposta, solo dissolvenze; video fermi
   ════════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion:reduce){
  .sd{ animation-name:none !important; }
  .js .sx-hl__rise,.js .sx-load,.js .sx-wall,.js .sx-tile,.js .sx-hero__scroll span{ animation:none !important; }
  .js .rv{ opacity:0; transition:opacity 300ms ease-out; }
  .js .rv.is-in{ opacity:1; }
  html:not(.m3-ok) .rv{ animation:m3-failsafe 0s 3s forwards; }
  .sx-hero{ height:auto; }
  .sx-hero__stage{ position:relative; min-height:100svh; }
  .sx-hero__scroll i,.nav-coffee::before{ animation:none; }
  .sx-tile{ opacity:.62; transition:none; }
  .sx-logos{ -webkit-mask-image:none; mask-image:none; }
  .sx-logos__track{ animation:none; width:auto; justify-content:center; }
  .sx-logos__set{ flex-wrap:wrap; justify-content:center; row-gap:28px; }
  .sx-logos__set[aria-hidden="true"]{ display:none; }
  .sx-band{ height:100%; transform:none; }

  .sx-btn,.sx-btn__arr,.sx-listen,.sx-case__media img,.sx-case__play,.mform-opt,.mform-next,.mform-submit{ transition-property:opacity, background-color, border-color, box-shadow; }
}

/* ════════════════════════════════════════════════════════════════
   Versione ferma (?fermo): tutto al suo stato a riposo, per le foto
   ════════════════════════════════════════════════════════════════ */
html.m3-still .sd,html.m3-still .sx-hl__rise,html.m3-still .sx-load,html.m3-still .sx-wall,html.m3-still .sx-tile{ animation:none !important; }
html.m3-still .sx-hero{ height:auto; }
html.m3-still .sx-hero__stage{ position:relative; height:100vh; }
html.m3-still .sx-plat__head,html.m3-still .sx-works__head{ position:static; }
html.m3-still .sx-band{ height:100%; transform:none; }
html.m3-still .sx-hero__scroll i,html.m3-still .nav-coffee::before{ animation:none; }
html.m3-still .sx-logos__track{ animation:none; }

/* Casella della privacy: testo e collegamento sulla stessa riga, senza buchi
   (la regola conservata nella pagina mette ogni pezzo di testo in colonna flex) */
.mform-panel .mform-consent{ display:block; position:relative; padding-left:28px; }
.mform-panel .mform-consent input{ position:absolute; left:0; top:1px; margin:0; }