/* BGM — Animations & micro-interactions partagées
   Effet « WOW » discret : reveal au défilement, spotlight hover sur cartes,
   compteurs animés, barre de progression de lecture, bouton retour en haut.
   Désactivé si prefers-reduced-motion. */

/* ============================================================
   1. Reveal au défilement
   ============================================================ */
[data-reveal] {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}
[data-reveal="left"]  { transform: translateX(-24px); }
[data-reveal="right"] { transform: translateX(24px); }
[data-reveal="zoom"]  { transform: scale(0.96); }

[data-reveal].in-view {
  opacity: 1;
  transform: none;
}

/* Stagger automatique pour groupes de cards/items */
[data-reveal-group] > * {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}
[data-reveal-group].in-view > *           { opacity: 1; transform: none; }
[data-reveal-group].in-view > *:nth-child(1)  { transition-delay: 0.05s; }
[data-reveal-group].in-view > *:nth-child(2)  { transition-delay: 0.13s; }
[data-reveal-group].in-view > *:nth-child(3)  { transition-delay: 0.21s; }
[data-reveal-group].in-view > *:nth-child(4)  { transition-delay: 0.29s; }
[data-reveal-group].in-view > *:nth-child(5)  { transition-delay: 0.37s; }
[data-reveal-group].in-view > *:nth-child(6)  { transition-delay: 0.45s; }
[data-reveal-group].in-view > *:nth-child(7)  { transition-delay: 0.53s; }
[data-reveal-group].in-view > *:nth-child(n+8) { transition-delay: 0.61s; }

/* ============================================================
   2. Spotlight hover (carte qui s'éclaire au passage du curseur)
   ============================================================ */
[data-spotlight] { position: relative; overflow: hidden; isolation: isolate; }
[data-spotlight]::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(
    600px circle at var(--mx, 50%) var(--my, 50%),
    rgba(232, 119, 34, 0.18) 0%,
    rgba(232, 119, 34, 0.06) 25%,
    transparent 55%
  );
  opacity: 0;
  transition: opacity 0.35s ease;
  pointer-events: none;
  z-index: 0;
}
[data-spotlight]:hover::before { opacity: 1; }
[data-spotlight] > * { position: relative; z-index: 1; }

/* ============================================================
   3. Bouton « Retour en haut »
   ============================================================ */
.bgm-totop {
  position: fixed;
  right: 24px;
  bottom: 24px;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(232, 119, 34, 0.95);
  color: #fff;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  z-index: 90;
  font-size: 1.2rem;
  box-shadow: 0 8px 24px rgba(48, 46, 44, 0.35);
  opacity: 0;
  transform: translateY(16px);
  pointer-events: none;
  transition: opacity 0.3s ease, transform 0.3s ease, background 0.2s ease;
}
.bgm-totop.visible {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}
.bgm-totop:hover {
  background: #cf6a15;
  transform: translateY(-2px);
}

/* ============================================================
   4. Barre de progression de lecture
   ============================================================ */
.bgm-progress {
  position: fixed;
  top: 0;
  left: 0;
  height: 3px;
  background: linear-gradient(90deg, #E87722 0%, #ECA154 100%);
  width: 0%;
  z-index: 200;
  pointer-events: none;
  box-shadow: 0 0 12px rgba(232, 119, 34, 0.5);
  transition: width 0.05s linear;
}

/* ============================================================
   5. Microinteractions CTA — flèches qui glissent
   ============================================================ */
a[href]:has(> .arrow), .cta-btn, .sc-link, .n-cta, .btn-p, .btn-s {
  /* géré par les classes existantes — on ajoute ici un comportement subtil */
}

/* Flèches simples basées sur le contenu : glissement au hover */
.cta-btn, .sc-link, .triage-cta, .btn-next {
  transition: background 0.2s, transform 0.15s, gap 0.2s, padding-right 0.2s;
}

/* ============================================================
   Respect prefers-reduced-motion
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  [data-reveal],
  [data-reveal-group] > * {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  [data-spotlight]::before { display: none; }
  .bgm-totop, .bgm-progress { transition: none; }
}