/* =====================================================================
   LA MAISON DU MUSCLE — COUCHE « MOTION » V2 (additive, DA02 « L'Usine »)
   ---------------------------------------------------------------------
   Ajoute UNIQUEMENT du mouvement & de la profondeur : préloader, curseur
   réticule, apparitions, parallaxe, micro-interactions. AUCUNE couleur ni
   structure de la DA02 n'est modifiée.
   100 % réversible → supprimer motion.css + motion.js + les <script>
   ajoutés dans les pages, et le site revient exactement à l'état validé.
   Tout est conditionné à html.motion (posée par le script du <head>,
   retirée automatiquement si motion.js ne se charge pas).
   ===================================================================== */

/* --- Lenis : scroll inertiel (réglages recommandés) --- */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: hidden; }

/* =====================================================================
   1. PRÉLOADER « plaque d'atelier » (1 fois par session)
   ===================================================================== */
.preloader { display: none; }
html.motion:not(.no-intro) .preloader {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  position: fixed; inset: 0; z-index: 300; background: var(--black);
  /* Filet CSS pur : si le JS meurt, le préloader s'efface tout seul. */
  animation: preloader-bail .45s ease 4s forwards;
}
html.motion:not(.no-intro).preloading { overflow: hidden; }
@keyframes preloader-bail { to { opacity: 0; visibility: hidden; pointer-events: none; } }

.preloader__inner { display: flex; flex-direction: column; align-items: center; gap: 1.2rem; text-align: center; padding: 0 6%; }
.preloader__logo { height: 74px; width: auto; }
.preloader__count {
  font-family: 'Anton', sans-serif; font-size: clamp(4rem, 14vw, 8.5rem);
  line-height: .9; color: var(--hazard); letter-spacing: .01em;
  font-variant-numeric: tabular-nums;
}
.preloader__bar {
  width: min(420px, 70vw); height: 4px; background: var(--steel-line); overflow: hidden;
}
.preloader__bar span { display: block; height: 100%; width: 100%; background: var(--hazard); transform: scaleX(0); transform-origin: left; }
.preloader__tag {
  font-family: 'Space Mono', monospace; font-size: .68rem; letter-spacing: .26em;
  text-transform: uppercase; color: var(--paper-dim);
}
.preloader__stripes {
  position: absolute; left: 0; right: 0; bottom: 0; height: 14px;
  background-image: repeating-linear-gradient(45deg, var(--hazard) 0 22px, var(--black) 22px 44px);
}

/* =====================================================================
   2. CURSEUR RÉTICULE (desktop pointeur précis uniquement, posé par JS)
   ===================================================================== */
html.cursor-on * { cursor: none !important; }
html.cursor-on input, html.cursor-on textarea, html.cursor-on select { cursor: auto !important; }
/* Panier / paiement Snipcart : curseur natif (le réticule passe sous la
   modale et serait invisible — jamais ça pendant un paiement) */
html.cursor-on #snipcart, html.cursor-on #snipcart * { cursor: auto !important; }

/* Curseur minimaliste : un simple point jaune, halo translucide sur les
   éléments cliquables, légère contraction au clic. */
.cur { position: fixed; top: 0; left: 0; z-index: 400; pointer-events: none; }
.cur__dot {
  width: 9px; height: 9px; margin: -4.5px 0 0 -4.5px;
  background: var(--hazard); border-radius: 50%;
  transition: transform .25s ease, opacity .25s ease;
}
.cur.is-hover .cur__dot { transform: scale(3.6); opacity: .35; }
.cur.is-down  .cur__dot { transform: scale(.7); }
.cur.is-hover.is-down .cur__dot { transform: scale(2.6); opacity: .45; }
.cur.is-out .cur__dot { opacity: 0; }

/* =====================================================================
   3. BARRE DE PROGRESSION DE LECTURE
   ===================================================================== */
.scroll-progress { display: none; }
html.motion .scroll-progress {
  display: block; position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 290;
  background: transparent; pointer-events: none;
}
.scroll-progress span {
  display: block; height: 100%; background: var(--hazard);
  transform: scaleX(0); transform-origin: left;
  box-shadow: 0 0 12px rgba(245,208,0,.5);
}

/* =====================================================================
   4. HEADER INTELLIGENT (se range en descendant, revient en remontant)
   ===================================================================== */
