/* ==========================================================================
   GSMONE Design System - Animations
   ==========================================================================
   Toutes les animations et transitions custom du projet.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. SUCCESS ANIMATION (checkmark dans un cercle)
   -------------------------------------------------------------------------- */
.success-animation {
  width: 180px;
  height: 180px;
  position: relative;
  margin: 30px auto 0 auto;
}

.success-animation .circle {
  width: 100%;
  height: 100%;
  border: 8px solid var(--bs-primary);
  border-radius: 50%;
  position: absolute;
  top: 0;
  left: 0;
  animation: gsmone-scaleCircle 1s ease-in-out;
}

.success-animation .checkmark {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0);
  width: 100px;
  height: 100px;
  animation: gsmone-drawCheckmark 0.5s ease-in-out 0.5s forwards;
}

.success-animation .checkmark path {
  stroke: var(--bs-primary);
  stroke-width: 8;
  stroke-dasharray: 100;
  stroke-dashoffset: 100;
  animation: gsmone-drawPath 0.5s ease-in-out 0.5s forwards;
}


/* --------------------------------------------------------------------------
   2. ERROR ANIMATION (crossmark dans un cercle)
   -------------------------------------------------------------------------- */
.error-animation {
  width: 180px;
  height: 180px;
  position: relative;
  margin: 30px auto 0 auto;
}

.error-animation .circle {
  width: 100%;
  height: 100%;
  border: 8px solid var(--bs-danger);
  border-radius: 50%;
  position: absolute;
  top: 0;
  left: 0;
  animation: gsmone-scaleCircle 1s ease-in-out;
}

.error-animation .crossmark {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0);
  width: 100px;
  height: 100px;
  animation: gsmone-drawCrossmark 0.5s ease-in-out 0.5s forwards;
}

.error-animation .crossmark path {
  stroke: var(--bs-danger);
  stroke-width: 8;
  stroke-dasharray: 100;
  stroke-dashoffset: 100;
  animation: gsmone-drawPath 0.5s ease-in-out 0.5s forwards;
}


/* --------------------------------------------------------------------------
   3. KEYFRAMES
   -------------------------------------------------------------------------- */

/* Scale circle (shared success/error) */
@keyframes gsmone-scaleCircle {
  0%   { transform: scale(0); opacity: 0; }
  50%  { transform: scale(1.2); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}

/* Draw checkmark */
@keyframes gsmone-drawCheckmark {
  0%   { transform: translate(-50%, -50%) scale(0); }
  100% { transform: translate(-50%, -50%) scale(1); }
}

/* Draw crossmark */
@keyframes gsmone-drawCrossmark {
  0%   { transform: translate(-50%, -50%) scale(0); }
  100% { transform: translate(-50%, -50%) scale(1); }
}

/* Draw SVG path stroke */
@keyframes gsmone-drawPath {
  0%   { stroke-dashoffset: 100; }
  100% { stroke-dashoffset: 0; }
}