/**
 * Liquid Glass Design System - Ēkufonds.lv
 * Apple-inspired glassmorphism effects
 */

/* ============================================================================
   LIQUID GLASS BASE
   ============================================================================ */

.liquid-glass {
  background: var(--glass-surface, rgba(255, 255, 255, 0.65));
  backdrop-filter: blur(var(--glass-blur, 20px)) saturate(var(--glass-saturate, 180%));
  -webkit-backdrop-filter: blur(var(--glass-blur, 20px)) saturate(var(--glass-saturate, 180%));
  border: 1px solid var(--glass-border, rgba(255, 255, 255, 0.5));
  box-shadow: var(--glass-shadow, 0 8px 32px 0 rgba(31, 38, 135, 0.15));
  border-radius: 24px;
  position: relative;
  overflow: hidden;
}

/* Specular highlight effect */
.liquid-glass::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(
    135deg,
    var(--glass-highlight, rgba(255, 255, 255, 0.8)) 0%,
    transparent 60%
  );
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
  opacity: 0.5;
  z-index: 1;
}

/* Subtle inner glow */
.liquid-glass::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(
    circle at 30% 20%,
    rgba(255, 255, 255, 0.1) 0%,
    transparent 50%
  );
  pointer-events: none;
  z-index: 0;
}

/* ============================================================================
   LIQUID GLASS VARIANTS
   ============================================================================ */

.liquid-glass-sm {
  border-radius: 12px;
  backdrop-filter: blur(12px) saturate(160%);
  -webkit-backdrop-filter: blur(12px) saturate(160%);
}

.liquid-glass-md {
  border-radius: 20px;
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
}

.liquid-glass-lg {
  border-radius: 32px;
  backdrop-filter: blur(24px) saturate(200%);
  -webkit-backdrop-filter: blur(24px) saturate(200%);
}

.liquid-glass-xl {
  border-radius: 40px;
  backdrop-filter: blur(30px) saturate(220%);
  -webkit-backdrop-filter: blur(30px) saturate(220%);
}

/* ============================================================================
   LIQUID GLASS INTENSITY VARIANTS
   ============================================================================ */

.liquid-glass-subtle {
  background: rgba(255, 255, 255, 0.4);
  backdrop-filter: blur(10px) saturate(140%);
  -webkit-backdrop-filter: blur(10px) saturate(140%);
  border: 1px solid rgba(255, 255, 255, 0.3);
}

.liquid-glass-strong {
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(30px) saturate(200%);
  -webkit-backdrop-filter: blur(30px) saturate(200%);
  border: 1px solid rgba(255, 255, 255, 0.7);
  box-shadow: 0 12px 48px 0 rgba(31, 38, 135, 0.25);
}

/* ============================================================================
   LIQUID GLASS WITH GRADIENT BORDERS
   ============================================================================ */

.liquid-glass-gradient {
  position: relative;
  background: var(--glass-surface, rgba(255, 255, 255, 0.65));
  backdrop-filter: blur(var(--glass-blur, 20px)) saturate(var(--glass-saturate, 180%));
  -webkit-backdrop-filter: blur(var(--glass-blur, 20px)) saturate(var(--glass-saturate, 180%));
  border-radius: 24px;
}

.liquid-glass-gradient::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(
    135deg,
    rgba(139, 92, 246, 0.5) 0%,
    rgba(168, 85, 247, 0.5) 50%,
    rgba(139, 92, 246, 0.5) 100%
  );
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
  z-index: 1;
}

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

.liquid-glass:hover {
  background: var(--glass-surface-hover, rgba(255, 255, 255, 0.75));
  border-color: var(--glass-border-hover, rgba(255, 255, 255, 0.6));
  box-shadow: var(--glass-shadow-hover, 0 12px 48px 0 rgba(31, 38, 135, 0.2));
  transform: translateY(-2px);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.liquid-glass:hover::before {
  opacity: 0.7;
}

/* ============================================================================
   ANIMATIONS
   ============================================================================ */

@keyframes glassShimmer {
  0% {
    transform: translateX(-100%) translateY(-100%) rotate(45deg);
  }
  100% {
    transform: translateX(100%) translateY(100%) rotate(45deg);
  }
}

.liquid-glass-animated::before {
  animation: glassShimmer 3s infinite;
}

@keyframes glassGlow {
  0%, 100% {
    box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.15),
                0 0 0 0 rgba(139, 92, 246, 0);
  }
  50% {
    box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.15),
                0 0 30px 5px rgba(139, 92, 246, 0.3);
  }
}

