/* Additional CSS for enhanced Provider Loop logo and animations */

/* Logo styling */
.logo img {
  max-height: 60px;
  width: auto;
}

/* Heart animation for logo */
@keyframes colorPulse {
  0% {
    filter: hue-rotate(0deg);
  }
  50% {
    filter: hue-rotate(30deg);
  }
  100% {
    filter: hue-rotate(0deg);
  }
}

.logo img {
  animation: heartbeat 2s infinite, colorPulse 4s infinite;
}

/* Enhanced hero section with animated background */
.hero {
  position: relative;
  overflow: hidden;
}

.hero::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(45deg, rgba(255,0,0,0.05), rgba(0,102,204,0.05), rgba(255,0,0,0.05));
  background-size: 400% 400%;
  animation: wave 15s ease infinite;
  z-index: -1;
}

/* Animated heart icons throughout the site */
.fa-heart, .fa-heartbeat {
  color: #e74c3c;
  animation: heartbeat 1.5s infinite;
}

/* Animated ECG line for healthcare sections */
.ecg-line {
  height: 50px;
  width: 100%;
  background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 500 50" preserveAspectRatio="none"><path d="M0,25 L100,25 L110,10 L130,40 L140,25 L160,25 L170,0 L180,50 L190,25 L300,25 L310,15 L340,35 L360,25 L500,25" fill="none" stroke="rgba(231,76,60,0.8)" stroke-width="2"/></svg>');
  background-size: 100% 100%;
  background-repeat: no-repeat;
  margin: 20px 0;
  animation: slideInRight 2s forwards;
}

/* Animated statistics with counting effect */
.stat-number {
  position: relative;
  display: inline-block;
}

.stat-number::after {
  content: '';
  position: absolute;
  bottom: -5px;
  left: 0;
  width: 100%;
  height: 3px;
  background: linear-gradient(90deg, #0066cc, #e74c3c);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 1.5s ease;
}

.stat-number.animated::after {
  transform: scaleX(1);
}

/* Enhanced CTA section with animated background */
.cta {
  position: relative;
  overflow: hidden;
}

.cta::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(135deg, rgba(0,102,204,0.1), rgba(231,76,60,0.1));
  background-size: 400% 400%;
  animation: wave 10s ease infinite;
  z-index: -1;
}

/* Animated download button */
a[download] {
  position: relative;
  overflow: hidden;
}

a[download]::after {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
  animation: shine 3s infinite;
}

@keyframes shine {
  0% {
    left: -100%;
  }
  20% {
    left: 100%;
  }
  100% {
    left: 100%;
  }
}

/* Floating hearts background for certain sections */
.floating-hearts {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  z-index: -1;
}

.floating-heart {
  position: absolute;
  color: rgba(231,76,60,0.1);
  animation: float-up 15s linear infinite;
}

@keyframes float-up {
  0% {
    transform: translateY(100%) rotate(0deg);
    opacity: 0;
  }
  10% {
    opacity: 0.1;
  }
  90% {
    opacity: 0.1;
  }
  100% {
    transform: translateY(-100vh) rotate(360deg);
    opacity: 0;
  }
}