/* =========================================================
   MOTION KIT — La Soglia dell'Anima
   Voce: la luce che passa dal varco. Lenta, calda, respirata.
   Palette Pietra & Ocra · Cormorant Garamond + Jost
   Dipendenze: nessuna. Va dopo assets/styles.css.
   ========================================================= */

:root{
  /* --- tempi: la Soglia respira, non scatta --- */
  --m-istante:.22s;   /* feedback immediato: focus, colore */
  --m-gesto:.42s;     /* stati: hover, apertura, filetti */
  --m-respiro:.9s;    /* ingressi in scena */
  --m-varco:1.15s;    /* il momento signature dell'hero */

  /* --- curve: decelerazione lunga, mai rimbalzo --- */
  --m-ease:cubic-bezier(.22,1,.36,1);      /* quint out — il default */
  --m-ease-varco:cubic-bezier(.16,1,.3,1); /* expo out — l'apertura */

  /* --- geometria del movimento --- */
  --m-salita:26px;     /* traslazione degli ingressi */
  --m-velo:8px;        /* sfocatura d'ingresso: la luce che mette a fuoco */
  --m-passo:90ms;      /* ritardo fra fratelli in sequenza */
  --m-passi-max:8;     /* oltre l'ottavo elemento la sequenza non cresce */

  /* --- materiali --- */
  --m-alone:0 18px 46px -22px rgba(212,160,74,.55);
  --m-alone-tenue:0 10px 30px -22px rgba(44,46,43,.5);
}

/* =========================================================
   1 · m-entra — l'ingresso in scena
   Sostituisce .reveal. Opacità + salita + messa a fuoco.
   Visibile di default: si nasconde solo se il JS del kit è vivo,
   così una pagina senza JS (o un renderer headless) resta leggibile.
   ========================================================= */

.js-m .m-entra{
  opacity:0;
  transform:translate3d(0,var(--m-salita),0);
  filter:blur(var(--m-velo));
  transition:
    opacity var(--m-respiro) var(--m-ease),
    transform var(--m-respiro) var(--m-ease),
    filter var(--m-respiro) var(--m-ease);
  will-change:opacity,transform;
}
.js-m .m-entra.is-in{
  opacity:1;
  transform:none;
  filter:none;
  will-change:auto;
}

/* varianti direzionali — per composizioni asimmetriche (ritratti, media affiancati) */
.js-m .m-entra--da-sx{transform:translate3d(calc(var(--m-salita) * -1),0,0)}
.js-m .m-entra--da-dx{transform:translate3d(var(--m-salita),0,0)}

/* variante "affiora": solo luce, nessuno spostamento.
   Per i blocchi di testo lunghi, dove la salita disturba la lettura. */
.js-m .m-entra--affiora{transform:none;filter:blur(4px)}

/* =========================================================
   2 · m-seq — la sequenza fra fratelli
   Legittima su liste e griglie vere. Mai su sezioni intere.
   Uso: <ul class="m-seq"> con .m-entra sui figli.
   ========================================================= */

.js-m .m-seq > .m-entra{
  transition-delay:calc(min(var(--i,0), var(--m-passi-max)) * var(--m-passo));
}

/* =========================================================
   3 · m-varco — il momento signature
   Il titolo/l'immagine si apre come una soglia di luce: la maschera
   sale dal basso mentre un filo d'oro attraversa il varco.
   Riservato a UN elemento per pagina (hero, o apertura di capitolo).
   ========================================================= */

.js-m .m-varco{
  clip-path:inset(0 0 100% 0);
  opacity:.001;
  transition:
    clip-path var(--m-varco) var(--m-ease-varco),
    opacity calc(var(--m-varco) * .5) linear;
}
.js-m .m-varco.is-in{
  clip-path:inset(0 0 0 0);
  opacity:1;
}

