/* ==========================================================================
   Solern — Premium Healthcare Animations
   ========================================================================== */

/* Custom Properties
   ========================================================================== */
:root {
  --color-primary:   #2C7873;
  --color-secondary: #6FB98F;
  --color-accent:    #004445;
  --color-warm:      #F9F5F0;
  --color-text:      #2D3748;

  --anim-duration-fast:   0.3s;
  --anim-duration-base:   0.6s;
  --anim-duration-slow:   0.9s;
  --anim-easing:          cubic-bezier(0.4, 0, 0.2, 1); /* smooth ease-in-out */
}


/* ==========================================================================
   Keyframe Definitions
   ========================================================================== */

/* 1. fadeInUp — fade in + rise from below */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(40px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* 2. slideInLeft — enter from the left */
@keyframes slideInLeft {
  from {
    opacity: 0;
    transform: translateX(-60px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* 3. slideInRight — enter from the right */
@keyframes slideInRight {
  from {
    opacity: 0;
    transform: translateX(60px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* 4. scaleIn — gentle scale-up (used on hover via class) */
@keyframes scaleIn {
  from {
    opacity: 0;
    transform: scale(0.92);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

/* 5. pulseGlow — soft repeating glow for CTA buttons */
@keyframes pulseGlow {
  0%, 100% {
    box-shadow:
      0 0 0   0   color-mix(in srgb, var(--color-primary) 40%, transparent),
      0 4px 14px  0   color-mix(in srgb, var(--color-primary) 25%, transparent);
  }
  50% {
    box-shadow:
      0 0 0  10px  color-mix(in srgb, var(--color-primary) 0%,  transparent),
      0 4px 28px   0   color-mix(in srgb, var(--color-primary) 45%, transparent);
  }
}

/* Fallback for browsers without color-mix support */
@supports not (color: color-mix(in srgb, red 50%, blue)) {
  @keyframes pulseGlow {
    0%, 100% {
      box-shadow: 0 0 0 0 rgba(44, 120, 115, 0.4), 0 4px 14px 0 rgba(44, 120, 115, 0.25);
    }
    50% {
      box-shadow: 0 0 0 10px rgba(44, 120, 115, 0), 0 4px 28px 0 rgba(44, 120, 115, 0.45);
    }
  }
}

/* 6. counterUp — number tick-up entrance */
@keyframes counterUp {
  from {
    opacity: 0;
    transform: translateY(20px) scale(0.95);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}


/* ==========================================================================
   Utility / Trigger Classes
   ========================================================================== */

/* Scroll-triggered classes — add via IntersectionObserver JS.
   Elements start hidden; the .is-visible class fires the animation. */

.animate-fade-in-up {
  opacity: 0;
}
.animate-fade-in-up.is-visible {
  animation: fadeInUp var(--anim-duration-base) var(--anim-easing) both;
}

.animate-slide-in-left {
  opacity: 0;
}
.animate-slide-in-left.is-visible {
  animation: slideInLeft var(--anim-duration-base) var(--anim-easing) both;
}

.animate-slide-in-right {
  opacity: 0;
}
.animate-slide-in-right.is-visible {
  animation: slideInRight var(--anim-duration-base) var(--anim-easing) both;
}

/* Card scale — triggered on scroll entrance */
.animate-scale-in {
  opacity: 0;
}
.animate-scale-in.is-visible {
  animation: scaleIn var(--anim-duration-base) var(--anim-easing) both;
}

/* Card hover lift — pure CSS, no JS */
.card-hover {
  transition:
    transform var(--anim-duration-fast) var(--anim-easing),
    box-shadow var(--anim-duration-fast) var(--anim-easing);
}
.card-hover:hover,
.card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);
  box-shadow: 0 16px 40px rgba(44, 120, 115, 0.18);
}

/* CTA pulse glow — add class to any <button> or <a> */
.btn-pulse-glow {
  animation: pulseGlow 2.4s var(--anim-easing) infinite;
}

/* Statistic / counter entrance */
.animate-counter-up {
  opacity: 0;
}
.animate-counter-up.is-visible {
  animation: counterUp var(--anim-duration-slow) var(--anim-easing) both;
}


/* ==========================================================================
   Staggered Children (optional helper)
   Wrap siblings in .stagger-children to delay each by 100 ms.
   ========================================================================== */
.stagger-children > *:nth-child(1) { animation-delay: 0ms;   }
.stagger-children > *:nth-child(2) { animation-delay: 100ms; }
.stagger-children > *:nth-child(3) { animation-delay: 200ms; }
.stagger-children > *:nth-child(4) { animation-delay: 300ms; }
.stagger-children > *:nth-child(5) { animation-delay: 400ms; }
.stagger-children > *:nth-child(6) { animation-delay: 500ms; }
.stagger-children > *:nth-child(7) { animation-delay: 600ms; }


/* ==========================================================================
   Reduced Motion — respect the user's OS preference
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration:        0.01ms !important;
    animation-iteration-count: 1      !important;
    transition-duration:       0.01ms !important;
    scroll-behavior:           auto   !important;
  }

  /* Reveal hidden elements immediately so content stays accessible */
  .animate-fade-in-up,
  .animate-slide-in-left,
  .animate-slide-in-right,
  .animate-scale-in,
  .animate-counter-up {
    opacity: 1;
  }

  .btn-pulse-glow {
    animation: none;
    box-shadow: 0 4px 14px 0 rgba(44, 120, 115, 0.25);
  }
}