/**
 * Shalom Hospital Theme — Animations & Transitions
 * FILE: animations.css
 */

/* ============================================================
   KEYFRAME DEFINITIONS
============================================================ */

@keyframes sh-fadeUp {
  from {
    opacity: 0;
    transform: translateY(32px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes sh-fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes sh-fadeOut {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}

@keyframes sh-slideUp {
  from {
    opacity: 0;
    transform: translateY(16px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes sh-slideDown {
  from {
    opacity: 0;
    transform: translateY(-16px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes sh-slideRight {
  from {
    opacity: 0;
    transform: translateX(-28px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes sh-slideLeft {
  from {
    opacity: 0;
    transform: translateX(28px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes sh-bounceIn {
  0% {
    opacity: 0;
    transform: scale(0.75);
  }
  60% {
    opacity: 1;
    transform: scale(1.05);
  }
  80% {
    transform: scale(0.97);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes sh-pulse {
  0%, 100% {
    opacity: 1;
    transform: scale(1);
  }
  50% {
    opacity: 0.7;
    transform: scale(0.96);
  }
}

@keyframes sh-pulseBg {
  0%, 100% {
    box-shadow: 0 0 0 0 rgba(15, 118, 110, 0.4);
  }
  50% {
    box-shadow: 0 0 0 12px rgba(15, 118, 110, 0);
  }
}

@keyframes sh-shimmer {
  0% {
    background-position: -200% 0;
  }
  100% {
    background-position: 200% 0;
  }
}

@keyframes sh-spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

@keyframes sh-float {
  0%, 100% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(-10px);
  }
}

@keyframes sh-floatSlow {
  0%, 100% {
    transform: translateY(0px) rotate(0deg);
  }
  33% {
    transform: translateY(-8px) rotate(1.5deg);
  }
  66% {
    transform: translateY(-4px) rotate(-1deg);
  }
}

@keyframes sh-bounce {
  0%, 100% {
    transform: translateY(0);
    animation-timing-function: cubic-bezier(0.8, 0, 1, 1);
  }
  50% {
    transform: translateY(-20px);
    animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
  }
}

@keyframes sh-wiggle {
  0%, 100% { transform: rotate(-4deg); }
  50%       { transform: rotate(4deg); }
}

@keyframes sh-morphBlob {
  0%, 100% {
    border-radius: 60% 40% 55% 45% / 50% 55% 45% 50%;
  }
  33% {
    border-radius: 45% 55% 40% 60% / 55% 45% 55% 45%;
  }
  66% {
    border-radius: 55% 45% 60% 40% / 45% 60% 40% 55%;
  }
}

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

@keyframes sh-heartbeat {
  0% { transform: scale(1); }
  14% { transform: scale(1.1); }
  28% { transform: scale(1); }
  42% { transform: scale(1.1); }
  70% { transform: scale(1); }
}

@keyframes sh-progressFill {
  from { width: 0%; }
  to   { width: var(--progress, 100%); }
}

/* ============================================================
   INTERSECTION OBSERVER TARGET CLASSES
   JS adds .animated class when element enters viewport
============================================================ */

[data-animate] {
  transition: opacity 0.6s var(--sh-ease-out), transform 0.6s var(--sh-ease-out);
}

[data-animate="fade-up"] {
  opacity: 0;
  transform: translateY(40px);
}

[data-animate="fade-in"] {
  opacity: 0;
}

[data-animate="slide-up"] {
  opacity: 0;
  transform: translateY(20px);
}

[data-animate="slide-down"] {
  opacity: 0;
  transform: translateY(-20px);
}

[data-animate="slide-right"] {
  opacity: 0;
  transform: translateX(-30px);
}

[data-animate="slide-left"] {
  opacity: 0;
  transform: translateX(30px);
}

[data-animate="bounce-in"] {
  opacity: 0;
  transform: scale(0.82);
}

[data-animate="zoom-in"] {
  opacity: 0;
  transform: scale(0.92);
}

/* Animated state — added by IntersectionObserver JS */
[data-animate].animated {
  opacity: 1;
  transform: none;
}

/* Stagger delays */
[data-delay="100"]  { transition-delay: 100ms; }
[data-delay="150"]  { transition-delay: 150ms; }
[data-delay="200"]  { transition-delay: 200ms; }
[data-delay="250"]  { transition-delay: 250ms; }
[data-delay="300"]  { transition-delay: 300ms; }
[data-delay="350"]  { transition-delay: 350ms; }
[data-delay="400"]  { transition-delay: 400ms; }
[data-delay="450"]  { transition-delay: 450ms; }
[data-delay="500"]  { transition-delay: 500ms; }
[data-delay="600"]  { transition-delay: 600ms; }
[data-delay="700"]  { transition-delay: 700ms; }
[data-delay="800"]  { transition-delay: 800ms; }

/* ============================================================
   HOVER ANIMATION UTILITIES
============================================================ */

.sh-hover-lift {
  transition: transform var(--sh-transition-base), box-shadow var(--sh-transition-base);
}

.sh-hover-lift:hover {
  transform: translateY(-4px);
  box-shadow: var(--sh-shadow-xl);
}

.sh-hover-scale {
  transition: transform var(--sh-transition-base);
}

.sh-hover-scale:hover {
  transform: scale(1.05);
}

.sh-hover-scale-sm:hover {
  transform: scale(1.025);
}

.sh-hover-glow {
  transition: box-shadow var(--sh-transition-base);
}

.sh-hover-glow:hover {
  box-shadow: 0 0 0 4px var(--sh-primary-100), var(--sh-shadow-hover);
}

.sh-hover-rotate:hover {
  transform: rotate(6deg);
  transition: transform var(--sh-transition-base);
}

/* ============================================================
   SKELETON / LOADING SHIMMER
============================================================ */

.sh-skeleton {
  background: linear-gradient(
    90deg,
    var(--sh-gray-100) 0%,
    var(--sh-gray-200) 40%,
    var(--sh-gray-100) 80%
  );
  background-size: 200% 100%;
  animation: sh-shimmer 1.6s ease-in-out infinite;
  border-radius: var(--sh-radius-sm);
  display: block;
}

.sh-skeleton--circle {
  border-radius: 50%;
}

.sh-skeleton--text {
  height: 1em;
  margin-bottom: 0.5em;
  border-radius: var(--sh-radius-full);
}

/* ============================================================
   COUNTER ANIMATION
============================================================ */

.sh-counter {
  font-family: var(--sh-font-heading);
  font-weight: var(--sh-font-extrabold);
  display: inline-block;
}

/* JS will animate the number from 0 to data-target */
.sh-counter[data-target] {
  /* Set via JS: this class indicates countable target */
}

/* ============================================================
   TRANSITION UTILITY CLASSES
============================================================ */

.sh-transition-fast {
  transition: all var(--sh-transition-fast) !important;
}

.sh-transition-base {
  transition: all var(--sh-transition-base) !important;
}

.sh-transition-slow {
  transition: all var(--sh-transition-slow) !important;
}

.sh-transition-none {
  transition: none !important;
}

/* ============================================================
   BUILT-IN ANIMATION UTILITY CLASSES
============================================================ */

.sh-animate-spin {
  animation: sh-spin 1s linear infinite;
}

.sh-animate-pulse {
  animation: sh-pulse 2s ease-in-out infinite;
}

.sh-animate-bounce {
  animation: sh-bounce 1.2s infinite;
}

.sh-animate-float {
  animation: sh-float 4s ease-in-out infinite;
}

.sh-animate-float-slow {
  animation: sh-floatSlow 6s ease-in-out infinite;
}

.sh-animate-shimmer {
  animation: sh-shimmer 2s linear infinite;
}

.sh-animate-heartbeat {
  animation: sh-heartbeat 1.5s ease-in-out infinite;
}

.sh-animate-fade-in {
  animation: sh-fadeIn 0.5s ease forwards;
}

.sh-animate-fade-up {
  animation: sh-fadeUp 0.6s var(--sh-ease-out) forwards;
}

.sh-animate-slide-up {
  animation: sh-slideUp 0.45s var(--sh-ease-out) forwards;
}

.sh-animate-bounce-in {
  animation: sh-bounceIn 0.5s var(--sh-ease-bounce) forwards;
}

.sh-animate-gradient {
  background-size: 200% 200%;
  animation: sh-gradientShift 4s ease infinite;
}

/* ============================================================
   SCROLL INDICATOR
============================================================ */

.sh-scroll-indicator {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.375rem;
  color: rgba(255, 255, 255, 0.6);
  font-size: var(--sh-text-xs);
  font-weight: var(--sh-font-medium);
  letter-spacing: var(--sh-tracking-wider);
  text-transform: uppercase;
}

.sh-scroll-indicator__mouse {
  width: 1.5rem;
  height: 2.25rem;
  border: 2px solid rgba(255, 255, 255, 0.4);
  border-radius: var(--sh-radius-full);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: 0.25rem;
}

.sh-scroll-indicator__wheel {
  width: 3px;
  height: 6px;
  background-color: rgba(255, 255, 255, 0.7);
  border-radius: var(--sh-radius-full);
  animation: sh-slideDown 1.5s ease-in-out infinite;
}

/* ============================================================
   BLOB BACKGROUND ELEMENTS
============================================================ */

.sh-blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  opacity: 0.12;
  pointer-events: none;
  animation: sh-floatSlow 8s ease-in-out infinite;
  z-index: 0;
}

.sh-blob--primary {
  background-color: var(--sh-primary);
}

.sh-blob--secondary {
  background-color: var(--sh-secondary);
}

.sh-blob--accent {
  background-color: var(--sh-accent);
  opacity: 0.08;
}

/* ============================================================
   PAGE TRANSITION OVERLAY
============================================================ */

.sh-page-transition {
  position: fixed;
  inset: 0;
  background: var(--sh-gradient-primary);
  z-index: 9999;
  transform-origin: bottom;
  transform: scaleY(0);
  pointer-events: none;
}

.sh-page-transition.is-leaving {
  animation: sh-pageLeave 0.45s var(--sh-ease-in) forwards;
}

.sh-page-transition.is-entering {
  animation: sh-pageEnter 0.35s var(--sh-ease-out) forwards;
}

@keyframes sh-pageLeave {
  from { transform: scaleY(0); transform-origin: bottom; }
  to   { transform: scaleY(1); transform-origin: bottom; }
}

@keyframes sh-pageEnter {
  from { transform: scaleY(1); transform-origin: top; }
  to   { transform: scaleY(0); transform-origin: top; }
}

/* ============================================================
   REDUCED MOTION — disable all animations & transitions
============================================================ */

@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;
  }

  [data-animate] {
    opacity: 1;
    transform: none;
    transition: none;
  }

  [data-animate].animated {
    opacity: 1;
    transform: none;
  }

  [data-delay] {
    transition-delay: 0ms !important;
  }

  .sh-skeleton {
    animation: none;
    background: var(--sh-gray-100);
  }

  .sh-animate-spin,
  .sh-animate-pulse,
  .sh-animate-bounce,
  .sh-animate-float,
  .sh-animate-float-slow,
  .sh-animate-shimmer,
  .sh-animate-heartbeat,
  .sh-animate-gradient {
    animation: none;
  }

  .sh-blob {
    animation: none;
  }

  .sh-scroll-indicator__wheel {
    animation: none;
  }

  .sh-emergency-banner__icon {
    animation: none;
  }
}