/* ============================================================================
   GLASSMORPHISM UTILITY CLASSES
   ============================================================================
   Reusable glassmorphism effects with 3D depth

   Usage: Apply base class + intensity + optional 3D effects

   Examples:
   - <div class="glass-base glass-light glass-3d">
   - <div class="glass-base glass-heavy glass-liverpool-blue">
   - <div class="glass-base glass-medium glass-white glass-3d-strong">

   ============================================================================ */


/* ============================================================================
   BASE GLASSMORPHISM
   ============================================================================ */

.glass-base {
  backdrop-filter: blur(40px) saturate(180%);
  -webkit-backdrop-filter: blur(40px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 8px;
  position: relative;
  overflow: hidden;
}


/* ============================================================================
   INTENSITY VARIANTS (Opacity levels)
   ============================================================================ */

/* Light - Very subtle, barely there */
.glass-light {
  background: rgba(255, 255, 255, 0.15);
}

/* Medium - Balanced visibility */
.glass-medium {
  background: rgba(255, 255, 255, 0.3);
}

/* Heavy - Strong frosted effect */
.glass-heavy {
  background: rgba(255, 255, 255, 0.85);
}


/* ============================================================================
   BLUR STRENGTH VARIANTS
   ============================================================================ */

.glass-blur-light {
  backdrop-filter: blur(20px) saturate(150%);
  -webkit-backdrop-filter: blur(20px) saturate(150%);
}

.glass-blur-medium {
  backdrop-filter: blur(40px) saturate(180%);
  -webkit-backdrop-filter: blur(40px) saturate(180%);
}

.glass-blur-heavy {
  backdrop-filter: blur(60px) saturate(200%);
  -webkit-backdrop-filter: blur(60px) saturate(200%);
}


/* ============================================================================
   COLOR TINT VARIANTS
   ============================================================================ */

/* Liverpool Blue tints */
.glass-liverpool-blue-light {
  background: rgba(33, 43, 88, 0.15);
}

.glass-liverpool-blue-medium {
  background: rgba(33, 43, 88, 0.25);
}

.glass-liverpool-blue-heavy {
  background: rgba(33, 43, 88, 0.4);
}

/* Liverpool Blue Darker tints */
.glass-liverpool-blue-dark-light {
  background: rgba(21, 55, 109, 0.15);
}

.glass-liverpool-blue-dark-medium {
  background: rgba(21, 55, 109, 0.25);
}

.glass-liverpool-blue-dark-heavy {
  background: rgba(21, 55, 109, 0.4);
}

/* Liverpool Teal tints */
.glass-teal-light {
  background: rgba(0, 166, 137, 0.15);
}

.glass-teal-medium {
  background: rgba(0, 166, 137, 0.25);
}

.glass-teal-heavy {
  background: rgba(0, 166, 137, 0.4);
}

/* White tints (default) */
.glass-white-light {
  background: rgba(255, 255, 255, 0.15);
}

.glass-white-medium {
  background: rgba(255, 255, 255, 0.3);
}

.glass-white-heavy {
  background: rgba(255, 255, 255, 0.85);
}

/* Black/Dark tints */
.glass-dark-light {
  background: rgba(0, 0, 0, 0.15);
  border-color: rgba(0, 0, 0, 0.3);
}

.glass-dark-medium {
  background: rgba(0, 0, 0, 0.25);
  border-color: rgba(0, 0, 0, 0.3);
}

.glass-dark-heavy {
  background: rgba(0, 0, 0, 0.4);
  border-color: rgba(0, 0, 0, 0.3);
}


/* ============================================================================
   3D DEPTH EFFECTS
   ============================================================================ */

/* Standard 3D raised effect */
.glass-3d {
  box-shadow:
    0 8px 32px rgba(0, 0, 0, 0.1),
    0 2px 8px rgba(0, 0, 0, 0.05),
    inset 0 1px 0 rgba(255, 255, 255, 0.8);
}

.glass-3d::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg,
    transparent,
    rgba(255, 255, 255, 0.8) 50%,
    transparent);
  pointer-events: none;
}

/* Strong 3D effect - more dramatic */
.glass-3d-strong {
  box-shadow:
    0 12px 48px rgba(0, 0, 0, 0.15),
    0 4px 12px rgba(0, 0, 0, 0.08),
    inset 0 2px 0 rgba(255, 255, 255, 0.9),
    inset 0 -1px 0 rgba(0, 0, 0, 0.1);
}

.glass-3d-strong::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg,
    transparent,
    rgba(255, 255, 255, 0.9) 50%,
    transparent);
  pointer-events: none;
}

/* Subtle 3D effect */
.glass-3d-subtle {
  box-shadow:
    0 4px 16px rgba(0, 0, 0, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.5);
}

/* Floating effect - lifted off the surface */
.glass-floating {
  box-shadow:
    0 16px 64px rgba(0, 0, 0, 0.12),
    0 8px 24px rgba(0, 0, 0, 0.08),
    inset 0 2px 0 rgba(255, 255, 255, 0.8);
}

