/* ==========================================================================
   SPINNERS.CSS —
   Charge après base.css (qui définit les @keyframes btn-*).
   Usage : <span class="ui-spinner-wrap spinner--flower"></span>

   Toutes les animations → btn-* (base.css)
   Toutes les variables  → fallback systématique
   will-change: transform sur chaque spinner animé

   VARIANTS :
   sweep · arc · dash · dual · flip · flower · heartbeat
   hourglass · orbit · pulse · ripple · dots · bars
========================================================================== */


/* ─────────────────────────────────────────────────────
   BASE TOKENS
   Définis sur .ui-spinner (classe racine posée par base.css).
   ui-spinner-wrap hérite via cascade.
───────────────────────────────────────────────────── */

.ui-spinner {
  --spinner-size:   1.2em;
  --spinner-color:  currentColor;
  --spinner-stroke: 2.5px;
  --spinner-speed:  0.8s;
  line-height:      0;
  vertical-align:   middle;
  display:          block;
}


/* ─────────────────────────────────────────────────────
   SWEEP — anneau conic classique
───────────────────────────────────────────────────── */

.spinner--sweep {
  width:         var(--spinner-size, 1.2em);
  height:        var(--spinner-size, 1.2em);
  border-radius: 50%;
  background: conic-gradient(
    from 0turn,
    var(--spinner-color, currentColor) 50%,
    rgba(255, 255, 255, .25) 0 100%
  );
  -webkit-mask: radial-gradient(farthest-side, #0000 calc(100% - var(--spinner-stroke, 2.5px)), #000 0);
          mask: radial-gradient(farthest-side, #0000 calc(100% - var(--spinner-stroke, 2.5px)), #000 0);
  animation:     btn-spin var(--spinner-speed, .8s) linear infinite;
  will-change:   transform;
}


/* ─────────────────────────────────────────────────────
   ARC — segment accent sur base subtile
───────────────────────────────────────────────────── */

.spinner--arc {
  position:      relative;
  width:         var(--spinner-size, 1.2em);
  height:        var(--spinner-size, 1.2em);
  border-radius: 50%;
  background: conic-gradient(
    from 0turn,
    color-mix(in srgb, var(--card, #1e1e2e) 85%, transparent) 0turn,
    color-mix(in srgb, var(--card, #1e1e2e) 85%, transparent) 1turn
  );
  -webkit-mask: radial-gradient(farthest-side, #0000 calc(100% - var(--spinner-stroke, 2.5px)), #000 0);
          mask: radial-gradient(farthest-side, #0000 calc(100% - var(--spinner-stroke, 2.5px)), #000 0);
  overflow:      hidden;
}

.spinner--arc::after {
  content:       "";
  position:      absolute;
  inset:         0;
  border-radius: 50%;
  border:        var(--spinner-stroke, 2.5px) solid transparent;
  border-top-color: var(--spinner-color, currentColor);
  animation:     btn-spin var(--spinner-speed, .8s) linear infinite;
  will-change:   transform;
}


/* ─────────────────────────────────────────────────────
   DASH — anneau segmenté
───────────────────────────────────────────────────── */

.spinner--dash {
  width:         var(--spinner-size, 1.2em);
  height:        var(--spinner-size, 1.2em);
  border-radius: 50%;
  background: repeating-conic-gradient(
    from 0turn,
    var(--spinner-color, currentColor) 0 25%,
    rgba(255, 255, 255, 0) 14% 50%
  );
  -webkit-mask: radial-gradient(farthest-side, #0000 calc(100% - var(--spinner-stroke, 2.5px)), #000 0);
          mask: radial-gradient(farthest-side, #0000 calc(100% - var(--spinner-stroke, 2.5px)), #000 0);
  animation:     btn-spin var(--spinner-speed, .8s) linear infinite;
  will-change:   transform;
}


/* ─────────────────────────────────────────────────────
   DUAL RING — double anneau
───────────────────────────────────────────────────── */

.spinner--dual {
  width:         var(--spinner-size, 1.2em);
  height:        var(--spinner-size, 1.2em);
  border-radius: 50%;
  box-sizing:    border-box;
  border:        var(--spinner-stroke, 2.5px) solid rgba(255, 255, 255, .28);
  border-top-color:   var(--spinner-color, currentColor);
  border-right-color: var(--spinner-color, currentColor);
  animation:     btn-spin var(--spinner-speed, .8s) linear infinite;
  will-change:   transform;
}


/* ─────────────────────────────────────────────────────
   FLIP — carte 3D
───────────────────────────────────────────────────── */

.spinner--flip {
  width:         var(--spinner-size, 1.2em);
  height:        var(--spinner-size, 1.2em);
  background:    var(--spinner-color, currentColor);
  border-radius: .25em;
  animation:     btn-flip3d var(--spinner-speed, .8s) cubic-bezier(.4, .2, .2, 1) infinite;
  will-change:   transform;
}


/* ─────────────────────────────────────────────────────
   FLOWER — anneau en pétales cranté
───────────────────────────────────────────────────── */

.spinner--flower {
  width:         var(--spinner-size, 1.2em);
  height:        var(--spinner-size, 1.2em);
  border-radius: 50%;
  background:    repeating-conic-gradient(var(--spinner-color, currentColor) 0 8%, rgba(255, 255, 255, .18) 8% 16%);
  -webkit-mask: radial-gradient(farthest-side, #0000 calc(100% - var(--spinner-stroke, 2.5px)), #000 0);
          mask: radial-gradient(farthest-side, #0000 calc(100% - var(--spinner-stroke, 2.5px)), #000 0);
  animation:     btn-spin calc(var(--spinner-speed, .8s) + .15s) steps(12) infinite;
  will-change:   transform;
}


/* ─────────────────────────────────────────────────────
   HEARTBEAT — anneau pulsant
───────────────────────────────────────────────────── */

.spinner--heartbeat {
  width:         var(--spinner-size, 1.2em);
  height:        var(--spinner-size, 1.2em);
  border-radius: 50%;
  box-shadow:    inset 0 0 0 var(--spinner-stroke, 2.5px) var(--spinner-color, currentColor);
  animation:     btn-beat var(--spinner-speed, .8s) ease-in-out infinite;
  will-change:   transform, box-shadow;
}


/* ─────────────────────────────────────────────────────
   HOURGLASS — sablier
───────────────────────────────────────────────────── */

.spinner--hourglass {
  width:         var(--spinner-size, 1.2em);
  height:        var(--spinner-size, 1.2em);
  border-radius: 50%;
  background: conic-gradient(
    from 45deg,
    var(--spinner-color, currentColor) 0 90deg,
    transparent 90deg 180deg,
    var(--spinner-color, currentColor) 180deg 270deg,
    transparent 270deg 360deg
  );
  -webkit-mask: radial-gradient(farthest-side, #0000 calc(100% - var(--spinner-stroke, 2.5px)), #000 0);
          mask: radial-gradient(farthest-side, #0000 calc(100% - var(--spinner-stroke, 2.5px)), #000 0);
  animation:     btn-spin calc(var(--spinner-speed, .8s) * .9) linear infinite;
  will-change:   transform;
}


/* ─────────────────────────────────────────────────────
   ORBIT — point en orbite
───────────────────────────────────────────────────── */

.spinner--orbit {
  width:    var(--spinner-size, 1.2em);
  height:   var(--spinner-size, 1.2em);
  position: relative;
}

.spinner--orbit::after {
  content:          "";
  position:         absolute;
  left:             50%;
  top:              50%;
  width:            .38em;
  height:           .38em;
  border-radius:    50%;
  background:       var(--spinner-color, currentColor);
  transform:        translate(-50%, -50%) rotate(0turn) translate(calc(var(--spinner-size, 1.2em) / 2.1));
  transform-origin: 50% 50%;
  animation:        btn-orbit var(--spinner-speed, .8s) linear infinite;
  will-change:      transform;
}


/* ─────────────────────────────────────────────────────
   PULSE — point respirant
───────────────────────────────────────────────────── */

.spinner--pulse {
  width:         var(--spinner-size, 1.2em);
  height:        var(--spinner-size, 1.2em);
  border-radius: 50%;
  background:    var(--spinner-color, currentColor);
  animation:     btn-pulse calc(var(--spinner-speed, .8s) * .9) ease-in-out infinite;
  will-change:   transform, opacity;
}


/* ─────────────────────────────────────────────────────
   RIPPLE — anneaux concentriques
───────────────────────────────────────────────────── */

.spinner--ripple {
  position: relative;
  width:    var(--spinner-size, 1.2em);
  height:   var(--spinner-size, 1.2em);
}

.spinner--ripple::before,
.spinner--ripple::after {
  content:       "";
  position:      absolute;
  inset:         0;
  border-radius: 50%;
  border:        var(--spinner-stroke, 2.5px) solid var(--spinner-color, currentColor);
  transform:     scale(.2);
  opacity:       1;
  animation:     btn-ripple var(--spinner-speed, .8s) ease-out infinite;
  will-change:   transform, opacity;
}

.spinner--ripple::after {
  animation-delay: calc(var(--spinner-speed, .8s) / 2);
}


/* ─────────────────────────────────────────────────────
   DOTS — 3 points rebondissants (nouveau)
───────────────────────────────────────────────────── */

.spinner--dots {
  display:     inline-flex;
  align-items: center;
  gap:         .3em;
  width:       auto;
  height:      var(--spinner-size, 1.2em);
}

.spinner--dots::before,
.spinner--dots::after,
.spinner--dots span {
  content:       "";
  display:       block;
  width:         calc(var(--spinner-size, 1.2em) * .28);
  height:        calc(var(--spinner-size, 1.2em) * .28);
  border-radius: 50%;
  background:    var(--spinner-color, currentColor);
  animation:     btn-pulse calc(var(--spinner-speed, .8s) * .9) ease-in-out infinite;
  will-change:   transform, opacity;
}

.spinner--dots::before { animation-delay: 0s; }
.spinner--dots span    { animation-delay: calc(var(--spinner-speed, .8s) * .15); }
.spinner--dots::after  { animation-delay: calc(var(--spinner-speed, .8s) * .30); }


/* ─────────────────────────────────────────────────────
   BARS — barres égaliseur (nouveau)
───────────────────────────────────────────────────── */

.spinner--bars {
  display:     inline-flex;
  align-items: flex-end;
  gap:         .18em;
  width:       auto;
  height:      var(--spinner-size, 1.2em);
}

.spinner--bars::before,
.spinner--bars::after,
.spinner--bars span {
  content:    "";
  display:    block;
  width:      calc(var(--spinner-size, 1.2em) * .22);
  background: var(--spinner-color, currentColor);
  border-radius: .15em .15em 0 0;
  animation:  btn-bars var(--spinner-speed, .8s) ease-in-out infinite;
  will-change: transform;
}

.spinner--bars::before { height: 60%;  animation-delay: 0s; }
.spinner--bars span    { height: 100%; animation-delay: calc(var(--spinner-speed, .8s) * .15); }
.spinner--bars::after  { height: 40%;  animation-delay: calc(var(--spinner-speed, .8s) * .30); }

@keyframes btn-bars {
  0%, 100% { transform: scaleY(.5);  opacity: .6; }
  50%      { transform: scaleY(1);   opacity: 1;  }
}


/* ─────────────────────────────────────────────────────
   REDUCED MOTION
   Désactive toutes les animations si l'utilisateur
   a activé "prefers-reduced-motion" dans son OS.
───────────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  [class*="spinner--"] {
    animation: none !important;
    will-change: auto !important;
  }

  [class*="spinner--"]::before,
  [class*="spinner--"]::after {
    animation: none !important;
  }
}