/* =========================================================
   Bibliothèque d'effets Foxonweb — CSS
   Réutilisable sur n'importe quel site : copier effets.css + effets.js,
   puis ajuster les variables ci-dessous aux couleurs du client.
   Inspiré des composants populaires de 21st.dev (React/Tailwind),
   réécrits en HTML/CSS/JS sans dépendance.
   ========================================================= */

:root {
  --fx-accent: #A3E635;               /* couleur principale du client */
  --fx-accent-2: #22D3EE;             /* couleur secondaire (dégradés) */
  --fx-text: #F2EFE9;
  --fx-surface: #1C1C19;
  --fx-line: rgba(242, 239, 233, 0.1);
}

/* ---------- 1. Apparition floutée (Blur Fade) ----------
   <h2 data-fx="blur-fade">...</h2>   (délai : data-fx-delay="0.2") */
[data-fx="blur-fade"] {
  opacity: 0; filter: blur(10px); transform: translateY(14px);
  transition: opacity .8s ease, filter .8s ease, transform .8s ease;
  transition-delay: var(--fx-delay, 0s);
}
[data-fx="blur-fade"].fx-in { opacity: 1; filter: blur(0); transform: none; }

/* ---------- 2. Texte mot par mot (Text Reveal) ----------
   <h1 data-fx="words">Votre site, enfin à votre image</h1> */
[data-fx="words"] .fx-word {
  display: inline-block; opacity: 0; filter: blur(6px); transform: translateY(0.4em);
  transition: opacity .6s ease, filter .6s ease, transform .6s ease;
  transition-delay: calc(var(--i) * 70ms);
}
[data-fx="words"].fx-in .fx-word { opacity: 1; filter: blur(0); transform: none; }

/* ---------- 3. Mot qui change (Word Rotate) ----------
   <span data-fx="rotate" data-words="plombiers|comptables|coiffeurs">plombiers</span> */
[data-fx="rotate"] {
  display: inline-grid; vertical-align: bottom; overflow: hidden; text-align: left;
  color: var(--fx-accent);
}
[data-fx="rotate"] > span { grid-area: 1 / 1; transition: transform .5s cubic-bezier(.2,.8,.2,1), opacity .5s ease; }
[data-fx="rotate"] > span.fx-out { transform: translateY(-100%); opacity: 0; }
[data-fx="rotate"] > span.fx-enter { transform: translateY(100%); opacity: 0; }

/* ---------- 4. Texte brillant (Text Shimmer) ----------
   <span class="fx-shimmer-text">Audit gratuit</span> */
.fx-shimmer-text {
  background: linear-gradient(110deg, var(--fx-text) 35%, var(--fx-accent) 50%, var(--fx-text) 65%) 0 0 / 250% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: fx-shimmer 3.2s linear infinite;
}
@keyframes fx-shimmer { from { background-position: 100% 0; } to { background-position: -150% 0; } }

/* ---------- 5. Bouton reflet (Shiny / Shimmer Button) ----------
   <a class="fx-shine-btn" href="#contact">Demander un devis</a>  (à combiner avec votre classe de bouton) */
.fx-shine-btn { position: relative; overflow: hidden; isolation: isolate; }
.fx-shine-btn::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(115deg, transparent 30%, rgba(255,255,255,.55) 50%, transparent 70%);
  transform: translateX(-120%);
  animation: fx-shine 3.5s ease-in-out infinite;
}
@keyframes fx-shine { 0%, 55% { transform: translateX(-120%); } 85%, 100% { transform: translateX(120%); } }

/* ---------- 6. Bordure lumineuse qui tourne (Shine Border) ----------
   <div class="fx-shine-border">...</div> */
@property --fx-angle { syntax: "<angle>"; initial-value: 0deg; inherits: false; }
.fx-shine-border { position: relative; border-radius: 14px; }
.fx-shine-border::before {
  content: ""; position: absolute; inset: 0; padding: 1.5px; border-radius: inherit; pointer-events: none;
  background: conic-gradient(from var(--fx-angle), transparent 0 70%, var(--fx-accent) 85%, var(--fx-accent-2) 92%, transparent 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  animation: fx-spin 4s linear infinite;
}
@keyframes fx-spin { to { --fx-angle: 360deg; } }

/* ---------- 7. Carte projecteur (Spotlight Card) ----------
   <div class="fx-spotlight">...</div>  — un halo suit la souris */
.fx-spotlight { position: relative; overflow: hidden; }
.fx-spotlight::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity .3s ease;
  background: radial-gradient(420px circle at var(--fx-x, 50%) var(--fx-y, 50%), color-mix(in srgb, var(--fx-accent) 18%, transparent), transparent 60%);
}
.fx-spotlight:hover::before { opacity: 1; }

