/* ==========================================================================
   CAPTAIN FUTURE — animations.css
   Bibliothèque de keyframes officielle (utilisées par main.css et les JS)
   ========================================================================== */

/* Rotation générique (preloader, anneaux) */
@keyframes cf-spin {
  to { transform: rotate(360deg); }
}

@keyframes cf-none { to {} }

/* Nébuleuses — dérive lente */
@keyframes cf-nebula-drift {
  0%   { transform: translate3d(0, 0, 0) scale(1); }
  50%  { transform: translate3d(-4vmax, 3vmax, 0) scale(1.08); }
  100% { transform: translate3d(3vmax, -3vmax, 0) scale(0.96); }
}

/* Point lumineux (badge hero) */
@keyframes cf-pulse-dot {
  0%, 100% { box-shadow: 0 0 6px rgba(255,184,48,0.6); transform: scale(1); }
  50%      { box-shadow: 0 0 16px rgba(255,184,48,0.95); transform: scale(1.25); }
}

/* Flèche de scroll */
@keyframes cf-bounce-hint {
  0%, 100% { transform: translateY(0); opacity: 0.7; }
  50%      { transform: translateY(8px); opacity: 1; }
}

/* Pulse de bordure holographique dorée */
@keyframes cf-border-pulse {
  0%, 100% { box-shadow: 0 0 0 1px rgba(255,184,48,0.25), 0 0 12px rgba(255,184,48,0.18); }
  50%      { box-shadow: 0 0 0 1px rgba(255,184,48,0.55), 0 0 28px rgba(255,184,48,0.4); }
}

/* Glitch léger sur titres (hover ou data-glitch) */
@keyframes cf-glitch-1 {
  0%, 100% { clip-path: inset(0 0 92% 0); transform: translate(-2px, -1px); }
  20%      { clip-path: inset(28% 0 58% 0); transform: translate(2px, 1px); }
  40%      { clip-path: inset(62% 0 12% 0); transform: translate(-1px, 2px); }
  60%      { clip-path: inset(8% 0 76% 0); transform: translate(1px, -2px); }
  80%      { clip-path: inset(44% 0 40% 0); transform: translate(2px, 2px); }
}
@keyframes cf-glitch-2 {
  0%, 100% { clip-path: inset(80% 0 4% 0); transform: translate(2px, 1px); }
  20%      { clip-path: inset(12% 0 70% 0); transform: translate(-2px, -1px); }
  40%      { clip-path: inset(50% 0 30% 0); transform: translate(1px, 2px); }
  60%      { clip-path: inset(70% 0 8% 0); transform: translate(-1px, -2px); }
  80%      { clip-path: inset(30% 0 52% 0); transform: translate(-2px, 1px); }
}

[data-glitch] { position: relative; }
[data-glitch]::before,
[data-glitch]::after {
  content: attr(data-glitch);
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
  background: inherit;
  -webkit-background-clip: text;
  background-clip: text;
}
[data-glitch]:hover::before {
  opacity: 0.8;
  color: var(--cf-cyan);
  -webkit-text-fill-color: var(--cf-cyan);
  animation: cf-glitch-1 600ms steps(2, jump-none) infinite;
}
[data-glitch]:hover::after {
  opacity: 0.8;
  color: var(--cf-orange);
  -webkit-text-fill-color: var(--cf-orange);
  animation: cf-glitch-2 600ms steps(2, jump-none) infinite;
}

/* Transition warp — lignes radiales */
@keyframes cf-warp-fade {
  0%   { opacity: 0; }
  35%  { opacity: 1; }
  70%  { opacity: 1; }
  100% { opacity: 0; }
}
@keyframes cf-warp-zoom {
  0%   { opacity: 0; transform: scale(2.6) rotate(0.001deg); filter: blur(0); }
  30%  { opacity: 1; }
  80%  { opacity: 1; transform: scale(0.18) rotate(6deg); filter: blur(1px); }
  100% { opacity: 0; transform: scale(0.05) rotate(10deg); }
}

/* Barre de statistiques (jauges des fiches personnages — step 2) */
@keyframes cf-bar-fill {
  from { transform: scaleX(0); }
  to   { transform: scaleX(var(--stat-value, 1)); }
}

/* Flottement doux (éléments en apesanteur, ex. Simon Wright) */
@keyframes cf-float {
  0%, 100% { transform: translateY(0) rotate(0.001deg); }
  50%      { transform: translateY(-12px) rotate(0.6deg); }
}
.float { animation: cf-float 5.5s ease-in-out infinite; }
.float--slow { animation: cf-float 8s ease-in-out infinite; }

/* Flicker type enseigne néon */
@keyframes cf-flicker {
  0%, 100% { opacity: 1; }
  92% { opacity: 1; }
  93% { opacity: 0.4; }
  94% { opacity: 1; }
  96% { opacity: 0.7; }
  97% { opacity: 1; }
}
.flicker { animation: cf-flicker 6s linear infinite; }

/* Apparition douce générique */
@keyframes cf-fade-up {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: none; }
}
.fade-up { animation: cf-fade-up 700ms var(--cf-ease-out-expo) both; }

/* Lueur respirante pour hologrammes / badges */
@keyframes cf-holo-breathe {
  0%, 100% { opacity: 0.55; filter: drop-shadow(0 0 6px rgba(0,212,255,0.35)); }
  50%      { opacity: 1;    filter: drop-shadow(0 0 18px rgba(0,212,255,0.7)); }
}
.holo-breathe { animation: cf-holo-breathe 3.2s ease-in-out infinite; }

/* Balayage lumineux vertical (headers de sections) */
@keyframes cf-scan-sweep {
  from { transform: translateY(-120%); }
  to   { transform: translateY(120%); }
}

/* Étoile filante occasionnelle */
@keyframes cf-shooting-star {
  0%   { transform: translate3d(0, 0, 0) rotate(-35deg) scaleX(0); opacity: 0; }
  4%   { opacity: 1; transform: translate3d(-6vw, 3vw, 0) rotate(-35deg) scaleX(1); }
  12%  { transform: translate3d(-30vw, 15vw, 0) rotate(-35deg) scaleX(1); opacity: 0; }
  100% { transform: translate3d(-30vw, 15vw, 0) rotate(-35deg); opacity: 0; }
}