/**
 * Effets DA « Lin & Ardoise » — dashboard
 * Sélection validée : cursor glow (page), reveal masqué (titres),
 * stagger reveal (cascade d'entrée), bouton magnétique (CTA important).
 *
 * Les états « cachés » ne s'appliquent que si le JS a posé body.dash-fx-ready
 * (sinon le contenu reste visible même sans JS).
 */

/* --- Cursor glow : halo d'accent qui suit la souris, derrière le contenu --- */
#dashFxGlow {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.6s ease;
  background:
    radial-gradient(
      32% 36% at var(--mx, 50%) var(--my, 30%),
      rgba(92, 125, 151, 0.05) 0%,
      transparent 64%
    ),
    radial-gradient(
      38% 36% at calc(100% - var(--mx, 50%) * 0.55) 86%,
      rgba(156, 139, 118, 0.04) 0%,
      transparent 66%
    );
  will-change: background;
}

#dashFxGlow.is-live {
  opacity: 1;
}

/* Le contenu reste au-dessus du halo */
body.dashboard-page .dashboard-shell {
  position: relative;
  z-index: 2;
}

/* --- Reveal masqué (clip-path) : titres --- */
body.dash-fx-ready [data-fx="mask"] {
  clip-path: inset(0 100% 0 0);
  transition: clip-path 0.9s cubic-bezier(0.7, 0, 0.2, 1);
  transition-delay: var(--fx-d, 0s);
}

body.dash-fx-ready [data-fx="mask"].is-in {
  clip-path: inset(0 0 0 0);
}

/* --- Stagger reveal : apparition en cascade --- */
body.dash-fx-ready [data-fx="up"] {
  opacity: 0;
  transform: translateY(18px);
  transition:
    opacity 0.6s ease,
    transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1);
  transition-delay: var(--fx-d, 0s);
}

body.dash-fx-ready [data-fx="up"].is-in {
  opacity: 1;
  transform: none;
}

/* --- Bouton magnétique : le CTA suit doucement le curseur --- */
.dashboard-btn--magnetic {
  will-change: transform;
}

@media (prefers-reduced-motion: reduce) {
  #dashFxGlow {
    display: none;
  }

  body.dash-fx-ready [data-fx] {
    opacity: 1 !important;
    transform: none !important;
    clip-path: none !important;
    transition: none !important;
  }
}