/* il filo d'oro che accompagna l'apertura */
.js-m .m-varco::after{
  content:"";
  position:absolute;left:0;right:0;bottom:0;height:1px;
  background:linear-gradient(90deg,transparent,var(--ocra,#D4A04A),transparent);
  opacity:0;
  pointer-events:none;
}
.js-m .m-varco.is-in::after{
  animation:m-filo-passa var(--m-varco) var(--m-ease-varco) both;
}
@keyframes m-filo-passa{
  0%{opacity:0;transform:scaleX(.2)}
  45%{opacity:.9}
  100%{opacity:0;transform:scaleX(1)}
}

/* =========================================================
   4 · m-filo — il filetto che si traccia
   Separatore d'oro che cresce dal centro quando la sezione entra.
   Sostituisce i separatori statici sotto i titoli di sezione.
   ========================================================= */

.m-filo{
  display:block;
  width:min(64px,20vw);height:1px;
  margin-inline:auto;
  background:linear-gradient(90deg,transparent,var(--ocra,#D4A04A),transparent);
  transform-origin:center;
}
.js-m .m-filo{transform:scaleX(0);opacity:0;
  transition:transform var(--m-respiro) var(--m-ease),opacity var(--m-gesto) linear}
.js-m .m-filo.is-in{transform:scaleX(1);opacity:.75}

/* =========================================================
   5 · m-luce — la luce al passaggio (hover su media)
   Anello d'oro interno + schiarita minima. Nessun ingrandimento
   brusco: l'immagine è protagonista, il movimento la serve.
   ========================================================= */

.m-luce{position:relative;overflow:hidden;isolation:isolate}
.m-luce img,.m-luce video{
  transition:transform 1.1s var(--m-ease),filter var(--m-gesto) var(--m-ease);
}
.m-luce::after{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:2;
  border-radius:inherit;
  box-shadow:inset 0 0 0 0 rgba(212,160,74,0);
  transition:box-shadow var(--m-gesto) var(--m-ease);
}
@media (hover:hover){
  .m-luce:hover img,.m-luce:hover video,
  .m-luce:focus-within img,.m-luce:focus-within video{
    transform:scale(1.035);
    filter:brightness(1.05) saturate(1.04);
  }
  .m-luce:hover::after,.m-luce:focus-within::after{
    box-shadow:inset 0 0 0 2px rgba(212,160,74,.6);
  }
}

/* =========================================================
   6 · m-alza — il sollevamento (card, ritratti, eventi)
   2px e un alone lungo. Mai ombre corte e dure.
   ========================================================= */

.m-alza{transition:transform var(--m-gesto) var(--m-ease),box-shadow var(--m-gesto) var(--m-ease)}
@media (hover:hover){
  .m-alza:hover,.m-alza:focus-visible{transform:translateY(-3px);box-shadow:var(--m-alone-tenue)}
}

/* =========================================================
   7 · m-lampo — il lampo di luce sul bottone primario
   (formalizza l'effetto già presente sul sito)
   ========================================================= */

.m-lampo{position:relative;overflow:hidden}
.m-lampo::after{
  content:"";position:absolute;top:0;left:-120%;width:60%;height:100%;
  background:linear-gradient(105deg,transparent,rgba(255,255,255,.55),transparent);
  transform:skewX(-18deg);
  transition:left .7s var(--m-ease);
  pointer-events:none;
}
@media (hover:hover){
  .m-lampo:hover::after,.m-lampo:focus-visible::after{left:130%}
}

/* =========================================================
   8 · m-sotto — la sottolineatura che cresce dal centro (link)
   ========================================================= */

.m-sotto{position:relative;padding-bottom:3px}
.m-sotto::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:1px;
  background:var(--ocra,#D4A04A);
  transform:scaleX(0);
  transform-origin:center;
  transition:transform var(--m-gesto) var(--m-ease);
}
.m-sotto:hover::after,.m-sotto:focus-visible::after{transform:scaleX(1)}

/* =========================================================
   9 · m-progresso — il filo di lettura (articoli /riflessioni)
   Scroll-driven puro, zero JS. Dove non è supportato la barra
   semplicemente non avanza: nessun contenuto ne dipende.
   Uso: <div class="m-progresso" aria-hidden="true"></div>
   ========================================================= */

.m-progresso{
  position:fixed;top:0;left:0;right:0;height:2px;z-index:60;
  transform-origin:0 50%;
  transform:scaleX(0);
  background:linear-gradient(90deg,var(--ocra-deep,#7a5614),var(--ocra,#D4A04A));
  pointer-events:none;
}
@supports (animation-timeline:scroll()){
  .m-progresso{
    animation:m-avanza linear both;
    animation-timeline:scroll(root block);
  }
}
@keyframes m-avanza{from{transform:scaleX(0)}to{transform:scaleX(1)}}

/* =========================================================
   10 · m-parallasse — il respiro lento dello sfondo hero
   Scroll-driven puro. Senza supporto resta un'immagine ferma.
   ========================================================= */

@supports (animation-timeline:view()){
  .m-parallasse{
    animation:m-deriva linear both;
    animation-timeline:view();
    animation-range:cover 0% cover 100%;
    will-change:transform;
  }
}
@keyframes m-deriva{
  from{transform:scale(1.08) translate3d(0,-2.5%,0)}
  to{transform:scale(1.08) translate3d(0,2.5%,0)}
}

/* =========================================================
   11 · m-emblema — il respiro dell'emblema
   Ciclo lunghissimo e ampiezza minima: si percepisce, non si guarda.
   Solo sull'emblema dell'hero, mai su più di un elemento per pagina.
   ========================================================= */

.m-emblema{animation:m-pulsa 7s ease-in-out infinite}
@keyframes m-pulsa{
  0%,100%{opacity:.92;filter:drop-shadow(0 6px 18px rgba(0,0,0,.4))}
  50%{opacity:1;filter:drop-shadow(0 6px 26px rgba(212,160,74,.42))}
}

/* =========================================================
   12 · Transizione di pagina — attraversare la soglia
   View Transitions cross-document: dissolvenza calda fra le pagine.
   Degrada da sé sui browser che non la supportano.
   ========================================================= */

@view-transition{navigation:auto}

::view-transition-old(root){
  animation:m-esci .32s var(--m-ease) both;
}
::view-transition-new(root){
  animation:m-entra-pagina .52s var(--m-ease) both;
}
@keyframes m-esci{to{opacity:0}}
@keyframes m-entra-pagina{from{opacity:0;transform:translate3d(0,10px,0)}}

/* elemento condiviso: l'emblema resta fermo mentre la pagina cambia */
.m-persiste{view-transition-name:m-emblema-soglia}

/* =========================================================
   13 · Accessibilità — non opzionale
   Chi ha prefers-reduced-motion vede lo stato finale, subito.
   ========================================================= */

@media (prefers-reduced-motion:reduce){
  .js-m .m-entra,
  .js-m .m-varco,
  .js-m .m-filo{
    opacity:1 !important;
    transform:none !important;
    filter:none !important;
    clip-path:none !important;
    transition:opacity .01ms !important;
  }
  .js-m .m-varco::after{display:none}
  .m-emblema{animation:none}
  .m-progresso{animation:none;transform:scaleX(0)}
  .m-parallasse{animation:none;transform:scale(1.05)}
  .m-lampo::after{display:none}
  .m-luce img,.m-luce video,.m-alza{transition:none}
  @view-transition{navigation:none}
}

/* stato di focus coerente col brand, su ogni primitiva interattiva */
.m-luce:focus-visible,.m-alza:focus-visible,.m-sotto:focus-visible,.m-lampo:focus-visible{
  outline:2px solid var(--ocra,#D4A04A);
  outline-offset:3px;
}