@reference "../../../styles/globals.css";

.stepByStepTourRecoveryPulse {
  animation: step-by-step-tour-help-pulse 2.4s ease-out 1;
}

@media (prefers-reduced-motion: reduce) {
  .stepByStepTourRecoveryPulse {
    animation: none;
  }
}

@keyframes step-by-step-tour-help-pulse {
  0% {
    background-color: var(--color-components-card-bg);
    box-shadow: 0 0 0 0 var(--color-state-accent-hover-alt);
    color: var(--color-text-tertiary);
  }

  18% {
    background-color: var(--color-state-accent-hover);
    box-shadow: 0 0 0 6px var(--color-state-accent-active-alt);
    color: var(--color-saas-dify-blue-inverted);
  }

  56% {
    background-color: var(--color-state-accent-hover);
    box-shadow: 0 0 0 12px transparent;
    color: var(--color-saas-dify-blue-inverted);
  }

  100% {
    background-color: var(--color-components-card-bg);
    box-shadow: 0 0 0 0 transparent;
    color: var(--color-text-tertiary);
  }
}