/* =========================================================
   INFXPERT — effets visuels (couche additionnelle)
   N'altère ni les couleurs ni le contenu : tout utilise
   les variables existantes (--primary, --accent, ...).
   Pour tout désactiver : retirer effects.css + effects.js.
   ========================================================= */

/* ---------- Barre de progression de lecture ---------- */
.fx-progress {
  position: fixed;
  top: 0;
  left: 0;
  height: 3px;
  width: 100%;
  transform-origin: 0 50%;
  transform: scaleX(0);
  background: var(--grad-accent);
  box-shadow: 0 0 12px rgba(217, 154, 108, 0.7);
  z-index: 1000;
  pointer-events: none;
}

/* ---------- Réseau de particules dans le hero ---------- */
.fx-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
  opacity: 0;
  transition: opacity 1.2s ease;
}
.fx-canvas.on { opacity: 1; }

/* Couche de particules sur toute la page (derrière tout le contenu) */
.fx-canvas-page {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  z-index: -1;
}

/* Le pied de page accueille aussi son réseau */
.footer {
  position: relative;
  overflow: hidden;
}
.footer > :not(.fx-canvas) {
  position: relative;
  z-index: 1;
}

/* ---------- Curseur lumineux (souris uniquement) ---------- */
.fx-cursor-dot,
.fx-cursor-ring {
  position: fixed;
  top: 0;
  left: 0;
  border-radius: 50%;
  pointer-events: none;
  z-index: 9998;
  opacity: 0;
  transition: opacity 0.3s ease;
  will-change: transform;
}
.fx-cursor-dot {
  width: 6px;
  height: 6px;
  margin: -3px 0 0 -3px;
  background: var(--accent);
  box-shadow: 0 0 10px var(--accent);
}
.fx-cursor-ring {
  width: 36px;
  height: 36px;
  margin: -18px 0 0 -18px;
  border: 1.5px solid rgba(217, 154, 108, 0.55);
  transition: opacity 0.3s ease, width 0.25s ease, height 0.25s ease,
    margin 0.25s ease, background 0.25s ease, border-color 0.25s ease;
}
.fx-cursor-ring.hover {
  width: 58px;
  height: 58px;
  margin: -29px 0 0 -29px;
  background: rgba(217, 154, 108, 0.08);
  border-color: var(--accent);
}
.fx-cursor-ring.down {
  width: 26px;
  height: 26px;
  margin: -13px 0 0 -13px;
}
body.fx-has-cursor .fx-cursor-dot,
body.fx-has-cursor .fx-cursor-ring { opacity: 1; }

/* ---------- Halo qui suit la souris sur les cartes ---------- */
.card,
.offer-item,
.about-box,
.hero-card {
  position: relative;
  --mx: 50%;
  --my: 50%;
}
.card,
.offer-item,
.about-box { overflow: hidden; }

.fx-spot::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: radial-gradient(
    380px circle at var(--mx) var(--my),
    rgba(217, 154, 108, 0.14),
    transparent 45%
  );
  opacity: 0;
  transition: opacity 0.35s ease;
}
.fx-spot:hover::after { opacity: 1; }

/* Bordure lumineuse qui suit la souris */
.fx-spot::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  pointer-events: none;
  background: radial-gradient(
    220px circle at var(--mx) var(--my),
    rgba(217, 154, 108, 0.9),
    transparent 60%
  );
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: 0;
  transition: opacity 0.35s ease;
}
.fx-spot:hover::before { opacity: 1; }

/* Inclinaison 3D : la transition devient plus vive pendant le suivi */
.fx-tilting {
  transition: transform 0.12s ease-out, box-shadow 0.3s ease, border-color 0.3s ease !important;
}

/* ---------- Reflet qui balaie les boutons ---------- */
.btn::before {
  content: '';
  position: absolute;
  top: 0;
  left: -75%;
  width: 50%;
  height: 100%;
  background: linear-gradient(
    120deg,
    transparent,
    rgba(255, 255, 255, 0.35),
    transparent
  );
  transform: skewX(-20deg);
  pointer-events: none;
}
.btn:hover::before { animation: fx-shine 0.8s ease; }