/* Pressed/inset effect */
.glass-pressed {
  box-shadow:
    inset 0 2px 8px rgba(0, 0, 0, 0.15),
    inset 0 1px 4px rgba(0, 0, 0, 0.1);
}


/* ============================================================================
   BORDER VARIANTS
   ============================================================================ */

.glass-border-white {
  border: 1px solid rgba(255, 255, 255, 0.3);
}

.glass-border-white-strong {
  border: 1px solid rgba(255, 255, 255, 0.5);
}

.glass-border-liverpool {
  border: 1px solid rgba(33, 43, 88, 0.3);
}

.glass-border-liverpool-strong {
  border: 1px solid rgba(33, 43, 88, 0.5);
}

.glass-border-none {
  border: none;
}


/* ============================================================================
   BORDER RADIUS VARIANTS
   ============================================================================ */

.glass-rounded-sm {
  border-radius: 4px;
}

.glass-rounded-md {
  border-radius: 8px;
}

.glass-rounded-lg {
  border-radius: 12px;
}

.glass-rounded-xl {
  border-radius: 16px;
}

.glass-rounded-pill {
  border-radius: 50px;
}

.glass-rounded-none {
  border-radius: 0;
}


/* ============================================================================
   HOVER EFFECTS
   ============================================================================ */

.glass-hover-brighten:hover {
  background: rgba(255, 255, 255, 0.4);
  transition: background 150ms cubic-bezier(0.4, 0, 0.2, 1);
}

.glass-hover-lift:hover {
  transform: translateY(-2px);
  box-shadow:
    0 12px 48px rgba(0, 0, 0, 0.15),
    0 4px 12px rgba(0, 0, 0, 0.08),
    inset 0 2px 0 rgba(255, 255, 255, 0.9);
  transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
}

.glass-hover-glow:hover {
  box-shadow:
    0 8px 32px rgba(33, 43, 88, 0.2),
    0 2px 8px rgba(33, 43, 88, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.8);
  transition: box-shadow 150ms cubic-bezier(0.4, 0, 0.2, 1);
}


/* ============================================================================
   EXAMPLE COMBINATIONS (Ready-to-use presets)
   ============================================================================ */

/* Light white glass with subtle 3D */
.glass-preset-light {
  background: rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(40px) saturate(180%);
  -webkit-backdrop-filter: blur(40px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 8px;
  box-shadow:
    0 4px 16px rgba(0, 0, 0, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.5);
}

/* Liverpool Blue glass with strong 3D */
.glass-preset-liverpool {
  background: rgba(33, 43, 88, 0.15);
  backdrop-filter: blur(40px) saturate(180%);
  -webkit-backdrop-filter: blur(40px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 8px;
  position: relative;
  overflow: hidden;
  box-shadow:
    0 8px 32px rgba(0, 0, 0, 0.1),
    0 2px 8px rgba(0, 0, 0, 0.05),
    inset 0 1px 0 rgba(255, 255, 255, 0.8);
}

.glass-preset-liverpool::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg,
    transparent,
    rgba(255, 255, 255, 0.8) 50%,
    transparent);
  pointer-events: none;
}

/* Heavy frosted white glass */
.glass-preset-frosted {
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(60px) saturate(200%);
  -webkit-backdrop-filter: blur(60px) saturate(200%);
  border: 1px solid rgba(255, 255, 255, 0.5);
  border-radius: 8px;
  box-shadow:
    0 8px 24px rgba(0, 0, 0, 0.15),
    inset 0 1px 0 rgba(255, 255, 255, 1);
}

/* Teal accent glass */
.glass-preset-teal {
  background: rgba(0, 166, 137, 0.2);
  backdrop-filter: blur(40px) saturate(180%);
  -webkit-backdrop-filter: blur(40px) saturate(180%);
  border: 1px solid rgba(0, 166, 137, 0.3);
  border-radius: 8px;
  box-shadow:
    0 8px 32px rgba(0, 166, 137, 0.15),
    inset 0 1px 0 rgba(255, 255, 255, 0.6);
}


/* ============================================================================
   RESPONSIVE UTILITIES
   ============================================================================ */

/* Reduce blur on mobile for performance */
@media (max-width: 768px) {
  .glass-base,
  .glass-blur-medium {
    backdrop-filter: blur(20px) saturate(150%);
    -webkit-backdrop-filter: blur(20px) saturate(150%);
  }

  .glass-blur-heavy {
    backdrop-filter: blur(30px) saturate(160%);
    -webkit-backdrop-filter: blur(30px) saturate(160%);
  }
}


/* ============================================================================
   USAGE EXAMPLES
   ============================================================================

   Light glass card:
   <div class="glass-base glass-light glass-3d glass-rounded-md">
     Content here
   </div>

   Liverpool Blue heavy glass with strong 3D:
   <div class="glass-base glass-liverpool-blue-heavy glass-3d-strong glass-rounded-lg">
     Content here
   </div>

   Teal accent with hover lift:
   <button class="glass-base glass-teal-medium glass-3d glass-hover-lift glass-rounded-pill">
     Click me
   </button>

   Quick preset:
   <div class="glass-preset-liverpool">
     Ready to use!
   </div>

   ============================================================================ */