/* Animations de l'accueil. Tout est désactivé si l'utilisateur préfère moins de mouvement. */

/* Décor flottant */
#fx { position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; display: none; }
body:has(#menu:not([hidden])) #fx { display: block; }
.fx-item {
  position: absolute; left: var(--x); bottom: -60px; width: var(--s); height: var(--s); opacity: 0;
  animation: fxRise var(--d) linear var(--delay) infinite; will-change: transform, opacity;
}
.fx-block { background: color-mix(in srgb, var(--c) 55%, transparent); border: 1.5px solid var(--c); border-radius: 22%; box-shadow: 0 0 14px color-mix(in srgb, var(--c) 50%, transparent); }
.fx-orb { border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff, var(--c) 55%, transparent 75%); box-shadow: 0 0 18px var(--c); }
.fx-ring { border-radius: 50%; border: 2px solid var(--c); box-shadow: 0 0 12px color-mix(in srgb, var(--c) 60%, transparent), inset 0 0 8px color-mix(in srgb, var(--c) 40%, transparent); }
.fx-star { background: var(--c); clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%); filter: drop-shadow(0 0 6px var(--c)); }
.fx-die {
  border: 1.5px solid var(--c); border-radius: 24%; background: color-mix(in srgb, var(--c) 18%, transparent);
  background-image: radial-gradient(circle, var(--c) 2px, transparent 2.5px), radial-gradient(circle, var(--c) 2px, transparent 2.5px), radial-gradient(circle, var(--c) 2px, transparent 2.5px);
  background-size: 100% 100%; background-position: 25% 25%, 50% 50%, 75% 75%; background-repeat: no-repeat;
}
@keyframes fxRise {
  0% { transform: translate3d(0, 0, 0) rotate(0); opacity: 0; }
  10% { opacity: .75; }
  50% { transform: translate3d(var(--sway), -55vh, 0) rotate(calc(var(--rot) / 2)); }
  90% { opacity: .6; }
  100% { transform: translate3d(calc(var(--sway) * -1), -115vh, 0) rotate(var(--rot)); opacity: 0; }
}

