/* =====================================================================
   animations.css — tout ce qui bouge
   ---------------------------------------------------------------------
   • .enter          : apparition au chargement (haut de page)
   • [data-reveal]   : apparition quand on fait défiler (géré par main.js)
   • .blob           : taches de lumière qui dérivent en fond
   • .net            : motif « points de connexion » de l'univers DAH
   • .marquee        : bandeau de mots qui défile
   • .rotator        : mot qui change dans le titre de l'accueil
   Si le visiteur a demandé « moins d'animations » dans son système,
   tout est désactivé (dernier bloc du fichier).
   ===================================================================== */

/* ---------- Définition des mouvements ---------- */
@keyframes fadeUp   { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: none; } }
@keyframes rowIn    { from { opacity: 0; transform: translateX(18px); } to { opacity: 1; transform: none; } }
@keyframes floatY   { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-12px); } }
@keyframes bob      { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
@keyframes driftA   { 0%, 100% { transform: translate(0, 0) scale(1); } 50% { transform: translate(-70px, 50px) scale(1.1); } }
@keyframes driftB   { 0%, 100% { transform: translate(0, 0) scale(1); } 50% { transform: translate(80px, -40px) scale(1.12); } }
@keyframes gradShift { from { background-position: 0% 50%; } to { background-position: 200% 50%; } }
@keyframes bandShift { from { background-position: 0% 50%; } to { background-position: 100% 50%; } }
@keyframes pulseRing {
  0%   { box-shadow: 0 0 0 0 rgba(247, 102, 34, 0.6); }
  70%  { box-shadow: 0 0 0 10px rgba(247, 102, 34, 0); }
  100% { box-shadow: 0 0 0 0 rgba(247, 102, 34, 0); }
}
@keyframes shine    { from { transform: translateX(-120%) skewX(-20deg); } to { transform: translateX(320%) skewX(-20deg); } }
@keyframes spinSlow { to { transform: rotate(360deg); } }
@keyframes marquee  { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes rotateWords {
  0%, 18%  { transform: translateY(0); }
  25%, 43% { transform: translateY(-1.1em); }
  50%, 68% { transform: translateY(-2.2em); }
  75%, 93% { transform: translateY(-3.3em); }
  100%     { transform: translateY(-4.4em); }
}
@keyframes netDash  { to { stroke-dashoffset: -20; } }
@keyframes netBlink { 0%, 100% { opacity: .55; transform: scale(1); } 50% { opacity: 1; transform: scale(1.3); } }
@keyframes dashFlow { to { stroke-dashoffset: -20; } }

/* ---------- Apparition au chargement ---------- */
.enter { opacity: 0; animation: fadeUp .9s cubic-bezier(.2, .7, .2, 1) forwards; }
.d1 { animation-delay: .05s; }
.d2 { animation-delay: .15s; }
.d3 { animation-delay: .28s; }
.d4 { animation-delay: .4s; }
.d5 { animation-delay: .52s; }

.row-in { opacity: 0; animation: rowIn .6s cubic-bezier(.2, .7, .2, 1) forwards; }
.row-in:nth-child(1) { animation-delay: .9s; }
.row-in:nth-child(2) { animation-delay: 1.05s; }
.row-in:nth-child(3) { animation-delay: 1.2s; }
.row-in:nth-child(4) { animation-delay: 1.35s; }

/* ---------- Apparition au défilement ----------
   main.js ajoute data-anim="on" sur <html> puis data-in="" sur chaque
   élément qui entre à l'écran. Sans JavaScript, tout reste visible. */
[data-anim="on"] [data-reveal] {
  opacity: 0;
  translate: 0 30px;
  transition:
    opacity .8s cubic-bezier(.2, .7, .2, 1) var(--rd, 0s),
    translate .8s cubic-bezier(.2, .7, .2, 1) var(--rd, 0s),
    transform .25s ease, border-color .2s ease, background .2s ease, box-shadow .25s ease;
}
[data-anim="on"] [data-reveal][data-in] { opacity: 1; translate: 0 0; }
[data-reveal]:nth-child(3n+2) { --rd: .1s; }
[data-reveal]:nth-child(3n)   { --rd: .2s; }

/* ---------- Décors ---------- */
.flowbar { height: 3px; background: var(--gradient-line); background-size: 200% 100%; animation: gradShift 6s linear infinite; }
.blob { position: absolute; border-radius: 50%; pointer-events: none; }
.blob-a { animation: driftA 18s ease-in-out infinite; }
.blob-b { animation: driftB 22s ease-in-out infinite; }
.float { animation: floatY 7s ease-in-out infinite; }
.bob { animation: bob 5s ease-in-out infinite; }
.border-flow { background: linear-gradient(120deg, #1370EA, #F76622, #127EFF, #1370EA); background-size: 300% 300%; animation: gradShift 9s linear infinite; }
.cta-band { animation: bandShift 14s ease-in-out infinite alternate; }
.live-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--orange); animation: pulseRing 1.8s ease-out infinite; }

/* Reflet qui traverse les boutons bleus au survol */
.btn-primary::after {
  content: "";
  position: absolute;
  top: 0; left: 0;
  width: 35%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.35), transparent);
  transform: translateX(-120%) skewX(-20deg);
  pointer-events: none;
}
.btn-primary:hover::after { animation: shine .9s ease; }

