/* ==========================================================================
   EngineeringOpsKit - Performance Keyframes & Micro-Animations
   60fps GPU Accelerated Animations with Cubic-Bezier Easing
   ========================================================================== */

/* 1. Radar Ping / Live Status Pulse */
@keyframes radar-ping {
  0% {
    transform: scale(0.95);
    opacity: 0.8;
  }
  50% {
    transform: scale(1.8);
    opacity: 0;
  }
  100% {
    transform: scale(0.95);
    opacity: 0;
  }
}

.animate-radar-ping {
  animation: radar-ping 2s cubic-bezier(0, 0, 0.2, 1) infinite;
}

/* 2. Pulse Glow for Live Webhooks */
@keyframes pulse-glow {
  0%, 100% {
    opacity: 1;
    box-shadow: 0 0 10px rgba(34, 197, 94, 0.6);
  }
  50% {
    opacity: 0.5;
    box-shadow: 0 0 20px rgba(34, 197, 94, 0.9);
  }
}

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

/* 3. Border Beam Effect for Highlighted Cards */
.border-beam-card {
  position: relative;
  overflow: hidden;
}

.border-beam-card::after {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: conic-gradient(
    transparent,
    rgba(34, 197, 94, 0.5) 20deg,
    transparent 40deg,
    transparent 180deg,
    rgba(56, 189, 248, 0.4) 200deg,
    transparent 220deg
  );
  animation: rotate-beam 8s linear infinite;
  pointer-events: none;
  z-index: 1;
}

.border-beam-inner {
  position: relative;
  background: #0f172a;
  border-radius: inherit;
  z-index: 2;
  height: 100%;
}

@keyframes rotate-beam {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* 4. Smooth Height Accordion Transitions (Zero Layout Shift) */
.accordion-wrapper {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

.accordion-wrapper.is-open {
  grid-template-rows: 1fr;
}

.accordion-inner {
  overflow: hidden;
}

.accordion-chevron {
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.accordion-trigger[aria-expanded="true"] .accordion-chevron {
  transform: rotate(180deg);
}

/* 5. Floating Badge Micro-Animation */
@keyframes float-badge {
  0%, 100% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(-6px);
  }
}

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

.animate-float-delayed {
  animation: float-badge 4.5s ease-in-out 1.5s infinite;
}

/* 6. Terminal Cursor Blink */
@keyframes cursor-blink {
  0%, 49% { opacity: 1; }
  50%, 100% { opacity: 0; }
}

.terminal-cursor {
  display: inline-block;
  width: 8px;
  height: 15px;
  background-color: var(--emerald-primary, #22c55e);
  margin-right: 4px;
  animation: cursor-blink 1s infinite;
  vertical-align: middle;
}

/* 7. Button Shimmer Sweep Effect */
.shimmer-btn {
  position: relative;
  overflow: hidden;
}

.shimmer-btn::before {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: linear-gradient(
    60deg,
    transparent 30%,
    rgba(255, 255, 255, 0.25) 50%,
    transparent 70%
  );
  transform: rotate(25deg) translateY(-100%);
  transition: transform 0.75s cubic-bezier(0.19, 1, 0.22, 1);
}

.shimmer-btn:hover::before {
  transform: rotate(25deg) translateY(100%);
}

/* 8. Fade In & Slide Up Utility Classes */
@keyframes fade-slide-up {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.animate-fade-slide-up {
  animation: fade-slide-up 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}