.liquid-glass-glow {
  animation: glassGlow 3s ease-in-out infinite;
}

@keyframes glassFadeIn {
  from {
    opacity: 0;
    transform: translateY(20px) scale(0.95);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.liquid-glass-fade-in {
  animation: glassFadeIn 0.6s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

/* ============================================================================
   THEME VARIANTS
   ============================================================================ */

.theme-light .liquid-glass {
  background: rgba(255, 255, 255, 0.65);
  border: 1px solid rgba(255, 255, 255, 0.5);
  box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.15);
}

.theme-light .liquid-glass::before {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.8) 0%, transparent 60%);
}

.theme-light .liquid-glass:hover {
  background: rgba(255, 255, 255, 0.75);
  border-color: rgba(255, 255, 255, 0.6);
}

.theme-dark .liquid-glass {
  background: rgba(28, 28, 30, 0.65);
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.5);
}

.theme-dark .liquid-glass::before {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.15) 0%, transparent 60%);
}

.theme-dark .liquid-glass:hover {
  background: rgba(28, 28, 30, 0.75);
  border-color: rgba(255, 255, 255, 0.15);
}

.theme-dark .liquid-glass-subtle {
  background: rgba(28, 28, 30, 0.4);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.theme-dark .liquid-glass-strong {
  background: rgba(28, 28, 30, 0.85);
  border: 1px solid rgba(255, 255, 255, 0.2);
  box-shadow: 0 12px 48px 0 rgba(0, 0, 0, 0.7);
}

/* ============================================================================
   COMPONENT-SPECIFIC LIQUID GLASS
   ============================================================================ */

/* Cards with liquid glass */
.card.liquid-glass,
.feature-card.liquid-glass,
.stat.liquid-glass {
  background: var(--glass-surface, rgba(255, 255, 255, 0.65));
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border: 1px solid var(--glass-border, rgba(255, 255, 255, 0.5));
  box-shadow: var(--glass-shadow, 0 8px 32px 0 rgba(31, 38, 135, 0.15));
}

/* Buttons with liquid glass */
.btn.liquid-glass {
  background: rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(10px) saturate(160%);
  -webkit-backdrop-filter: blur(10px) saturate(160%);
  border: 1px solid rgba(255, 255, 255, 0.3);
}

/* Forms with liquid glass */
.form-input.liquid-glass,
.form-group.liquid-glass {
  background: rgba(255, 255, 255, 0.5);
  backdrop-filter: blur(12px) saturate(160%);
  -webkit-backdrop-filter: blur(12px) saturate(160%);
  border: 1px solid rgba(255, 255, 255, 0.4);
}

/* Modals with liquid glass */
.modal.liquid-glass {
  background: rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(24px) saturate(200%);
  -webkit-backdrop-filter: blur(24px) saturate(200%);
  border: 1px solid rgba(255, 255, 255, 0.6);
  box-shadow: 0 20px 60px 0 rgba(31, 38, 135, 0.3);
}

.modal-overlay.liquid-glass {
  background: rgba(0, 0, 0, 0.4);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

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

@media (max-width: 768px) {
  .liquid-glass {
    border-radius: 16px;
    backdrop-filter: blur(16px) saturate(160%);
    -webkit-backdrop-filter: blur(16px) saturate(160%);
  }

  .liquid-glass-lg,
  .liquid-glass-xl {
    border-radius: 20px;
  }
}

@media (max-width: 480px) {
  .liquid-glass {
    border-radius: 12px;
    backdrop-filter: blur(12px) saturate(140%);
    -webkit-backdrop-filter: blur(12px) saturate(140%);
  }
}

/* ============================================================================
   UTILITY CLASSES
   ============================================================================ */

.liquid-glass-no-before::before {
  display: none;
}

.liquid-glass-no-after::after {
  display: none;
}

.liquid-glass-interactive {
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.liquid-glass-interactive:active {
  transform: translateY(0) scale(0.98);
}