/* ════════════════════════════════════════════════════════════════════
   Project Mantra · Home "mix": Manifesto (base) + Cinema (Lavori) +
   Rivista (Pensiero). Colore trattenuto: fondo Ink, Problema su carta,
   due soli momenti colorati (Ambizione e Parliamone, cremisi → viola).
   Solo CSS proprio, nessuna libreria. Movimento: transform, opacity,
   clip-path. Animazioni legate allo scroll con animation-timeline
   (view()/scroll()); dove non c'è, le guida assets/home-alt3.js.
   ════════════════════════════════════════════════════════════════════ */

/* ── Proprietà non ereditate: ogni elemento animato porta le sue ── */
@property --r   { syntax: '*'; inherits: false; }
@property --tl  { syntax: '*'; inherits: false; }
@property --ease{ syntax: '*'; inherits: false; }

/* Gettoni (colori, caratteri, scala, spazi, tempi), base, etichette, pulsanti,
   barra alta, menu, piè di pagina e lettore dei video: assets/base.css */

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

/* ════════ Motore delle animazioni legate allo scroll ════════
   Lo stato "a riposo" scritto in CSS è sempre quello finale e leggibile:
   senza animazioni (movimento ridotto, versione ferma, niente JS) si
   vede tutto. Ogni .sd dichiara il suo animation-name, --r (tratto) e
   --tl (quale scorrimento lo guida). */
.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; }
}

