/* ==========================
   ESSO4K – Effets LITE (perf)
   ========================== */

/* 0) Transitions douces par défaut */
*,
*::before,
*::after { transition: all .25s ease; }

/* 1) Titre : dégradé fixe + léger glow (pas d'animation continue) */
.esso-animated-title {
  background: linear-gradient(90deg, var(--accent2), var(--accent1), var(--accent3));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: 0 0 10px rgba(0, 224, 255, 0.16);
  background-size: 120% 100%;
  background-position: 0% 0%;
}
.esso-animated-title:hover {
  /* petit déplacement uniquement au survol */
  background-position: 100% 0%;
}

/* 2) Boutons néon : gradient statique + glow léger ; shift uniquement au hover */
.btn-animated,
button.btn-animated {
  position: relative;
  overflow: hidden;
  background: linear-gradient(90deg, var(--accent2), var(--accent1));
  background-size: 160% 100%;
  background-position: 0% 0%;
  color: #0b101a !important;
  box-shadow: 0 0 18px rgba(0, 224, 255, 0.18);
  will-change: background-position, box-shadow;
}
.btn-animated:hover {
  background-position: 100% 0%;
  filter: brightness(1.05);
  box-shadow: 0 0 28px rgba(138, 46, 255, 0.35);
}

/* 3) Halo doux (remplace la pulsation par une transition simple) */
.btn-pulse {
  box-shadow: 0 0 18px rgba(0, 224, 255, 0.18);
}
.btn-pulse:hover {
  box-shadow: 0 0 32px rgba(138, 46, 255, 0.38);
}

/* 4) Cartes néon : bord statique très léger (aucune animation) */
.card-neon { position: relative; }
.card-neon::after {
  content: "";
  position: absolute; inset: -1px; border-radius: inherit; pointer-events: none;
  background: linear-gradient(120deg,
              transparent 0 10%,
              rgba(0, 224, 255, .18),
              rgba(138, 46, 255, .18),
              rgba(0, 255, 163, .18),
              transparent 90% 100%);
  filter: blur(.3px);
}

/* 5) Champs : glow uniquement au focus */
input:focus, select:focus, textarea:focus {
  border-color: var(--accent1);
  box-shadow: 0 0 8px rgba(0, 224, 255, 0.32), 0 0 16px rgba(138, 46, 255, 0.16);
}

/* 6) Badge : liseré dégradé discret (pas d’animation) */
.badge-animated {
  background: linear-gradient(90deg, rgba(138,46,255,.18), rgba(0,224,255,.18));
  border: 1px solid rgba(255,255,255,.12);
}

/* 7) Respecte l’OS: si l’utilisateur demande moins d’animations, on force au minimum */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; }
}