/* ECS — motion layer (editorial reveals)
   Hidden states are gated behind html.om-ready so nothing disappears if JS fails. */

@media (prefers-reduced-motion: no-preference) {

  /* 2 — Titoli parola per parola.
     The mask box is inflated on every side (padding + equal negative margin) so
     accents, ascenders and italic descenders are never sliced, with zero layout shift. */
  /* 2 — Titoli parola per parola: real leading so display-font ascent/descent
     never intrudes into the adjacent line on tight-line-height multi-line headings.
     Unconditional — this is a rendering-correctness fix, not an animation effect. */
  [data-om-split] { line-height: 1.15 !important; }
  h1[data-om-split] { line-height: 1.02 !important; }

  .om-w {
    display: inline-block; vertical-align: baseline;
  }
  .om-wi { display: inline-block; }
  html.om-ready .om-wi {
    transform: translateY(16px);
    opacity: 0;
    transition: transform .7s cubic-bezier(.19,1,.22,1), opacity .7s cubic-bezier(.19,1,.22,1);
    transition-delay: var(--d, 0ms);
    will-change: transform, opacity;
  }
  html.om-ready .om-in .om-wi { transform: translateY(0); opacity: 1; }

  /* 3 — Righe di sezione che si disegnano (gated: without om-ready the real border stays) */
  .om-rule { position: relative; }
  html.om-ready .om-rule { border-bottom-color: transparent !important; }
  html.om-ready .om-rule::after {
    content: ''; position: absolute; left: 0; right: 0; bottom: -1px;
    height: 1px; background: var(--om-rule-c, currentColor);
    transform: scaleX(0); transform-origin: left center;
    transition: transform 1.45s cubic-bezier(.33,.05,.2,1);
  }
  html.om-ready .om-rule.om-in::after { transform: scaleX(1); }

  /* 4 — Media: entrata leggera (fade + salita). Applied to the WRAPPER, never to the
     <img> itself: clipping/hiding the observed node would collapse its intersection
     area and deadlock its own reveal. Portfolio thumbnails are excluded on purpose —
     there the only motion is the hover zoom. */
  html.om-ready .om-rise {
    opacity: 0; transform: translateY(16px);
    transition: opacity .82s cubic-bezier(.19,1,.22,1), transform .82s cubic-bezier(.19,1,.22,1);
    transition-delay: var(--d, 0ms);
    will-change: opacity, transform;
  }
  html.om-ready .om-rise.om-in { opacity: 1; transform: none; }

  /* 5 — Header che si compatta allo scroll */
  .nav { transition: padding .42s cubic-bezier(.2,.7,.3,1), background-color .42s cubic-bezier(.2,.7,.3,1), box-shadow .42s cubic-bezier(.2,.7,.3,1); }
  .nav .logo { transition: height .42s cubic-bezier(.2,.7,.3,1); }
  .nav.om-shrunk { padding-top: 11px; padding-bottom: 11px; box-shadow: 0 1px 0 var(--line), 0 10px 30px rgba(22,20,15,.06); }
  .nav.om-shrunk .logo { height: 48px; }

  /* 6 — Cifre che salgono */
  .om-num { font-variant-numeric: tabular-nums; }

  /* 8 — Filtri portfolio: uscita/rientro in sequenza */
  .pf-item { transition: opacity .34s cubic-bezier(.2,.7,.3,1), transform .34s cubic-bezier(.2,.7,.3,1); }
  .pf-item.om-out { opacity: 0; transform: translateY(10px); }
}

/* Print / export: never ship a blank page */
@media print {
  html.om-ready .om-wi { opacity: 1 !important; transform: none !important; }
  html.om-ready .om-rise { opacity: 1 !important; transform: none !important; }
  html.om-ready .om-rule { border-bottom-color: var(--om-rule-c) !important; }
  html.om-ready .om-rule::after { transform: scaleX(1) !important; }
  .nav.om-shrunk { box-shadow: none !important; }
}