/* MB Motion Engine v2 -- stili degli effetti.
   Ogni blocco corrisponde a una classe che si scrive nel campo
   "Classi CSS" del widget o del container in Elementor. */

:root{
  --mb-ease: cubic-bezier(.22,1,.36,1);
  --mb-ease-out: cubic-bezier(.16,1,.3,1);
  --mb-dur: 900ms;
  --mb-grain-opacity: .10;
}
html{scroll-behavior:smooth}
body{transition:background-color 800ms var(--mb-ease), color 800ms var(--mb-ease)}
*{-webkit-font-smoothing:antialiased}

/* ============================================================ PRELOADER */
.mb-preload:not(.mb-ready) .elementor{opacity:0}
.mb-preload .elementor{transition:opacity 700ms var(--mb-ease) 200ms}
.mb-loader{position:fixed; inset:0; z-index:999; display:flex; align-items:flex-end;
  justify-content:space-between; padding:6vw; background:var(--e-global-color-primary,#14110E);
  color:var(--e-global-color-secondary,#EFE9DF); transition:clip-path 1100ms var(--mb-ease-out);
  clip-path:inset(0 0 0 0)}
.mb-loader.mb-off{clip-path:inset(0 0 100% 0)}
.mb-loader-n{font-family:"Bricolage Grotesque",sans-serif; font-size:clamp(5rem,18vw,20rem);
  line-height:.8; letter-spacing:-.05em}
.mb-loader-bar{position:absolute; left:0; bottom:0; height:2px; width:100%;
  background:var(--e-global-color-accent,#FF4A17); transform:scaleX(0); transform-origin:0 50%;
  transition:transform 240ms linear}

/* ============================================================== mb-char
   Titolo lettera per lettera, con rotazione: da' peso fisico al testo. */
.mb-char .mb-word{display:inline-block; white-space:nowrap}
.mb-char .mb-c{display:inline-block; overflow:hidden; vertical-align:bottom;
  padding:.14em .01em .18em; margin:-.14em -.01em -.18em}
.mb-char .mb-c > span{display:inline-block; transform:translateY(110%) rotateX(-70deg);
  transform-origin:50% 100%; opacity:0;
  transition:transform 1000ms var(--mb-ease-out), opacity 700ms linear}
.mb-char.mb-in .mb-c > span{transform:none; opacity:1}

/* ============================================================= mb-split */
.mb-split .mb-w{display:inline-block; overflow:hidden; vertical-align:bottom;
  padding:.12em .02em .16em; margin:-.12em -.02em -.16em}
.mb-split .mb-w > span{display:inline-block; transform:translateY(115%);
  transition:transform 950ms var(--mb-ease-out)}
.mb-split.mb-in .mb-w > span{transform:none}

/* ============================================================ mb-reveal */
.mb-reveal > *{opacity:0; transform:translateY(34px);
  transition:opacity var(--mb-dur) var(--mb-ease), transform var(--mb-dur) var(--mb-ease)}
.mb-reveal.mb-in > *{opacity:1; transform:none}

/* ============================================================== mb-clip
   L'immagine si scopre con una tendina invece di comparire. */
.mb-clip img{clip-path:inset(0 0 100% 0); transform:scale(1.12);
  transition:clip-path 1300ms var(--mb-ease-out), transform 1600ms var(--mb-ease-out)}
.mb-clip.mb-in img{clip-path:inset(0 0 0 0); transform:none}

/* ============================================================ mb-marquee */
.mb-marquee, .mb-marquee *{white-space:nowrap}
.mb-marquee{overflow:hidden}
.mb-marquee .elementor-widget-container, .mb-marquee > .mb-track{
  display:inline-flex; flex-wrap:nowrap; width:max-content; gap:.6em;
  animation:mb-scroll 28s linear infinite}
.mb-marquee:hover .mb-track{animation-play-state:paused}
@keyframes mb-scroll{to{transform:translateX(-50%)}}

/* =========================================================== mb-hscroll
   La riga scorre in orizzontale mentre la pagina scende. La sezione va
   fatta alta (300vh) perche' l'altezza decide la durata della scorsa. */
.mb-hscroll{position:relative}
.mb-hscroll-track{position:sticky; top:0; height:100vh; display:flex !important;
  flex-direction:row !important; flex-wrap:nowrap !important; align-items:center;
  width:max-content; will-change:transform; gap:4vw; padding:0 6vw}

/* ============================================================== mb-stack */
.mb-stack{position:relative}
.mb-stack > .mb-card{position:sticky; will-change:transform; transition:filter 200ms linear}

/* ============================================================== mb-trail */
.mb-trail{position:relative; overflow:hidden}
.mb-trail-img{position:absolute; width:19vw; max-width:290px; aspect-ratio:4/5;
  object-fit:cover; pointer-events:none; opacity:0; z-index:4;
  transform:translate(-50%,-50%) scale(.72); will-change:transform,opacity}
.mb-trail-img.mb-on{animation:mb-trail 1500ms var(--mb-ease-out) forwards}
@keyframes mb-trail{
  0%{opacity:0; transform:translate(-50%,-50%) scale(.72)}
  12%{opacity:1; transform:translate(-50%,-50%) scale(1)}
  70%{opacity:1}
  100%{opacity:0; transform:translate(-50%,-46%) scale(1.02)}
}

/* ============================================================ mb-canvas */
.mb-canvas{position:absolute; inset:0; pointer-events:none; z-index:0}
.mb-canvas-dots{position:relative}
.mb-canvas-dots > *:not(.mb-canvas){position:relative; z-index:1}

/* ============================================================== mb-peek */
.mb-peek-src{display:none}
.mb-peek-img{position:fixed; top:0; left:0; width:21vw; max-width:330px; aspect-ratio:4/5;
  object-fit:cover; pointer-events:none; z-index:60; opacity:0; scale:.94;
  transform:translate(-50%,-50%);
  transition:opacity 420ms var(--mb-ease), scale 420ms var(--mb-ease)}
.mb-peek-img.mb-on{opacity:1; scale:1}
.mb-peek{transition:padding-left 600ms var(--mb-ease)}
.mb-peek:hover{padding-left:2.4rem !important}

/* ============================================================= cursore */
.mb-cursor{position:fixed; top:0; left:0; width:11px; height:11px; border-radius:50%;
  background:currentColor; pointer-events:none; z-index:70; mix-blend-mode:difference;
  transform:translate(-50%,-50%); display:grid; place-items:center;
  transition:width 400ms var(--mb-ease), height 400ms var(--mb-ease)}
.mb-cursor.mb-big{width:58px; height:58px}
.mb-cursor.mb-label{width:96px; height:96px}
.mb-cursor span{font-size:.7rem; letter-spacing:.1em; text-transform:uppercase;
  opacity:0; transition:opacity 250ms}
.mb-cursor.mb-label span{opacity:1}

/* =============================================================== magnete */
.mb-magnetic{transition:transform 500ms var(--mb-ease); display:inline-block}

/* ================================================================ grana */
.mb-grain::after{content:""; position:fixed; inset:-150%; z-index:50; pointer-events:none;
  opacity:var(--mb-grain-opacity);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:mb-grain 640ms steps(3) infinite}
@keyframes mb-grain{0%{transform:translate(0,0)}33%{transform:translate(-2%,1%)}66%{transform:translate(1%,-2%)}}

/* =================================================== classi di impaginazione */
.mb-cover .elementor-widget-container, .mb-cover figure, .mb-cover img{height:100%; width:100%; display:block}
.mb-cover img{object-fit:cover}
.mb-rot{writing-mode:vertical-rl; transform:rotate(180deg)}
.mb-outline{-webkit-text-stroke:1.5px currentColor; color:transparent !important}
.mb-mark{background-image:linear-gradient(transparent 58%, var(--e-global-color-accent) 58%);
  background-repeat:no-repeat; background-size:0% 100%;
  transition:background-size 1000ms var(--mb-ease) 400ms}
.mb-in .mb-mark{background-size:100% 100%}
.mb-header-over{position:fixed; top:0; left:0; right:0; z-index:40; mix-blend-mode:difference}
.mb-header-over *{color:#EFE9DF !important}

/* ================================================== elenco note (shortcode) */
.mb-nota{display:flex; flex-direction:column; gap:.5rem; padding:2.4rem 0; text-decoration:none;
  color:inherit; border-top:1px solid currentColor;
  transition:padding-left 600ms var(--mb-ease)}
.mb-nota:hover{padding-left:1.6rem}
.mb-nota-meta{font-size:.75rem; text-transform:uppercase; letter-spacing:.12em; opacity:.55}
.mb-nota-tit{font-family:"Bricolage Grotesque",sans-serif; font-size:clamp(1.6rem,3vw,2.9rem);
  line-height:1.04; letter-spacing:-.02em}
.mb-fonte a{font-size:.8rem; text-transform:uppercase; letter-spacing:.12em}

/* ============================================ pagina singola della nota */
.single-nota .page-content, .single-nota .entry-content{max-width:64ch; margin:0 auto; padding:0 40px}
.single-nota .entry-title, .single-nota h1{font-family:"Bricolage Grotesque",sans-serif;
  font-size:clamp(2.4rem,5vw,4.6rem); line-height:.98; letter-spacing:-.03em;
  max-width:20ch; margin:16rem auto 3rem; padding:0 40px}
.single-nota .entry-content p{margin:0 0 1.4em}
.single-nota .mb-fonte{margin-top:4rem; padding-top:1.4rem; border-top:1px solid rgba(20,17,14,.2)}
.single-nota footer, .single-nota .post-navigation{display:none}

/* ============================================================== mobile */
@media (max-width:1024px){
  .mb-hscroll-track{position:static; height:auto; width:auto; flex-wrap:wrap !important; padding:0 40px}
  .mb-stack > .mb-card{position:static !important; transform:none !important; filter:none !important}
  .mb-rot{writing-mode:horizontal-tb; transform:none}
}

/* ============================= chi ha chiesto meno movimento vede tutto fermo */
@media (prefers-reduced-motion:reduce){
  .mb-reveal > *, .mb-split .mb-w > span, .mb-char .mb-c > span{
    opacity:1 !important; transform:none !important; transition:none}
  .mb-clip img{clip-path:none; transform:none}
  .mb-marquee .mb-track{animation:none}
  .mb-grain::after{animation:none}
  .mb-cursor, .mb-loader{display:none}
  .mb-preload:not(.mb-ready) .elementor{opacity:1}
  html{scroll-behavior:auto}
}

/* ======================================================================
   IMPAGINAZIONE DA RIVISTA
   Serve un secondo carattere, un serif editoriale, altrimenti resta un
   sito con dei titoli grandi. Il grottesco fa da voce di servizio.
   ====================================================================== */
:root{ --mb-serif:"Instrument Serif", Georgia, serif; }

.mb-kicker{display:block; font-size:.68rem; text-transform:uppercase; letter-spacing:.16em;
  margin-bottom:.9rem; color:var(--e-global-color-accent)}
.mb-mag-tit{font-family:var(--mb-serif); font-weight:400; letter-spacing:-.01em; line-height:1.02;
  margin:0 0 .7rem}
.mb-mag-somm{font-size:1rem; line-height:1.55; opacity:.72; margin:0 0 1rem; max-width:56ch}
.mb-mag-data{font-size:.7rem; text-transform:uppercase; letter-spacing:.14em; opacity:.5}
.mb-mag a{text-decoration:none; color:inherit; display:block}
.mb-mag-media{display:block; overflow:hidden; margin-bottom:1.4rem}
.mb-mag-media img{width:100%; height:100%; object-fit:cover; display:block;
  transition:transform 1400ms var(--mb-ease-out)}
.mb-mag a:hover .mb-mag-media img{transform:scale(1.05)}

/* pezzo di apertura: due colonne, immagine grande a sinistra */
.mb-mag .mb-mag-lead{display:grid; grid-template-columns:1.25fr .95fr; gap:3.2rem; align-items:center;
  padding-bottom:3.4rem; border-bottom:1px solid currentColor}
.mb-mag-lead .mb-mag-media{aspect-ratio:4/3; margin:0}
.mb-mag-lead .mb-mag-tit{font-size:clamp(2.2rem,4.2vw,4.2rem)}
.mb-mag-lead .mb-mag-somm{font-size:1.12rem}

/* griglia dei pezzi secondari, con filetti verticali come in una pagina stampata */
.mb-mag .mb-mag-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:0; margin-top:3.4rem}
.mb-mag .mb-mag-item{display:block; padding:0 2.2rem; border-left:1px solid currentColor}
.mb-mag-item:first-child{padding-left:0; border-left:0}
.mb-mag-item:last-child{padding-right:0}
.mb-mag-item .mb-mag-media{aspect-ratio:3/2}
.mb-mag-item .mb-mag-tit{font-size:clamp(1.3rem,1.9vw,1.9rem)}

@media (max-width:1024px){
  .mb-mag .mb-mag-lead{grid-template-columns:1fr; gap:1.6rem}
  .mb-mag .mb-mag-grid{grid-template-columns:1fr; gap:2.6rem}
  .mb-mag-item{padding:0; border-left:0; border-top:1px solid currentColor; padding-top:2rem}
  .mb-mag-item:first-child{border-top:0; padding-top:0}
}

/* ======================================================================
   ARTICOLO SINGOLO, impostazione da rivista
   ====================================================================== */
.single-nota .entry-title, .single-nota h1{font-family:var(--mb-serif); font-weight:400;
  font-size:clamp(2.6rem,5.4vw,5.2rem); line-height:1.02; letter-spacing:-.015em;
  max-width:18ch; margin:14rem auto 1.6rem; padding:0 40px}
.single-nota .entry-content{max-width:66ch; margin:0 auto; padding:0 40px;
  font-size:1.22rem; line-height:1.72}
.single-nota .entry-content > p:first-of-type{font-family:var(--mb-serif); font-size:1.55rem;
  line-height:1.42; opacity:.9; margin-bottom:2.2rem}
.single-nota .entry-content > p:first-of-type::first-letter{float:left; font-family:var(--mb-serif);
  font-size:4.6em; line-height:.78; padding:.06em .1em 0 0; color:var(--e-global-color-accent)}
.single-nota .entry-content p{margin:0 0 1.5em}
.single-nota .mb-fonte{margin-top:4rem; padding-top:1.4rem; border-top:1px solid rgba(20,17,14,.25)}