/* 045 — Text Gravity
   Les lettres du titre réagissent à la proximité du curseur : elles se
   soulèvent et grossissent avec un falloff doux (loupe magnétique), puis
   reviennent en spring quand le pointeur s'éloigne. Le split en lettres et
   la physique sont gérés par anim.js — uniquement transform (translate +
   scale) sur des lettres inline-block : aucun décalage de layout. */

.text-gravity {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: min(320px, 100%);
  height: 210px;
  border-radius: 16px;
  text-align: center;
  background:
    radial-gradient(110% 85% at 50% -20%, rgba(45, 212, 191, 0.07), transparent 60%),
    var(--ml-surface, #151a24);
  border: 1px solid rgba(124, 140, 255, 0.14);
}

.text-gravity__kicker {
  margin: 0;
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ml-accent-2, #2dd4bf);
}

.text-gravity__text {
  margin: 0;
  font-size: 27px;
  font-weight: 750;
  letter-spacing: -0.01em;
  line-height: 1.25;
  color: var(--ml-fg, #e8eaf2);
  cursor: default;
}

.text-gravity__hint {
  margin: 0;
  font-size: 12px;
  color: var(--ml-muted, #8b91a3);
}

/* Structure injectée par anim.js (split lettres, aria-hidden) */
.text-gravity__split {
  display: inline;
}

.text-gravity__word {
  display: inline-block;
  white-space: nowrap; /* pas de coupure au milieu d'un mot */
}

.text-gravity__letter {
  display: inline-block;
  transform-origin: 50% 100%; /* la lettre pousse depuis sa base */
  will-change: transform;
}

@media (prefers-reduced-motion: reduce) {
  /* Le JS ne s'initialise pas : le titre reste du texte statique intact. */
  .text-gravity__letter {
    transform: none;
    will-change: auto;
  }
}