/* ═══════════════════════════════════════════
   ITAGOLD — EFFETS MYSTÉRIEUX & FUTURISTES
   Particules, glows, glitch, reveal, aurora
═══════════════════════════════════════════ */

/* ── CANVAS PARTICULES ── */
#fx-canvas {
  position: fixed; inset: 0; z-index: 3;
  pointer-events: none; opacity: 0.35;
}

/* ── INTRO CINÉMATIQUE ── */
#fx-intro {
  position: fixed; inset: 0; z-index: 99999;
  background: #03050e;
  display: flex; align-items: center; justify-content: center;
  flex-direction: column;
  transition: opacity 1s ease, visibility 1s;
}
#fx-intro.done { opacity: 0; visibility: hidden; pointer-events: none; }
#fx-intro-logo {
  font-family: 'Cinzel', 'Space Grotesk', serif;
  font-size: clamp(2rem, 6vw, 4.5rem);
  font-weight: 900;
  letter-spacing: 0.4em;
  color: transparent;
  background: linear-gradient(135deg, #c9a84c 0%, #f5e6a3 25%, #c9a84c 50%, #8b6914 75%, #c9a84c 100%);
  background-size: 200% 200%;
  -webkit-background-clip: text; background-clip: text;
  animation: fx-intro-shimmer 2s ease-in-out infinite, fx-intro-appear 1.5s ease-out;
  filter: drop-shadow(0 0 30px rgba(201,168,76,0.6)) drop-shadow(0 0 60px rgba(201,168,76,0.3));
}
#fx-intro-sub {
  font-family: 'Cinzel', serif;
  font-size: clamp(0.6rem, 2vw, 1rem);
  letter-spacing: 0.8em;
  color: var(--gold-dim);
  margin-top: 12px;
  animation: fx-intro-appear 2s ease-out 0.5s both;
  text-transform: uppercase;
}
#fx-intro-line {
  width: 0; height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
  margin-top: 20px;
  animation: fx-intro-line 1.5s ease-out 0.3s forwards;
}
@keyframes fx-intro-shimmer {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}
@keyframes fx-intro-appear {
  0% { opacity: 0; transform: translateY(20px) scale(0.95); filter: blur(8px); }
  100% { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); }
}
@keyframes fx-intro-line {
  to { width: min(300px, 60vw); }
}

/* ── AURORA BOREALE (fond subtil) ── */
#fx-aurora {
  position: fixed; inset: 0; z-index: 2;
  pointer-events: none; opacity: 0.12;
  background:
    radial-gradient(ellipse 80% 50% at 20% 40%, rgba(201,168,76,0.3), transparent 70%),
    radial-gradient(ellipse 60% 40% at 70% 60%, rgba(100,70,200,0.2), transparent 60%),
    radial-gradient(ellipse 50% 30% at 50% 80%, rgba(201,168,76,0.15), transparent 50%);
  animation: fx-aurora-drift 20s ease-in-out infinite alternate;
  filter: blur(60px);
}
@keyframes fx-aurora-drift {
  0% { transform: translateX(-5%) translateY(-3%) scale(1); }
  33% { transform: translateX(3%) translateY(2%) scale(1.05); }
  66% { transform: translateX(-2%) translateY(-1%) scale(0.98); }
  100% { transform: translateX(4%) translateY(3%) scale(1.02); }
}

/* ── GLITCH LOGO ── */
.nav-logo-text {
  position: relative;
}
@keyframes fx-glitch {
  0%, 93%, 100% { transform: none; opacity: 1; }
  94% { transform: translate(-2px, 1px) skewX(-1deg); opacity: 0.85; }
  95% { transform: translate(2px, -1px) skewX(1deg); opacity: 0.9; }
  96% { transform: translate(-1px, 2px); opacity: 0.85; }
  97% { transform: translate(1px, -2px) skewX(-0.5deg); opacity: 1; }
}
.nav-logo-text:hover {
  animation: fx-glitch 3s ease infinite;
}

/* ── GLOW PULSANT SUR BORDURES ── */
@keyframes fx-border-pulse {
  0%, 100% { border-color: var(--border); box-shadow: 0 0 0 transparent; }
  50% { border-color: var(--border-hover); box-shadow: 0 0 15px var(--gold-glow), inset 0 0 15px rgba(201,168,76,0.03); }
}
.section-card:hover, .game-card:hover, .fanart-card:hover, .radio-card:hover {
  animation: fx-border-pulse 2s ease-in-out infinite;
}

/* ── TILT 3D SUR CARTES ── */
.fx-tilt {
  transition: transform 0.4s cubic-bezier(0.03,0.98,0.52,0.99);
  transform-style: preserve-3d;
  will-change: transform;
}
.fx-tilt:hover {
  transform: perspective(800px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) scale(1.02);
}

/* ── SCROLL REVEAL ── */
.fx-reveal {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.8s cubic-bezier(0.16,1,0.3,1), transform 0.8s cubic-bezier(0.16,1,0.3,1);
}
.fx-reveal.visible {
  opacity: 1;
  transform: translateY(0);
}
.fx-reveal-left {
  opacity: 0;
  transform: translateX(-60px);
  transition: opacity 0.8s cubic-bezier(0.16,1,0.3,1), transform 0.8s cubic-bezier(0.16,1,0.3,1);
}
.fx-reveal-left.visible { opacity: 1; transform: translateX(0); }
.fx-reveal-right {
  opacity: 0;
  transform: translateX(60px);
  transition: opacity 0.8s cubic-bezier(0.16,1,0.3,1), transform 0.8s cubic-bezier(0.16,1,0.3,1);
}
.fx-reveal-right.visible { opacity: 1; transform: translateX(0); }

