/* ============================================================
   ToControl — couche « motion » du site vitrine.
   Thèse : le geste de la marque est le balayage d'un cône de
   vision sur un plan. Toutes les révélations d'images sont donc
   des balayages (clip-path + ligne de scan), jamais des fondus.
   Tout est inerte tant que motion.js n'a pas posé html.fx :
   sans JS, la page reste exactement celle d'avant.
   ============================================================ */

.fx {
  --fx-ease: cubic-bezier(.16, 1, .3, 1);
  --fx-scan: color-mix(in srgb, var(--accent) 62%, transparent);
}

/* Le scroll natif « smooth » entre en conflit avec l'inertie JS. */
.fx.fx-smooth { scroll-behavior: auto; }
.fx.fx-smooth body { overscroll-behavior-y: none; }

/* ---------- 1. Jauge de progression dans la nav ---------- */
.fx-progress {
  position: absolute; left: 0; bottom: -1px; height: 2px; width: 100%;
  transform: scaleX(var(--fx-scroll, 0)); transform-origin: 0 50%;
  background: linear-gradient(90deg, var(--primary), var(--accent));
  pointer-events: none; z-index: 2;
}
.fx nav { position: sticky; }

/* ---------- 2. Révélation générique (montée + fondu) ---------- */
.fx [data-fx-rise] {
  opacity: 0; transform: translate3d(0, 22px, 0);
  transition: opacity .62s var(--fx-ease), transform .62s var(--fx-ease);
  transition-delay: var(--fx-delay, 0ms);
}
.fx [data-fx-rise].is-in { opacity: 1; transform: none; }

/* ---------- 3. Révélation des titres, mot à mot sous masque ---------- */
/* Le débord caché coupe les jambages : on repousse la boîte puis on la recale. */
.fx .fx-w {
  display: inline-block; overflow: hidden; vertical-align: bottom;
  padding-bottom: .14em; margin-bottom: -.14em;
}
.fx .fx-w > i {
  display: inline-block; font-style: inherit; color: inherit;
  transform: translate3d(0, 105%, 0);
  transition: transform .72s var(--fx-ease);
  transition-delay: var(--fx-wd, 0ms);
}
.fx .is-in .fx-w > i, .fx .fx-w.is-in > i { transform: none; }

/* ---------- 4. Balayage d'image (le geste signature) ---------- */
.fx .fx-sweep { animation: none !important; }
.fx .fx-sweep > img,
.fx .fx-sweep .fx-sweep-img {
  clip-path: inset(0 100% 0 0);
  transform: scale(1.06);
  transition: clip-path 1.05s var(--fx-ease), transform 1.35s var(--fx-ease);
}
.fx .fx-sweep.is-in > img,
.fx .fx-sweep.is-in .fx-sweep-img { clip-path: inset(0 0 0 0); transform: none; }

/* La ligne de scan qui accompagne le balayage. */
.fx .fx-sweep::before {
  content: ""; position: absolute; z-index: 3; top: var(--fx-sweep-top, 0); bottom: 0;
  left: 0; width: 58px; pointer-events: none; opacity: 0;
  background: linear-gradient(90deg, transparent, var(--fx-scan) 62%, transparent);
  filter: blur(1px);
}
/* En thème clair l'accent est foncé : il doit teinter, pas éclaircir. */
html.dark .fx-sweep::before { mix-blend-mode: screen; }
.fx .fx-sweep.is-in::before { animation: fxScan 1.05s var(--fx-ease) forwards; }
@keyframes fxScan {
  0%   { opacity: 0;   transform: translate3d(-58px, 0, 0); }
  14%  { opacity: .85; }
  86%  { opacity: .5; }
  100% { opacity: 0;   transform: translate3d(calc(100cqw + 58px), 0, 0); }
}
.fx .fx-sweep { container-type: inline-size; }

/* ---------- 5. Parallaxe et inertie visible ----------
   Les captures suivent le scroll avec un décalage, et se cisaillent
   très légèrement selon la vitesse : l'amorti de la molette devient
   perceptible à l'image au lieu de rester une sensation. */
.fx [data-fx-par] {
  transform: translate3d(0, var(--fx-y, 0px), 0)
             skewY(calc(var(--fx-vel, 0) * 0.5deg))
             scaleY(calc(1 + var(--fx-vel, 0) * var(--fx-vel, 0) * 0.012));
  will-change: transform;
}

/* Le héros s'enfonce et s'estompe quand on le quitte. */
.fx .hero .wrap {
  transform: translate3d(0, var(--fx-y, 0px), 0);
  opacity: var(--fx-o, 1);
  will-change: transform, opacity;
}

/* ---------- 5bis. Le filet de séparation se trace au passage ----------
   Troisième occurrence du motif de balayage, à l'échelle de la page. */