/* ════════ Grana da pellicola (nessun colore) ════════ */
.mx-grain{ position:fixed; inset:0; z-index:999; pointer-events:none; opacity:.045; background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 .6 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>"); }

/* ════════ Pulsanti ════════ */
.m3-btn--ink{ background:var(--ink); color:var(--paper); }
.m3-btn--ink::before{ background:var(--wine); }
.m3-btn--ink:focus-visible{ outline-color:var(--ink); }

/* ════════ Linee a gradiente che tagliano lo schermo (A29) ════════ */
.m3-cut{ position:relative; height:2px; pointer-events:none; }
.m3-cut i{ position:absolute; left:-12vw; top:0; width:124vw; height:1px; background:linear-gradient(90deg,rgba(247,247,248,0),rgba(247,247,248,.55) 30%,rgba(247,247,248,.55) 70%,rgba(247,247,248,0)); opacity:1; transform-origin:0 50%; transform:rotate(-2.4deg); animation-name:m3-cut; --r:cover 22% cover 62%; --ease:cubic-bezier(.65,0,.35,1); }
.m3-cut--r i{ transform-origin:100% 50%; transform:rotate(2.4deg); animation-name:m3-cut-r; }
@keyframes m3-cut{ from{ transform:rotate(-2.4deg) scaleX(0); } }
@keyframes m3-cut-r{ from{ transform:rotate(2.4deg) scaleX(0); } }

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

/* ════════ Testo scomposto (creato da JS) ════════ */
.m3-word{ display:inline-block; white-space:nowrap; }
.m3-ch{ display:inline-block; }
.m3-ch > i{ display:inline-block; font-style:inherit; }
.m3-w{ display:inline-block; }
.m3-w--light{ display:inline; }
.js [data-split="chars"]:not(.is-split){ opacity:0; animation:m3-failsafe 0s 2.5s forwards; }

/* ════════════════════════════════════════════════════════════════
   1 · APERTURA
   ════════════════════════════════════════════════════════════════ */
.m3-hero{ position:relative; height:210vh; view-timeline:--hero block; }
.m3-hero__stage{ position:sticky; top:0; height:100vh; height:100svh; overflow:clip; display:flex; }
.m3-hero__media{ position:absolute; inset:0; background:var(--ink); animation-name:m3-window; --tl:--hero; --r:contain 8% contain 100%; --ease:cubic-bezier(.45,0,.25,1); }
@keyframes m3-window{
  from{ clip-path:inset(0 0 0 0 round 0px); opacity:1; }
  to{ clip-path:inset(9vh 8vw 9vh 8vw round 28px); opacity:.32; }
}
.m3-hero__media video{ width:100%; height:100%; object-fit:cover; }
.m3-hero__shade{ position:absolute; inset:0; background:
  linear-gradient(180deg,rgba(13,12,17,.66) 0%,rgba(13,12,17,.40) 30%,rgba(13,12,17,.44) 58%,rgba(13,12,17,.88) 100%),
  linear-gradient(90deg,rgba(13,12,17,.5) 0%,rgba(13,12,17,.12) 70%); }
.m3-hero__inner{ position:relative; z-index:1; width:100%; max-width:1600px; margin:0 auto; padding:calc(var(--navh) + 2.2vh) var(--gut) clamp(26px,5vh,56px); display:flex; flex-direction:column; justify-content:space-between; gap:2.4vh; }
.m3-hero__signs{ display:flex; justify-content:space-between; gap:12px 24px; color:var(--t1); font:var(--w-mono) var(--fs-mono)/1.3 var(--f-mono); letter-spacing:var(--ls-label); text-transform:uppercase; }
.m3-hero__title{ color:var(--text); font:var(--w-title) var(--fs-hero)/var(--lh-hero) var(--f-title); letter-spacing:var(--ls-hero); }
.m3-hl{ display:block; white-space:nowrap; }
.m3-hl--b{ padding-left:.9em; margin:.03em 0 .07em; }
.m3-hl--c{ text-align:right; }
.m3-hl__grow{ display:inline-block; transform-origin:35% 60%; animation-name:m3-grow; --tl:--hero; --r:contain 0% contain 92%; --ease:cubic-bezier(.45,0,.25,1); }
@keyframes m3-grow{ to{ transform:scale(1.2) translateX(3%); } }
.m3-grad{ padding:0 .1em .06em 0; filter:drop-shadow(0 .02em .22em rgba(13,12,17,.55)); background:var(--firma); -webkit-background-clip:text; background-clip:text; color:transparent; -webkit-text-fill-color:transparent; font-family:var(--f-accent); font-style:italic; font-weight:var(--w-accent); letter-spacing:var(--ls-accent); }
/* A3 · le lettere si separano (e tornano insieme risalendo) */
.m3-hero .m3-ch{ animation-name:m3-spread; --tl:--hero; --r:contain 6% contain 84%; --ease:cubic-bezier(.55,0,.6,1); }
@keyframes m3-spread{ to{ transform:translate3d(calc(var(--dx) * 1vw),calc(var(--dy) * 1vh),0) rotate(calc(var(--dr) * 1deg)); opacity:0; } }
/* apertura: le lettere si compongono (non legato allo scroll) */
.m3-hero .m3-ch > i{ animation:m3-compose 280ms var(--e-out) backwards; animation-delay:calc(160ms + var(--n) * 18ms); }
.m3-hero .m3-hl--c .m3-ch > i{ animation-delay:calc(540ms + var(--n) * 18ms); }
@keyframes m3-compose{ from{ opacity:0; transform:translateY(.42em); } }
.js .m3-hl--b{ animation:m3-wipe 300ms var(--e-out) 400ms backwards; }
@keyframes m3-wipe{ from{ clip-path:inset(-20% 100% -20% 0); transform:translateX(-.12em); } to{ clip-path:inset(-20% -10% -20% 0); transform:none; } }
.js .m3-load{ animation:m3-fadeup 300ms var(--e-out) backwards; }
.js .m3-hero__signs.m3-load{ animation-delay:60ms; }
.js .m3-hero__lead.m3-load{ animation-delay:760ms; }
.js .m3-btn.m3-load{ animation-delay:840ms; }
/* A6 · sottotitolo e pulsante escono per primi */
.m3-hero__foot{ display:flex; align-items:flex-end; justify-content:space-between; gap:24px 48px; animation-name:m3-foot-out; --tl:--hero; --r:contain 0% contain 34%; --ease:cubic-bezier(.4,0,1,1); }
@keyframes m3-foot-out{ to{ transform:translateY(-7vh); opacity:0; } }
.m3-hero__lead{ max-width:44ch; color:var(--t1); font-size:var(--fs-lead); line-height:var(--lh-lead); }
.m3-hero__lead strong{ color:var(--text); font-weight:var(--w-bold); }

/* ════════════════════════════════════════════════════════════════
   2 · CHI SIAMO
   ════════════════════════════════════════════════════════════════ */
.m3-about{ padding:var(--sec-y) 0; text-align:center; }
.m3-about__title{ margin-bottom:clamp(28px,4vw,52px); font:var(--w-title) var(--fs-display)/var(--lh-display) var(--f-title); letter-spacing:var(--ls-display); }
.m3-about__title em{ font-family:var(--f-accent); font-style:italic; font-weight:var(--w-accent); letter-spacing:var(--ls-accent); }
.m3-mask{ display:block; padding-bottom:.08em; clip-path:inset(-40% -8% 0 -8%); }
/* A7 · le due righe salgono dalla loro linea */
.m3-rise{ display:inline-block; animation-name:m3-rise; }
.m3-rise--1{ --r:entry 20% cover 40%; }
.m3-rise--2{ --r:entry 45% cover 46%; }
@keyframes m3-rise{ from{ transform:translateY(115%); } }
.m3-about__intro{ max-width:46ch; margin:0 auto; color:var(--t1); font-size:var(--fs-lead); line-height:var(--lh-lead); }
.m3-about__intro b{ color:var(--text); font-weight:var(--w-bold); }
.m3-tree{ margin-top:clamp(60px,8vw,110px); view-timeline:--tree block; }
/* A8 · la pillola si allunga */
.m3-pill{ display:inline-flex; align-items:center; gap:14px; max-width:100%; padding:15px 28px; border-radius:999px; border:1px solid rgba(247,247,248,.38); background:rgba(13,12,17,.3); color:var(--text); animation-name:m3-pill; --tl:--tree; --r:cover 3% cover 19%; --ease:cubic-bezier(.65,0,.35,1); font:var(--w-mono) var(--fs-mono)/1.3 var(--f-mono); letter-spacing:var(--ls-label); text-transform:uppercase; }
.m3-pill i{ flex:none; width:10px; height:10px; border-radius:50%; background:var(--firma); }
@keyframes m3-pill{ from{ clip-path:inset(0 calc(50% - 22px) 0 calc(50% - 22px) round 999px); } to{ clip-path:inset(0 0 0 0 round 999px); } }
/* A9 · i rami dell'albero si disegnano */
.m3-branch{ position:relative; height:78px; max-width:1180px; margin:0 auto; }
.m3-branch i{ position:absolute; display:block; background:rgba(247,247,248,.6); }
.m3-branch__stem{ left:50%; top:0; width:1px; height:40px; transform-origin:50% 0; animation-name:m3-sy; --tl:--tree; --r:cover 13% cover 21%; }
.m3-branch__bar{ left:25%; right:25%; top:40px; height:1px; transform-origin:50% 50%; animation-name:m3-sx; --tl:--tree; --r:cover 19% cover 28%; }
.m3-branch__drop{ top:40px; width:1px; height:38px; transform-origin:50% 0; animation-name:m3-sy; --tl:--tree; --r:cover 26% cover 33%; }
.m3-branch__drop--l{ left:25%; background:#3fa6e8 !important; }
.m3-branch__drop--r{ left:75%; background:#ff8a12 !important; }
/* A10 · le due porte entrano da lati opposti */
.m3-doors{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:clamp(16px,2.2vw,32px); max-width:1180px; margin:0 auto; text-align:left; }
.m3-door-slot{ display:flex; min-width:0; }
.m3-door-slot--l{ animation-name:m3-door-l; --tl:--tree; --r:cover 17% cover 40%; }
.m3-door-slot--r{ animation-name:m3-door-r; --tl:--tree; --r:cover 21% cover 44%; }
@keyframes m3-door-l{ from{ transform:translateX(-10vw); opacity:0; } }
@keyframes m3-door-r{ from{ transform:translateX(10vw); opacity:0; } }
.m3-door{ position:relative; isolation:isolate; flex:1; display:flex; flex-direction:column; min-width:0; padding:clamp(26px,2.8vw,42px) clamp(22px,2.6vw,40px) clamp(24px,2.6vw,36px); border-top:2px solid var(--c); border-bottom:1px solid var(--rule); transition:transform 160ms var(--e-out); -webkit-tap-highlight-color:transparent; }
.m3-door::before{ content:''; position:absolute; inset:0; z-index:-1; background:rgba(247,247,248,.035); opacity:1; transition:opacity 220ms ease; }
.m3-door::after{ content:''; position:absolute; inset:0; z-index:-1; background:rgba(247,247,248,.07); opacity:0; transition:opacity 220ms ease; }
.m3-door:active{ transform:scale(.985); }
.m3-door--prod{ --c:#3fa6e8; } .m3-door--soc{ --c:#ff8a12; }
.m3-door__div{ display:flex; align-items:center; gap:10px; color:var(--t2); margin-bottom:22px; font:var(--w-mono) var(--fs-mono)/1.3 var(--f-mono); letter-spacing:var(--ls-label); text-transform:uppercase; }
.m3-door__div i{ width:8px; height:8px; border-radius:50%; background:var(--c); }
.m3-door__name{ margin-bottom:16px; font:var(--w-sub) var(--fs-h2)/var(--lh-h2) var(--f-title); letter-spacing:var(--ls-h2); }
.m3-door__what{ color:var(--t1); margin-bottom:30px; max-width:46ch; font-family:var(--f-text); font-weight:var(--w-text); font-size:var(--fs-body); line-height:var(--lh-body); }
.m3-door__go{ margin-top:auto; display:inline-flex; align-items:center; gap:8px; color:var(--text); font:var(--w-ui) var(--fs-btn)/1 var(--f-title); letter-spacing:var(--ls-ui); }
.m3-door__arr{ display:inline-block; font-family:'Inter',sans-serif; transition:transform 200ms var(--e-out); }
@media (hover:hover) and (pointer:fine){
  .m3-door:hover::after{ opacity:1; }
  .m3-door:hover .m3-door__arr{ transform:translate(3px,-3px); }
}

/* ════════════════════════════════════════════════════════════════
   3 · PROBLEMA
   ════════════════════════════════════════════════════════════════ */
.m3-problem{ padding:var(--sec-y) 0; }
.m3-problem__title{ max-width:none; view-timeline:--prob block; text-wrap:balance; font:var(--w-title) var(--fs-display)/var(--lh-display) var(--f-title); letter-spacing:var(--ls-display); }
.m3-problem__title .m3-ln{ display:block; text-wrap:balance; }
.m3-problem__title em{ font-family:var(--f-accent); font-style:italic; font-weight:var(--w-accent); letter-spacing:var(--ls-accent); }
/* A11 · le parole si accendono una alla volta */
.m3-w--light{ animation-name:m3-light; --tl:--prob; --ease:linear; }
@keyframes m3-light{ from{ opacity:.16; } }
.m3-problem__body{ display:grid; grid-template-columns:repeat(12,minmax(0,1fr)); column-gap:clamp(20px,2.4vw,40px); row-gap:28px; margin-top:clamp(56px,9vw,130px); }
.m3-problem__col{ color:var(--t1); font-family:var(--f-text); font-weight:var(--w-text); font-size:var(--fs-body); line-height:var(--lh-body); }
.m3-problem__col p + p{ margin-top:1.1em; }
.m3-problem__col strong{ color:var(--text); font-weight:var(--w-bold); }
/* A12 · le due colonne salgono a velocità diverse */
.m3-problem__col--a{ grid-column:1 / span 5; max-width:60ch; animation-name:m3-par-a; --r:entry 0% cover 45%; }
.m3-problem__col--b{ grid-column:7 / span 5; max-width:60ch; animation-name:m3-par-a; --r:entry 0% cover 45%; }
@keyframes m3-par-a{ from{ transform:translateY(48px); opacity:.0; } }
@keyframes m3-par-b{ from{ transform:translateY(150px); } }
/* A13 · la frase finale: la prima riga arretra, la seconda cresce al centro */
.m3-pull{ margin-top:clamp(100px,17vh,190px); view-timeline:--pull block; }
.m3-pull__a{ display:block; color:var(--t1); transform-origin:0 100%; animation-name:m3-pull-a; --tl:--pull; --r:cover 32% cover 58%; font:var(--w-text) var(--fs-h2)/1.16 var(--f-title); letter-spacing:var(--ls-h2); }
@keyframes m3-pull-a{ to{ opacity:.72; transform:scale(.95); } }
.m3-pull__b{ display:block; margin-top:.22em; transform-origin:0 50%; animation-name:m3-pull-b; --tl:--pull; --r:cover 8% cover 50%; font:var(--w-title) var(--fs-display)/var(--lh-display) var(--f-title); letter-spacing:var(--ls-display); }
.m3-pull__b em{ font-family:var(--f-accent); font-style:italic; font-weight:var(--w-accent); letter-spacing:var(--ls-accent); }
@media (min-width:769px){ .m3-pull__b em{ white-space:nowrap; } }
@keyframes m3-pull-b{ from{ transform:scale(.84); opacity:.3; } }

/* ════════════════════════════════════════════════════════════════
   4 · AMBIZIONE
   ════════════════════════════════════════════════════════════════ */
.m3-amb{ position:relative; height:230vh; view-timeline:--amb block; }
.m3-amb__stage{ position:sticky; top:0; height:100vh; height:100svh; overflow:clip; display:flex; flex-direction:column; justify-content:center; align-items:center; padding:calc(var(--navh) * .55) var(--gut) 6vh; text-align:center; }
.m3-amb .m3-tag{ margin-bottom:clamp(28px,5vh,56px); }
.m3-amb__title{ max-width:20ch; font:var(--w-title) var(--fs-display)/var(--lh-display) var(--f-title); letter-spacing:var(--ls-display); }
.m3-amb__l{ display:block; }
.m3-amb__l--2{ margin-top:.18em; }
/* A14 · le due frasi arrivano da sinistra e da destra e si allineano */
.m3-amb__l--1{ animation-name:m3-from-l; --tl:--amb; --r:entry 55% contain 24%; }
.m3-amb__l--2{ animation-name:m3-from-r; --tl:--amb; --r:entry 70% contain 32%; }
@keyframes m3-from-l{ from{ transform:translateX(-22vw); opacity:0; } }
@keyframes m3-from-r{ from{ transform:translateX(22vw); opacity:0; } }
/* A15 · "poche categorie" si ingrandisce al centro */
.m3-key{ display:inline-block; margin:0 .34em 0 .22em; /* (responsive 13/10) a destra .34em: ingrandita (1.05–1.1) non si incolla più ad "all'anno." quando stanno sulla stessa riga (tablet) */ transform-origin:15% 60%; animation-name:m3-key; --tl:--amb; --r:contain 28% contain 72%; --ease:cubic-bezier(.45,0,.25,1); }
.m3-key em{ font-family:var(--f-accent); font-style:italic; font-weight:var(--w-accent); letter-spacing:var(--ls-accent); }
@keyframes m3-key{ 0%{ transform:scale(1); } 55%{ transform:scale(1.1); } 100%{ transform:scale(1.05); } }
/* A16 · "guidarle." prende peso (dissolvenza tra due pesi) */
.m3-weight{ display:inline-grid; vertical-align:baseline; }
.m3-weight > span{ grid-area:1 / 1; text-decoration:underline; text-decoration-thickness:.05em; text-underline-offset:.14em; text-decoration-color:rgba(247,247,248,.5); }
.m3-weight__thin{ font-weight:400; opacity:0; animation-name:m3-w-out; --tl:--amb; --r:contain 56% contain 66%; --ease:linear; }
.m3-weight__bold{ font-weight:800; animation-name:m3-w-in; --tl:--amb; --r:contain 56% contain 66%; --ease:linear; }
@keyframes m3-w-out{ from{ opacity:1; } }
@keyframes m3-w-in{ from{ opacity:0; } }

/* ════════════════════════════════════════════════════════════════
   6 · AGENZIA
   ════════════════════════════════════════════════════════════════ */
.m3-agency{ padding:var(--sec-y) 0; scroll-margin-top:70px; }
.m3-agency__grid{ display:grid; grid-template-columns:repeat(12,minmax(0,1fr)); column-gap:clamp(20px,2.4vw,40px); row-gap:40px; align-items:end; }
.m3-agency__head{ grid-column:1 / span 8; }
.m3-agency__title{ view-timeline:--agt block; font:var(--w-title) var(--fs-display)/var(--lh-display) var(--f-title); letter-spacing:var(--ls-display); }
.m3-agency__title em{ font-family:var(--f-accent); font-style:italic; font-weight:var(--w-accent); letter-spacing:var(--ls-accent); }
/* A20 · le parole del titolo salgono una dopo l'altra */
.m3-w--rise{ animation-name:m3-wrise; --tl:--agt; }
@keyframes m3-wrise{ from{ transform:translateY(.55em); opacity:0; } }
.m3-agency__text{ grid-column:9 / span 4; color:var(--t1); font-family:var(--f-text); font-weight:var(--w-text); font-size:var(--fs-body); line-height:var(--lh-body); }
.m3-agency__text p + p{ margin-top:1.1em; }
/* A21 · i principi 01 e 02 arrivano da sinistra e da destra */
.m3-manifesto{ margin-top:clamp(96px,14vh,170px); border-top:1px solid var(--rule); overflow-x:clip; }
.m3-mf{ display:grid; grid-template-columns:minmax(0,3fr) minmax(0,9fr); align-items:center; column-gap:clamp(20px,3vw,48px); padding:clamp(34px,5vw,68px) max(var(--gut), calc((100% - 1440px) / 2 + var(--gut))); border-bottom:1px solid var(--rule); }
.m3-mf--l{ animation-name:m3-from-l2; --r:entry 0% cover 42%; }
.m3-mf--r{ animation-name:m3-from-r2; --r:entry 0% cover 42%; }
@keyframes m3-from-l2{ from{ transform:translateX(-16vw); opacity:0; } }
@keyframes m3-from-r2{ from{ transform:translateX(16vw); opacity:0; } }
.m3-mf__txt{ color:var(--t1); text-wrap:balance; font:var(--w-text) var(--fs-h2)/1.16 var(--f-title); letter-spacing:var(--ls-h2); }
.m3-mf__txt strong{ color:var(--text); font-weight:var(--w-sub); }
/* A22 · i numeri in Mono contano (contachilometri) */
.m3-odo{ display:inline-block; color:var(--text); font-variant-numeric:tabular-nums; view-timeline:--odo block; font:var(--w-mono) var(--fs-display)/1 var(--f-mono); letter-spacing:-.04em; }
.m3-odo--sm{ 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); } }
.m3-agency .m3-wrap > .m3-tag{ margin-top:clamp(96px,14vh,160px); }
/* A23 · "Come lavoriamo": le linee verticali si disegnano in cascata */
.m3-ledger{ list-style:none; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); column-gap:clamp(20px,2.4vw,40px); row-gap:56px; }
.m3-ledger__item{ position:relative; padding:2px 0 0 clamp(18px,1.6vw,26px); }
.m3-ledger__rule{ position:absolute; left:0; top:0; bottom:0; width:1px; background:linear-gradient(180deg,rgba(247,247,248,.7),rgba(247,247,248,.08)); transform-origin:50% 0; animation-name:m3-sy; }
.m3-ledger__item:nth-child(1) .m3-ledger__rule{ --r:entry 0% cover 30%; }
.m3-ledger__item:nth-child(2) .m3-ledger__rule{ --r:entry 15% cover 36%; }
.m3-ledger__item:nth-child(3) .m3-ledger__rule{ --r:entry 30% cover 42%; }
.m3-ledger__item:nth-child(4) .m3-ledger__rule{ --r:entry 45% cover 48%; }
.m3-ledger h3{ margin:22px 0 12px; color:var(--text); font:var(--w-sub) var(--fs-h3)/var(--lh-h3) var(--f-title); letter-spacing:var(--ls-h3); }
.m3-ledger p{ color:var(--t1); font-family:var(--f-text); font-weight:var(--w-text); font-size:var(--fs-body); line-height:var(--lh-body); }

/* ════════════════════════════════════════════════════════════════
   8 · PARLIAMONE
   ════════════════════════════════════════════════════════════════ */
.m3-cta{ position:relative; height:190vh; view-timeline:--cta block; }
.m3-cta__stage{ position:sticky; top:0; height:100vh; height:100svh; overflow:clip; }
/* A26 · il pannello chiaro si apre da una fessura: la luce si accende */
.m3-cta__panel{ position:absolute; inset:0; display:flex; flex-direction:column; justify-content:center; padding:calc(var(--navh) * .9) var(--gut) clamp(32px,6vh,64px); background:var(--crimson); color:var(--text); animation-name:m3-open; --tl:--cta; --r:entry 40% contain 12%; --ease:cubic-bezier(.65,0,.35,1); }
@keyframes m3-open{ from{ clip-path:inset(47% 5% 47% 5% round 24px); } to{ clip-path:inset(0 0 0 0 round 0px); } }
.m3-cta__panel > *{ width:100%; max-width:1440px; margin-left:auto; margin-right:auto; }
/* A27 · il titolo cresce fino a riempire lo schermo */
.m3-cta__title{ position:relative; transform-origin:0 100%; animation-name:m3-fill; --tl:--cta; --r:entry 62% contain 28%; font:var(--w-title) var(--fs-hero)/var(--lh-hero) var(--f-title); letter-spacing:var(--ls-hero); }
@keyframes m3-fill{ from{ transform:scale(.62); opacity:0; } }
.m3-cta__l{ display:block; }
.m3-cta__title em{ padding-right:.06em; font-family:var(--f-accent); font-style:italic; font-weight:var(--w-accent); letter-spacing:var(--ls-accent); }
.m3-grad-ink{ padding-right:.08em; background:var(--firma-ink); -webkit-background-clip:text; background-clip:text; color:transparent; -webkit-text-fill-color:transparent; font-family:var(--f-accent); font-style:italic; font-weight:var(--w-accent); letter-spacing:var(--ls-accent); }
.m3-cta__row{ display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:22px 40px; margin-top:clamp(28px,5vh,60px); }
/* A28 · prima la riga di testo, per ultimo il pulsante */
.m3-cta__lead{ color:var(--t1); animation-name:m3-fadeup; --tl:--cta; --r:contain 20% contain 40%; font-size:var(--fs-lead); line-height:var(--lh-lead); }
.m3-cta__btnwrap{ display:inline-flex; animation-name:m3-fadeup; --tl:--cta; --r:contain 40% contain 58%; }

/* ════════════════════════════════════════════════════════════════
   Schermi medi e telefono
   ════════════════════════════════════════════════════════════════ */
@media (max-width:1100px){
  .m3-problem__col--a{ grid-column:1 / span 6; }
  .m3-problem__col--b{ grid-column:7 / span 6; }
  .m3-agency__head,.m3-agency__text{ grid-column:1 / -1; }
  .m3-agency__text{ max-width:62ch; }
  .m3-ledger{ grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:900px){ :root{ --navh:84px; } }
@media (max-width:768px){

  .m3-hero{ height:175vh; }
  .m3-hero__signs{ flex-direction:column; gap:6px; }

  .m3-hl{ white-space:normal; }
  .m3-hl--b{ padding-left:0; }
  .m3-hero__foot{ flex-direction:column; align-items:flex-start; }

  .m3-branch{ height:56px; }
  .m3-branch__bar,.m3-branch__drop{ display:none; }
  .m3-branch__stem{ height:56px; }
  .m3-doors{ grid-template-columns:minmax(0,1fr); }

  .m3-problem__col--a,.m3-problem__col--b{ grid-column:1 / -1; }
  @keyframes m3-par-b{ from{ transform:translateY(90px); } }
  .m3-amb{ height:200vh; }
  .m3-mf{ grid-template-columns:minmax(0,1fr); row-gap:14px; }
  .m3-ledger{ grid-template-columns:minmax(0,1fr); row-gap:44px; }
  .m3-cta{ height:170vh; }
  .m3-cta__row{ flex-direction:column; align-items:flex-start; }
}
@media (max-width:420px){
  .m3-pill{ padding:13px 18px; gap:10px; }
}

/* ════════════════════════════════════════════════════════════════
   Movimento ridotto: tutto fermo, solo dissolvenze
   ════════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion:reduce){
  .sd{ animation-name:none !important; }
  .m3-hero .m3-ch > i,.js .m3-hl--b,.js .m3-load{ 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; }
  .m3-btn,.m3-btn__arr,.m3-door,.m3-door__arr,.mx-arr,.mx-toc__arr{ transition-property:opacity; }
}

/* ════════════════════════════════════════════════════════════════
   Versione ferma (?fermo): tutte le sezioni al loro stato finale e il
   colore del cielo disteso su tutta la pagina. Serve per le foto.
   ════════════════════════════════════════════════════════════════ */
html.m3-still body{ position:relative; }
html.m3-still .sd,html.m3-still .m3-hero .m3-ch > i,html.m3-still .m3-hl--b,html.m3-still .m3-load{ animation:none !important; }
html.m3-still .m3-hero,html.m3-still .m3-amb,html.m3-still .m3-cta,html.m3-still .mx-works{ height:auto !important; }
html.m3-still .m3-hero__stage,html.m3-still .m3-amb__stage,html.m3-still .m3-cta__stage,html.m3-still .mx-works__stage{ position:relative; }

/* ════════════════════════════════════════════════════════════════
   MIX · parti nuove e importate
   ════════════════════════════════════════════════════════════════ */

/* ── Parola d'accento col gradiente del marchio (una per schermata) ── */
.mx-accent{ padding-right:.08em; background:var(--firma); -webkit-background-clip:text; background-clip:text; color:transparent; -webkit-text-fill-color:transparent; font-family:var(--f-accent); font-style:italic; font-weight:var(--w-accent); letter-spacing:var(--ls-accent); }
.mx-accent:has(.m3-w){ background:none; color:inherit; -webkit-text-fill-color:currentColor; padding-right:0; }
.mx-accent .m3-w{ padding-right:.08em; background:var(--firma); -webkit-background-clip:text; background-clip:text; color:transparent; -webkit-text-fill-color:transparent; }

/* ── 3 · Problema su carta. A30 · il foglio chiaro si apre fino ai bordi ── */
.mx-paper{ background:var(--paper); color:var(--ink); animation-name:mx-sheet; --r:entry 0% entry 75%; --ease:cubic-bezier(.25,1,.5,1); }
@keyframes mx-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 0px 0px 0px); } }
.mx-paper :focus-visible{ outline-color:var(--ink); }
.mx-paper .m3-tag{ color:rgba(13,12,17,.74); }
.mx-paper .m3-tag::after{ background:linear-gradient(90deg,rgba(13,12,17,.42),rgba(13,12,17,0)); }
.mx-paper .m3-problem__col{ color:rgba(13,12,17,.82); }
.mx-paper .m3-problem__col strong{ color:var(--ink); }
.mx-paper .m3-pull__a{ color:rgba(13,12,17,.8); }
.mx-paper .m3-pull__b em{ padding-right:.06em; background:var(--firma-ink); -webkit-background-clip:text; background-clip:text; color:transparent; -webkit-text-fill-color:transparent; }

