/* ═══════════════════════════════════════════════════════════════
   FOOTWORLD — ANIMATIONS 3D PRO
   Chargé sur toutes les pages via inject-animations.js
═══════════════════════════════════════════════════════════════ */

/* ── KEYFRAMES GLOBAUX ──────────────────────────────────────── */
@keyframes fw-ripple {
  to { transform: scale(4); opacity: 0; }
}
@keyframes fw-shimmer {
  0%   { transform: translateX(-100%) skewX(-15deg); }
  100% { transform: translateX(250%) skewX(-15deg); }
}
@keyframes fw-pulse-live {
  0%, 100% { opacity: 1; box-shadow: 0 0 0 0 rgba(255,23,68,0.7); }
  50%       { opacity: 0.7; box-shadow: 0 0 0 6px rgba(255,23,68,0); }
}
@keyframes fw-pulse-green {
  0%, 100% { box-shadow: 0 0 8px rgba(0,230,118,0.3); }
  50%       { box-shadow: 0 0 24px rgba(0,230,118,0.7), 0 0 48px rgba(0,230,118,0.2); }
}
@keyframes fw-card-gold {
  0%, 100% { box-shadow: 0 4px 24px rgba(0,0,0,0.4), 0 0 0 1px rgba(255,215,0,0.15); }
  50%       { box-shadow: 0 4px 32px rgba(0,0,0,0.5), 0 0 24px rgba(255,215,0,0.4), 0 0 0 1px rgba(255,215,0,0.4); }
}
@keyframes fw-count-up {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes fw-slide-in-left {
  from { opacity: 0; transform: translateX(-20px); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes fw-fade-up {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes fw-border-glow {
  0%, 100% { border-color: rgba(0,230,118,0.2); }
  50%       { border-color: rgba(0,230,118,0.6); }
}
@keyframes fw-nav-glow {
  0%, 95%, 100% { text-shadow: none; }
  96%  { text-shadow: 0 0 20px rgba(0,230,118,0.9), 0 0 40px rgba(0,230,118,0.5); }
}

/* ── SCROLL ANIMATIONS ──────────────────────────────────────── */
[data-animate] {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.55s ease, transform 0.55s ease;
}
[data-animate].fw-visible {
  opacity: 1;
  transform: translateY(0);
}
[data-animate="left"] {
  transform: translateX(-24px);
}
[data-animate="left"].fw-visible {
  transform: translateX(0);
}
[data-animate="scale"] {
  transform: scale(0.94);
}
[data-animate="scale"].fw-visible {
  transform: scale(1);
}

/* ── NAV AMÉLIORÉE ───────────────────────────────────────────── */
nav:not(.fw-bottom-nav) {
  background: rgba(8,8,8,0.92) !important;
  border-bottom: 1px solid rgba(0,230,118,0.12) !important;
  box-shadow: 0 1px 0 rgba(0,230,118,0.08), 0 8px 32px rgba(0,0,0,0.5) !important;
}
.logo {
  animation: fw-nav-glow 6s ease infinite;
  transition: text-shadow 0.3s;
}
.nav-links a {
  position: relative;
  padding-bottom: 3px;
}
.nav-links a::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0;
  width: 0; height: 1px;
  background: var(--green, #00e676);
  transition: width 0.3s ease;
}
.nav-links a:hover::after,
.nav-links a.active::after {
  width: 100%;
}

/* ── BOUTONS ─────────────────────────────────────────────────── */
.btn,
.btn-primary,
.btn-outline,
.btn-premium-cta {
  position: relative;
  overflow: hidden;
}
.btn::after,
.btn-primary::after,
.btn-outline::after {
  content: '';
  position: absolute;
  top: 0; left: -80%;
  width: 50%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.18), transparent);
  transform: skewX(-15deg);
  pointer-events: none;
}
.btn:hover::after,
.btn-primary:hover::after {
  animation: fw-shimmer 0.6s ease;
}
.btn-primary:not(.no-pulse),
button.btn:not(.no-pulse) {
  animation: fw-pulse-green 3s ease-in-out infinite;
}
.btn-primary:hover,
button.btn:hover {
  animation: none;
  transform: translateY(-2px) scale(1.02);
  box-shadow: 0 8px 28px rgba(0,230,118,0.4) !important;
}

/* Ripple */
.fw-ripple {
  position: absolute;
  border-radius: 50%;
  width: 20px; height: 20px;
  background: rgba(255,255,255,0.3);
  transform: scale(0);
  animation: fw-ripple 0.6s ease-out forwards;
  pointer-events: none;
}

/* ── CARDS JOUEURS — EFFET FIFA ──────────────────────────────── */
.player-card,
.sim-card {
  transform-style: preserve-3d;
  will-change: transform;
  transition: transform 0.15s ease, box-shadow 0.3s ease !important;
  position: relative;
  overflow: hidden;
}
.player-card::before,
.sim-card::before {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(
    135deg,
    transparent 30%,
    rgba(255,215,0,0.07) 50%,
    transparent 70%
  );
  background-size: 200% 200%;
  transition: background-position 0.3s;
  pointer-events: none;
  z-index: 1;
  border-radius: inherit;
}
.player-card:hover::before,
.sim-card:hover::before {
  background-position: 100% 100%;
}

/* Top 3 classement — glow or */
.player-card.rank-1,
.player-card.rank-2,
.player-card.rank-3 {
  animation: fw-card-gold 3s ease-in-out infinite;
}

/* ── CARDS JEUX & CLUBS ──────────────────────────────────────── */
.game-card,
.arcade-card,
.club-card,
.trend-card {
  transform-style: preserve-3d;
  will-change: transform;
  position: relative;
  overflow: hidden;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease !important;
}
.game-card:hover,
.arcade-card:hover,
.club-card:hover {
  border-color: rgba(0,230,118,0.4) !important;
  box-shadow: 0 12px 40px rgba(0,0,0,0.5), 0 0 0 1px rgba(0,230,118,0.2) !important;
}

/* Shine layer sur game-cards */
.game-card::after,
.arcade-card::after {
  content: '' !important;
  position: absolute !important;
  inset: 0 !important;
  background: linear-gradient(135deg, rgba(0,230,118,0.04) 0%, transparent 60%) !important;
  opacity: 0 !important;
  transition: opacity 0.3s !important;
  pointer-events: none !important;
  z-index: 0 !important;
}
.game-card:hover::after,
.arcade-card:hover::after {
  opacity: 1 !important;
}

/* ── BADGE LIVE ──────────────────────────────────────────────── */
.live-dot,
[data-live],
.fw-live-badge {
  animation: fw-pulse-live 1.4s ease-in-out infinite !important;
}
.live-badge,
.live-indicator {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: rgba(255,23,68,0.15);
  border: 1px solid rgba(255,23,68,0.4);
  color: #ff1744;
  font-size: 11px;
  font-weight: 800;
  padding: 3px 10px;
  border-radius: 20px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  animation: fw-border-glow 2s ease infinite;
}

/* ── STATS BAR — COUNTERS ────────────────────────────────────── */
.num[data-target],
.stat-num {
  animation: fw-count-up 0.5s ease both;
  display: inline-block;
}

/* ── SECTIONS & TITRES ───────────────────────────────────────── */
.section-title,
.page-header h1 {
  position: relative;
}
.page-header h1 span {
  text-shadow: 0 0 30px rgba(0,230,118,0.4);
}

/* ── RESULT BOX & ITEMS ──────────────────────────────────────── */
.result-row,
.ranking-row,
.table-row,
tr {
  transition: background 0.2s, transform 0.15s !important;
}
.result-row:hover,
.ranking-row:hover,
.table-row:hover,
tr:hover {
  background: rgba(0,230,118,0.04) !important;
  transform: translateX(4px);
}

/* ── INPUTS / SELECTS ────────────────────────────────────────── */
input:focus,
select:focus,
textarea:focus {
  border-color: var(--green, #00e676) !important;
  box-shadow: 0 0 0 3px rgba(0,230,118,0.12), 0 0 16px rgba(0,230,118,0.1) !important;
  outline: none !important;
}

/* ── CANVAS PARTICULES ──────────────────────────────────────── */
#fw-particles {
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  pointer-events: none;
  z-index: 0;
  opacity: 0.25;
}

/* ── PREMIUM / CTA ───────────────────────────────────────────── */
.premium-section,
.cta-community,
[class*="premium"] {
  animation: fw-border-glow 3s ease-in-out infinite;
}

/* ── FOOTER ──────────────────────────────────────────────────── */
footer a:hover {
  text-shadow: 0 0 12px rgba(0,230,118,0.5);
}

/* ── MOBILE OPTIMISATIONS ────────────────────────────────────── */
@media (max-width: 768px) {
  #fw-particles { opacity: 0.15; }
  .player-card, .sim-card, .game-card, .arcade-card { will-change: auto; }
  .btn-primary:not(.no-pulse) { animation: none; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}