/* Modern Background System v4 */
:root {
  /* Background Variables */
  --bg-primary-1: #F7F9FB;
  --bg-secondary: #F2F3F5;
  --bg-overlay: rgba(255, 255, 255, 0.8);
  --bg-gradient-start: #F8F9FA;
  --bg-gradient-end: #E9ECEF;
  
  /* Animation Timings */
  --fade-in-duration: 800ms;
  --fade-out-duration: 500ms;
  --transition-timing: cubic-bezier(0.4, 0, 0.2, 1);
}

body {
  background: var(--bg-primary-1);
  font-family: 'Segoe UI', 'Noto Sans Thai', 'Noto Sans', sans-serif;
}

/* Base Background Styles */
bod {
  background: var(--bg-primary);
  background-attachment: fixed;
  background-size: cover;
  position: relative;
  min-height: 100vh;
  isolation: isolate;
}

/* Modern Gradient Mesh - Subtle and Light */
body::before {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: 
    linear-gradient(
      45deg,
      transparent 48%,
      rgba(255, 255, 255, 0.03) 50%,
      transparent 52%
    );
  background-size: 30px 30px;
  pointer-events: none;
  z-index: -1;
}

/* Soft Background Animation */
@keyframes gradientShift {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

/* Page Transitions */
@keyframes fadeIn-1 {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeOut-1 {
  from {
    opacity: 1;
    transform: translateY(0);
  }
  to {
    opacity: 0;
    transform: translateY(-10px);
  }
}

/* Apply Animations */
.page-content {
  animation: fadeIn-1 var(--fade-in-duration) var(--transition-timing);
}

.fadeOut {
  animation: fadeOut-1 var(--fade-out-duration) var(--transition-timing) forwards;
}

/* Performance Optimizations */
.reduce-motion {
  animation: none !important;
  transition: none !important;
}

/* Responsive Optimizations */
@media (max-width: 768px) {
  body::before {
    background-size: 20px 20px;
  }
}

/* High-Performance Mode */
@media (prefers-reduced-motion: reduce) {
  :root {
    --fade-in-duration: 0ms;
    --fade-out-duration: 0ms;
  }

  body {
    background-image: none;
    background-color: var(--bg-primary);
  }

  body::before {
    display: none;
  }
}

/* Print Mode */
@media print {
  body {
    background: none !important;
    background-color: white !important;
  }

  body::before {
    display: none;
  }
}