/* ── SPARKLE CURSOR TRAIL ── */
.fx-sparkle {
  position: fixed;
  pointer-events: none;
  z-index: 99998;
  width: 4px; height: 4px;
  border-radius: 50%;
  background: var(--gold-bright);
  box-shadow: 0 0 6px var(--gold), 0 0 12px var(--gold-glow);
  animation: fx-sparkle-fade 0.8s ease-out forwards;
}
@keyframes fx-sparkle-fade {
  0% { opacity: 1; transform: scale(1) translate(0,0); }
  100% { opacity: 0; transform: scale(0) translate(var(--dx, 10px), var(--dy, -15px)); }
}

/* ── HERO SECTION EFFETS ── */
.hero-section {
  position: relative;
  overflow: hidden;
}
.hero-section::before {
  content: '';
  position: absolute; inset: 0;
  background: radial-gradient(circle at 50% 120%, rgba(201,168,76,0.08) 0%, transparent 60%);
  animation: fx-hero-breathe 6s ease-in-out infinite;
  pointer-events: none;
}
@keyframes fx-hero-breathe {
  0%, 100% { opacity: 0.5; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.05); }
}

/* ── TEXTE SHIMMER SUR TITRES ── */
.hero-title, h1, .section-title {
  background-size: 200% auto !important;
}
.hero-title:hover {
  animation: fx-intro-shimmer 2s linear infinite;
  background: linear-gradient(90deg, #c9a84c 0%, #f5e6a3 25%, #c9a84c 50%, #8b6914 75%, #c9a84c 100%) !important;
  background-size: 200% auto !important;
  -webkit-background-clip: text !important; background-clip: text !important;
  color: transparent !important;
}

/* ── BOUTONS GLOW ── */
.btn-gold, .btn-primary, button[style*="gold"] {
  position: relative;
  overflow: hidden;
}
.btn-gold::after, .btn-primary::after {
  content: '';
  position: absolute; inset: -2px;
  background: linear-gradient(45deg, transparent 30%, rgba(201,168,76,0.3) 50%, transparent 70%);
  background-size: 200% 200%;
  opacity: 0;
  transition: opacity 0.3s;
  pointer-events: none;
  border-radius: inherit;
}
.btn-gold:hover::after, .btn-primary:hover::after {
  opacity: 1;
  animation: fx-btn-shine 1.5s ease infinite;
}
@keyframes fx-btn-shine {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* ── SÉPARATEURS LUMINEUX ── */
.fx-divider {
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold-dim), var(--gold), var(--gold-dim), transparent);
  margin: 2rem 0;
  opacity: 0.5;
  animation: fx-divider-glow 4s ease-in-out infinite;
}
@keyframes fx-divider-glow {
  0%, 100% { opacity: 0.3; }
  50% { opacity: 0.7; }
}

/* ── NOMBRE/COMPTEUR ANIMÉ ── */
.fx-counter {
  display: inline-block;
  transition: all 0.5s;
}

/* ── FLOATING ICONS ── */
@keyframes fx-float {
  0%, 100% { transform: translateY(0px) rotate(0deg); }
  25% { transform: translateY(-8px) rotate(2deg); }
  75% { transform: translateY(4px) rotate(-1deg); }
}
.nav-logo img, .nav-logo svg {
  animation: fx-float 6s ease-in-out infinite;
}

/* ── SCANLINE SUBTIL (cyberpunk feel) ── */
#fx-scanlines {
  position: fixed; inset: 0; z-index: 1;
  pointer-events: none;
  background: repeating-linear-gradient(
    0deg,
    transparent 0px,
    transparent 2px,
    rgba(0,0,0,0.03) 2px,
    rgba(0,0,0,0.03) 4px
  );
  opacity: 0.4;
}

/* ── VIGNETTE (bords sombres) ── */
#fx-vignette {
  position: fixed; inset: 0; z-index: 1;
  pointer-events: none;
  background: radial-gradient(ellipse at center, transparent 50%, rgba(3,5,14,0.6) 100%);
}

/* ── CANVAS CONSTELLATIONS ── */
#fx-constellations {
  position: fixed; inset: 0; z-index: 2;
  pointer-events: none; opacity: 0.35;
}

/* ── MOBILE: réduire les effets pour la performance ── */
@media (max-width: 768px) {
  #fx-canvas { opacity: 0.3; }
  #fx-constellations { opacity: 0.12; }
  #fx-aurora { opacity: 0.06; }
  #fx-scanlines { display: none; }
  .fx-sparkle { display: none; }
  #fx-vignette { background: radial-gradient(ellipse at center, transparent 60%, rgba(3,5,14,0.4) 100%); }
}

/* ── PREFERS REDUCED MOTION ── */
@media (prefers-reduced-motion: reduce) {
  #fx-canvas, #fx-aurora, #fx-scanlines, .fx-sparkle, #fx-intro { display: none !important; }
  .fx-reveal, .fx-reveal-left, .fx-reveal-right { opacity: 1 !important; transform: none !important; }
  *, *::before, *::after { animation-duration: 0.01ms !important; }
}