/**
 * Success Animation Styles
 * Dr. Yıldız Digital Ecosystem
 * 
 * Animated checkmark and success state transitions.
 * Requirements: 30.3
 */

/* ============================================
 * ANIMATED CHECKMARK COMPONENT
 * SVG stroke animation for success states
 * ============================================ */

.animated-checkmark {
  width: 80px;
  height: 80px;
  margin: 0 auto var(--space-4);
}

.animated-checkmark__circle {
  stroke: var(--color-success);
  stroke-width: 2;
  stroke-linecap: round;
  fill: none;
  stroke-dasharray: 166;
  stroke-dashoffset: 166;
  animation: animated-checkmark-circle 0.6s cubic-bezier(0.65, 0, 0.45, 1) forwards;
}

.animated-checkmark__check {
  stroke: var(--color-success);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
  fill: none;
  stroke-dasharray: 48;
  stroke-dashoffset: 48;
  animation: animated-checkmark-check 0.3s cubic-bezier(0.65, 0, 0.45, 1) 0.5s forwards;
}

/* Circle animation - draws the circle */
@keyframes animated-checkmark-circle {
  0% {
    stroke-dashoffset: 166;
  }
  100% {
    stroke-dashoffset: 0;
  }
}

/* Check animation - draws the checkmark */
@keyframes animated-checkmark-check {
  0% {
    stroke-dashoffset: 48;
  }
  100% {
    stroke-dashoffset: 0;
  }
}

/* ============================================
 * SUCCESS STATE TRANSITIONS
 * Smooth transitions for form success states
 * ============================================ */

/* Form fade out animation */
.contact-form__form.is-fading-out {
  animation: form-fade-out 0.3s ease-out forwards;
}

@keyframes form-fade-out {
  0% {
    opacity: 1;
    transform: translateY(0);
  }
  100% {
    opacity: 0;
    transform: translateY(-10px);
  }
}

/* Success state fade in animation */
.contact-form__success.is-animating-in {
  animation: success-fade-in 0.4s ease-out forwards;
}

@keyframes success-fade-in {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Success icon container with scale animation */
.contact-form__success-icon-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 80px;
  height: 80px;
  margin: 0 auto var(--space-4);
  animation: success-icon-scale 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) 0.2s both;
}

@keyframes success-icon-scale {
  0% {
    transform: scale(0);
    opacity: 0;
  }
  50% {
    transform: scale(1.1);
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}

/* Success title animation */
.contact-form__success-title.is-animating {
  animation: success-text-reveal 0.4s ease-out 0.6s both;
}

/* Success text animation */
.contact-form__success-text.is-animating {
  animation: success-text-reveal 0.4s ease-out 0.7s both;
}

/* Success button animation */
.contact-form__reset.is-animating {
  animation: success-text-reveal 0.4s ease-out 0.8s both;
}

@keyframes success-text-reveal {
  0% {
    opacity: 0;
    transform: translateY(10px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ============================================
 * CONFETTI CANVAS CONTAINER
 * Container for canvas-confetti effect
 * ============================================ */

.confetti-canvas {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 9999;
}

/* ============================================
 * REDUCED MOTION SUPPORT
 * Respect user preferences for reduced motion
 * ============================================ */

@media (prefers-reduced-motion: reduce) {
  .animated-checkmark__circle,
  .animated-checkmark__check {
    animation: none;
    stroke-dashoffset: 0;
  }
  
  .contact-form__form.is-fading-out,
  .contact-form__success.is-animating-in,
  .contact-form__success-icon-wrapper,
  .contact-form__success-title.is-animating,
  .contact-form__success-text.is-animating,
  .contact-form__reset.is-animating {
    animation: none;
    opacity: 1;
    transform: none;
  }
}