/* ============================================================
   NS MOTION KIT — feuille d'animations maison
   NS Development · à inclure sur tous les sites
   Utilisation : <link rel="stylesheet" href="ns-motion.css">
                 <script src="ns-motion.js" defer></script>
   ============================================================ */

:root{
  --ns-ease:cubic-bezier(.22,.7,.2,1);      /* courbe douce et premium */
  --ns-ease-out:cubic-bezier(.16,1,.3,1);   /* sortie ample */
  --ns-dur:.8s;                              /* durée de base */
  --ns-dur-fast:.35s;
}

/* ------------------------------------------------------------
   0. Accessibilité : si l'utilisateur réduit les animations,
      tout s'affiche instantanément (rien ne bouge).
   ------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce){
  [data-reveal],[data-stagger] > *,.ns-split .ns-word,.ns-split .ns-char{
    opacity:1 !important;transform:none !important;filter:none !important;transition:none !important;
  }
  .ns-marquee__track{animation:none !important}
  html{scroll-behavior:auto !important}
}

/* ------------------------------------------------------------
   1. REVEAL — apparition à l'entrée dans l'écran
      <div data-reveal>            fondu + montée (défaut)
      <div data-reveal="left">     arrive de la gauche
      <div data-reveal="right">    arrive de la droite
      <div data-reveal="scale">    léger zoom
      <div data-reveal="blur">     fondu + flou
      <div data-reveal data-delay="200">  décalage en ms
   ------------------------------------------------------------ */
.js [data-reveal]{
  opacity:0;
  transition:opacity var(--ns-dur) var(--ns-ease),transform var(--ns-dur) var(--ns-ease),filter var(--ns-dur) var(--ns-ease);
  will-change:opacity,transform;
}
.js [data-reveal="up"],.js [data-reveal=""]{transform:translateY(34px)}
.js [data-reveal="left"]{transform:translateX(-44px)}
.js [data-reveal="right"]{transform:translateX(44px)}
.js [data-reveal="scale"]{transform:scale(.92)}
.js [data-reveal="blur"]{filter:blur(12px);transform:translateY(20px)}
.js [data-reveal].ns-in{opacity:1;transform:none;filter:none}

/* ------------------------------------------------------------
   2. STAGGER — les enfants apparaissent en cascade
      <div data-stagger>            (60ms entre chaque, par défaut)
      <div data-stagger="120">      (120ms entre chaque)
   ------------------------------------------------------------ */
.js [data-stagger] > *{
  opacity:0;transform:translateY(26px);
  transition:opacity .7s var(--ns-ease),transform .7s var(--ns-ease);
}
.js [data-stagger].ns-in > *{opacity:1;transform:none}

/* ------------------------------------------------------------
   3. SPLIT TEXT — le texte se révèle mot par mot ou lettre par lettre
      <h1 data-split>Mon titre</h1>            (par mots)
      <h1 data-split="chars">Mon titre</h1>    (par lettres)
   ------------------------------------------------------------ */
/* Ne pas forcer de display ici : un <h2 data-split> doit rester un bloc,
   sinon il remonte sur la ligne de l'intertitre qui le précède.
   Ce sont les mots/lettres qui portent l'inline-block. */
.ns-split .ns-line{display:block;overflow:hidden}
.ns-split .ns-word,.ns-split .ns-char{
  display:inline-block;opacity:0;transform:translateY(100%);
  transition:opacity .7s var(--ns-ease-out),transform .8s var(--ns-ease-out);
}
.ns-split.ns-in .ns-word,.ns-split.ns-in .ns-char{opacity:1;transform:none}

/* ------------------------------------------------------------
   4. MARQUEE — bandeau défilant infini
      <div class="ns-marquee"><div class="ns-marquee__track">
        <span>Texte ✦ </span><span>Texte ✦ </span></div></div>
      Vitesse : style="--ns-marquee-speed:26s"
   ------------------------------------------------------------ */
.ns-marquee{overflow:hidden;white-space:nowrap;width:100%}
.ns-marquee__track{display:inline-block;animation:ns-scroll var(--ns-marquee-speed,24s) linear infinite}
.ns-marquee:hover .ns-marquee__track{animation-play-state:paused}
@keyframes ns-scroll{to{transform:translateX(-50%)}}

/* ------------------------------------------------------------
   5. INTERACTIONS AU SURVOL
   ------------------------------------------------------------ */
/* Lien avec soulignement qui se déploie */
.ns-link{position:relative;display:inline-block}
.ns-link::after{
  content:"";position:absolute;left:0;bottom:-3px;width:0;height:1.5px;
  background:currentColor;transition:width var(--ns-dur-fast) var(--ns-ease);
}
.ns-link:hover::after{width:100%}

/* Bouton avec reflet qui passe */
.ns-shine{position:relative;overflow:hidden}
.ns-shine::before{
  content:"";position:absolute;top:0;left:-120%;width:55%;height:100%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.35),transparent);
  transform:skewX(-20deg);
}
.ns-shine:hover::before{animation:ns-shine .9s ease}
@keyframes ns-shine{to{left:130%}}

/* Image qui zoome doucement dans son cadre */
.ns-zoom{overflow:hidden}
.ns-zoom img{transition:transform 1.1s var(--ns-ease);display:block;width:100%}
.ns-zoom:hover img{transform:scale(1.06)}

/* Carte qui se soulève */
.ns-lift{transition:transform var(--ns-dur-fast) var(--ns-ease),box-shadow var(--ns-dur-fast) var(--ns-ease)}
.ns-lift:hover{transform:translateY(-6px)}

/* Carte 3D qui suit la souris — ajouter data-tilt */
[data-tilt]{transform-style:preserve-3d;transition:transform .25s var(--ns-ease)}
[data-tilt] > *{transform:translateZ(20px)}

/* Bouton magnétique — ajouter data-magnetic */
[data-magnetic]{transition:transform .25s var(--ns-ease)}

/* ------------------------------------------------------------
   6. BARRE DE PROGRESSION DE LECTURE
      <div class="ns-progress"></div>  (à mettre juste après <body>)
   ------------------------------------------------------------ */
.ns-progress{
  position:fixed;top:0;left:0;height:3px;width:0;z-index:9999;
  background:var(--ns-progress-color,currentColor);transition:width .1s linear;
}

/* ------------------------------------------------------------
   7. TRANSITION ENTRE LES PAGES (fondu)
      Activer avec <body data-page-transition>
   ------------------------------------------------------------ */
.js [data-page-transition]{animation:ns-page-in .5s var(--ns-ease) both}
.js [data-page-transition].ns-leaving{animation:ns-page-out .35s var(--ns-ease) both}
@keyframes ns-page-in{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@keyframes ns-page-out{to{opacity:0;transform:translateY(-8px)}}

/* ------------------------------------------------------------
   8. UTILITAIRES
   ------------------------------------------------------------ */
.ns-float{animation:ns-float 6s ease-in-out infinite}
@keyframes ns-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}}

.ns-pulse{animation:ns-pulse 2.4s ease-in-out infinite}
@keyframes ns-pulse{0%,100%{opacity:1}50%{opacity:.45}}

/* Dégradé animé pour un titre marquant */
.ns-gradient-text{
  background:linear-gradient(90deg,var(--ns-g1,#3b78ff),var(--ns-g2,#7ea6ff),var(--ns-g1,#3b78ff));
  background-size:200% auto;-webkit-background-clip:text;background-clip:text;color:transparent;
  animation:ns-gradient 6s linear infinite;
}
@keyframes ns-gradient{to{background-position:200% center}}