.fx section { position: relative; }
.fx section::before {
  content: ""; position: absolute; top: -1px; left: 0; right: 0; z-index: 1;
  height: 1px; opacity: 0; pointer-events: none;
  background-image: linear-gradient(90deg, transparent, var(--primary), transparent);
  background-size: 24% 100%; background-repeat: no-repeat;
  background-position: -30% 0;
}
.fx section.is-in::before { animation: fxRule 1.15s cubic-bezier(.16, 1, .3, 1) forwards; }
@keyframes fxRule {
  0%   { background-position: -30% 0; opacity: 0; }
  12%  { opacity: .9; }
  86%  { opacity: .5; }
  100% { background-position: 130% 0; opacity: 0; }
}

/* ---------- 6. Section épinglée : l'assistant en 4 étapes ---------- */
.fx .fx-pin-track { position: relative; }
.fx .fx-pin-stage { position: sticky; }

.fx .fx-pin-track .step {
  opacity: .34; transform: translate3d(0, 14px, 0);
  transition: opacity .5s var(--fx-ease), transform .5s var(--fx-ease);
}
.fx .fx-pin-track .step.is-live { opacity: 1; transform: none; }
.fx .fx-pin-track .step-shot {
  clip-path: inset(0 0 100% 0);
  transition: clip-path .62s var(--fx-ease), transform .35s ease, box-shadow .35s ease;
}
.fx .fx-pin-track .step.is-live .step-shot { clip-path: inset(0 0 0 0); }
.fx .fx-pin-track .step.is-live .step-shot { box-shadow: var(--card-shadow-hover); }
.fx .fx-pin-track .step-badge { transition: transform .4s var(--fx-ease), box-shadow .4s ease; }
.fx .fx-pin-track .step.is-live .step-badge {
  transform: scale(1.08);
  box-shadow: 0 6px 20px -4px var(--primary);
}
/* Le trait de liaison se remplit au fil de la progression. */
.fx .fx-pin-track .step:not(:last-child)::after {
  background: var(--line); opacity: 1;
  transition: background-color .45s ease;
}
.fx .fx-pin-track .step.is-done:not(:last-child)::after { background: var(--primary); }

/* Barre de progression de la séquence épinglée. */
.fx .fx-pin-rail {
  height: 2px; border-radius: 2px; background: var(--line);
  margin: 0 auto 34px; max-width: 260px; overflow: hidden;
}
.fx .fx-pin-rail > i {
  display: block; height: 100%; border-radius: inherit;
  background: linear-gradient(90deg, var(--primary), var(--accent));
  transform: scaleX(var(--fx-p, 0)); transform-origin: 0 50%;
}

/* ---------- 7. Vignettes de galerie : distorsion WebGL au survol ---------- */
.fx .fx-gl-host { position: relative; }
.fx .fx-gl {
  position: absolute; pointer-events: none; z-index: 2;
  opacity: 0; transition: opacity .28s ease;
}
.fx .fx-gl.is-live { opacity: 1; }

/* Repli sans WebGL : la vignette respire au survol. */
.fx .gal .shot-real > img { transition: transform .5s var(--fx-ease); }
.fx .gal:hover .shot-real:not(.is-gl) > img { transform: scale(1.035); }

/* ---------- 8. Boutons magnétiques ---------- */
.fx .fx-mag {
  transform: translate3d(var(--fx-mx, 0px), var(--fx-my, 0px), 0);
  transition: transform .35s var(--fx-ease), background-color .12s ease;
}
.fx .fx-mag.is-pulled { transition: transform .12s ease-out, background-color .12s ease; }
.fx .btn-primary.fx-mag:hover,
.fx nav .cta.fx-mag:hover { transform: translate3d(var(--fx-mx, 0px), calc(var(--fx-my, 0px) - 2px), 0); }

/* ---------- 9. Compteurs ---------- */
.fx .stat .n em { font-variant-numeric: tabular-nums; }

/* ---------- Garde-fous ---------- */
@media (max-width: 900px) {
  .fx .fx-pin-track { height: auto !important; }
  .fx .fx-pin-stage { position: static; }
  .fx .fx-pin-track .step { opacity: 1; transform: none; }
  .fx .fx-pin-track .step-shot { clip-path: none; box-shadow: var(--card-shadow); }
  .fx .fx-pin-track .step-badge { transform: none; }
  .fx .fx-pin-rail { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .fx [data-fx-rise] { opacity: 1; transform: none; transition: opacity .2s linear; }
  .fx .fx-w > i { transform: none; }
  .fx .fx-sweep > img, .fx .fx-sweep .fx-sweep-img { clip-path: none; transform: none; }
  .fx .fx-sweep::before { display: none; }
  .fx [data-fx-par], .fx [data-fx-par-scale], .fx .hero .wrap { transform: none; opacity: 1; }
  .fx .fx-pin-track { height: auto !important; }
  .fx .fx-pin-stage { position: static; }
  .fx .fx-pin-track .step { opacity: 1; transform: none; }
  .fx .fx-pin-track .step-shot { clip-path: none; box-shadow: var(--card-shadow); }
  .fx .fx-pin-track .step-badge { transform: none; }
  .fx .fx-pin-rail { display: none; }
  .fx section::before { display: none; }
  .fx .fx-mag { transform: none; }
}