/* Petite flèche qui avance au survol */
.btn svg, .link-arrow svg { transition: transform .25s ease; }
.btn:hover svg, .link-arrow:hover svg, .card-hover:hover .link-arrow svg { transform: translateX(4px); }

/* Halo lumineux qui suit la souris sur les cartes (.spot) — voir main.js */
.spot { isolation: isolate; }
.spot::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(380px circle at var(--mx, 50%) var(--my, 0%), rgba(19, 112, 234, 0.16), transparent 45%);
  opacity: 0;
  transition: opacity .3s ease;
  pointer-events: none;
  z-index: -1;
}
.spot:hover::before { opacity: 1; }

/* Motif « points de connexion » (réseau de carrés reliés) */
.net { position: absolute; pointer-events: none; }
.net .net-lines line { stroke: currentColor; stroke-width: 1.4; stroke-dasharray: 4 6; animation: netDash 3s linear infinite; }
.net .net-nodes rect { transform-box: fill-box; transform-origin: center; animation: netBlink 3.4s ease-in-out infinite; }
.net .net-nodes rect:nth-child(3n+1) { animation-delay: .7s; }
.net .net-nodes rect:nth-child(3n+2) { animation-delay: 1.5s; }

/* Bandeau de mots qui défile */
.marquee-wrap {
  overflow: hidden;
  padding: 22px 0;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  background: var(--surface);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.marquee { display: flex; width: max-content; animation: marquee 38s linear infinite; }
.marquee-wrap:hover .marquee { animation-play-state: paused; }
.mq-item { font-size: 15px; font-weight: 600; letter-spacing: 0.02em; color: var(--muted); padding: 0 26px; white-space: nowrap; }
.mq-dot { width: 6px; height: 6px; border-radius: 50%; background: linear-gradient(135deg, #1370EA, #F76622); align-self: center; flex-shrink: 0; }

/* Mot qui tourne dans le titre de l'accueil */
.rotator { display: inline-block; height: 1.1em; overflow: hidden; vertical-align: bottom; }
.rotator-track { display: flex; flex-direction: column; animation: rotateWords 10s cubic-bezier(.7, 0, .3, 1) infinite; }
.rotator-track > span { display: block; height: 1.1em; line-height: 1.1em; white-space: nowrap; }

/* ---------- Respect du réglage « Réduire les animations » ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
  .enter, .row-in { opacity: 1 !important; transform: none !important; }
}