/* File: samyam/css/liquid-glass.css – Living Glass System */

.liquid-glass-bg {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: -3;
  pointer-events: none;
  background: radial-gradient(circle at 70% 30%, rgba(210, 230, 215, 0.18) 0%, rgba(245, 242, 235, 1) 70%);
  animation: colorShift12h 43200s linear infinite;
  will-change: background;
}

@keyframes colorShift12h {
  0%, 100% {
    background: radial-gradient(circle at 70% 30%, rgba(163, 208, 176, 0.18) 0%, rgba(245, 242, 235, 1) 75%);
  }
  25% {
    background: radial-gradient(circle at 60% 40%, rgba(194, 170, 140, 0.15) 0%, rgba(245, 242, 235, 1) 75%);
  }
  50% {
    background: radial-gradient(circle at 70% 30%, rgba(226, 178, 142, 0.18) 0%, rgba(245, 242, 235, 1) 75%);
  }
  75% {
    background: radial-gradient(circle at 65% 35%, rgba(180, 160, 200, 0.12) 0%, rgba(245, 242, 235, 1) 75%);
  }
}

/* ===== FROSTED GLASS PANELS ===== */
.frosted-panel {
  background: rgba(255, 255, 255, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.7);
  box-shadow: 
    0 8px 32px rgba(27, 59, 79, 0.05),
    inset 0 1px 0 rgba(255, 255, 255, 0.8);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-radius: var(--border-radius-card, 24px);
  transition: backdrop-filter 0.3s ease, background 0.3s ease, box-shadow 0.3s ease;
  position: relative;
  overflow: hidden;
}

.frosted-panel::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.8), transparent);
  pointer-events: none;
}

.frosted-panel:hover {
  background: rgba(255, 255, 255, 0.72);
  box-shadow: 
    0 12px 40px rgba(27, 59, 79, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

/* Dark variant for overlays */
.frosted-panel-dark {
  background: rgba(27, 59, 79, 0.85);
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.3);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border-radius: var(--border-radius-card, 24px);
  color: #ffffff;
}

/* Glass shimmer animation */
.glass-shimmer {
  position: relative;
  overflow: hidden;
}

.glass-shimmer::before {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: linear-gradient(
    45deg,
    transparent 30%,
    rgba(255, 255, 255, 0.06) 45%,
    rgba(255, 255, 255, 0.12) 50%,
    rgba(255, 255, 255, 0.06) 55%,
    transparent 70%
  );
  animation: glassShimmer 6s ease-in-out infinite;
  pointer-events: none;
  z-index: 1;
}

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