/* ============================================================
   L'events — Motion system (animations avancées)
   Tout est neutralisé si l'utilisateur préfère réduire les animations.
   ============================================================ */

@media (prefers-reduced-motion: no-preference) {

  /* ---------- Reveal enrichi (flou + échelle + stagger) ---------- */
  .reveal {
    opacity: 0; transform: translateY(42px) scale(0.985); filter: blur(7px);
    transition: opacity 0.9s var(--ease), transform 0.9s var(--ease), filter 0.9s var(--ease);
    transition-delay: var(--d, 0s);
  }
  .reveal.is-visible { opacity: 1; transform: none; filter: blur(0); }

  /* variantes directionnelles (optionnelles) */
  .reveal--left { transform: translateX(-50px) scale(0.99); }
  .reveal--right { transform: translateX(50px) scale(0.99); }
  .reveal--zoom { transform: scale(0.9); }
  .reveal--left.is-visible, .reveal--right.is-visible, .reveal--zoom.is-visible { transform: none; }

  /* ---------- Hero : aurora, grille, halo ---------- */
  .hero__glow--1 { animation: auroraA 19s ease-in-out infinite alternate; }
  .hero__glow--2 { animation: auroraB 23s ease-in-out infinite alternate; }
  @keyframes auroraA { from { transform: translate(0,0) scale(1); } to { transform: translate(90px,60px) scale(1.22); } }
  @keyframes auroraB { from { transform: translate(0,0) scale(1); } to { transform: translate(-80px,-55px) scale(1.18); } }

  .hero__bg::before { animation: gridPan 7s linear infinite; }
  @keyframes gridPan { to { background-position: 64px 64px; } }

  .hero__light { animation: pulseGlow 8s ease-in-out infinite; }
  @keyframes pulseGlow {
    0%, 100% { opacity: 0.8; transform: translate(-50%, -50%) scale(1); }
    50% { opacity: 1; transform: translate(-50%, -50%) scale(1.07); }
  }

  /* ---------- Texte accent en dégradé animé ---------- */
  .accent {
    background: linear-gradient(100deg, var(--teal-light) 0%, #fff2c2 22%, var(--teal) 48%, var(--teal-light) 74%, #fff2c2 100%);
    background-size: 230% auto; -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent; color: transparent;
    animation: shimmer 7s linear infinite;
  }
  @keyframes shimmer { to { background-position: 230% center; } }

  /* ---------- Titre cinétique (mots qui montent) ---------- */
  .hero__title .word { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: 0.12em; margin-bottom: -0.12em; }
  .hero__title .word > * { display: inline-block; transform: translateY(118%); }
  .hero__title.is-split { opacity: 1; transform: none; filter: none; }
  .hero__title.is-split .word > * { animation: riseWord 1s var(--ease) forwards; animation-delay: calc(0.25s + var(--wi, 0) * 0.07s); }
  @keyframes riseWord { to { transform: translateY(0); } }

  /* ---------- Halo lumineux qui suit le curseur ---------- */
  .cursor-glow {
    position: fixed; top: 0; left: 0; width: 420px; height: 420px; margin: -210px 0 0 -210px;
    border-radius: 50%; pointer-events: none; z-index: 400;
    background: radial-gradient(circle, rgba(249,200,64,0.22) 0%, rgba(249,200,64,0) 60%);
    mix-blend-mode: screen; opacity: 0; transition: opacity 0.5s var(--ease); will-change: transform;
  }
  .cursor-glow.is-on { opacity: 1; }

  /* ---------- Boutons : reflet qui balaie ---------- */
  .btn--primary { position: relative; overflow: hidden; }
  .btn--primary::after {
    content: ""; position: absolute; top: 0; left: -130%; width: 55%; height: 100%;
    background: linear-gradient(100deg, transparent, rgba(255,255,255,0.4), transparent);
    transform: skewX(-18deg); pointer-events: none;
  }
  .btn--primary:hover::after { animation: shine 0.9s var(--ease); }
  @keyframes shine { to { left: 150%; } }

  /* ---------- Tilt 3D (ajouté par JS) ---------- */
  .tilt { transition: transform 0.3s var(--ease), box-shadow 0.45s var(--ease); transform-style: preserve-3d; will-change: transform; }
  .tilt.is-tilting { transition: box-shadow 0.45s var(--ease); }

  /* ---------- Bordures dégradées animées ---------- */
  .summary-card { position: relative; }
  .summary-card::before {
    content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px; z-index: 5;
    background: linear-gradient(90deg, var(--teal), var(--teal-light), #fff2c2, var(--teal-light), var(--teal));
    background-size: 300% 100%; animation: barFlow 5s linear infinite;
  }
  .cta-band::before {
    content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px; z-index: 3;
    background: linear-gradient(90deg, transparent, var(--teal), var(--teal-light), var(--teal), transparent);
    background-size: 250% 100%; animation: barFlow 6s linear infinite;
  }
  @keyframes barFlow { to { background-position: 300% 0; } }

  /* ---------- Barre de progression : lueur ---------- */
  .scroll-progress { box-shadow: 0 0 14px rgba(249,200,64,0.85); }

  /* ---------- Soulignement animé des titres de section ---------- */
  .section__head h2 { position: relative; }
  .section__head h2::after {
    content: ""; position: absolute; left: 50%; bottom: -16px; height: 3px; width: 0;
    background: linear-gradient(90deg, var(--teal), var(--teal-light)); border-radius: 3px;
    transform: translateX(-50%); transition: width 0.9s var(--ease) 0.2s;
  }
  .section__head h2.is-visible::after { width: 64px; }

  /* ---------- Flottement doux des icônes de service au survol ---------- */
  .service-card:hover .service-card__icon { animation: floatY 2.2s ease-in-out infinite; }
  @keyframes floatY { 0%,100% { transform: translateY(0) scale(1.05) rotate(-4deg); } 50% { transform: translateY(-6px) scale(1.05) rotate(-4deg); } }

  /* ---------- Apparition du logo filigrane hero ---------- */
  .hero__logo { animation: fadeLogo 1.6s var(--ease) 0.3s both; }
  @keyframes fadeLogo { from { opacity: 0; } to { opacity: 0.12; } }

  /* ---------- Spotlight : lueur qui suit le curseur sur les cartes ---------- */
  .spot { --mx: 50%; --my: 0%; }
  .spot::after {
    content: ""; position: absolute; inset: 0; border-radius: inherit; z-index: 1; pointer-events: none;
    background: radial-gradient(420px circle at var(--mx) var(--my), rgba(249,200,64,0.16), transparent 60%);
    opacity: 0; transition: opacity 0.4s var(--ease);
  }
  .spot:hover::after { opacity: 1; }
}