/* ==========================================================================
   BYANSEL — Mouvement
   Règles : transform/opacity (et tracés SVG) uniquement, courbes fortes, états
   masqués seulement sous .js, tout visible sans JavaScript ou après le filet de
   sécurité (.reveal-fallback). Reduced motion : fondus conservés, déplacements
   et boucles supprimés.

   Chaque animation a une raison :
   - hero : le titre arrive, puis la planche montre le stock qui entre, circule, sort ;
   - convoyeur et paquets en boucle : « le stock circule » (métier de BYANSEL) ;
   - icônes qui se dessinent : elles illustrent un argument au moment où on le lit ;
   - parcours : les étapes s'enchaînent dans l'ordre où on les vit ;
   - photos révélées : la marchandise « sort du carton » ;
   - cloche : une alerte, c'est une notification ;
   - tranche corail : l'accent arrive avec l'appel à l'action.
   ========================================================================== */

/* -------------------------------------------------------------------------
   1. Hero : séquence d'entrée (déclenchée par .hero-ready sur <html>)
   ------------------------------------------------------------------------- */

.js:not(.hero-ready) [data-hero]:not([data-hero="board"]):not(.line) {
  opacity: 0;
}

.js:not(.hero-ready) .hero__title .line__inner {
  transform: translateY(110%);
}

.js:not(.hero-ready) .hero__kicker,
.js:not(.hero-ready) .hero__lead,
.js:not(.hero-ready) .hero__actions,
.js:not(.hero-ready) .hero__facts {
  transform: translateY(14px);
}

.js [data-hero]:not([data-hero="board"]) {
  transition:
    opacity var(--dur-hero) var(--ease-out),
    transform var(--dur-hero) var(--ease-out);
}

.js .hero__title .line__inner {
  transition: transform var(--dur-hero) var(--ease-out);
}

.js.hero-ready [data-hero="1"] { transition-delay: 0ms; }
.js.hero-ready [data-hero="2"] .line__inner { transition-delay: 80ms; }
.js.hero-ready [data-hero="3"] .line__inner { transition-delay: 160ms; }
.js.hero-ready [data-hero="4"] .line__inner { transition-delay: 240ms; }
.js.hero-ready [data-hero="5"] { transition-delay: 380ms; }
.js.hero-ready [data-hero="6"] { transition-delay: 460ms; }
.js.hero-ready [data-hero="7"] { transition-delay: 560ms; }

/* Pastille d'activité : anneau qui s'élargit, signe que la centrale est active */
.hero__kicker-dot::after {
  content: "";
  position: absolute;
  inset: -3px;
  border-radius: 50%;
  border: 1.5px solid var(--coral);
  opacity: 0;
}

.js.hero-ready .hero__kicker-dot::after {
  animation: dot-pulse 2600ms var(--ease-out) 1200ms infinite;
}

@keyframes dot-pulse {
  0%   { transform: scale(0.6); opacity: 0.8; }
  70%  { transform: scale(2);   opacity: 0; }
  100% { transform: scale(2);   opacity: 0; }
}

/* Réglette de catégories : les familles s'affichent l'une après l'autre */
.js:not(.hero-ready) .hero__ruler-inner span {
  opacity: 0;
  transform: translateY(6px);
}

.js .hero__ruler-inner span {
  transition: opacity 500ms var(--ease-out), transform 500ms var(--ease-out);
}

.js.hero-ready .hero__ruler-inner span:nth-child(1) { transition-delay: 700ms; }
.js.hero-ready .hero__ruler-inner span:nth-child(2) { transition-delay: 760ms; }
.js.hero-ready .hero__ruler-inner span:nth-child(3) { transition-delay: 820ms; }
.js.hero-ready .hero__ruler-inner span:nth-child(4) { transition-delay: 880ms; }
.js.hero-ready .hero__ruler-inner span:nth-child(5) { transition-delay: 940ms; }

/* --- Planche de stock ---------------------------------------------------- */

.js:not(.hero-ready) .board__node,
.js:not(.hero-ready) .board__tag,
.js:not(.hero-ready) .board__caption {
  opacity: 0;
  transform: translateY(18px) scale(0.97);
}

.js .board__node,
.js .board__tag,
.js .board__caption {
  transition:
    opacity var(--dur-hero) var(--ease-out),
    transform var(--dur-hero) var(--ease-out);
}

.js.hero-ready .board__node--in { transition-delay: 300ms; }
.js.hero-ready .board__tag--1   { transition-delay: 420ms; }
.js.hero-ready .board__tag--2   { transition-delay: 540ms; }
.js.hero-ready .board__tag--3   { transition-delay: 660ms; }
.js.hero-ready .board__node--out { transition-delay: 780ms; }
.js.hero-ready .board__caption  { transition-delay: 900ms; }

/* Les étiquettes flottent doucement : des lots en attente, pas des blocs figés.
   Propriété `translate` séparée pour ne pas entrer en conflit avec `transform` (entrée). */
.js.hero-ready .board__tag {
  animation: tag-float 7000ms ease-in-out 1600ms infinite;
}

