/* ============================================================
   CHARGEMENT DU CLUB — components/loader/loader.project.css (projet, non haché)
   ============================================================
   Styles de l'archer qui tire (loader.project.js), à côté du composant
   générique de la bibliothèque (loader.css).
   ============================================================ */

/* ====== ARCHER LOADER ====== */

.archer-loader {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 56px 20px;
  min-height: 200px;
}
.archer-loader-svg {
  width: 280px;
  height: 105px;
  max-width: 100%;
  display: block;
}
.archer-loader-text {
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--c-mute);
  margin: 0;
  animation: archerLoaderText 1.6s ease-in-out infinite;
}
@keyframes archerLoaderText {
  0%, 100% { opacity: 0.5; }
  50% { opacity: 1; }
}

/* Fond sombre (cards bleues) → variantes claires */
.admin-card-progress .archer-loader-text,
.current-membership .archer-loader-text {
  color: rgba(255, 255, 255, 0.7);
}

/* Cycle global de 3.2s. Phases :
   0-19%   archer bande l'arc (oscillation)
   19-22%  impulsion (corde revient à zéro)
   22-47%  flèche traverse l'écran
   47-50%  impact (vibration cible)
   50-100% repos, reset
*/

/* La flèche démarre invisible, accolée à l'archer, puis vole, se plante, disparaît */
.archer-arrow {
  animation: archerArrow 3.2s cubic-bezier(0.55, 0, 0.7, 1) infinite;
  transform-origin: 0 0;
}
@keyframes archerArrow {
  /* Encochée à l'archer, peu visible (le bras la cache un peu) */
  0%, 18% {
    transform: translate(40px, 56px);
    opacity: 1;
  }
  /* Encochage maximal (corde tendue vers l'arrière) */
  19% {
    transform: translate(34px, 56px);
    opacity: 1;
  }
  /* Tir : la flèche fuse */
  22% {
    transform: translate(58px, 56px);
    opacity: 1;
  }
  /* Vol */
  46% {
    transform: translate(238px, 56px);
    opacity: 1;
  }
  /* Impact / plantée dans le jaune */
  48%, 75% {
    transform: translate(252px, 60px);
    opacity: 1;
  }
  /* Fondu de sortie */
  85%, 100% {
    transform: translate(252px, 60px);
    opacity: 0;
  }
}

/* Le bras qui tient la corde recule pendant l'encochage puis revient sec au tir */
.archer-arm-draw {
  transform-origin: 0px -8px;
  animation: archerArmDraw 3.2s cubic-bezier(0.55, 0, 0.7, 1) infinite;
}
@keyframes archerArmDraw {
  0% { transform: rotate(0deg); }
  18% { transform: rotate(-8deg); }
  19% { transform: rotate(-12deg); }
  22% { transform: rotate(2deg); }
  30%, 100% { transform: rotate(0deg); }
}

/* La corde de l'arc suit le bras (recule, claque, revient) */
.archer-string {
  animation: archerString 3.2s cubic-bezier(0.55, 0, 0.7, 1) infinite;
  transform-origin: 18px -12px;
}
@keyframes archerString {
  0% { transform: scaleX(1); }
  18% { transform: scaleX(1.05) translateX(-1px); }
  19% { transform: scaleX(1.08) translateX(-2px); }
  22% { transform: scaleX(0.96) translateX(1px); }
  25% { transform: scaleX(1.01); }
  30%, 100% { transform: scaleX(1); }
}

/* L'arc fléchit légèrement au moment du tir */
.archer-bow {
  transform-origin: 18px -12px;
  animation: archerBow 3.2s cubic-bezier(0.55, 0, 0.7, 1) infinite;
}
@keyframes archerBow {
  0%, 18% { transform: scaleX(1); }
  20% { transform: scaleX(1.08); }
  23% { transform: scaleX(0.97); }
  28%, 100% { transform: scaleX(1); }
}

/* L'archer entier oscille subtilement à la décoche */
.archer-figure {
  animation: archerFigure 3.2s cubic-bezier(0.55, 0, 0.7, 1) infinite;
}
@keyframes archerFigure {
  0%, 18% { transform: translate(40px, 60px); }
  21% { transform: translate(38px, 60px); }
  25%, 100% { transform: translate(40px, 60px); }
}

/* La cible vibre à l'impact (47-50%) */
.archer-target {
  animation: archerTarget 3.2s ease-out infinite;
  transform-origin: 270px 60px;
}
@keyframes archerTarget {
  0%, 47% { transform: translate(270px, 60px) scale(1); }
  48% { transform: translate(269px, 60px) scale(1.06); }
  49% { transform: translate(271px, 60px) scale(1.04); }
  51% { transform: translate(270px, 60px) scale(1.02); }
  55%, 100% { transform: translate(270px, 60px) scale(1); }
}

/* Cercles concentriques qui pulsent depuis l'impact */
.archer-target-ring {
  transform-origin: center;
}
.archer-target-ring-1 {
  animation: archerRingPulse 3.2s ease-out infinite;
}
.archer-target-ring-2 {
  animation: archerRingPulse 3.2s ease-out infinite;
  animation-delay: 0.04s;
}
.archer-target-ring-3 {
  animation: archerRingPulse 3.2s ease-out infinite;
  animation-delay: 0.08s;
}
.archer-target-ring-4 {
  animation: archerRingPulse 3.2s ease-out infinite;
  animation-delay: 0.12s;
}
@keyframes archerRingPulse {
  0%, 47% { stroke-width: 1.5; opacity: 1; }
  48% { stroke-width: 2.5; opacity: 1; }
  55%, 100% { stroke-width: 1.5; opacity: 0.85; }
}

/* Bullseye qui clignote au tout début du cycle (anticipation) */
.archer-target-bullseye {
  animation: archerBullseye 3.2s ease-in-out infinite;
}
@keyframes archerBullseye {
  0%, 47% { transform: scale(1); }
  48% { transform: scale(1.4); }
  56% { transform: scale(0.9); }
  62%, 100% { transform: scale(1); }
}

/* Version compacte (loaders inline dans modal, fiche, etc.) */
.archer-loader-sm {
  padding: 24px 16px;
  min-height: 120px;
}
.archer-loader-sm .archer-loader-svg {
  width: 200px;
  height: 75px;
}
.archer-loader-sm .archer-loader-text {
  font-size: 11px;
}

/* Accessibilité : pas d'animation si l'utilisateur en a fait la demande */
@media (prefers-reduced-motion: reduce) {
  .archer-arrow,
  .archer-arm-draw,
  .archer-string,
  .archer-bow,
  .archer-figure,
  .archer-target,
  .archer-target-ring-1,
  .archer-target-ring-2,
  .archer-target-ring-3,
  .archer-target-ring-4,
  .archer-target-bullseye,
  .archer-loader-text {
    animation: none !important;
  }
  .archer-arrow {
    transform: translate(252px, 60px);
  }
}