/* ==========================================================================
   ATUDER - Animations & Micro-Interactions
   ========================================================================== */

@keyframes pulse-ring {
  0% {
    transform: scale(0.95);
    box-shadow: 0 0 0 0 rgba(198, 31, 38, 0.7);
  }
  70% {
    transform: scale(1);
    box-shadow: 0 0 0 8px rgba(198, 31, 38, 0);
  }
  100% {
    transform: scale(0.95);
    box-shadow: 0 0 0 0 rgba(198, 31, 38, 0);
  }
}

@keyframes fadeInDrop {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes floatSlow {
  0%, 100% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(-8px);
  }
}

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

/* Cardiac Line Decorative Ribbon */
.ecg-line-decor {
  width: 100%;
  height: 4px;
  background: linear-gradient(90deg, transparent, var(--atuder-red), #ff4d56, var(--atuder-red), transparent);
  position: relative;
  overflow: hidden;
}

.ecg-line-decor::after {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 60%;
  height: 100%;
  background: linear-gradient(90deg, transparent, #ffffff, transparent);
  animation: shineRibbon 2.5s infinite linear;
}

@keyframes shineRibbon {
  0% { left: -60%; }
  100% { left: 140%; }
}

.floating-element {
  animation: floatSlow 4s ease-in-out infinite;
}

.glow-on-hover {
  transition: all 0.3s ease;
}

.glow-on-hover:hover {
  box-shadow: 0 0 25px rgba(198, 31, 38, 0.4);
}

/* Gradient text utility */
.text-gradient-red {
  background: linear-gradient(135deg, var(--atuder-red) 0%, #ff4d56 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}