/* ============================================
   ClinStudy DS v2 — Animations
   ============================================
   Toutes les animations DS ont des noms préfixés .ds-
   pour cohabiter avec les anims legacy de style.css.
*/

@keyframes ds-skeleton-shimmer {
  0%   { background-position: -200% 0; }
  100% { background-position:  200% 0; }
}

@keyframes ds-pulse-ring {
  0%   { transform: scale(1);   opacity: 0.6; }
  80%  { transform: scale(2.4); opacity: 0;   }
  100% { transform: scale(2.4); opacity: 0;   }
}

@keyframes ds-fade-up {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0);    }
}

@keyframes ds-breathe {
  0%, 100% { transform: scale(1);    opacity: 0.9; }
  50%      { transform: scale(1.08); opacity: 1;   }
}

@keyframes ds-slide-in-right {
  from { opacity: 0; transform: translateX(14px); }
  to   { opacity: 1; transform: translateX(0);    }
}

@keyframes ds-ripple {
  0%   { transform: scale(1);    opacity: 0.9; }
  100% { transform: scale(1.55); opacity: 0;   }
}

@keyframes ds-shimmer-text {
  0%, 100% { background-position: 0% 50%; }
  50%      { background-position: 100% 50%; }
}

/* Utility classes */
.ds-skeleton {
  background: linear-gradient(
    90deg,
    var(--ds-bg-subtle) 0%,
    var(--ds-border)    50%,
    var(--ds-bg-subtle) 100%
  );
  background-size: 200% 100%;
  animation: ds-skeleton-shimmer 1.4s ease-in-out infinite;
  border-radius: var(--r-sm);
}

.ds-fade-up {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 500ms var(--ease), transform 500ms var(--ease);
}
.ds-fade-up.in-view {
  opacity: 1;
  transform: translateY(0);
}

.ds-anim-fade-up   { animation: ds-fade-up 600ms var(--ease) both; }
.ds-anim-slide-in  { animation: ds-slide-in-right 500ms var(--ease) both; }
.ds-anim-breathe   { animation: ds-breathe 3.6s ease-in-out infinite; }

.ds-live-dot {
  position: relative;
  display: inline-block;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--success-500);
  vertical-align: middle;
}
.ds-live-dot::after {
  content: ''; position: absolute; inset: -1px;
  border-radius: 50%;
  background: var(--success-500);
  animation: ds-pulse-ring 1.8s var(--ease) infinite;
  z-index: -1;
}