/* ═══════════════════════════════════════════════════════════════════════
   Tatua · couche de mouvement (motion.css)   —   19/08/2026
   Chargée APRÈS styles.css : elle peut donc corriger ce qui précède.

   Trois règles tenues de bout en bout :
   1. on n'anime que transform / opacity / ombres  → zéro décalage de mise
      en page (CLS), tout est composité par le GPU ;
   2. aucun contenu n'est masqué par défaut. Les attributs data-mo et les
      classes .mo-* ne sont posés QUE par motion.js, et uniquement sur des
      éléments hors écran. Sans JS, la page reste entièrement lisible ;
   3. tout est neutralisé sous prefers-reduced-motion (bloc final).
   ═══════════════════════════════════════════════════════════════════════ */

/* ── 0. Correctif : l'ancien reveal masquait le contenu SANS JS ─────────
   styles.css pose [data-reveal]{opacity:0}. Si le JS échoue ou n'est pas
   exécuté (moteur de recherche, IA, réseau coupé), le bloc reste invisible.
   On le rend visible par défaut ; motion.js reprend l'animation à son compte. */
[data-reveal] { opacity: 1; transform: none; }

/* ── 1. Apparition au défilement ───────────────────────────────────────
   État de départ posé par le JS seulement (data-mo), retiré après coup. */
/* Sélecteur doublé volontairement : il porte la spécificité (0,2,0), au-dessus
   de .mo-lift et des utilitaires Tailwind (0,1,0) qui, sinon, imposeraient
   leur propre transition à l'élément et casseraient l'apparition.
   La transition n'est déclarée QUE sur l'état d'arrivée : poser l'état masqué
   est donc instantané (aucun fondu inverse visible), seule l'entrée s'anime. */
[data-mo][data-mo] {
  opacity: 0;
  transform: translate3d(0, 16px, 0);
  transition: none;
}
[data-mo="in"][data-mo] {
  opacity: 1;
  transform: none;
  transition: opacity .3s ease-out, transform .32s cubic-bezier(.22, 1, .36, 1);
  transition-delay: calc(var(--mo-d, 0) * 1ms);
}

/* ── 2. Cartes : élévation sobre au survol ─────────────────────────────── */
.mo-lift {
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.mo-lift:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 30px -14px rgba(0, 0, 0, .75), 0 0 0 1px rgba(16, 185, 129, .18);
}

/* ── 3. Vignettes : le zoom se fait DANS le cadre, jamais en débordement ──
   .gallery-tile porte son visuel en background-image inline : un pseudo-
   élément hérite de cette image et c'est LUI qui zoome, derrière l'overflow
   hidden du conteneur. Rien ne dépasse. */
.marquee-gallery .gallery-tile::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background-image: inherit;
  background-size: cover;
  background-position: center;
  transform: scale(1);
  transition: transform .35s cubic-bezier(.22, 1, .36, 1);
}
.marquee-gallery .gallery-tile:hover {
  transform: translateY(-4px);
  box-shadow: 0 18px 40px -16px rgba(16, 185, 129, .40);
}
.marquee-gallery .gallery-tile:hover::before { transform: scale(1.08); }

/* images nues du marquee « 100+ designs » : pas de cadre interne possible,
   on reste donc sur une élévation discrète qui ne se fait pas rogner. */
.marquee-gallery img:hover {
  transform: translateY(-4px) scale(1.03);
  box-shadow: 0 18px 40px -16px rgba(16, 185, 129, .40);
}

/* manchettes : l'image zoome à l'intérieur de la tuile (overflow hidden) */
.marquee-sleeves .sleeve-tile img {
  transition: transform .4s cubic-bezier(.22, 1, .36, 1);
}
.marquee-sleeves .sleeve-tile:hover {
  transform: translateY(-4px);
  box-shadow: 0 22px 50px -20px rgba(16, 185, 129, .45);
}
.marquee-sleeves .sleeve-tile:hover img { transform: scale(1.06); }

/* ── 4. Bouton principal : halo lent + enfoncement net ────────────────── */
@keyframes mo-halo {
  0%        { box-shadow: 0 0 0 0    rgba(16, 185, 129, .30); }
  70%, 100% { box-shadow: 0 0 0 10px rgba(16, 185, 129, 0);   }
}
.mo-cta { animation: mo-halo 2s ease-out infinite; }

.mo-press { transition: transform .1s ease; }
/* !important : main.js pose un transform inline (effet magnétique) sur les
   .btn-premium ; sans cela l'enfoncement au clic ne serait jamais visible. */
.mo-press:active { transform: scale(.97) !important; }

/* ── 5. Marquees : à l'arrêt hors écran (économie de peinture) ────────── */
.mo-paused .marquee-gallery-track,
.mo-paused .marquee-track { animation-play-state: paused; }

/* ── 6. Navigation : le fond se densifie au défilement ────────────────── */
nav.mo-nav {
  transition: background-color .3s ease, box-shadow .3s ease, border-color .3s ease;
}
nav.mo-nav.mo-solid {
  background-color: rgba(11, 11, 12, .95);
  border-bottom-color: rgba(16, 185, 129, .22);
  box-shadow: 0 8px 24px -12px rgba(0, 0, 0, .85);
}

/* ── 7. Respect de prefers-reduced-motion : plus rien ne bouge ─────────
   motion.js ne s'exécute déjà pas dans ce cas ; ce bloc couvre le
   basculement du réglage système APRÈS le chargement de la page. */
@media (prefers-reduced-motion: reduce) {
  [data-mo][data-mo],
  [data-mo="in"][data-mo] {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  .mo-lift:hover,
  .mo-press:active,
  .marquee-gallery .gallery-tile:hover,
  .marquee-gallery .gallery-tile:hover::before,
  .marquee-gallery img:hover,
  .marquee-sleeves .sleeve-tile:hover,
  .marquee-sleeves .sleeve-tile:hover img { transform: none !important; }
  .mo-cta { animation: none !important; }
  /* styles.css réduit la durée du marquee à 0.01ms, ce qui le fige sur sa
     seconde moitié. On l'annule franchement : la galerie reste lisible. */
  .marquee-gallery-track,
  .marquee-track { animation: none !important; }
}