/* ============================================
   YOGA MAKİNA — Liquid Glass Effects
   ============================================ */

/* === Base Liquid Glass === */
.liquid-glass {
  background: rgba(255, 255, 255, 0.06);
  backdrop-filter: blur(24px) saturate(180%);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--radius-xl);
  position: relative;
  overflow: hidden;
}

/* Subtle inner highlight */
.liquid-glass::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.08) 0%,
    rgba(255, 255, 255, 0) 50%,
    rgba(255, 255, 255, 0.03) 100%
  );
  pointer-events: none;
  border-radius: inherit;
}

/* Glow effect on hover */
.liquid-glass::after {
  content: '';
  position: absolute;
  inset: -1px;
  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.15),
    rgba(255, 255, 255, 0) 40%,
    rgba(255, 255, 255, 0) 60%,
    rgba(255, 255, 255, 0.08)
  );
  border-radius: inherit;
  opacity: 0;
  transition: opacity 0.5s var(--ease-out-expo);
  pointer-events: none;
  z-index: -1;
}

.liquid-glass:hover::after {
  opacity: 1;
}

/* === Light Variant (for dark backgrounds) === */
.liquid-glass--light {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.15);
}

.liquid-glass--light::before {
  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.12) 0%,
    rgba(255, 255, 255, 0) 50%,
    rgba(255, 255, 255, 0.04) 100%
  );
}

/* === Dark Variant (for light backgrounds) === */
.liquid-glass--dark {
  background: rgba(0, 0, 0, 0.04);
  backdrop-filter: blur(24px) saturate(150%);
  -webkit-backdrop-filter: blur(24px) saturate(150%);
  border-color: rgba(0, 0, 0, 0.08);
}

.liquid-glass--dark::before {
  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.5) 0%,
    rgba(255, 255, 255, 0) 50%,
    rgba(0, 0, 0, 0.02) 100%
  );
}

.liquid-glass--dark::after {
  background: linear-gradient(
    135deg,
    rgba(0, 0, 0, 0.08),
    rgba(0, 0, 0, 0) 40%,
    rgba(0, 0, 0, 0) 60%,
    rgba(0, 0, 0, 0.04)
  );
}

/* === Solid Glass (stronger blur, more opaque) === */
.liquid-glass--solid {
  background: rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(40px) saturate(200%);
  -webkit-backdrop-filter: blur(40px) saturate(200%);
  border-color: rgba(255, 255, 255, 0.18);
}

/* === Dock Variant === */
.liquid-glass--dock {
  background: rgba(0, 0, 0, 0.65);
  backdrop-filter: blur(30px) saturate(180%);
  -webkit-backdrop-filter: blur(30px) saturate(180%);
  border-color: rgba(255, 255, 255, 0.1);
}

/* === Card Variant === */
.liquid-glass--card {
  padding: var(--space-2xl);
  transition: all 0.4s var(--ease-out-expo);
  cursor: default;
}

.liquid-glass--card:hover {
  transform: translateY(-6px);
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.2);
  box-shadow: 
    0 20px 40px rgba(0, 0, 0, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

/* === Interactive Glass === */
.liquid-glass--interactive {
  cursor: pointer;
  transition: all 0.4s var(--ease-out-expo);
}

.liquid-glass--interactive:hover {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.2);
  transform: translateY(-4px) scale(1.01);
  box-shadow: 
    0 16px 32px rgba(0, 0, 0, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.15);
}

.liquid-glass--interactive:active {
  transform: translateY(-2px) scale(0.99);
}

/* === Glass Morphism Utilities === */
.glass-border-glow {
  box-shadow: 
    0 0 0 1px rgba(255, 255, 255, 0.1),
    0 0 20px rgba(255, 255, 255, 0.05);
}

.glass-shadow {
  box-shadow: 
    0 8px 32px rgba(0, 0, 0, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.glass-shadow-lg {
  box-shadow: 
    0 24px 48px rgba(0, 0, 0, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

/* === Animated Glass Shine === */
.liquid-glass--shine {
  overflow: hidden;
}

.liquid-glass--shine::before {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: linear-gradient(
    135deg,
    transparent 0%,
    transparent 40%,
    rgba(255, 255, 255, 0.06) 42%,
    rgba(255, 255, 255, 0.12) 44%,
    rgba(255, 255, 255, 0.06) 46%,
    transparent 48%,
    transparent 100%
  );
  animation: glassShine 6s ease-in-out infinite;
  pointer-events: none;
}

@keyframes glassShine {
  0%, 100% { transform: translate(-30%, -30%) rotate(0deg); }
  50% { transform: translate(30%, 30%) rotate(0deg); }
}

/* === Refraction Effect === */
.liquid-glass--refract {
  position: relative;
}

.liquid-glass--refract::after {
  content: '';
  position: absolute;
  inset: 2px;
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.08) 0%,
    transparent 40%,
    transparent 60%,
    rgba(255, 255, 255, 0.03) 100%
  );
  border-radius: inherit;
  pointer-events: none;
}

/* === Dark page glass variants === */
.dark-page .liquid-glass--dark {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.1);
}