/* ── 4 · Ambizione e 8 · Parliamone: l'unico passaggio di colore, cremisi → viola.
      A31 / A32 · il fondo scivola dal cremisi al viola mentre la scena resta ferma ── */
.mx-color{ isolation:isolate; background:var(--crimson); }
.mx-band{ position:absolute; left:0; right:0; top:0; height:200%; z-index:-1; pointer-events:none; background:linear-gradient(180deg,#A8293A 0%,#A8293A 18%,#5B2A6E 82%,#5B2A6E 100%); transform:translate3d(0,-25%,0); will-change:transform; }
.mx-band--amb{ animation-name:mx-band; --tl:--amb; --r:contain 0% contain 100%; --ease:linear; }
.mx-band--cta{ animation-name:mx-band; --tl:--cta; --r:entry 40% contain 100%; --ease:linear; }
@keyframes mx-band{ from{ transform:translate3d(0,0,0); } to{ transform:translate3d(0,-50%,0); } }
.m3-cta__panel > .mx-band{ width:auto; max-width:none; margin:0; }
.m3-cta__panel .m3-tag{ color:var(--t2); }
.m3-btn--paper{ background:var(--paper); color:var(--ink); }
.m3-btn--paper::before{ background:#ffffff; }
.m3-btn--paper:focus-visible{ outline-color:var(--paper); }

/* ── 5 · Lavori, dal Cinema: la scena resta ferma e le schede scorrono di lato ── */
.mx-works{ position:relative; height:300vh; view-timeline:--works block; }
.mx-works__stage{ position:sticky; top:0; height:100vh; height:100svh; overflow:clip; display:flex; flex-direction:column; justify-content:center; gap:clamp(18px,3.4vh,34px); padding-top:calc(var(--navh) * .55); background:var(--ink); }
.mx-works__stage > .m3-wrap{ width:100%; }
.mx-works__head{ display:flex; align-items:center; gap:14px 28px; flex-wrap:wrap; width:100%; }
.mx-works__head .m3-tag{ flex:1 1 200px; margin:0; }
.mx-works__count{ color:var(--t2); font-variant-numeric:tabular-nums; font:var(--w-mono) var(--fs-mono)/var(--lh-mono) var(--f-mono); letter-spacing:var(--ls-mono); }
.mx-works__count span{ color:var(--text); }
.mx-works__all{ display:inline-flex; align-items:center; gap:8px; padding-bottom:4px; border-bottom:1px solid rgba(247,247,248,.4); color:var(--text); font:var(--w-ui) var(--fs-btn)/1 var(--f-title); letter-spacing:var(--ls-ui); }
.mx-arr{ display:inline-block; transition:transform 200ms var(--e-out); }
/* (responsive 13/10) "Tutti i lavori" e "Tutti gli articoli": area di tocco di 44 px senza cambiare l'aspetto */
.mx-works__all,.mx-think__all{ position:relative; }
.mx-works__all::before,.mx-think__all::before{ content:''; position:absolute; inset:-12px -8px; }
.mx-works__viewport{ width:100%; }
/* A33 · la striscia scorre di lato mentre scendi */
.mx-track{ --ch:min(54vh,520px); --pad:max(var(--gut), calc((100vw - 1440px) / 2 + var(--gut))); display:flex; gap:clamp(16px,2vw,28px); width:max-content; padding:0 var(--pad); align-items:flex-start; animation-name:mx-track; --tl:--works; --r:contain 6% contain 94%; --ease:linear; }
@keyframes mx-track{ from{ transform:translate3d(0,0,0); } to{ transform:translate3d(calc(-1 * var(--dist, 0px)),0,0); } }
.mx-card{ flex:none; margin:0; }
.mx-card--v{ width:calc(var(--ch) * 9 / 16); }
.mx-card--h{ width:calc(var(--ch) * 16 / 9); }
/* A34 · la scheda al centro si ingrandisce e si accende (guidata da JS), il suo video parte */
.mx-card__media{ position:relative; height:var(--ch); overflow:hidden; border-radius:3px; background:#08070a; transform-origin:50% 60%; }
.mx-card__media video{ width:100%; height:100%; object-fit:cover; }
.mx-card figcaption{ display:flex; flex-wrap:wrap; align-items:baseline; gap:4px 10px; margin-top:14px; font:var(--w-mono) var(--fs-mono)/var(--lh-mono) var(--f-mono); letter-spacing:var(--ls-mono); }
.m3-film__n{ color:var(--t2); margin-right:4px; }
.m3-film__name{ color:var(--text); }
.m3-film__sec{ color:var(--t2); }
/* A36 · la linea sotto la striscia si riempie */
.mx-works__bar{ position:relative; height:1px; background:rgba(247,247,248,.14); }
.mx-works__bar i{ position:absolute; inset:0; display:block; background:rgba(247,247,248,.72); transform-origin:0 50%; animation-name:mx-bar; --tl:--works; --r:contain 6% contain 94%; --ease:linear; }
@keyframes mx-bar{ from{ transform:scaleX(0); } }

/* ── 7 · Pensiero, dalla Rivista: un sommario con le date in colonna ── */
.mx-think{ padding:var(--sec-y) 0; }
.mx-think__grid{ display:grid; grid-template-columns:repeat(12,minmax(0,1fr)); column-gap:clamp(20px,2.4vw,40px); row-gap:56px; align-items:end; }
.mx-think__head{ grid-column:1 / span 5; }
.mx-think__title{ view-timeline:--tt block; font:var(--w-title) var(--fs-display)/var(--lh-display) var(--f-title); letter-spacing:var(--ls-display); }
/* A37 · "Pensiero." sale dalla sua riga */
.mx-ln{ display:block; overflow:clip; padding-bottom:.2em; margin-bottom:-.2em; }
.mx-ln__in{ display:inline-block; animation-name:m3-rise; --tl:--tt; --r:entry 10% cover 40%; }
.mx-think__meta{ margin-top:26px; color:var(--t2); font:var(--w-mono) var(--fs-mono)/1.3 var(--f-mono); letter-spacing:var(--ls-label); text-transform:uppercase; }
.mx-think__all{ display:inline-flex; align-items:center; gap:10px; margin-top:36px; padding-bottom:6px; border-bottom:1px solid rgba(247,247,248,.5); color:var(--text); font:var(--w-ui) var(--fs-btn)/1 var(--f-title); letter-spacing:var(--ls-ui); }
.mx-toc{ grid-column:7 / -1; list-style:none; border-bottom:1px solid var(--rule); }
.mx-toc__row{ border-top:1px solid var(--rule); view-timeline:--row block; }
/* A38 · ogni riga del sommario si disegna da sinistra */
.mx-toc__a{ display:grid; grid-template-columns:minmax(0,9.5em) minmax(0,1fr) auto; column-gap:clamp(18px,2.4vw,36px); align-items:baseline; padding:clamp(28px,3.4vw,42px) 0; animation-name:mx-draw; --tl:--row; --r:entry 10% cover 38%; --ease:cubic-bezier(.65,0,.35,1); -webkit-tap-highlight-color:transparent; }
@keyframes mx-draw{ from{ clip-path:inset(-10% 100% -10% 0); } to{ clip-path:inset(-10% -2% -10% 0); } }
.mx-toc__date{ color:var(--t2); font:var(--w-mono) var(--fs-mono)/var(--lh-mono) var(--f-mono); letter-spacing:var(--ls-mono); }
.mx-toc__t{ color:var(--text); transform-origin:0 50%; transition:transform 160ms var(--e-out); font:var(--w-sub) var(--fs-h3)/var(--lh-h3) var(--f-title); letter-spacing:var(--ls-h3); }
/* A39 · la freccia arriva per ultima */
.mx-toc__arr{ align-self:end; font:300 26px/1 'Inter',sans-serif; transition:transform 220ms var(--e-out); animation-name:mx-fade; --tl:--row; --r:cover 28% cover 42%; }
@keyframes mx-fade{ from{ opacity:0; } }
.mx-toc__a:active .mx-toc__t{ transform:scale(.99); }
@media (hover:hover) and (pointer:fine){
  .mx-works__all:hover .mx-arr,.mx-think__all:hover .mx-arr{ transform:translateX(4px); }
  .mx-toc__a:hover .mx-toc__arr{ transform:translateX(6px); }
}

@media (max-width:900px){
  .mx-think__head,.mx-toc{ grid-column:1 / -1; }
  .mx-toc__a{ grid-template-columns:minmax(0,1fr) auto; row-gap:12px; }
  .mx-toc__date{ grid-column:1 / -1; }
}
@media (max-width:768px){
  .mx-track{ --ch:min(46svh,400px); }
  .mx-card--h{ width:calc(var(--ch) * 4 / 5); }
  .mx-works__stage{ gap:20px; }
}

/* Movimento ridotto e versione ferma per le parti del mix */
@media (prefers-reduced-motion:reduce){
  .mx-works{ height:auto !important; }
  .mx-works__stage{ position:relative; height:auto; padding:clamp(90px,14vh,150px) 0; }
  .mx-works__viewport{ overflow-x:auto; scroll-snap-type:x mandatory; padding-bottom:12px; }
  .mx-card{ scroll-snap-align:center; }
  .mx-band{ height:100%; transform:none; will-change:auto; }
}
html.m3-still .mx-works__stage{ height:auto; padding:clamp(90px,14vh,150px) 0; }
html.m3-still .mx-works__viewport{ overflow-x:auto; }
html.m3-still .mx-band{ height:100%; transform:none; will-change:auto; }

/* ════════════════════════════════════════════════════════════════
   Note di Ambro sul mix (13 ottobre)
   ════════════════════════════════════════════════════════════════ */

/* Nota 2 · la frase finale del Problema staccata da una linea sottile (A40: la linea si disegna) */
.mx-pull-rule{ position:relative; height:1px; margin-top:clamp(120px,15vh,160px); background:rgba(13,12,17,.1); }
.mx-pull-rule i{ position:absolute; inset:0; display:block; background:rgba(13,12,17,.5); transform-origin:0 50%; animation-name:m3-sx; --r:cover 12% cover 42%; --ease:cubic-bezier(.65,0,.35,1); }
.mx-paper .m3-pull{ margin-top:clamp(48px,6vh,72px); }

/* Nota 3 · schede costruite dall'elenco di dati */
.mx-card__link{ display:block; color:inherit; -webkit-tap-highlight-color:transparent; }
.mx-card__title{ display:block; width:100%; margin-bottom:4px; color:var(--text); font:var(--w-ui) var(--fs-card)/1.25 var(--f-title); letter-spacing:-.01em; }
.mx-works__noscript{ list-style:none; display:flex; flex-wrap:wrap; gap:8px 24px; padding:0 var(--gut); color:var(--t2); font:var(--w-mono) var(--fs-mono)/var(--lh-mono) var(--f-mono); letter-spacing:var(--ls-mono); }

/* Nota 4 · "Come lavoriamo" su un fondo appena più chiaro, staccato dai principi */
.m3-agency{ padding:var(--sec-y) 0; }
.mx-how{ margin-top:clamp(120px,15vh,160px); padding:var(--sec-y) 0; background:var(--surface); }
.m3-agency .mx-how .m3-wrap > .m3-tag{ margin-top:0; }

/* Nota 5 + 13 · Pensiero: titolo e lista allineati in alto, blocco titolo fermo mentre la lista
   scorre; titoli in Sora come nel resto del sito; sezione e data in Mono; la riga si illumina */
.mx-think__grid{ align-items:start; row-gap:40px; }
.mx-think__head{ grid-column:1 / span 4; position:sticky; top:calc(var(--navh) * .7 + 24px); padding-top:clamp(28px,3.4vw,42px); border-top:1px solid var(--rule); }
.mx-think__title{ font:var(--w-title) var(--fs-h2)/var(--lh-display) var(--f-title); letter-spacing:var(--ls-h2); }
.mx-think__meta{ margin-top:20px; }
.mx-think__all{ margin-top:28px; }
.mx-toc{ grid-column:6 / -1; }
.mx-toc__a{ position:relative; grid-template-columns:minmax(0,11em) minmax(0,1fr) auto; align-items:start; }
.mx-toc__row::before{ content:''; position:absolute; inset:0 calc(-1 * clamp(12px,1.4vw,20px)); z-index:-1; pointer-events:none; border-radius:var(--r-s); background:rgba(247,247,248,.045); opacity:0; transition:opacity var(--d-fast) ease; }
.mx-toc__row{ position:relative; z-index:0; }
.mx-toc__date{ display:flex; flex-direction:column; gap:8px; padding-top:.3em; }
.mx-toc__sec{ font:var(--w-mono) var(--fs-mono)/1.3 var(--f-mono); letter-spacing:var(--ls-label); text-transform:uppercase; color:var(--accent-t); }
.mx-toc__t{ max-width:30ch; text-wrap:balance; color:var(--t1); transition:color var(--d-fast) ease, transform var(--d-press) var(--e-out); }
.mx-toc__arr{ align-self:center; }
@media (hover:hover) and (pointer:fine){
  .mx-toc__row:hover::before{ opacity:1; }
  .mx-toc__a:hover .mx-toc__t{ color:var(--text); }
}
.mx-toc__row:focus-within::before{ opacity:1; }
@media (max-width:768px){
  .mx-toc__a{ grid-template-columns:minmax(0,1fr) auto; row-gap:12px; }
  .mx-toc__date{ grid-column:1 / -1; flex-direction:row; flex-wrap:wrap; gap:4px 14px; padding-top:0; }
}

/* Nota 6 · Parliamone: pulsante grande, bianco, accanto alla riga "Scrivici…" */
.m3-cta__row{ justify-content:flex-start; gap:20px 36px; margin-top:clamp(32px,5vh,56px); }
.m3-cta__lead{ color:var(--text); font-size:var(--fs-lead); line-height:var(--lh-lead); }
.m3-btn--paper{ background:#ffffff; color:var(--ink); }
.m3-btn--paper::before{ background:var(--amber-b); }
.m3-btn--big{ height:68px; padding:0 40px; gap:14px; box-shadow:0 10px 30px rgba(13,12,17,.28); font:var(--w-ui) var(--fs-btn-big)/1 var(--f-title); letter-spacing:-.01em; }

@media (max-width:900px){
  .mx-think__head{ position:static; grid-column:1 / -1; }
  .mx-toc{ grid-column:1 / -1; }
}
@media (max-width:768px){
  .m3-problem__col--a,.m3-problem__col--b{ max-width:none; }
  .m3-cta__row{ flex-direction:column; align-items:flex-start; }
  .m3-btn--big{ height:64px; padding:0 34px; }
}

/* ════════════════════════════════════════════════════════════════
   Parliamone rifatta (13 ottobre, nota di Ambro): il pulsante è la cosa
   più importante dello schermo. Tutto centrato, dentro il cremisi → viola.
   ════════════════════════════════════════════════════════════════ */
.m3-cta__panel{ align-items:center; text-align:center; }
.m3-cta__panel > .m3-tag{ justify-content:center; }
.m3-cta__title{ transform-origin:50% 100%; font:var(--w-title) var(--fs-hero)/var(--lh-hero) var(--f-title); letter-spacing:var(--ls-hero); }
.m3-cta__row{ flex-direction:column; align-items:center; justify-content:center; gap:clamp(26px,4vh,44px); margin-top:clamp(22px,3.6vh,40px); }
.m3-cta__lead{ color:var(--t1); font-size:var(--fs-lead); line-height:var(--lh-lead); }
/* A28 · il pulsante arriva per ultimo, crescendo da 0.9 a 1 */
.m3-cta__btnwrap{ animation-name:mx-btn-in; --tl:--cta; --r:contain 34% contain 54%; --ease:cubic-bezier(.23,1,.32,1); transform-origin:50% 50%; }
@keyframes mx-btn-in{ from{ opacity:0; transform:scale(.9); } }
/* effetto magnetico: lo sposta lo script, solo con il mouse */
.mx-mag{ display:inline-flex; will-change:transform; }
.mx-bigbtn{ position:relative; isolation:isolate; display:inline-flex; align-items:center; justify-content:center; min-width:360px; height:96px; padding:0 64px; border-radius:999px; color:var(--ink); white-space:nowrap; transition:transform 160ms var(--e-out); -webkit-tap-highlight-color:transparent; font:var(--w-ui) var(--fs-btn-big)/1 var(--f-title); letter-spacing:-.01em; }
.mx-bigbtn:active{ transform:scale(.97); }
.mx-bigbtn:focus-visible{ outline:3px solid #ffffff; outline-offset:8px; }
/* bordo a gradiente del marchio */
.mx-bigbtn::before{ content:''; position:absolute; inset:-3px; z-index:-1; border-radius:inherit; background:var(--firma); }
/* alone a gradiente che pulsa piano (solo opacità e scala) */
.mx-bigbtn::after{ content:''; position:absolute; inset:-12px; z-index:-2; border-radius:inherit; background:var(--firma); filter:blur(18px); opacity:.34; animation:mx-halo 5s ease-in-out infinite; }
@keyframes mx-halo{ 0%,100%{ opacity:.36; transform:scale(1); } 50%{ opacity:.66; transform:scale(1.04); } }
.mx-bigbtn__bg,.mx-bigbtn__fill{ position:absolute; inset:0; border-radius:inherit; }
.mx-bigbtn__bg{ background:#ffffff; }
.mx-bigbtn__fill{ background:var(--amber-b); opacity:0; transition:opacity 200ms ease; }
.mx-bigbtn__label{ position:relative; display:inline-flex; align-items:center; gap:16px; }
.mx-bigbtn__arr{ display:inline-block; transition:transform 200ms var(--e-out); }
@media (hover:hover) and (pointer:fine){
  .mx-bigbtn:hover .mx-bigbtn__fill{ opacity:1; }
  .mx-bigbtn:hover .mx-bigbtn__arr{ transform:translateX(5px); }
}
@media (max-width:768px){
  .m3-cta__row{ width:100%; align-items:stretch; }
  .m3-cta__btnwrap,.mx-mag,.mx-bigbtn{ width:100%; }
  .mx-bigbtn{ min-width:0; height:72px; padding:0 24px; }

}
@media (prefers-reduced-motion:reduce){
  .mx-bigbtn::after{ animation:none; opacity:.42; }
  .mx-bigbtn,.mx-bigbtn__arr{ transition-property:opacity; }
}
html.m3-still .mx-bigbtn::after{ animation:none; opacity:.42; }