html.motion .header { transition: transform .38s cubic-bezier(.4,0,.2,1), box-shadow .38s ease; }
html.motion .header.header--hidden { transform: translateY(-110%); }
html.motion .header.header--scrolled { box-shadow: 0 10px 30px rgba(0,0,0,.45); }

/* =====================================================================
   5. FOND ANIMÉ DU HERO (constellation / plan technique jaune)
   ===================================================================== */
.hero__fx {
  position: absolute; inset: 0; z-index: 0;
  width: 100%; height: 100%;
  pointer-events: none;
  opacity: .8;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 38%, #000 100%);
          mask-image: linear-gradient(90deg, transparent 0%, #000 38%, #000 100%);
}
/* le contenu du hero passe au-dessus du canvas */
.hero > .container { position: relative; z-index: 2; }
.hero__plate { z-index: 2; }

/* Point « live » sur la ligne STATUT/OUVERT de la plaque */
html.motion .hero__plate .row:last-child span:last-child { display: inline-flex; align-items: center; gap: .45rem; }
html.motion .hero__plate .row:last-child span:last-child::before {
  content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--hazard);
  animation: live-dot 1.6s ease-in-out infinite;
}
@keyframes live-dot { 0%,100% { opacity: 1; box-shadow: 0 0 0 0 rgba(245,208,0,.5); } 50% { opacity: .45; box-shadow: 0 0 0 5px rgba(245,208,0,0); } }

/* =====================================================================
   6. APPARITIONS AU SCROLL
   Les éléments .fx-reveal sont masqués AVANT le 1er rendu (pas de flash),
   mais SEULEMENT si la classe .motion est posée sur <html> (script inline
   dans le <head>, retirée automatiquement si le JS d'animation ne se
   charge pas → jamais de contenu invisible).
   ===================================================================== */
html.motion .fx-reveal { opacity: 0; transform: translateY(24px); }

/* Mode « lite » mobile (≤760px, classe posée par le <head>) : le hero est
   peint immédiatement — on ne masque PAS les .fx-reveal et on coupe le canvas
   de fond. Le LCP mobile ne dépend plus du chargement de GSAP. Le reste de la
   couche motion (apparitions au scroll, header futé…) reste actif. */
html.motion.lite .fx-reveal { opacity: 1; transform: none; }
html.motion.lite .hero__fx { display: none; }

/* Titre hero scindé en mots (rideau par ligne) */
.hero__title .w  { display: inline-block; overflow: hidden; vertical-align: bottom; }
.hero__title .wi { display: inline-block; will-change: transform; }

/* Étincelle électrique occasionnelle sur le mot détouré « forge. » */
html.motion .hero__title .out { animation: forge-buzz 7s steps(1) 3.2s infinite; }
@keyframes forge-buzz {
  0%, 92%, 96%, 100% { -webkit-text-stroke-color: var(--paper); transform: translate(0,0); }
  93% { -webkit-text-stroke-color: var(--hazard); transform: translate(-2px,1px); }
  94% { -webkit-text-stroke-color: var(--paper);  transform: translate(2px,-1px); }
  95% { -webkit-text-stroke-color: var(--hazard); transform: translate(0,0); }
}

/* =====================================================================
   7. NUMÉROS DE SECTION FANTÔMES (parallaxe, posés par JS)
   ===================================================================== */
.section { position: relative; overflow: hidden; }
.section > .container { position: relative; z-index: 1; }
.ghost-num {
  position: absolute; top: 1rem; right: -1.5rem; z-index: 0; pointer-events: none;
  font-family: 'Anton', sans-serif; font-size: clamp(9rem, 24vw, 20rem); line-height: .8;
  color: transparent; -webkit-text-stroke: 1.5px var(--line-strong);
  opacity: .5; user-select: none;
}
@media (max-width: 640px) {
  .ghost-num { font-size: clamp(6rem, 26vw, 9rem); opacity: .38; }
}

/* =====================================================================
   8. CARTES « UNIT » : inclinaison 3D + projecteur qui suit la souris
   ===================================================================== */
html.motion .units { perspective: 1200px; }
html.motion .unit { transform-style: preserve-3d; will-change: transform; }
html.motion .unit::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0;
  background: radial-gradient(220px circle at var(--mx, 50%) var(--my, 50%), rgba(245,208,0,.13), transparent 65%);
  transition: opacity .3s ease;
}
html.motion .unit:hover::after { opacity: 1; }

