Liquid Glass Design System

/* Base Glass Container Styles */
.glass-container {
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  box-shadow: 
    0 25px 50px -12px rgba(0, 0, 0, 0.25),
    0 0 0 1px rgba(255, 255, 255, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

.glass-card {
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  box-shadow: 
    0 15px 35px rgba(0, 0, 0, 0.1),
    0 0 0 1px rgba(255, 255, 255, 0.25),
    inset 0 1px 0 rgba(255, 255, 255, 0.4);
}

.glass-text-card {
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 
    0 8px 25px rgba(0, 0, 0, 0.1),
    0 0 0 1px rgba(255, 255, 255, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

.glass-dots {
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 
    0 5px 15px rgba(0, 0, 0, 0.1),
    0 0 0 1px rgba(255, 255, 255, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.25);
}

/* Navigation Button Styles */
.nav-button {
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  box-shadow: 
    0 10px 25px rgba(0, 0, 0, 0.15),
    0 0 0 1px rgba(255, 255, 255, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.4);
}

.liquid-glow:hover {
  box-shadow: 
    0 15px 35px rgba(59, 130, 246, 0.25),
    0 0 0 1px rgba(255, 255, 255, 0.4),
    inset 0 1px 0 rgba(255, 255, 255, 0.5),
    0 0 20px rgba(59, 130, 246, 0.3);
}

/* Floating Elements */
.floating-orb {
  filter: blur(1px);
}

/* Slider Specific Styles */
.liquid-glass-slider {
  box-shadow: 
    0 20px 40px -10px rgba(0, 0, 0, 0.3),
    0 0 0 1px rgba(255, 255, 255, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

.glass-label {
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 
    0 8px 20px rgba(0, 0, 0, 0.3),
    0 0 0 1px rgba(255, 255, 255, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

.glass-instructions {
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  box-shadow: 
    0 10px 25px rgba(0, 0, 0, 0.3),
    0 0 0 1px rgba(255, 255, 255, 0.15),
    inset 0 1px 0 rgba(255, 255, 255, 0.25);
}

.liquid-line {
  filter: drop-shadow(0 0 10px rgba(62, 207, 243, 0.6)) drop-shadow(0 0 20px rgba(59, 130, 246, 0.4));
}

.liquid-handle-main {
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  box-shadow: 
    0 15px 35px rgba(0, 0, 0, 0.2),
    0 0 0 1px rgba(255, 255, 255, 0.3),
    inset 0 2px 0 rgba(255, 255, 255, 0.4),
    0 0 30px rgba(59, 130, 246, 0.3);
}

.liquid-handle:hover .liquid-handle-main {
  box-shadow: 
    0 20px 45px rgba(0, 0, 0, 0.25),
    0 0 0 1px rgba(255, 255, 255, 0.4),
    inset 0 2px 0 rgba(255, 255, 255, 0.5),
    0 0 40px rgba(144, 255, 255, 0.5),
    0 0 60px rgba(147, 51, 234, 0.3);
}

/* Shimmer Effects */
.liquid-shimmer {
  width: 50%;
  animation: shimmer 3s infinite;
}

.liquid-shimmer-slow {
  width: 30%;
  animation: shimmer-slow 4s infinite;
}

/* Animations */
@keyframes shimmer {
  0% { transform: translateX(-200%) skewX(-12deg); }
  100% { transform: translateX(400%) skewX(-12deg); }
}

@keyframes shimmer-slow {
  0% { transform: translateX(-200%) skewX(-12deg); }
  100% { transform: translateX(400%) skewX(-12deg); }
}

@keyframes float-slow {
  0%, 100% { transform: translate(0, 0) rotate(0deg); }
  50% { transform: translate(20px, -20px) rotate(180deg); }
}

@keyframes float-medium {
  0%, 100% { transform: translate(0, 0) rotate(0deg); }
  50% { transform: translate(-15px, 15px) rotate(-180deg); }
}

@keyframes float-fast {
  0%, 100% { transform: translate(0, 0) rotate(0deg); }
  50% { transform: translate(25px, -25px) rotate(360deg); }
}

@keyframes liquid-flow {
  0% { transform: translateY(-100%); opacity: 0; }
  50% { opacity: 1; }
  100% { transform: translateY(100%); opacity: 0; }
}

@keyframes liquid-pulse {
  0%, 100% { transform: scaleY(1); opacity: 1; }
  50% { transform: scaleY(1.2); opacity: 0.8; }
}

@keyframes pulse-ring {
  0% { transform: scale(1); opacity: 0.3; }
  50% { transform: scale(1.1); opacity: 0.1; }
  100% { transform: scale(1.2); opacity: 0; }
}

@keyframes pulse-subtle {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.7; transform: scale(1.05); }
}

@keyframes ripple {
  0% { transform: scale(0) rotate(0deg); opacity: 1; }
  100% { transform: scale(2) rotate(180deg); opacity: 0; }
}

/* Animation Classes */
.animate-float-slow { animation: float-slow 8s ease-in-out infinite; }
.animate-float-medium { animation: float-medium 6s ease-in-out infinite; }
.animate-float-fast { animation: float-fast 4s ease-in-out infinite; }
.animate-pulse-subtle { animation: pulse-subtle 2s ease-in-out infinite; }
.animate-shimmer { animation: shimmer 3s infinite; }
.animate-shimmer-slow { animation: shimmer-slow 4s infinite; }
.animate-liquid-flow { animation: liquid-flow 2s ease-in-out infinite; }
.animate-liquid-pulse { animation: liquid-pulse 1.5s ease-in-out infinite; }
.animate-pulse-ring { animation: pulse-ring 2s ease-out infinite; }
.animate-ripple { animation: ripple 0.6s ease-out; }


/* Liquid Glass Design System */

/* Base Glass Container Styles */
.glass-container {
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  box-shadow: 
    0 25px 50px -12px rgba(0, 0, 0, 0.25),
    0 0 0 1px rgba(255, 255, 255, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

.glass-card {
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  box-shadow: 
    0 15px 35px rgba(0, 0, 0, 0.1),
    0 0 0 1px rgba(255, 255, 255, 0.25),
    inset 0 1px 0 rgba(255, 255, 255, 0.4);
}

.glass-text-card {
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 
    0 8px 25px rgba(0, 0, 0, 0.1),
    0 0 0 1px rgba(255, 255, 255, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

.glass-dots {
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 
    0 5px 15px rgba(0, 0, 0, 0.1),
    0 0 0 1px rgba(255, 255, 255, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.25);
}

/* Navigation Button Styles */
.nav-button {
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  box-shadow: 
    0 10px 25px rgba(0, 0, 0, 0.15),
    0 0 0 1px rgba(255, 255, 255, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.4);
}

.liquid-glow:hover {
  box-shadow: 
    0 15px 35px rgba(59, 130, 246, 0.25),
    0 0 0 1px rgba(255, 255, 255, 0.4),
    inset 0 1px 0 rgba(255, 255, 255, 0.5),
    0 0 20px rgba(59, 130, 246, 0.3);
}

/* Floating Elements */
.floating-orb {
  filter: blur(1px);
}

/* Slider Specific Styles */
.liquid-glass-slider {
  box-shadow: 
    0 20px 40px -10px rgba(0, 0, 0, 0.3),
    0 0 0 1px rgba(255, 255, 255, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

.glass-label {
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 
    0 8px 20px rgba(0, 0, 0, 0.3),
    0 0 0 1px rgba(255, 255, 255, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

.glass-instructions {
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  box-shadow: 
    0 10px 25px rgba(0, 0, 0, 0.3),
    0 0 0 1px rgba(255, 255, 255, 0.15),
    inset 0 1px 0 rgba(255, 255, 255, 0.25);
}

.liquid-line {
  filter: drop-shadow(0 0 10px rgba(62, 207, 243, 0.6)) drop-shadow(0 0 20px rgba(59, 130, 246, 0.4));
}

.liquid-handle-main {
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  box-shadow: 
    0 15px 35px rgba(0, 0, 0, 0.2),
    0 0 0 1px rgba(255, 255, 255, 0.3),
    inset 0 2px 0 rgba(255, 255, 255, 0.4),
    0 0 30px rgba(59, 130, 246, 0.3);
}

.liquid-handle:hover .liquid-handle-main {
  box-shadow: 
    0 20px 45px rgba(0, 0, 0, 0.25),
    0 0 0 1px rgba(255, 255, 255, 0.4),
    inset 0 2px 0 rgba(255, 255, 255, 0.5),
    0 0 40px rgba(144, 255, 255, 0.5),
    0 0 60px rgba(147, 51, 234, 0.3);
}

/* Shimmer Effects */
.liquid-shimmer {
  width: 50%;
  animation: shimmer 3s infinite;
}

.liquid-shimmer-slow {
  width: 30%;
  animation: shimmer-slow 4s infinite;
}

/* Animations */
@keyframes shimmer {
  0% { transform: translateX(-200%) skewX(-12deg); }
  100% { transform: translateX(400%) skewX(-12deg); }
}

@keyframes shimmer-slow {
  0% { transform: translateX(-200%) skewX(-12deg); }
  100% { transform: translateX(400%) skewX(-12deg); }
}

@keyframes float-slow {
  0%, 100% { transform: translate(0, 0) rotate(0deg); }
  50% { transform: translate(20px, -20px) rotate(180deg); }
}

@keyframes float-medium {
  0%, 100% { transform: translate(0, 0) rotate(0deg); }
  50% { transform: translate(-15px, 15px) rotate(-180deg); }
}

@keyframes float-fast {
  0%, 100% { transform: translate(0, 0) rotate(0deg); }
  50% { transform: translate(25px, -25px) rotate(360deg); }
}

@keyframes liquid-flow {
  0% { transform: translateY(-100%); opacity: 0; }
  50% { opacity: 1; }
  100% { transform: translateY(100%); opacity: 0; }
}

@keyframes liquid-pulse {
  0%, 100% { transform: scaleY(1); opacity: 1; }
  50% { transform: scaleY(1.2); opacity: 0.8; }
}

@keyframes pulse-ring {
  0% { transform: scale(1); opacity: 0.3; }
  50% { transform: scale(1.1); opacity: 0.1; }
  100% { transform: scale(1.2); opacity: 0; }
}

@keyframes pulse-subtle {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.7; transform: scale(1.05); }
}

@keyframes ripple {
  0% { transform: scale(0) rotate(0deg); opacity: 1; }
  100% { transform: scale(2) rotate(180deg); opacity: 0; }
}

/* Animation Classes */
.animate-float-slow { animation: float-slow 8s ease-in-out infinite; }
.animate-float-medium { animation: float-medium 6s ease-in-out infinite; }
.animate-float-fast { animation: float-fast 4s ease-in-out infinite; }
.animate-pulse-subtle { animation: pulse-subtle 2s ease-in-out infinite; }
.animate-shimmer { animation: shimmer 3s infinite; }
.animate-shimmer-slow { animation: shimmer-slow 4s infinite; }
.animate-liquid-flow { animation: liquid-flow 2s ease-in-out infinite; }
.animate-liquid-pulse { animation: liquid-pulse 1.5s ease-in-out infinite; }
.animate-pulse-ring { animation: pulse-ring 2s ease-out infinite; }
.animate-ripple { animation: ripple 0.6s ease-out; }