.js.hero-ready .board__tag--2 { animation-delay: 2600ms; }
.js.hero-ready .board__tag--3 { animation-delay: 3600ms; }

@keyframes tag-float {
  50% { translate: 0 -6px; }
}

/* Ligne de flux : tracée une fois, puis devient un convoyeur qui défile lentement */
.js .board__path {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  transition: stroke-dashoffset 1300ms var(--ease-in-out) 500ms;
}

.js.hero-ready .board__path {
  stroke-dashoffset: 0;
  animation:
    board-dash 0ms linear 1800ms forwards,
    board-march 1400ms linear 1800ms infinite;
}

@keyframes board-dash {
  to { stroke-dasharray: 0.012 0.01; }
}

@keyframes board-march {
  to { stroke-dashoffset: -0.022; } /* une période de pointillé : boucle sans saut */
}

/* Paquets qui parcourent la ligne en continu : le stock entre, circule, sort */
@supports (offset-path: path("M0 0h1")) {
  .js.hero-ready .board__packet {
    animation: packet-travel 5200ms linear 1600ms infinite;
  }

  .js.hero-ready .board__packet:nth-child(3) { animation-delay: 3300ms; }
  .js.hero-ready .board__packet:nth-child(4) { animation-delay: 5000ms; }
}

@keyframes packet-travel {
  0%   { offset-distance: 0%;   opacity: 0; }
  6%   { opacity: 1; }
  94%  { opacity: 1; }
  100% { offset-distance: 100%; opacity: 0; }
}

/* -------------------------------------------------------------------------
   2. Apparition des sections au défilement (IntersectionObserver)
   ------------------------------------------------------------------------- */

.js [data-reveal],
.js [data-reveal-group] > * {
  opacity: 0;
  transform: translateY(14px);
  transition:
    opacity var(--dur-reveal) var(--ease-out),
    transform var(--dur-reveal) var(--ease-out);
}

.js [data-reveal].is-visible,
.js [data-reveal-group].is-visible > * {
  opacity: 1;
  transform: none;
}

/* Stagger 60 ms sur les groupes (max. 8 éléments) */
.js [data-reveal-group].is-visible > :nth-child(2) { transition-delay: 60ms; }
.js [data-reveal-group].is-visible > :nth-child(3) { transition-delay: 120ms; }
.js [data-reveal-group].is-visible > :nth-child(4) { transition-delay: 180ms; }
.js [data-reveal-group].is-visible > :nth-child(5) { transition-delay: 240ms; }
.js [data-reveal-group].is-visible > :nth-child(6) { transition-delay: 300ms; }
.js [data-reveal-group].is-visible > :nth-child(7) { transition-delay: 360ms; }
.js [data-reveal-group].is-visible > :nth-child(8) { transition-delay: 420ms; }

/* Révélation typographique des titres de section */
.js [data-reveal] .section__title .line__inner,
.js [data-reveal] .final__title .line__inner {
  transform: translateY(110%);
  transition: transform var(--dur-hero) var(--ease-out) 80ms;
}

.js [data-reveal].is-visible .section__title .line__inner,
.js [data-reveal].is-visible .final__title .line__inner {
  transform: none;
}

/* Icônes qui se dessinent : trait révélé quand l'argument apparaît.
   stroke-dasharray hérite jusque dans les <use> ; 90 dépasse la longueur de tout tracé. */
.js [data-reveal-group] > * > .icon--lg {
  stroke-dasharray: 90;
  stroke-dashoffset: 90;
  transition: stroke-dashoffset 1100ms var(--ease-in-out);
}

.js [data-reveal-group].is-visible > * > .icon--lg {
  stroke-dashoffset: 0;
}

.js [data-reveal-group].is-visible > :nth-child(1) > .icon--lg { transition-delay: 200ms; }
.js [data-reveal-group].is-visible > :nth-child(2) > .icon--lg { transition-delay: 280ms; }
.js [data-reveal-group].is-visible > :nth-child(3) > .icon--lg { transition-delay: 360ms; }
.js [data-reveal-group].is-visible > :nth-child(4) > .icon--lg { transition-delay: 440ms; }

/* Photos des produits : révélées de bas en haut, « sorties du carton » */
.js .lots .lot__img {
  clip-path: inset(100% 0 0 0);
  transition: clip-path 800ms var(--ease-in-out), transform var(--dur-reveal) var(--ease-out);
}

.js .lots.is-visible .lot__img {
  clip-path: inset(0 0 0 0);
}

.js .lots.is-visible > :nth-child(1) .lot__img { transition-delay: 150ms, 0ms; }
.js .lots.is-visible > :nth-child(2) .lot__img { transition-delay: 210ms, 0ms; }
.js .lots.is-visible > :nth-child(3) .lot__img { transition-delay: 270ms, 0ms; }
.js .lots.is-visible > :nth-child(4) .lot__img { transition-delay: 330ms, 0ms; }
.js .lots.is-visible > :nth-child(5) .lot__img { transition-delay: 390ms, 0ms; }
.js .lots.is-visible > :nth-child(6) .lot__img { transition-delay: 450ms, 0ms; }

