/* Glass Morph Background Showcase */
/* Animated gradient mesh background to beautifully display glass morphism effects */

/* Safe container-based backgrounds - apply to specific wrapper divs, not body */

.glass-morph-container::before {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: -1;
  pointer-events: none;
  background:
    /* Primary gradient mesh - perfectly matched to theme colors */
    radial-gradient(circle at 20% 30%, rgba(56, 189, 248, 0.12) 0%, transparent 40%), /* Sky blue - matches theme primary */
    radial-gradient(circle at 80% 20%, rgba(168, 85, 247, 0.10) 0%, transparent 45%), /* Purple - matches theme accent secondary */
    radial-gradient(circle at 40% 80%, rgba(34, 197, 94, 0.08) 0%, transparent 35%), /* Emerald green - matches theme accent */
    radial-gradient(circle at 60% 60%, rgba(251, 191, 36, 0.06) 0%, transparent 50%), /* Amber - matches theme warning */

    /* Base dark gradient - matches theme background */
    linear-gradient(135deg,
      rgba(8, 12, 16, 1) 0%,     /* Deep space black */
      rgba(15, 23, 35, 1) 25%,  /* Rich dark blue-gray */
      rgba(12, 18, 28, 1) 50%,  /* Mid-tone */
      rgba(20, 28, 42, 1) 75%,  /* Elevated card color */
      rgba(8, 12, 16, 1) 100%   /* Back to deep space black */
    ),

    /* Subtle dust particles */
    radial-gradient(circle at 10% 15%, rgba(255,255,255,0.04) 1px, transparent 1px),
    radial-gradient(circle at 25% 35%, rgba(255,255,255,0.03) 1px, transparent 1px),
    radial-gradient(circle at 45% 55%, rgba(255,255,255,0.05) 1px, transparent 1px),
    radial-gradient(circle at 65% 75%, rgba(255,255,255,0.02) 1px, transparent 1px),
    radial-gradient(circle at 85% 25%, rgba(255,255,255,0.03) 1px, transparent 1px),
    radial-gradient(circle at 30% 85%, rgba(255,255,255,0.04) 1px, transparent 1px);

  background-size: 400% 400%, 400% 400%, 400% 400%, 400% 400%, 100% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 100%;
  /* animation: glassMorphShift 20s ease-in-out infinite; */ /* Disabled - static background */
}

/* Alternative: More vibrant version for special sections */
.glass-morph-container-vibrant::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(circle at 25% 25%, rgba(56, 189, 248, 0.18) 0%, transparent 40%), /* Sky blue - more vibrant */
    radial-gradient(circle at 75% 25%, rgba(168, 85, 247, 0.15) 0%, transparent 45%), /* Purple - more vibrant */
    radial-gradient(circle at 25% 75%, rgba(34, 197, 94, 0.12) 0%, transparent 35%), /* Emerald green - more vibrant */
    radial-gradient(circle at 75% 75%, rgba(251, 191, 36, 0.10) 0%, transparent 50%), /* Amber - more vibrant */
    linear-gradient(45deg, rgba(8, 12, 16, 1), rgba(15, 23, 35, 1), rgba(20, 28, 42, 1), rgba(8, 12, 16, 1));
  background-size: 300% 300%, 300% 300%, 300% 300%, 300% 300%, 100% 100%;
  animation: vibrantMorphShift 25s ease-in-out infinite;
}

/* Subtle version for content areas */
.glass-morph-container-subtle::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(circle at 30% 40%, rgba(56, 189, 248, 0.06) 0%, transparent 50%), /* Very subtle sky blue */
    radial-gradient(circle at 70% 30%, rgba(168, 85, 247, 0.05) 0%, transparent 45%), /* Very subtle purple */
    radial-gradient(circle at 50% 70%, rgba(34, 197, 94, 0.04) 0%, transparent 40%), /* Very subtle emerald */
    rgba(8, 12, 16, 1); /* Pure theme background */
  background-size: 500% 500%, 500% 500%, 500% 500%, 100% 100%;
  animation: subtleMorphShift 30s ease-in-out infinite;
}

