/**
 * SMJA HOSPITAL HMS
 * @author Shakir ullah - @sk-labs
 * @description Heartbeat preloader animation styles
 * @created November 9, 2025
 * @source Original animation by Hamad854 - https://github.com/Hamad854/CssTricks/tree/master/heartbeat%20anim
 * @credits Adapted from pure CSS heartbeat monitor animation
 */

/* Default Preloader Styles */
#preloader {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #fff;
  z-index: 9999999;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}

[data-bs-theme="dark"] #preloader {
  background-color: #1f2230;
}

#preloader #status {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

/* Heartbeat Preloader - Full Screen */
#preloader-heartbeat {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 9999999;
  background-color: #000;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}

#status-heartbeat {
  text-align: center;
}

.heartbeat-container {
  width: 150px;
  height: 73px;
  position: relative;
  margin: 20px auto;
}

.heartbeat-fade-in {
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: #000;
  top: 0;
  right: 0;
  animation: heartRateIn 2.5s linear infinite;
}

.heartbeat-fade-out {
  position: absolute;
  width: 120%;
  height: 100%;
  background-color: #000;
  top: 0;
  right: -120%;
  animation: heartRateOut 2.5s linear infinite;
}

.heartbeat-fade-out::before {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background: rgba(0, 0, 0, 1);
  background: linear-gradient(to right, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 1) 80%, rgba(0, 0, 0, 0) 100%);
}

.heartbeat-text {
  color: #fff;
  font-size: 18px;
  font-weight: 500;
  margin-top: 20px;
  font-family: sans-serif;
  letter-spacing: 1px;
}

/* Animations */
@keyframes heartRateIn {
  0% {
    width: 100%;
  }
  50% {
    width: 0;
  }
  100% {
    width: 0;
  }
}

@keyframes heartRateOut {
  0% {
    left: -120%;
  }
  30% {
    left: -120%;
  }
  100% {
    left: 0;
  }
}

/* Preview in Customizer */
.heartbeat-preview {
  width: 60px;
  height: 30px;
  position: relative;
  overflow: hidden;
  margin: 0 auto;
}

.heartbeat-preview svg {
  width: 60px;
  height: 30px;
}

/* Light Theme Support - Change stroke color to match theme */
[data-layout-mode="light"] #preloader-heartbeat #status-heartbeat svg polyline {
  stroke: #405189;
}

[data-layout-mode="dark"] #preloader-heartbeat #status-heartbeat svg polyline {
  stroke: #00a8e8;
}

/* Color variations for different topbar colors */
[data-topbar="dark"] #preloader-heartbeat #status-heartbeat svg polyline {
  stroke: #00a8e8;
}

[data-topbar="colored"] #preloader-heartbeat #status-heartbeat svg polyline {
  stroke: #3577f1;
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .heartbeat-container {
    transform: scale(0.8);
  }
  
  .heartbeat-text {
    font-size: 16px;
  }
}

@media (max-width: 480px) {
  .heartbeat-container {
    transform: scale(0.6);
  }
  
  .heartbeat-text {
    font-size: 14px;
  }
}