/* ---------- 8. Carte inclinée 3D (Tilt Card) ----------
   <div class="fx-tilt">...</div> */
.fx-tilt { transition: transform .25s ease; transform-style: preserve-3d; will-change: transform; }

/* ---------- 9. Défilement infini (Marquee) ----------
   <div class="fx-marquee"><div class="fx-marquee-track"> éléments… </div></div>
   Les éléments sont dupliqués automatiquement par effets.js */
.fx-marquee {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 10%, #000 90%, transparent);
  mask-image: linear-gradient(to right, transparent, #000 10%, #000 90%, transparent);
}
/* translate3d + will-change : évite que Safari (iPhone) « oublie » de dessiner des morceaux de la bande */
.fx-marquee-track { display: flex; gap: var(--fx-gap, 40px); width: max-content; animation: fx-marquee var(--fx-speed, 30s) linear infinite; will-change: transform; -webkit-backface-visibility: hidden; backface-visibility: hidden; }
.fx-marquee:hover .fx-marquee-track { animation-play-state: paused; }
.fx-marquee[data-reverse] .fx-marquee-track { animation-direction: reverse; }
@keyframes fx-marquee { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(calc(-50% - var(--fx-gap, 40px) / 2), 0, 0); } }

/* ---------- 10. Fond aurore animé (Aurora / Animated Gradient) ----------
   <section class="fx-aurora">...</section> */
.fx-aurora { position: relative; isolation: isolate; overflow: hidden; }
.fx-aurora::before, .fx-aurora::after {
  content: ""; position: absolute; z-index: -1; width: 60%; aspect-ratio: 1; border-radius: 50%;
  filter: blur(90px); opacity: .35; pointer-events: none;
  animation: fx-float 14s ease-in-out infinite alternate;
}
.fx-aurora::before { background: var(--fx-accent); top: -30%; left: -10%; }
.fx-aurora::after { background: var(--fx-accent-2); bottom: -35%; right: -10%; animation-delay: -7s; opacity: .22; }
@keyframes fx-float { from { transform: translate(0, 0) scale(1); } to { transform: translate(18%, 12%) scale(1.15); } }

/* ---------- 11. Grille en fond (Grid Pattern) ----------
   <section class="fx-grid">...</section> */
.fx-grid { position: relative; isolation: isolate; }
.fx-grid::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image: linear-gradient(var(--fx-line) 1px, transparent 1px), linear-gradient(90deg, var(--fx-line) 1px, transparent 1px);
  background-size: 44px 44px;
  -webkit-mask-image: radial-gradient(ellipse at center, #000 20%, transparent 70%);
  mask-image: radial-gradient(ellipse at center, #000 20%, transparent 70%);
}

/* ---------- 12. Compteur animé (Number Ticker) ----------
   <span data-fx="count" data-to="120" data-suffix="+">0</span> — aucun CSS requis */
[data-fx="count"] { font-variant-numeric: tabular-nums; }

/* ---------- 13. Soulignement dessiné (Highlight) ----------
   <mark class="fx-highlight" data-fx="highlight">sans engagement</mark> */
.fx-highlight {
  background: linear-gradient(transparent 60%, color-mix(in srgb, var(--fx-accent) 45%, transparent) 60%) no-repeat 0 0 / 0% 100%;
  color: inherit; transition: background-size 1s cubic-bezier(.2,.8,.2,1) .2s;
}
.fx-highlight.fx-in { background-size: 100% 100%; }

/* ---------- Accessibilité : on coupe les animations si l'utilisateur le demande ---------- */
@media (prefers-reduced-motion: reduce) {
  [data-fx], [data-fx] *, .fx-shimmer-text, .fx-shine-btn::after, .fx-shine-border::before,
  .fx-marquee-track, .fx-aurora::before, .fx-aurora::after, .fx-highlight {
    animation: none !important; transition: none !important;
    opacity: 1 !important; filter: none !important; transform: none !important;
  }
  .fx-highlight { background-size: 100% 100%; }
}