/* ============================================================
   motion.css — transizioni reveal + split-text + cursore
   Motion: 1-parallax-hero, 4-split-text, 15-sticky-subnav,
           17-cursor-trail, 20-direction-aware, 21-aurora-mesh
   ============================================================ */

[data-reveal] {
  transition: opacity 0.9s var(--ease-out), transform 0.9s var(--ease-out);
}

/* Split-text: ogni parola entra dal basso */
.split-word {
  display: inline-block;
  overflow: hidden;
  vertical-align: top;
  /* respiro sotto la baseline: evita il taglio delle code (j, J, g, p) */
  padding-bottom: 0.16em;
  margin-bottom: -0.16em;
}
.split-word > span {
  display: inline-block;
  transform: translateY(110%);
  transition: transform 0.9s var(--ease-out);
}
.split-ready .split-word > span { transform: translateY(0); }
@media (prefers-reduced-motion: reduce) {
  .split-word > span { transform: none !important; }
}

/* Cursore di scia (desktop, pointer fine) */
.cursor-dot {
  position: fixed; top: 0; left: 0; z-index: 200;
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--c-sky);
  pointer-events: none;
  mix-blend-mode: normal;
  opacity: 0;
  transition: opacity 0.3s, width 0.25s var(--ease-smooth), height 0.25s var(--ease-smooth), background 0.25s;
  will-change: transform;
}
.cursor-ring {
  position: fixed; top: 0; left: 0; z-index: 200;
  width: 38px; height: 38px; border-radius: 50%;
  border: 1.5px solid rgba(79,159,214,0.55);
  pointer-events: none; opacity: 0;
  transition: opacity 0.3s, width 0.25s var(--ease-smooth), height 0.25s var(--ease-smooth), border-color 0.25s;
  will-change: transform;
}
.has-cursor .cursor-dot, .has-cursor .cursor-ring { opacity: 1; }
.cursor-ring.is-hover { width: 56px; height: 56px; border-color: var(--c-sky); }
.cursor-dot.is-hover { width: 5px; height: 5px; }
@media (hover: none), (pointer: coarse), (prefers-reduced-motion: reduce) {
  .cursor-dot, .cursor-ring { display: none; }
}

/* Nav che si “solidifica” dopo lo scroll */
.site-nav.scrolled {
  box-shadow: 0 6px 24px rgba(14,31,56,0.08);
  padding-top: 10px;
  padding-bottom: 10px;
}