/* ════════════════════════════════════════════════════
   AGENTIQ — FX layer (spotlight, shine, typewriter,
   underline draw, agent demo loop, particles, progress)
   Tout est gated par prefers-reduced-motion côté JS ;
   ici on ne définit que les styles.
   ════════════════════════════════════════════════════ */

/* ─── 1. Spotlight sur cartes (suit la souris) ─── */
.fx-spot { position: relative; }
.fx-spot::after {
  content: ''; position: absolute; inset: 0; border-radius: inherit;
  pointer-events: none; opacity: 0; transition: opacity .35s;
  background: radial-gradient(320px circle at var(--mx, 50%) var(--my, 50%),
              rgba(0,224,200,0.10), transparent 65%);
  z-index: 0;
}
.fx-spot:hover::after { opacity: 1; }
.fx-spot > * { position: relative; z-index: 1; }

/* ─── 1b. Shine sur boutons primaires ─── */
.btn-primary { position: relative; overflow: hidden; }
.btn-primary::before {
  content: ''; position: absolute; top: 0; bottom: 0; width: 40%;
  left: -60%; transform: skewX(-20deg);
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.35), transparent);
  transition: none; pointer-events: none;
}
.btn-primary:hover::before { animation: fx-shine .7s cubic-bezier(0.4,0,0.2,1); }
@keyframes fx-shine { to { left: 130%; } }
@media (prefers-reduced-motion: reduce) {
  .btn-primary:hover::before { animation: none; }
}

/* ─── 1c. Soulignement qui se dessine (em des titres) ─── */
.fx-underline {
  background-image: linear-gradient(currentColor, currentColor);
  background-repeat: no-repeat;
  background-position: 0 96%;
  background-size: 0% 2px;
  transition: background-size .9s cubic-bezier(0.2,0.8,0.2,1) .35s;
  padding-bottom: 2px;
}
.fx-underline.fx-drawn { background-size: 100% 2px; }
@media (prefers-reduced-motion: reduce) {
  .fx-underline { background-size: 100% 2px; transition: none; }
}

/* ─── 1d. Curseur machine à écrire ─── */
.fx-caret::after {
  content: ''; display: inline-block; width: 3px; height: 0.85em;
  background: var(--cyan); margin-left: 4px; vertical-align: baseline;
  animation: fx-blink 1s steps(1) infinite;
}
@keyframes fx-blink { 50% { opacity: 0; } }
.fx-caret.fx-done::after { animation: fx-blink 1s steps(1) 4, fx-fadeout .4s 4s forwards; }
@keyframes fx-fadeout { to { opacity: 0; width: 0; margin-left: 0; } }

/* ─── 2a. Démo agent : messages masqués avant lecture ─── */
.agent-body.fx-play .msg,
.agent-body.fx-play .typing-row { display: none; }
.agent-body.fx-play .msg.fx-in { display: block; animation: fx-msg .45s cubic-bezier(0.2,0.8,0.2,1); }
.agent-body.fx-play .typing-row.fx-in { display: flex; animation: fx-msg .3s cubic-bezier(0.2,0.8,0.2,1); }
@keyframes fx-msg {
  from { opacity: 0; transform: translateY(10px) scale(0.97); }
  to { opacity: 1; transform: none; }
}

/* ─── 2b. Pulsation lente de la grille du hero ─── */
.fx-motion .hero-grid { animation: fx-grid 7s ease-in-out infinite; }
@keyframes fx-grid { 0%,100% { opacity: 0.35; } 50% { opacity: 0.6; } }

/* ─── 2c. Barre de progression de lecture (articles) ─── */
.fx-progress {
  position: fixed; top: 0; left: 0; height: 3px; width: 0%;
  background: linear-gradient(90deg, var(--cyan-dark), var(--cyan));
  z-index: 200; box-shadow: 0 0 10px var(--cyan-glow);
}

/* ─── 3. Canvas particules du hero ─── */
.fx-particles {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
}
.hero .hero-inner { position: relative; z-index: 2; }