/* Logo : halo, flottement, étincelles en orbite */
#menu .brand-logo { position: relative; z-index: 1; animation: logoFloat 5s ease-in-out infinite; filter: drop-shadow(0 0 22px #9d6bff66); }
@keyframes logoFloat { 50% { transform: translateY(-7px); filter: drop-shadow(0 0 34px #3ee6b077); } }
.brand { position: relative; width: min(380px, 85vw); margin: 0 auto; }
.brand .brand-logo { margin-left: auto; margin-right: auto; max-width: 100%; }
.brand::before {
  content: ''; position: absolute; left: 50%; top: 38%; width: 70%; height: 70%; transform: translate(-50%, -50%); z-index: 0; border-radius: 50%;
  background: radial-gradient(circle, #9d6bff55, #3ee6b022 55%, transparent 72%); filter: blur(14px); animation: haloPulse 4s ease-in-out infinite;
}
@keyframes haloPulse { 50% { opacity: .55; transform: translate(-50%, -50%) scale(1.18); } }
.brand .orbit { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.brand .orbit i {
  position: absolute; left: 50%; top: 40%; width: 9px; height: 9px; margin: -4.5px; border-radius: 50%;
  background: var(--c); box-shadow: 0 0 12px var(--c), 0 0 24px var(--c); animation: orbitSpin var(--t) linear infinite; animation-delay: var(--o);
}
.brand .orbit i:nth-child(1) { --c: #3ee6b0; --t: 9s; --o: 0s; }
.brand .orbit i:nth-child(2) { --c: #ffc75f; --t: 12s; --o: -4s; width: 7px; height: 7px; margin: -3.5px; }
.brand .orbit i:nth-child(3) { --c: #ff6b81; --t: 15s; --o: -8s; width: 6px; height: 6px; margin: -3px; }
@keyframes orbitSpin {
  from { transform: rotate(0deg) translateX(min(190px, 42vw)) scaleY(.32) rotate(0deg); }
  to { transform: rotate(360deg) translateX(min(190px, 42vw)) scaleY(.32) rotate(-360deg); }
}

/* Sous-titre qui scintille */
#menu > .sub {
  background: linear-gradient(90deg, #ece8ff 0%, #ece8ff 38%, #3ee6b0 50%, #ece8ff 62%, #ece8ff 100%); background-size: 250% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent; opacity: .8; animation: subShine 6s linear infinite;
}
@keyframes subShine { from { background-position: 100% 0; } to { background-position: -100% 0; } }

/* Barre de catégories et titres */
.category-button.is-active { animation: tabGlow 3s ease-in-out infinite; }
@keyframes tabGlow { 50% { box-shadow: 0 3px 22px color-mix(in srgb, var(--tl, #9d6bff) 60%, transparent); } }
.game-category-title { animation: slideIn .5s ease-out both; }
@keyframes slideIn { from { opacity: 0; transform: translateX(-14px); } }

/* Cartes de jeux : apparition en cascade, icône qui respire, reflet au survol */
.game-category-cards .gcard { animation: cardIn .55s cubic-bezier(.2, .8, .2, 1) both; }
.game-category-cards .gcard:nth-child(1) { animation-delay: .05s; }
.game-category-cards .gcard:nth-child(2) { animation-delay: .13s; }
.game-category-cards .gcard:nth-child(3) { animation-delay: .21s; }
.game-category-cards .gcard:nth-child(4) { animation-delay: .29s; }
.game-category-cards .gcard:nth-child(5) { animation-delay: .37s; }
.game-category-cards .gcard:nth-child(6) { animation-delay: .45s; }
@keyframes cardIn { from { opacity: 0; transform: translateY(26px) scale(.96); } }
.gcard .icon { animation: iconBob 3.6s ease-in-out infinite; }
.gcard:nth-child(2n) .icon { animation-delay: -1.2s; }
.gcard:nth-child(3n) .icon { animation-delay: -2.4s; }
@keyframes iconBob { 50% { transform: translateY(-6px); } }
.gcard:hover .icon { animation-play-state: paused; }
.gcard { overflow: hidden; }
.gcard::before {
  content: ''; position: absolute; top: 0; left: -80%; width: 50%; height: 100%; pointer-events: none; transform: skewX(-18deg);
  background: linear-gradient(90deg, transparent, #ffffff22, transparent); transition: left .7s ease;
}
.gcard:hover::before { left: 130%; }

/* Pastille de profil */
#menu .acct { animation: slideDown .6s ease-out both; }
@keyframes slideDown { from { opacity: 0; transform: translateY(-14px); } }
#menu .acct .av { animation: avPulse 3.5s ease-in-out infinite; }
@keyframes avPulse { 50% { box-shadow: 0 0 0 2px #ffffff30, 0 0 22px color-mix(in srgb, var(--c) 80%, transparent); } }

/* Petits écrans : décor allégé, orbite resserrée */
@media (max-width: 700px) {
  .fx-item:nth-child(n+9) { display: none; }
  .brand .orbit i { animation-name: orbitSpinSmall; }
}
@keyframes orbitSpinSmall {
  from { transform: rotate(0deg) translateX(min(150px, 38vw)) scaleY(.32) rotate(0deg); }
  to { transform: rotate(360deg) translateX(min(150px, 38vw)) scaleY(.32) rotate(-360deg); }
}

@media (prefers-reduced-motion: reduce) {
  .fx-item, #menu .brand-logo, .brand::before, .brand .orbit i, #menu > .sub, .category-button.is-active, .game-category-title,
  .game-category-cards .gcard, .gcard .icon, #menu .acct, #menu .acct .av { animation: none !important; }
  .fx-item { opacity: .35; }
  #menu > .sub { color: #ece8ff; background: none; }
}