/* ==========================================================================
   animations.css - High Performance Transitions & Micro-Animations
   Product: 𝕏 (Twitter) Auto Reply & Post Creator No API
   ========================================================================== */

/* Keyframe Animations */

@keyframes gemini-sparkle-pulse {
  0%, 100% {
    transform: scale(1) rotate(0deg);
    opacity: 0.9;
  }
  50% {
    transform: scale(1.18) rotate(8deg);
    opacity: 1;
    filter: drop-shadow(0 0 6px rgba(190, 142, 242, 0.8));
  }
}

@keyframes button-glow-pulse {
  0%, 100% {
    box-shadow: 0 4px 18px rgba(190, 142, 242, 0.3);
  }
  50% {
    box-shadow: 0 4px 28px rgba(190, 142, 242, 0.65), 0 0 16px rgba(29, 155, 240, 0.4);
  }
}

@keyframes cursor-blink {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
}

@keyframes status-radar-ping {
  0% {
    transform: scale(0.95);
    opacity: 0.8;
  }
  70% {
    transform: scale(2.2);
    opacity: 0;
  }
  100% {
    transform: scale(2.2);
    opacity: 0;
  }
}

@keyframes gentle-float {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-5px);
  }
}

@keyframes border-shimmer {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

/* Reusable Animation Classes */
.animate-sparkle {
  animation: gemini-sparkle-pulse 2.4s ease-in-out infinite;
}

.animate-glow-pulse {
  animation: button-glow-pulse 3s ease-in-out infinite;
}

.animate-float {
  animation: gentle-float 4s ease-in-out infinite;
}

.radar-dot {
  position: relative;
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: var(--color-success);
}

.radar-dot::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background-color: var(--color-success);
  animation: status-radar-ping 2s cubic-bezier(0, 0, 0.2, 1) infinite;
}

/* Typing Simulator Caret */
.typing-caret {
  display: inline-block;
  width: 2px;
  height: 1.15em;
  background-color: var(--accent-purple);
  margin-left: 2px;
  vertical-align: text-bottom;
  animation: cursor-blink 0.8s infinite;
}

/* Scroll Reveal States */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.65s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.65s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, transform;
}

.reveal.is-revealed {
  opacity: 1;
  transform: translateY(0);
}

.reveal-delay-1 {
  transition-delay: 0.1s;
}

.reveal-delay-2 {
  transition-delay: 0.2s;
}

.reveal-delay-3 {
  transition-delay: 0.3s;
}

.reveal-delay-4 {
  transition-delay: 0.4s;
}

/* Accessibility: Reduced Motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }

  .reveal {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }

  .radar-dot::after {
    display: none;
  }

  .typing-caret {
    animation: none;
    opacity: 1;
  }
}