/* ═══════════════════════════════════════════════════════════════
   TITLES SHARED — regole CSS condivise tra home, V1 e V2.

   Estratte da index.html (.hero-title, .hw, .hw-i + chromatic
   vars mobile). Includere con <link rel="stylesheet" href="./titles-shared.css">
   in ogni pagina che usa la classe .hw-i o vuole il chromatic-split.

   Aggiungendo class="hw-i" (o "hw" wrapping) a un elemento qualsiasi
   nelle pagine V1/V2, l'effetto chromatic + il setup tipografico
   sono attivi automaticamente — esattamente come fa la home.
═══════════════════════════════════════════════════════════════ */

/* ── Hero title container ─────────────────────────────────── */
.hero-title {
  position: relative;
  z-index: 3;
  line-height: .9;
  transition: transform .08s cubic-bezier(0.22, 1, 0.36, 1);
}

/* ── Hero word block (overflow:hidden → maschera reveal yPercent) ── */
.hw {
  display: block;
  font-family: var(--FD);
  font-size: clamp(78px, 13.5vw, 194px);
  text-transform: uppercase;
  letter-spacing: -.025em;
  overflow: hidden;
}
.hw.c { text-align: center; }
.hw.r { text-align: right; }

/* ── Hero word inner — target di yPercent + scramble + chromatic ── */
.hw-i {
  display: inline-block;
  will-change: transform;
  /* CSS vars per chromatic split (azzurro #00AFAF + giallo #F2C700).
     Driven da JS (hero-fx.js sulla home, o tweak custom su V1/V2).
     Quando le vars non sono settate, no shadow visibile (0px). */
  --hf-a-x: 0px;
  --hf-a-y: 0px;
  --hf-y-x: 0px;
  --hf-y-y: 0px;
  text-shadow:
    var(--hf-a-x) var(--hf-a-y) 0 rgba(0,175,175,.35),
    var(--hf-y-x) var(--hf-y-y) 0 rgba(242,199,0,.35);
  will-change: text-shadow;
}
.hw-i.accent { color: var(--accent); }

/* ── Hero bar inferiore (info edizione + scroll hint) ─────
   Pattern home (index.html righe 253-260). Replicato qui per
   essere riutilizzabile su V1/V2. */
.hero-bar {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  position: relative;
  z-index: 3;
}
.hero-bar-l {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.mono-label {
  font-family: var(--RS);
  font-size: 14px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--muted);
}
.hero-date {
  font-family: var(--RS);
  font-size: 14px;
  color: var(--azzurro);
  letter-spacing: .05em;
  text-transform: uppercase;
}
.scroll-hint {
  display: flex;
  align-items: center;
  gap: 14px;
  font-family: var(--RS);
  font-size: 14px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--azzurro);
}
.s-line {
  width: 56px; height: 1px;
  background: var(--muted);
  position: relative;
  overflow: hidden;
}
.s-line::after {
  content: '';
  position: absolute;
  left: -100%; top: 0;
  width: 100%; height: 100%;
  background: var(--accent);
  animation: sline 2.2s cubic-bezier(0.22,1,0.36,1) infinite;
}
@keyframes sline { 0%{left:-100%} 100%{left:100%} }