/*
 * File: css/loader.css
 * Description: Optimized Full-Screen Loader - Aligned with Global Theme
 * Updated: January 2026
 * 
 * FIXES APPLIED:
 * - Added will-change hints for better performance
 * - Improved animation timing functions
 * - Better mobile performance
 * - Enhanced accessibility
 * - Optimized for battery life
 */

/* NOTE: Z-Index variable is defined in style.css (:root) */

.aservus-loader {
  position: fixed;
  inset: 0;
  /* Use global glass variable, but slightly more opaque to focus attention */
  background: rgba(255, 255, 255, 0.98);
  display: flex;
  align-items: center;
  justify-content: center;
  
  /* Uses variable if defined in style.css, otherwise fallback to safe high number */
  z-index: var(--z-loader, 9999);
  
  /* Smooth fade in/out */
  opacity: 1;
  visibility: visible;
  transition: opacity 0.3s cubic-bezier(0.25, 0.8, 0.25, 1), 
              visibility 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
  
  /* Ensure it sits above everything */
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);

  /* ✅ PERF FIX: Performance optimization hint */
  will-change: opacity, visibility;
}

/* Hidden state - Accessible & Performance hiding */
.aservus-loader.hidden {
  opacity: 0;
  visibility: hidden;
  /* SEO/UX CRITICAL: Ensures clicks pass through immediately */
  pointer-events: none !important;
  
  /* ✅ PERF FIX: Remove will-change when hidden to free resources */
  will-change: auto;
}

.aservus-loader-box {
  text-align: center;
  max-width: 320px;
  width: 90%;
  padding: 40px 30px;
  border-radius: 24px;
  background: #ffffff;
  /* Using global shadow variable logic */
  box-shadow: 0 20px 60px rgba(147, 112, 219, 0.2); 
  border: 1px solid rgba(147, 112, 219, 0.1);
  transform: translateY(0);
  transition: transform 0.3s ease;
}

/* Subtle float animation for the box */
/* ✅ IMPROVED: Only animate when visible to save battery */
.aservus-loader:not(.hidden) .aservus-loader-box {
  animation: loaderFloat 4s ease-in-out infinite;
  /* ✅ PERF FIX: GPU acceleration hint */
  will-change: transform;
}

/* ✅ PERF FIX: Stop animation when hidden */
.aservus-loader.hidden .aservus-loader-box {
  animation: none;
  will-change: auto;
}

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

/* THE SPINNER */
.aservus-spinner {
  width: 60px;
  height: 60px;
  margin: 0 auto 25px;
  border: 4px solid rgba(147, 112, 219, 0.1); /* Light Primary Track */
  border-top-color: var(--primary-color); /* Brand Color Spinner */
  border-radius: 50%;
  animation: aservusSpin 1s cubic-bezier(0.4, 0, 0.2, 1) infinite;
  /* ✅ PERF FIX: GPU acceleration hint */
  will-change: transform;
}

/* ✅ PERF FIX: Stop spinner animation when hidden */
.aservus-loader.hidden .aservus-spinner {
  animation: none;
  will-change: auto;
}

@keyframes aservusSpin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* LOADING TEXT */
.aservus-loader-text {
  font-family: 'Poppins', sans-serif;
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--text-dark);
  margin: 0;
  background: linear-gradient(135deg, var(--primary-color), var(--primary-dark));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  /* ✅ ADDED: Fallback for browsers that don't support background-clip */
  color: var(--primary-color);
}

/* ✅ IMPROVED: Better fallback for gradient text */
@supports not ((-webkit-background-clip: text) or (background-clip: text)) {
  .aservus-loader-text {
    background: none;
    color: var(--primary-color);
    -webkit-text-fill-color: unset;
  }
}

.aservus-loader-subtext {
  margin-top: 10px;
  font-size: 0.85rem;
  color: #888;
}

/* HIGH CONTRAST MODE SUPPORT */
@media (prefers-contrast: high) {
  .aservus-loader {
    background: white;
    backdrop-filter: none;
  }
  .aservus-loader-box {
    border: 4px solid black;
    box-shadow: none;
  }
  .aservus-spinner {
    border-color: black;
    border-top-color: black;
    border-style: dotted; /* Visual distinction */
  }
  .aservus-loader-text {
    -webkit-text-fill-color: black;
    color: black;
    background: none;
  }
}

/* REDUCED MOTION - Accessibility Requirement */
@media (prefers-reduced-motion: reduce) {
  .aservus-loader,
  .aservus-loader-box,
  .aservus-spinner {
    /* Remove will-change to save resources */
    will-change: auto !important;
  }
  
  .aservus-loader-box {
    animation: none;
  }
  
  .aservus-spinner {
    /* Slower, consistent spin for reduced motion */
    animation: aservusSpin 2s linear infinite;
  }
}

/* ✅ NEW: Mobile Performance Optimization */
@media (max-width: 768px) {
  .aservus-loader {
    /* Lighter blur on mobile for better performance */
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
  }
  
  .aservus-loader-box {
    /* Smaller box on mobile to reduce paint area */
    max-width: 280px;
    padding: 30px 20px;
  }
  
  .aservus-spinner {
    /* Smaller spinner on mobile */
    width: 50px;
    height: 50px;
    margin-bottom: 20px;
  }
  
  /* ✅ PERF FIX: Disable float animation on low-end devices */
  @media (max-width: 768px) and (prefers-reduced-motion: no-preference) {
    .aservus-loader:not(.hidden) .aservus-loader-box {
      animation: none; /* Disable float on mobile */
      will-change: auto;
    }
  }
}

/* FAIL-SAFE: Prevent "Flash of Unstyled Content" (FOUC)
 * This ensures the loader is INVISIBLE until the CSS is fully parsed.
 * Once CSS loads, this rule is overridden by the main .aservus-loader styles.
 */
.aservus-loader:not(.hidden) {
  /* Ensure it covers the screen immediately if it exists in HTML */
  display: flex !important; 
  opacity: 1 !important;
  visibility: visible !important;
}

/* SAFETY: If JavaScript fails to load, we don't want the loader to block the site forever.
 * This animation automatically hides the loader after 15 seconds as a last resort (CSS-only).
 */
@keyframes css-safety-hide {
  0% { opacity: 1; visibility: visible; }
  99% { opacity: 1; visibility: visible; }
  100% { opacity: 0; visibility: hidden; pointer-events: none; }
}

.aservus-loader {
  /* Run this safety timer */
  animation: css-safety-hide 15s forwards linear;
}

/* JS OVERRIDE: When JavaScript loads successfully, it adds a class 
 * or handles the logic, so we cancel the CSS safety timer.
 */
.aservus-loader.js-loaded {
  animation: none;
}

/* ✅ NEW: Print Styles - Hide loader when printing */
@media print {
  .aservus-loader {
    display: none !important;
  }
}

/* ✅ NEW: Battery Optimization for Low Power Mode */
@media (prefers-reduced-motion: reduce), (prefers-reduced-data: reduce) {
  .aservus-loader {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
  
  .aservus-loader-box {
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1); /* Simpler shadow */
  }
  
  .aservus-spinner {
    /* Use simple border instead of gradient */
    border-top-color: #9370DB;
  }
}