/* styles.css */
:root {
  --clinical-blue: #0284c7;
  --clinical-blue-hover: #0369a1;
  --emergency-red: #dc2626;
  --emergency-red-glow: rgba(220, 38, 38, 0.15);
  --outline-variant: #c6c4da;
  --clinical-blue: #403BFF;
}

.hero-height {
  height: 42vh;
  min-height: 340px;
  max-height: 480px;
}

.pill-shadow {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.03);
}

/* Custom scrollbar for sticky filter container on mobile */
.no-scrollbar::-webkit-scrollbar {
  display: none;
}

.no-scrollbar {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

.material-symbols-outlined {
  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
  display: inline-block;
  vertical-align: middle;
}

/* Premium Legal Layout Utilities */
.legal-card {
  background: #ffffff;
  border: 1px solid var(--outline-variant);
  border-radius: 18px;
  padding: 42px;
  transition: all .35s ease;
}

.legal-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 20px 45px rgba(26, 33, 40, .08);
}

.legal-pill {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .75rem 1.5rem;
  border-radius: 999px;
  border: 1px solid var(--outline-variant);
  transition: .25s;
}

.legal-pill:hover {
  border-color: var(--clinical-blue);
  color: var(--clinical-blue);
}

.legal-divider {
  width: 64px;
  height: 4px;
  border-radius: 999px;
  background: var(--clinical-blue);
  margin: 1rem 0 2rem;
}

.glass-card {
  backdrop-filter: blur(14px);
  background: rgba(255, 255, 255, .7);
  border: 1px solid rgba(255, 255, 255, .35);
}

/* Premium Gradient Contact Card */
.contact-premium-card {
  background: linear-gradient(135deg, #1A2128, #252F39);
  border-radius: 24px;
}

/* ECG Stripe Pattern */
.ecg-stripe {
  height: 8px;
  background-color: #FF1313;
  mask-image: url("data:image/svg+xml,%3Csvg width='100' height='20' viewBox='0 0 100 20' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 10 L40 10 L45 0 L55 20 L60 10 L100 10' fill='none' stroke='black' stroke-width='2'/%3E%3C/svg%3E");
  mask-size: 80px 20px;
  mask-repeat: repeat-x;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg width='100' height='20' viewBox='0 0 100 20' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 10 L40 10 L45 0 L55 20 L60 10 L100 10' fill='none' stroke='black' stroke-width='2'/%3E%3C/svg%3E");
  -webkit-mask-size: 80px 20px;
}

/* ── ECG Divider ──────────────────────────────────── */
/* ── ECG Divider ──────────────────────────────────── */
.ecg-divider {
  position: relative;
  width: 100%;
  height: 48px;
  overflow: hidden;
}

.ecg-divider svg {
  position: absolute;
  top: 0;
  left: 0;
  width: 200%;
  /* Spans 2 full viewport tiles for seamless repetition */
  height: 50%;
}

.ecg-path-group {
  /* Slowed down from 2.4s to 5s for a smoother, high-end look */
  animation: ecg-scroll 5s linear infinite;
  /* Gives the red line an authentic monitor glow */
  filter: drop-shadow(0px 0px 1.5px var(--ecg-line));
}

.ecg-scan-pulse {
  position: absolute;
  top: 0;
  width: 120px;
  /* Widened slightly to match the slower speed beautifully */
  height: 50%;
  background: linear-gradient(90deg,
      transparent 0%,
      var(--ecg-pulse, rgba(239, 68, 68, 0.15)) 50%,
      transparent 100__);
  animation: ecg-scan 5s linear infinite;
  pointer-events: none;
}

@keyframes ecg-scroll {
  from {
    transform: translateX(0);
  }

  to {
    transform: translateX(-50%);
  }
}

@keyframes ecg-scan {
  from {
    left: -120px;
  }

  to {
    left: 100%;
  }
}

@media (prefers-reduced-motion: reduce) {

  .ecg-path-group,
  .ecg-scan-pulse {
    animation: none;
  }
}

/* ── Variants (Red Themes) ────────────────────────── */
.ecg-divider--dark {
  /* background: #15191E; Deeper background to make the red line pop */
  --ecg-line: #FF1313;
  /* Vibrant glowing red */
  --ecg-pulse: rgba(255, 77, 77, 0.12);
}

.ecg-divider--light {
  /* background: #FAFAFA; */
  --ecg-line: #DC2626;
  /* Deep clinical red for contrast on light UI */
  --ecg-pulse: rgba(220, 38, 38, 0.06);
}

/* ECG Divider Ends here */

.charcoal-gradient {
  background: linear-gradient(180deg, #1A2128 0%, #11161B 100%);
}

.btn-primary {
  @apply bg-clinical-blue text-surface-white font-label-caps uppercase px-6 py-3 transition-all duration-200 active:scale-95 rounded-lg border border-clinical-blue;
}

.btn-action {
  @apply bg-emergency-red text-surface-white font-label-caps uppercase px-6 py-3 transition-all duration-200 active:scale-95 rounded-lg border border-emergency-red;
}

.card-program {
  @apply bg-surface-white border-l-4 border-clinical-blue p-8 shadow-sm transition-transform duration-300 hover:-translate-y-1;
}

/* Subtle hover effect for links */
.footer a:hover {
  color: #FFFFFF;
}

/* Moving line alongside the WHO WE ARE in About Page */
@keyframes line-down {
    0% {
        top: -6rem;
    }

    100% {
        top: 100%;
    }
}

@keyframes line-up {
    0% {
        top: 100%;
    }

    100% {
        top: -6rem;
    }
}

.animate-line-down {
    animation: line-down 5s linear infinite;
}

.animate-line-up {
    animation: line-up 5s linear infinite;
}
/* End Here */