/* Legacy support - deprecated, use container classes instead */
.glass-morph-bg {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  pointer-events: none;
  background:
    /* Primary gradient mesh - perfectly matched to theme colors */
    radial-gradient(circle at 20% 30%, rgba(56, 189, 248, 0.12) 0%, transparent 40%), /* Sky blue - matches theme primary */
    radial-gradient(circle at 80% 20%, rgba(168, 85, 247, 0.10) 0%, transparent 45%), /* Purple - matches theme accent secondary */
    radial-gradient(circle at 40% 80%, rgba(34, 197, 94, 0.08) 0%, transparent 35%), /* Emerald green - matches theme accent */
    radial-gradient(circle at 60% 60%, rgba(251, 191, 36, 0.06) 0%, transparent 50%), /* Amber - matches theme warning */

    /* Base dark gradient - matches theme background */
    linear-gradient(135deg,
      rgba(8, 12, 16, 1) 0%,     /* Deep space black */
      rgba(15, 23, 35, 1) 25%,  /* Rich dark blue-gray */
      rgba(12, 18, 28, 1) 50%,  /* Mid-tone */
      rgba(20, 28, 42, 1) 75%,  /* Elevated card color */
      rgba(8, 12, 16, 1) 100%   /* Back to deep space black */
    );

  background-size: 400% 400%, 400% 400%, 400% 400%, 400% 400%, 100% 100%;
  /* animation: glassMorphShift 20s ease-in-out infinite; */ /* Disabled - static background */
}

/* Alternative: More vibrant version for special sections */
.glass-morph-bg-vibrant {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(circle at 25% 25%, rgba(56, 189, 248, 0.18) 0%, transparent 40%), /* Sky blue - more vibrant */
    radial-gradient(circle at 75% 25%, rgba(168, 85, 247, 0.15) 0%, transparent 45%), /* Purple - more vibrant */
    radial-gradient(circle at 25% 75%, rgba(34, 197, 94, 0.12) 0%, transparent 35%), /* Emerald green - more vibrant */
    radial-gradient(circle at 75% 75%, rgba(251, 191, 36, 0.10) 0%, transparent 50%), /* Amber - more vibrant */
    linear-gradient(45deg, rgba(8, 12, 16, 1), rgba(15, 23, 35, 1), rgba(20, 28, 42, 1), rgba(8, 12, 16, 1));
  background-size: 300% 300%, 300% 300%, 300% 300%, 300% 300%, 100% 100%;
  animation: vibrantMorphShift 25s ease-in-out infinite;
}

/* Subtle version for content areas */
.glass-morph-bg-subtle {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(circle at 30% 40%, rgba(56, 189, 248, 0.06) 0%, transparent 50%), /* Very subtle sky blue */
    radial-gradient(circle at 70% 30%, rgba(168, 85, 247, 0.05) 0%, transparent 45%), /* Very subtle purple */
    radial-gradient(circle at 50% 70%, rgba(34, 197, 94, 0.04) 0%, transparent 40%), /* Very subtle emerald */
    rgba(8, 12, 16, 1); /* Pure theme background */
  background-size: 500% 500%, 500% 500%, 500% 500%, 100% 100%;
  animation: subtleMorphShift 30s ease-in-out infinite;
}

