/* ====================================
   LIQUID GLASS DESIGN SYSTEM
   Medcast Media - Subtle & Professional
   ==================================== */

/* Base Glass Materials - SUBTLE & PROFESSIONAL */
.glass-light {
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(12px) saturate(120%);
  -webkit-backdrop-filter: blur(12px) saturate(120%);
  border: 1px solid rgba(255, 255, 255, 0.3);
}

.glass-dark {
  background: rgba(0, 0, 0, 0.85);
  backdrop-filter: blur(12px) saturate(120%);
  -webkit-backdrop-filter: blur(12px) saturate(120%);
  border: 1px solid rgba(255, 255, 255, 0.15);
}

.glass-subtle {
  background: rgba(255, 255, 255, 0.6);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.3);
}

/* Depth & Shadow System */
.glass-shadow-sm {
  box-shadow:
    0 2px 8px rgba(0, 0, 0, 0.04),
    0 1px 2px rgba(0, 0, 0, 0.06),
    inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.glass-shadow-md {
  box-shadow:
    0 4px 16px rgba(0, 0, 0, 0.08),
    0 2px 4px rgba(0, 0, 0, 0.06),
    inset 0 1px 0 rgba(255, 255, 255, 0.15);
}

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

/* Brand Color Glass Variants - SUBTLE & PROFESSIONAL */
.glass-rose {
  background: rgba(244, 63, 94, 0.08);
  backdrop-filter: blur(10px) saturate(130%);
  -webkit-backdrop-filter: blur(10px) saturate(130%);
  border: 1px solid rgba(244, 63, 94, 0.15);
}

.glass-rose-strong {
  background: rgba(244, 63, 94, 0.12);
  backdrop-filter: blur(12px) saturate(140%);
  -webkit-backdrop-filter: blur(12px) saturate(140%);
  border: 1px solid rgba(244, 63, 94, 0.2);
}

/* Specular Highlights (Liquid Glass signature) - SUBTLE VERSION */
.glass-specular {
  position: relative;
}

.glass-specular::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.5) 50%,
    transparent
  );
  opacity: 0.4;
}

.glass-specular::after {
  content: '';
  position: absolute;
  top: 0;
  left: 10%;
  right: 10%;
  height: 60px;
  background: radial-gradient(
    ellipse at top,
    rgba(255, 255, 255, 0.08) 0%,
    transparent 60%
  );
  pointer-events: none;
}

/* Fluid Animations */
@keyframes glassFloat {
  0%, 100% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(-4px);
  }
}

.glass-hover {
  transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.glass-hover:hover {
  transform: translateY(-1px) scale(1.005);
  box-shadow:
    0 8px 32px rgba(0, 0, 0, 0.1),
    0 4px 8px rgba(0, 0, 0, 0.08),
    inset 0 1px 2px rgba(255, 255, 255, 0.2);
}

/* Motion Curves (Apple-style) - SUBTLE & PROFESSIONAL */
.glass-transition-smooth {
  transition: all 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.glass-transition-spring {
  transition: all 0.4s cubic-bezier(0.34, 1.25, 0.64, 1);
}

/* Button Glass - SUBTLE & PROFESSIONAL */
.btn-glass-rose {
  background: linear-gradient(
    135deg,
    rgba(244, 63, 94, 0.95) 0%,
    rgba(190, 24, 93, 0.98) 100%
  );
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.15);
  box-shadow:
    0 3px 12px rgba(244, 63, 94, 0.25),
    inset 0 1px 0 rgba(255, 255, 255, 0.2),
    inset 0 -1px 0 rgba(0, 0, 0, 0.08);
  position: relative;
  overflow: hidden;
  transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.btn-glass-rose::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.15),
    transparent
  );
  transition: left 0.6s ease;
}

.btn-glass-rose:hover::before {
  left: 100%;
}

