/* ===== SVG Animation Keyframes ===== */

/* Stroke draw animation via dash-offset */
@keyframes drawLine {
  from { stroke-dashoffset: var(--path-length); }
  to   { stroke-dashoffset: 0; }
}

/* Fade in */
@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* Fade in + slight slide up */
@keyframes fadeSlideUp {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Zone fill pulse */
@keyframes zonePulse {
  0%   { opacity: 0; }
  60%  { opacity: 0.7; }
  100% { opacity: 1; }
}

/* Arrow appear */
@keyframes arrowAppear {
  from { opacity: 0; transform: scale(0.7); }
  to   { opacity: 1; transform: scale(1); }
}

/* Label pop */
@keyframes labelPop {
  0%   { opacity: 0; transform: scale(0.5); }
  70%  { opacity: 1; transform: scale(1.1); }
  100% { opacity: 1; transform: scale(1); }
}

/* Replay spin on the button icon */
@keyframes replaySpin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* ===== Animation Utility Classes ===== */

.anim-draw {
  animation: drawLine var(--draw-duration, 800ms) var(--draw-easing, ease-in-out) var(--draw-delay, 0ms) forwards;
  stroke-dasharray: var(--path-length);
  stroke-dashoffset: var(--path-length);
}

.anim-fade {
  animation: fadeIn var(--fade-duration, 400ms) ease var(--fade-delay, 0ms) forwards;
  opacity: 0;
}

.anim-slide-up {
  animation: fadeSlideUp var(--fade-duration, 400ms) ease var(--fade-delay, 0ms) forwards;
  opacity: 0;
}

.anim-zone {
  animation: zonePulse var(--zone-duration, 500ms) ease var(--zone-delay, 0ms) forwards;
  opacity: 0;
}

.anim-arrow {
  animation: arrowAppear var(--arrow-duration, 300ms) ease var(--arrow-delay, 0ms) forwards;
  opacity: 0;
  transform-origin: center;
}

.anim-label {
  animation: labelPop var(--label-duration, 350ms) ease var(--label-delay, 0ms) forwards;
  opacity: 0;
}

/* Replay button spinning */
.replay-btn.spinning svg {
  animation: replaySpin 500ms ease;
}

/* ===== Reduced Motion ===== */
@media (prefers-reduced-motion: reduce) {
  .anim-draw,
  .anim-fade,
  .anim-slide-up,
  .anim-zone,
  .anim-arrow,
  .anim-label {
    animation: none !important;
    opacity: 1 !important;
    stroke-dashoffset: 0 !important;
    transform: none !important;
  }
}

/* ===== Card Enter Animation ===== */
.pattern-card {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.4s ease, transform 0.4s ease, border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.pattern-card.visible {
  opacity: 1;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  .pattern-card {
    opacity: 1;
    transform: none;
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
  }
}