@keyframes glassMorphShift {
  0% {
    background-position: 0% 0%, 100% 0%, 0% 100%, 100% 100%, 0% 0%, 0% 0%, 0% 0%, 0% 0%, 0% 0%, 0% 0%, 0% 0%;
  }
  25% {
    background-position: 100% 100%, 0% 100%, 100% 0%, 50% 50%, 25% 25%, 0% 0%, 0% 0%, 0% 0%, 0% 0%, 0% 0%, 0% 0%;
  }
  50% {
    background-position: 50% 50%, 50% 50%, 50% 50%, 0% 0%, 50% 50%, 0% 0%, 0% 0%, 0% 0%, 0% 0%, 0% 0%, 0% 0%;
  }
  75% {
    background-position: 0% 100%, 100% 100%, 0% 0%, 100% 0%, 75% 75%, 0% 0%, 0% 0%, 0% 0%, 0% 0%, 0% 0%, 0% 0%;
  }
  100% {
    background-position: 0% 0%, 100% 0%, 0% 100%, 100% 100%, 0% 0%, 0% 0%, 0% 0%, 0% 0%, 0% 0%, 0% 0%, 0% 0%;
  }
}

@keyframes vibrantMorphShift {
  0%, 100% {
    background-position: 0% 0%, 0% 0%, 0% 0%, 0% 0%, 0% 0%;
  }
  33% {
    background-position: 100% 100%, 100% 0%, 0% 100%, 50% 50%, 50% 50%;
  }
  66% {
    background-position: 50% 50%, 50% 100%, 100% 50%, 0% 0%, 25% 75%;
  }
}

@keyframes subtleMorphShift {
  0%, 100% {
    background-position: 0% 0%, 0% 0%, 0% 0%, 0% 0%;
  }
  50% {
    background-position: 100% 100%, 100% 0%, 0% 100%, 50% 50%;
  }
}

/* Usage classes for different sections */
.glass-showcase-header { background: rgba(56, 189, 248, 0.08); } /* Matches theme's --glass-bg-light */
.glass-showcase-card { background: rgba(15, 23, 35, 0.6); } /* Matches theme's --glass-bg */
.glass-showcase-button { background: rgba(56, 189, 248, 0.08); } /* Matches theme's --glass-bg-light */

/* Enhanced glass effect for showcase */
.glass-morph-element {
  background: rgba(15, 23, 35, 0.6); /* Matches theme's --glass-bg */
  backdrop-filter: blur(25px); /* Matches theme's --glass-blur */
  -webkit-backdrop-filter: blur(25px);
  
  border-radius: 16px;
  
}

/* Performance optimization for mobile */
@media (max-width: 768px) {
  .glass-morph-bg,
  .glass-morph-bg-vibrant,
  .glass-morph-bg-subtle {
    animation-duration: 40s; /* Slower on mobile for better performance */
  }
}

/* =====================
   Header: centered fixed nav to match red-outline in provided image
   - Move the visible header background to the centered nav element
   - Keep mobile layout unchanged; only apply on md+ viewports
   - Add top padding to page body to avoid content overlap
   ===================== */
@media (min-width: 768px) {
  /* Keep the outer full-width navbar transparent so the inner nav controls visual width */
  .navbar {
    background: transparent  ;
    border-bottom: none  ;
  }

  /* Centered, constrained, fixed header matching the red box */
  .navbar > nav {
    position: relative  ;
    width: min(1100px, calc(100% - 48px))  ;
    max-width: 1100px  ;
    --navbar-height: 64px;
    z-index: 1100  ;
    padding: 8px 16px  ;
    background: rgba(8, 12, 16, 0.76)  ; /* slightly transparent dark glass */
    -webkit-backdrop-filter: blur(var(--glass-blur))  ;
    backdrop-filter: blur(var(--glass-blur))  ;
    border-radius: 15px  ;
    box-shadow: 0 10px 30px rgba(0,0,0,0.5)  ;
    border: 1px solid rgba(56, 189, 248, 0.06)  ;
  }

  /* Ensure the inner layout container uses the full nav width (we control centering via the nav) */
  .navbar > nav .layout-container {
    max-width: none  ;
    padding-left: 0  ;
    padding-right: 0  ;
  }

  /* Prevent page content from sliding under the fixed header */
  main#page-body, .page-body {
    padding-top: calc(var(--navbar-height) + 28px)  ;
  }

  /* Small tweak: keep mobile collapse toggle visually correct inside fixed nav */
  .zn-collapse-toggle { z-index: 1110; }
}