/* ============================================================
   NightGame — Animations globales « néon » (couche wow)
   Chargée en dernier sur toutes les pages (après css/style.css)
   ============================================================ */

/* ---------- Fond : aurore / nébuleuse violet-cyan ---------- */
body::before {
  content: "";
  position: fixed;
  inset: -25%;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(40% 44% at 16% 20%, rgba(124, 92, 255, 0.30), transparent 70%),
    radial-gradient(34% 38% at 84% 14%, rgba(56, 225, 255, 0.20), transparent 70%),
    radial-gradient(42% 48% at 74% 86%, rgba(124, 92, 255, 0.26), transparent 72%),
    radial-gradient(36% 42% at 20% 82%, rgba(91, 61, 240, 0.24), transparent 70%);
  animation: auroraDrift 26s ease-in-out infinite alternate;
}
@keyframes auroraDrift {
  0%   { transform: translate3d(-3%, -2%, 0) scale(1) rotate(0deg); }
  50%  { transform: translate3d(3%, 3%, 0) scale(1.10) rotate(4deg); }
  100% { transform: translate3d(-2%, 2%, 0) scale(1.03) rotate(-3deg); }
}

/* ---------- Étoiles scintillantes + filantes (injectées JS) ---------- */
.fx-stars {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}
.fx-tw {
  position: absolute;
  width: 2px;
  height: 2px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 6px rgba(56, 225, 255, 0.9), 0 0 12px rgba(124, 92, 255, 0.55);
  animation: twinkle 3s ease-in-out infinite;
}
@keyframes twinkle {
  0%, 100% { opacity: 0.12; transform: scale(0.5); }
  50%      { opacity: 1;    transform: scale(1.25); }
}
.fx-shoot {
  position: absolute;
  width: 130px;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, rgba(56, 225, 255, 0.9), rgba(124, 92, 255, 0.4), transparent);
  opacity: 0;
  transform: rotate(-28deg);
  animation: shoot 11s ease-in infinite;
}
@keyframes shoot {
  0%   { transform: translate3d(0, 0, 0) rotate(-28deg); opacity: 0; }
  1.5% { opacity: 1; }
  9%   { transform: translate3d(-360px, 190px, 0) rotate(-28deg); opacity: 0; }
  100% { transform: translate3d(-360px, 190px, 0) rotate(-28deg); opacity: 0; }
}

/* ---------- Particules flottantes (canvas injecté JS) ---------- */
#fx-particles {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

/* ---------- Texte « glow » : dégradé animé ---------- */
.glow {
  background: linear-gradient(90deg, var(--violet), var(--cyan), #7ee7ff, var(--violet));
  background-size: 300% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 0 18px rgba(124, 92, 255, 0.45));
  animation: glowFlow 6s linear infinite;
}
@keyframes glowFlow {
  0%   { background-position: 0% 50%; }
  100% { background-position: 300% 50%; }
}

/* ---------- Boutons : halo pulsant + reflet balayant + ripple ---------- */
.btn {
  position: relative;
  overflow: hidden;
}
.btn-primary {
  animation: btnGlow 3s ease-in-out infinite;
}
.btn-primary:hover {
  animation-duration: 1.2s;
}
@keyframes btnGlow {
  0%, 100% { box-shadow: 0 0 20px rgba(124, 92, 255, 0.45); }
  50%      { box-shadow: 0 0 38px rgba(124, 92, 255, 0.75), 0 0 60px rgba(56, 225, 255, 0.25); }
}
.btn-primary::after,
.btn-ghost::after {
  content: "";
  position: absolute;
  top: 0;
  left: -85%;
  width: 55%;
  height: 100%;
  background: linear-gradient(105deg, transparent, rgba(255, 255, 255, 0.30), transparent);
  transform: skewX(-20deg);
  transition: left 0.65s ease;
  pointer-events: none;
}
.btn-primary:hover::after,
.btn-ghost:hover::after {
  left: 130%;
}
.btn-ripple {
  position: absolute;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.55), rgba(56, 225, 255, 0.25));
  transform: scale(0);
  animation: rippleOut 0.65s ease-out forwards;
  pointer-events: none;
}
@keyframes rippleOut {
  to { transform: scale(3); opacity: 0; }
}

/* ---------- Cartes : projecteur lumineux + tilt 3D ---------- */
.card {
  position: relative;
  --mx: 50%;
  --my: 50%;
  --rx: 0deg;
  --ry: 0deg;
  transition: transform 0.18s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}
.card:hover {
  background-image: radial-gradient(300px circle at var(--mx) var(--my), rgba(124, 92, 255, 0.18), transparent 65%);
  transform: perspective(720px) translateY(-6px) rotateX(var(--rx)) rotateY(var(--ry));
  border-color: var(--violet);
  box-shadow: 0 20px 50px rgba(124, 92, 255, 0.32), 0 0 0 1px rgba(124, 92, 255, 0.35);
}

/* ---------- Navigation : soulignement néon ---------- */
.nav > a:not(.account-link) {
  position: relative;
}
.nav > a:not(.account-link)::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -5px;
  width: 0;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--violet), var(--cyan));
  box-shadow: 0 0 10px rgba(56, 225, 255, 0.7);
  transition: width 0.3s ease;
}
.nav > a:not(.account-link):hover::after {
  width: 100%;
}

/* ---------- Entrée du hero (accueil) ---------- */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(28px); }
  to   { opacity: 1; transform: none; }
}
.hero-eyebrow { animation: fadeUp 0.7s ease-out both; }
.hero-title   { animation: fadeUp 0.8s 0.08s ease-out both; }
.hero-sub     { animation: fadeUp 0.8s 0.18s ease-out both; }
.hero-cta     { animation: fadeUp 0.8s 0.28s ease-out both; }

/* ---------- Apparition au scroll (JS) ---------- */
.reveal {
  opacity: 0;
  transform: translateY(26px);
}
.reveal.revealed {
  animation: revealUp 0.7s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  animation-delay: var(--reveal-delay, 0s);
}
@keyframes revealUp {
  to { opacity: 1; transform: none; }
}

/* ---------- Accessibilité : mouvement réduit ---------- */
@media (prefers-reduced-motion: reduce) {
  body::before, .fx-stars, #fx-particles { display: none !important; }
  *, *::before, *::after {
    animation-duration: 0.001s !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001s !important;
  }
  .reveal { opacity: 1 !important; transform: none !important; }
}