.btn-glass-rose:hover {
  transform: translateY(-1px) scale(1.01);
  box-shadow:
    0 6px 20px rgba(244, 63, 94, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.25),
    inset 0 -1px 0 rgba(0, 0, 0, 0.1);
}

.btn-glass-rose:active {
  transform: translateY(0) scale(0.99);
}

/* Form Glass - SUBTLE & PROFESSIONAL for maximum readability */
.glass-input {
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border: 1px solid rgba(0, 0, 0, 0.12);
  box-shadow:
    0 1px 4px rgba(0, 0, 0, 0.05),
    inset 0 1px 2px rgba(255, 255, 255, 0.95);
  transition: all 0.25s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.glass-input:focus {
  background: rgba(255, 255, 255, 0.98);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-color: rgba(244, 63, 94, 0.4);
  box-shadow:
    0 2px 12px rgba(244, 63, 94, 0.1),
    0 0 0 3px rgba(244, 63, 94, 0.08),
    inset 0 1px 2px rgba(255, 255, 255, 1);
  outline: none;
}

/* GPU Acceleration for Performance */
.glass-light,
.glass-dark,
.glass-subtle,
.glass-rose,
.btn-glass-rose {
  will-change: backdrop-filter, transform;
  transform: translateZ(0);
}

.glass-hover:not(:hover) {
  will-change: auto;
}

/* Browser Compatibility Fallbacks */
@supports not (backdrop-filter: blur(20px)) {
  .glass-light {
    background: rgba(255, 255, 255, 0.95);
  }

  .glass-dark {
    background: rgba(0, 0, 0, 0.95);
  }

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

  .glass-rose {
    background: rgba(244, 63, 94, 0.3);
  }

  .btn-glass-rose {
    background: linear-gradient(
      135deg,
      rgba(244, 63, 94, 1) 0%,
      rgba(190, 24, 93, 1) 100%
    );
  }
}

/* Reduced Motion Support - Accessibility */
@media (prefers-reduced-motion: reduce) {
  .glass-hover,
  .glass-transition-smooth,
  .glass-transition-spring,
  .btn-glass-rose {
    transition: none;
  }

  .glass-specular::before,
  .glass-specular::after {
    animation: none;
    opacity: 0.1;
  }

  .btn-glass-rose::before {
    display: none;
  }

  @keyframes glassFloat {
    0%, 100% {
      transform: translateY(0px);
    }
  }
}

/* High Contrast Mode - Accessibility */
@media (prefers-contrast: high) {
  .glass-light,
  .glass-dark,
  .glass-subtle {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }

  .glass-light {
    background: #ffffff;
    border: 2px solid #000000;
  }

  .glass-dark {
    background: #000000;
    border: 2px solid #ffffff;
  }

  .btn-glass-rose {
    background: #F43F5E;
    border: 2px solid #ffffff;
  }
}

/* Mobile Optimization - Simplified effects */
@media (max-width: 768px) {
  .glass-light,
  .glass-subtle {
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
  }

  .glass-dark {
    backdrop-filter: blur(10px) saturate(110%);
    -webkit-backdrop-filter: blur(10px) saturate(110%);
  }
}

/* Desktop Enhancement - Full effects */
@media (min-width: 769px) {
  .glass-light,
  .glass-subtle {
    backdrop-filter: blur(12px) saturate(120%);
    -webkit-backdrop-filter: blur(12px) saturate(120%);
  }
}

/* Hero Glass Pulse Animation - SUBTLE & PROFESSIONAL */
.hero-glass-pulse {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: radial-gradient(
    circle at 10% 50%,
    rgba(244, 63, 94, 0.04) 0%,
    transparent 50%
  );
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  animation: glassPulse 8s infinite alternate ease-in-out;
  pointer-events: none;
  z-index: 1;
}

@keyframes glassPulse {
  0% {
    opacity: 0;
    transform: scale(1);
  }
  50% {
    opacity: 0.15;
    transform: scale(1.02);
  }
  100% {
    opacity: 0;
    transform: scale(1);
  }
}