/* Projecteur identique sur les cartes produit (boutique) */
html.motion .product { position: relative; }
html.motion .product::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0; z-index: 1;
  background: radial-gradient(240px circle at var(--mx, 50%) var(--my, 50%), rgba(245,208,0,.10), transparent 65%);
  transition: opacity .3s ease;
}
html.motion .product:hover::after { opacity: 1; }
html.motion .product__media img { transition: transform .45s cubic-bezier(.2,.7,.3,1); }
html.motion .product:hover .product__media img { transform: scale(1.06); }

/* =====================================================================
   9. BOUTONS : balayage lumineux + flèche vivante
   ===================================================================== */
html.motion .btn { position: relative; overflow: hidden; }
html.motion .btn::before {
  content: ""; position: absolute; top: 0; bottom: 0; left: -80%; width: 50%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.35), transparent);
  transform: skewX(-20deg); transition: left .55s ease; pointer-events: none;
}
html.motion .btn:hover::before { left: 130%; }
html.motion .btn .arr { display: inline-block; transition: transform .25s ease; }
html.motion .btn:hover .arr { transform: translateX(5px); }

/* =====================================================================
   10. GRAND TEXTE STENCIL DÉFILANT (avant le footer, accueil)
   ===================================================================== */
.giant { overflow: hidden; padding: 4rem 0 3rem; border-bottom: 2px solid var(--line-strong); }
.giant__track {
  white-space: nowrap; will-change: transform;
  font-family: 'Anton', sans-serif; text-transform: uppercase;
  font-size: clamp(4.5rem, 13vw, 11rem); line-height: .9; letter-spacing: .01em;
  color: transparent; -webkit-text-stroke: 2px var(--steel-line);
}
.giant__track .hz { color: var(--hazard); -webkit-text-stroke: 0; }

/* =====================================================================
   11. ENTRÉES EN SCÈNE DU CONTENU INJECTÉ (boutique / fiche produit)
   CSS pur : se rejoue à chaque rendu de la grille (filtres), zéro JS.
   ===================================================================== */
html.motion .shop-grid .product { animation: card-in .55s cubic-bezier(.2,.7,.3,1) backwards; }
html.motion .shop-grid .product:nth-child(1) { animation-delay: .03s; }
html.motion .shop-grid .product:nth-child(2) { animation-delay: .09s; }
html.motion .shop-grid .product:nth-child(3) { animation-delay: .15s; }
html.motion .shop-grid .product:nth-child(4) { animation-delay: .21s; }
html.motion .shop-grid .product:nth-child(5) { animation-delay: .27s; }
html.motion .shop-grid .product:nth-child(6) { animation-delay: .33s; }
html.motion .shop-grid .product:nth-child(7) { animation-delay: .39s; }
html.motion .shop-grid .product:nth-child(8) { animation-delay: .45s; }
html.motion .shop-grid .product:nth-child(n+9) { animation-delay: .5s; }
@keyframes card-in { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: none; } }

html.motion .pp > * { animation: card-in .6s cubic-bezier(.2,.7,.3,1) backwards; }
html.motion .pp > *:nth-child(2) { animation-delay: .12s; }
html.motion .shop-filters .shop-filter { animation: card-in .45s ease backwards; }
html.motion .shop-filters .shop-filter:nth-child(2) { animation-delay: .05s; }
html.motion .shop-filters .shop-filter:nth-child(3) { animation-delay: .1s; }
html.motion .shop-filters .shop-filter:nth-child(4) { animation-delay: .15s; }
html.motion .shop-filters .shop-filter:nth-child(5) { animation-delay: .2s; }
html.motion .shop-filters .shop-filter:nth-child(n+6) { animation-delay: .25s; }

/* =====================================================================
   12. RESPECT DE « RÉDUIRE LES ANIMATIONS »
   ===================================================================== */
@media (prefers-reduced-motion: reduce) {
  .hero__fx, .cur { display: none !important; }
  html.motion .fx-reveal { opacity: 1; transform: none; }
  html.motion .hero__title .out { animation: none; }
  html.motion .hero__plate .row:last-child span:last-child::before { animation: none; }
  html.motion .shop-grid .product, html.motion .pp > *, html.motion .shop-filters .shop-filter { animation: none; }
  html.motion:not(.no-intro) .preloader { display: none; }
  html.motion .header { transition: none; }
}
