/**
 * MEDCO Sarl & Ntoto-Nzuri — Design System & Core Stylesheet
 * Architecture : styles/main.css
 */

/* ==========================================================================
   1. Typography & Global Scroll
   ========================================================================== */
html {
  scroll-behavior: smooth;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

/* Scroll progress indicator */
#scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  height: 3.5px;
  background: linear-gradient(90deg, #10B981, #06B6D4, #15803D);
  width: 0%;
  z-index: 100;
  transition: width 0.1s ease-out;
}

/* ==========================================================================
   2. Glassmorphism & Background Meshes
   ========================================================================== */
.glass-nav {
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: none;
  box-shadow: 0 4px 20px -2px rgba(0, 0, 0, 0.04);
}

.glass-card {
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(226, 232, 240, 0.9);
}

.glass-card-dark {
  background: rgba(15, 23, 42, 0.88);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(51, 65, 85, 0.6);
}

/* Hero Background Gradients */
.hero-mesh {
  background-color: #FAFCF9;
  background-image:
    radial-gradient(at 0% 0%, rgba(22, 163, 74, 0.08) 0px, transparent 50%),
    radial-gradient(at 100% 0%, rgba(13, 148, 136, 0.09) 0px, transparent 50%),
    radial-gradient(at 50% 100%, rgba(34, 197, 94, 0.05) 0px, transparent 50%);
}

.hero-mesh-pediatric {
  background-color: #F7FEFA;
  background-image:
    radial-gradient(at 0% 0%, rgba(16, 185, 129, 0.12) 0px, transparent 50%),
    radial-gradient(at 100% 0%, rgba(6, 182, 212, 0.08) 0px, transparent 50%),
    radial-gradient(at 50% 100%, rgba(52, 211, 153, 0.09) 0px, transparent 50%);
}

.subtle-grid {
  background-size: 32px 32px;
  background-image:
    linear-gradient(to right, rgba(0, 0, 0, 0.03) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(0, 0, 0, 0.03) 1px, transparent 1px);
}

/* ==========================================================================
   3. Animations & Reveals (IntersectionObserver)
   ========================================================================== */
.reveal {
  opacity: 0;
  transform: translateY(32px);
  transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, transform;
}

.reveal-left {
  opacity: 0;
  transform: translateX(-40px);
  transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, transform;
}

.reveal-right {
  opacity: 0;
  transform: translateX(40px);
  transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, transform;
}

.reveal-scale {
  opacity: 0;
  transform: scale(0.92);
  transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, transform;
}

.revealed {
  opacity: 1 !important;
  transform: translate(0, 0) scale(1) !important;
}

.delay-100 { transition-delay: 100ms; }
.delay-200 { transition-delay: 200ms; }
.delay-300 { transition-delay: 300ms; }
.delay-400 { transition-delay: 400ms; }

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

.animate-float {
  animation: subtle-float 5s ease-in-out infinite;
}

/* Accessible Reduced Motion */
@media (prefers-reduced-motion: reduce) {
  .reveal, .reveal-left, .reveal-right, .reveal-scale {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  .animate-float {
    animation: none !important;
  }
}