/**
 * Wellbeing Matters Design System Main Entry Point
 * Imports all modular CSS stylesheets for building pages.
 */

@import 'variables.css?v=2';
@import 'reset.css?v=2';
@import 'typography.css?v=2';
@import 'grid.css?v=2';
@import 'utilities.css?v=2';
@import 'components.css?v=2';
@import 'animations.css?v=2';
@import 'navigation.css?v=2';
@import 'hero.css?v=2';
@import 'home.css?v=2';
@import 'footer.css?v=2';
@import 'about.css?v=1';
@import 'services.css?v=1';
@import 'knowledge.css?v=1';
@import 'forms.css?v=1';
@import 'utils.css?v=1';
@import 'polish.css?v=1'; /* Must load last — UI refinement overrides */

/* Global Section styling */
section {
  position: relative;
  overflow: hidden;
}

.section-padding {
  padding-top: var(--space-96);
  padding-bottom: var(--space-96);
}

@media (max-width: 768px) {
  .section-padding {
    padding-top: var(--space-64);
    padding-bottom: var(--space-64);
  }
}

.section-bg-secondary {
  background-color: var(--color-bg-secondary);
}

.section-title-area {
  text-align: center;
  max-width: 640px;
  margin: 0 auto var(--space-64) auto;
}

.section-title-area h2 {
  margin-bottom: var(--space-16);
}

.section-title-area p {
  color: var(--color-paragraph);
  margin-bottom: 0;
}

/* ==========================================================================
   GLOBAL MICRO INTERACTIONS & ANIMATIONS
   ========================================================================== */

/* Glassmorphism */
.glass-panel {
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.4);
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.05);
}

/* Hover Lift */
.hover-lift {
  transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.4s ease;
}
.hover-lift:hover {
  transform: translateY(-8px);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
}

/* Image Zoom */
.zoom-container {
  overflow: hidden;
}
.zoom-image {
  transition: transform 0.8s ease;
}
.zoom-container:hover .zoom-image {
  transform: scale(1.05);
}

/* Soft Glow */
.soft-glow {
  filter: drop-shadow(0 0 12px rgba(37, 99, 235, 0.3));
}

/* Blur Reveal */
.blur-reveal {
  opacity: 0;
  filter: blur(10px);
  transform: translateY(20px);
  transition: all 0.8s ease;
}
.blur-reveal.is-visible {
  opacity: 1;
  filter: blur(0);
  transform: translateY(0);
}

/* Animated Divider */
.animated-divider {
  position: relative;
  overflow: hidden;
}
.animated-divider::after {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
  animation: slideLight 3s infinite;
}
@keyframes slideLight {
  100% { left: 100%; }
}