/* ============================================================
   NO LOOK, effets ajoutés le 10/10/2026 (inspiration marketplace Framer).
   Strictement additif : classes nlx-*, posées par nl-effets.js ou ajoutées
   sur des éléments existants sans retirer aucune de leurs classes.
   Aucun effet existant (AOS, ticker, carrousel 3D, dock, curseur, tilt,
   spotlight, magnétique, halos, préchargeur) n'est modifié ici.
   ============================================================ */

/* 1. Lettres qui roulent au survol des boutons d'appel à l'action.
   Le découpage en lettres n'a lieu qu'au premier survol à la souris : au
   repos et au tactile, le bouton reste exactement celui d'avant. */
.nlx-roll { display: inline-block; overflow: hidden; vertical-align: top; height: var(--nlx-lh); line-height: var(--nlx-lh); }
.nlx-roll > span { display: inline-block; white-space: pre; text-shadow: 0 var(--nlx-lh) currentColor; transition: transform .5s var(--ease-no-look, cubic-bezier(.25,1,.5,1)); transition-delay: calc(var(--i) * 16ms); }
.nlx-roll-on:hover .nlx-roll > span,
.nlx-roll-on:focus-visible .nlx-roll > span { transform: translateY(calc(-1 * var(--nlx-lh))); }

/* 2. Liseré lumineux qui tourne autour des cartes de packs, au survol. */
@property --nlx-a { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
.nlx-edge::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1.5px; pointer-events: none; z-index: 6;
  background: conic-gradient(from var(--nlx-a), transparent 0 55%, rgba(0,71,255,.0) 55%, #0047FF 78%, #9CC3FF 86%, transparent 94%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  opacity: 0; transition: opacity .4s var(--ease-no-look, ease);
}
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .nlx-edge:hover::before { opacity: 1; animation: nlxTourne 2.8s linear infinite; }
}
@keyframes nlxTourne { to { --nlx-a: 360deg; } }

/* 3. Pastille qui glisse sous le lien survolé de la navigation. */
.nlx-pill-host { position: relative; }
.nlx-pill-host > a { position: relative; z-index: 1; }
.nlx-pill {
  position: absolute; left: 0; top: 0; width: 0; height: 0; border-radius: 9999px; pointer-events: none; z-index: 0;
  background: rgba(0,71,255,.15); box-shadow: inset 0 0 0 1px rgba(0,71,255,.35), 0 0 18px rgba(0,71,255,.18);
  opacity: 0; transition: transform .38s var(--ease-no-look, ease), width .38s var(--ease-no-look, ease), height .38s var(--ease-no-look, ease), opacity .25s ease;
}
.nlx-pill.nlx-pill-on { opacity: 1; }
.nlx-pill.nlx-pill-saut { transition: opacity .25s ease; }

/* 4. Manifeste révélé mot par mot au défilement. */
.nlx-manif .nlx-mot { opacity: .22; transition: opacity .35s ease; }
.nlx-manif .nlx-mot.nlx-on { opacity: 1; }

/* 6. Fond de points réactif derrière le CTA final. */
.nlx-points {
  position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: -1;
  -webkit-mask-image: radial-gradient(ellipse 60% 55% at 50% 28%, #000 25%, transparent 78%);
  mask-image: radial-gradient(ellipse 60% 55% at 50% 28%, #000 25%, transparent 78%);
}

@media (prefers-reduced-motion: reduce) {
  .nlx-roll > span { transition: none; }
  .nlx-roll-on:hover .nlx-roll > span, .nlx-roll-on:focus-visible .nlx-roll > span { transform: none; }
  .nlx-manif .nlx-mot { opacity: 1; }
  .nlx-pill { display: none; }
}