/* Parcours : les étapes s'enchaînent dans l'ordre */
.js .parcours .flow li {
  opacity: 0;
  transform: translateX(-10px);
  transition: opacity 450ms var(--ease-out), transform 450ms var(--ease-out);
}

.js .parcours.is-visible .flow li {
  opacity: 1;
  transform: none;
}

.js .parcours.is-visible .flow li:nth-child(1) { transition-delay: 400ms; }
.js .parcours.is-visible .flow li:nth-child(2) { transition-delay: 480ms; }
.js .parcours.is-visible .flow li:nth-child(3) { transition-delay: 560ms; }
.js .parcours.is-visible .flow li:nth-child(4) { transition-delay: 640ms; }
.js .parcours.is-visible .flow li:nth-child(5) { transition-delay: 720ms; }

/* Rail des étapes : tracé à l'apparition */
.js .steps::before {
  transform: scaleX(0);
  transition: transform 900ms var(--ease-in-out) 100ms;
}

.js .steps.is-visible::before {
  transform: scaleX(1);
}

/* Cloche des alertes : sonne une fois quand la section apparaît */
.js .alertes__copy.is-visible .section__label .icon {
  transform-origin: 50% 15%;
  animation: bell-ring 900ms var(--ease-out) 500ms 1;
}

@keyframes bell-ring {
  0%, 100% { transform: rotate(0); }
  20% { transform: rotate(14deg); }
  40% { transform: rotate(-12deg); }
  60% { transform: rotate(8deg); }
  80% { transform: rotate(-4deg); }
}

/* Tranche corail du CTA final : glisse en place avec le bloc */
.js .section--final::before {
  transform: skewX(-14deg) translateX(80px);
  opacity: 0;
  transition: transform 1000ms var(--ease-out) 150ms, opacity 600ms var(--ease-out) 150ms;
}

.js .section--final:has(.is-visible)::before {
  transform: skewX(-14deg) translateX(0);
  opacity: 0.9;
}

/* Filet de sécurité : si les modules ne s'exécutent pas, tout devient visible */
.js.reveal-fallback [data-reveal],
.js.reveal-fallback [data-reveal-group] > *,
.js.reveal-fallback [data-reveal] .line__inner,
.js.reveal-fallback .parcours .flow li,
.js.reveal-fallback .hero__ruler-inner span {
  opacity: 1;
  transform: none;
}

.js.reveal-fallback .steps::before {
  transform: scaleX(1);
}

.js.reveal-fallback .lots .lot__img {
  clip-path: inset(0 0 0 0);
}

.js.reveal-fallback [data-reveal-group] > * > .icon--lg {
  stroke-dashoffset: 0;
}

.js.reveal-fallback .section--final::before {
  transform: skewX(-14deg);
  opacity: 0.9;
}

/* -------------------------------------------------------------------------
   3. Reduced motion : fondus conservés, déplacements et boucles supprimés
   ------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  .js:not(.hero-ready) [data-hero],
  .js:not(.hero-ready) .hero__title .line__inner,
  .js:not(.hero-ready) .board__node,
  .js:not(.hero-ready) .board__tag,
  .js:not(.hero-ready) .board__caption,
  .js:not(.hero-ready) .hero__ruler-inner span,
  .js [data-reveal],
  .js [data-reveal-group] > *,
  .js [data-reveal] .section__title .line__inner,
  .js [data-reveal] .final__title .line__inner,
  .js .parcours .flow li {
    transform: none;
  }

  .js [data-hero],
  .js .hero__title .line__inner,
  .js .board__node,
  .js .board__tag,
  .js .board__caption,
  .js .hero__ruler-inner span,
  .js [data-reveal],
  .js [data-reveal-group] > *,
  .js [data-reveal] .line__inner,
  .js .parcours .flow li {
    transition-duration: 200ms;
    transition-delay: 0ms !important;
  }

  .js .board__path {
    stroke-dasharray: 0.012 0.01;
    stroke-dashoffset: 0;
    transition: none;
    animation: none;
  }

  .js.hero-ready .board__packet,
  .js.hero-ready .board__tag,
  .js.hero-ready .hero__kicker-dot::after,
  .js .alertes__copy.is-visible .section__label .icon {
    animation: none;
  }

  .js [data-reveal-group] > * > .icon--lg {
    stroke-dashoffset: 0;
    transition: none;
  }

  .js .lots .lot__img {
    clip-path: inset(0 0 0 0);
    transition: none;
  }

  .js .steps::before,
  .js .section--final::before {
    transform: scaleX(1);
    transition: none;
  }

  .js .section--final::before {
    transform: skewX(-14deg);
    opacity: 0.9;
  }

  .nav,
  .nav__list li,
  .dialog,
  .dialog::backdrop,
  .nav-backdrop {
    transition-duration: 150ms;
    transition-delay: 0ms !important;
  }

  .nav__list li,
  .dialog {
    transform: none !important;
  }

  .btn,
  .chip,
  .lot,
  .lot__icon,
  .lot__img,
  .btn__icon,
  .nav__link::after {
    transition-duration: 0ms;
  }
}