@keyframes fx-shine {
  from { left: -75%; }
  to { left: 130%; }
}

/* Effet d'onde au clic */
.fx-ripple {
  position: absolute;
  border-radius: 50%;
  transform: scale(0);
  background: rgba(241, 238, 227, 0.35);
  pointer-events: none;
  animation: fx-ripple 0.65s ease-out forwards;
}
@keyframes fx-ripple {
  to { transform: scale(1); opacity: 0; }
}

/* ---------- Apparition du titre mot par mot ---------- */
.fx-word {
  display: inline-block;
  opacity: 0;
  filter: blur(8px);
  transform: translateY(0.6em) rotateX(-40deg);
  transform-origin: 50% 100%;
}
.fx-words-in .fx-word {
  animation: fx-word-in 0.8s cubic-bezier(0.22, 1, 0.36, 1) forwards;
  animation-delay: calc(var(--i) * 70ms);
}
@keyframes fx-word-in {
  to { opacity: 1; filter: blur(0); transform: none; }
}

/* ---------- Apparition en cascade des cartes ---------- */
.fx-stagger > * {
  opacity: 0;
  transform: translateY(30px) scale(0.97);
  transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
  transition-delay: calc(var(--i, 0) * 110ms);
}
.fx-stagger.fx-in > * {
  opacity: 1;
  transform: none;
}

/* ---------- Icônes qui flottent doucement ---------- */
.card .icon {
  animation: fx-float 4s ease-in-out infinite;
  animation-delay: calc(var(--i, 0) * -0.8s);
}
.card:hover .icon { animation-play-state: paused; }
@keyframes fx-float {
  0%, 100% { translate: 0 0; }
  50% { translate: 0 -5px; }
}

/* ---------- Carte du hero : bordure qui tourne ---------- */
.hero-card { isolation: isolate; }
.hero-card .fx-orbit {
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  padding: 1.5px;
  pointer-events: none;
  z-index: -1;
  background: conic-gradient(
    from var(--fx-angle, 0deg),
    transparent 0deg,
    var(--accent) 60deg,
    transparent 120deg,
    transparent 360deg
  );
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  animation: fx-orbit 5s linear infinite;
}
@property --fx-angle {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}
@keyframes fx-orbit {
  to { --fx-angle: 360deg; }
}

/* Puces de la carte hero qui apparaissent une à une */
.hero-card li {
  opacity: 0;
  transform: translateX(-12px);
  transition: opacity 0.5s ease, transform 0.5s ease;
  transition-delay: calc(0.6s + var(--i, 0) * 150ms);
}
.hero-card.fx-in li {
  opacity: 1;
  transform: none;
}

/* ---------- Statistiques : lueur au moment du comptage ---------- */
.stats strong.fx-counting {
  text-shadow: 0 0 18px rgba(193, 123, 76, 0.7);
}

/* ---------- Transition entre les pages ---------- */
.fx-veil {
  position: fixed;
  inset: 0;
  background: var(--bg);
  z-index: 9997;
  pointer-events: none;
  opacity: 1;
  transition: opacity 0.45s ease;
}
.fx-veil.gone { opacity: 0; }
.fx-veil.leaving { opacity: 1; transition-duration: 0.25s; }

/* ---------- Accessibilité : on coupe tout si l'utilisateur le demande ---------- */
@media (prefers-reduced-motion: reduce) {
  .fx-canvas,
  .fx-cursor-dot,
  .fx-cursor-ring,
  .hero-card .fx-orbit { display: none; }
  .fx-word,
  .fx-stagger > *,
  .hero-card li { opacity: 1 !important; transform: none !important; filter: none !important; animation: none !important; }
  .card .icon { animation: none; }
}