/**
 * Liquid Glass Theme - Voxel Digital 2025
 * Inspirado no design Liquid Glass da Apple
 * Gerado por: Claude (Cursor AI)
 * 
 * Glassmorphism moderno com efeitos premium
 */

/* ===== GLASS MORPHISM BASE ===== */

.glass {
  background: rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.3);
  box-shadow: 
    0 8px 32px 0 rgba(31, 38, 135, 0.15),
    inset 0 1px 0 0 rgba(255, 255, 255, 0.4);
}

.glass-dark {
  background: rgba(0, 0, 0, 0.3);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 
    0 8px 32px 0 rgba(0, 0, 0, 0.37),
    inset 0 1px 0 0 rgba(255, 255, 255, 0.1);
}

.glass-ultra {
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(40px) saturate(200%);
  -webkit-backdrop-filter: blur(40px) saturate(200%);
  border: 1px solid rgba(255, 255, 255, 0.2);
}

/* ===== LIQUID GRADIENT BACKGROUNDS ===== */

.liquid-gradient-1 {
  background: linear-gradient(
    135deg,
    #667eea 0%,
    #764ba2 25%,
    #f093fb 50%,
    #4facfe 75%,
    #00f2fe 100%
  );
  background-size: 400% 400%;
  animation: liquidFlow 15s ease infinite;
}

.liquid-gradient-2 {
  background: linear-gradient(
    -45deg,
    #ee7752,
    #e73c7e,
    #23a6d5,
    #23d5ab
  );
  background-size: 400% 400%;
  animation: liquidFlow 12s ease infinite;
}

.liquid-gradient-3 {
  background: linear-gradient(
    135deg,
    #0066CC,
    #00A8E8,
    #3385D6,
    #0052A3
  );
  background-size: 400% 400%;
  animation: liquidFlow 10s ease infinite;
}

.liquid-gradient-voxel {
  background: linear-gradient(
    135deg,
    rgba(237, 28, 36, 0.9) 0%,
    rgba(192, 17, 25, 0.9) 50%,
    rgba(240, 78, 84, 0.9) 100%
  );
  background-size: 200% 200%;
  animation: liquidFlow 8s ease infinite;
}

@keyframes liquidFlow {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

/* ===== LIQUID SHAPES (Floating blobs) ===== */

.liquid-shape {
  position: absolute;
  border-radius: 50%;
  filter: blur(60px);
  opacity: 0.6;
  mix-blend-mode: multiply;
  animation: float 20s ease-in-out infinite;
  z-index: -1;
}

.liquid-shape-1 {
  width: 500px;
  height: 500px;
  top: -200px;
  left: -100px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  animation-delay: 0s;
}

.liquid-shape-2 {
  width: 400px;
  height: 400px;
  top: 40%;
  right: -100px;
  background: linear-gradient(135deg, #f093fb 0%, #4facfe 100%);
  animation-delay: 3s;
}

.liquid-shape-3 {
  width: 350px;
  height: 350px;
  bottom: -150px;
  left: 30%;
  background: linear-gradient(135deg, #00f2fe 0%, #23d5ab 100%);
  animation-delay: 6s;
}

@keyframes float {
  0%, 100% {
    transform: translate(0, 0) scale(1);
  }
  33% {
    transform: translate(30px, -30px) scale(1.1);
  }
  66% {
    transform: translate(-20px, 20px) scale(0.9);
  }
}

/* ===== GLASS HEADER ===== */

.header--glass {
  background: rgba(255, 255, 255, 0.8);
  backdrop-filter: blur(30px) saturate(180%);
  -webkit-backdrop-filter: blur(30px) saturate(180%);
  border-bottom: 1px solid rgba(255, 255, 255, 0.3);
  box-shadow: 
    0 8px 32px 0 rgba(31, 38, 135, 0.1),
    inset 0 -1px 0 0 rgba(255, 255, 255, 0.6);
}

.header--glass.header--scrolled {
  background: rgba(255, 255, 255, 0.95);
  box-shadow: 
    0 8px 32px 0 rgba(31, 38, 135, 0.15),
    inset 0 -1px 0 0 rgba(255, 255, 255, 0.8);
}

/* ===== GLASS CARDS ===== */

.card--glass {
  background: rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.3);
  box-shadow: 
    0 8px 32px 0 rgba(31, 38, 135, 0.15),
    inset 0 1px 0 0 rgba(255, 255, 255, 0.5);
  transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);
}

.card--glass:hover {
  background: rgba(255, 255, 255, 0.85);
  transform: translateY(-8px) scale(1.02);
  box-shadow: 
    0 16px 48px 0 rgba(31, 38, 135, 0.25),
    inset 0 1px 0 0 rgba(255, 255, 255, 0.6);
  border-color: rgba(255, 255, 255, 0.5);
}

.card--glass-dark {
  background: rgba(0, 0, 0, 0.4);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: var(--color-light);
}

.card--glass-dark:hover {
  background: rgba(0, 0, 0, 0.5);
  border-color: rgba(255, 255, 255, 0.25);
}

/* ===== GLASS BUTTONS ===== */

.btn--glass {
  background: rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(10px) saturate(180%);
  -webkit-backdrop-filter: blur(10px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.3);
  color: var(--color-dark);
  font-weight: var(--font-weight-semibold);
  box-shadow: 
    0 4px 16px 0 rgba(31, 38, 135, 0.15),
    inset 0 1px 0 0 rgba(255, 255, 255, 0.4);
  transition: all 0.3s cubic-bezier(0.23, 1, 0.32, 1);
}

.btn--glass:hover {
  background: rgba(255, 255, 255, 0.35);
  transform: translateY(-2px);
  box-shadow: 
    0 8px 24px 0 rgba(31, 38, 135, 0.25),
    inset 0 1px 0 0 rgba(255, 255, 255, 0.5);
}

.btn--glass-primary {
  background: rgba(237, 28, 36, 0.9);
  backdrop-filter: blur(10px) saturate(180%);
  -webkit-backdrop-filter: blur(10px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.3);
  color: white;
  box-shadow: 
    0 8px 24px 0 rgba(237, 28, 36, 0.4),
    inset 0 1px 0 0 rgba(255, 255, 255, 0.3);
}

.btn--glass-primary:hover {
  background: rgba(192, 17, 25, 0.95);
  box-shadow: 
    0 12px 32px 0 rgba(237, 28, 36, 0.5),
    inset 0 1px 0 0 rgba(255, 255, 255, 0.4);
}

/* ===== GLASS HERO ===== */

.hero--glass {
  position: relative;
  overflow: hidden;
  background: transparent;
}

.hero--glass::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    135deg,
    rgba(0, 102, 204, 0.1) 0%,
    rgba(0, 168, 232, 0.1) 50%,
    rgba(51, 133, 214, 0.1) 100%
  );
  z-index: 0;
}

.hero__glass-panel {
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(30px) saturate(180%);
  -webkit-backdrop-filter: blur(30px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: var(--border-radius-3xl);
  padding: var(--space-16);
  box-shadow: 
    0 16px 48px 0 rgba(31, 38, 135, 0.2),
    inset 0 1px 0 0 rgba(255, 255, 255, 0.3);
  position: relative;
  z-index: 1;
}

/* ===== FROSTED GLASS EFFECT ===== */

.frosted {
  background: rgba(255, 255, 255, 0.5);
  backdrop-filter: blur(15px) saturate(150%);
  -webkit-backdrop-filter: blur(15px) saturate(150%);
  border: 1px solid rgba(255, 255, 255, 0.25);
}

.frosted-dark {
  background: rgba(0, 0, 0, 0.25);
  backdrop-filter: blur(15px) saturate(150%);
  -webkit-backdrop-filter: blur(15px) saturate(150%);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: var(--color-light);
}

/* ===== LIQUID METAL EFFECT ===== */

.liquid-metal {
  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.9) 0%,
    rgba(229, 229, 229, 0.9) 100%
  );
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.4);
  box-shadow: 
    0 8px 32px 0 rgba(31, 38, 135, 0.15),
    inset 0 1px 0 0 rgba(255, 255, 255, 0.6),
    inset 0 -1px 0 0 rgba(0, 0, 0, 0.05);
  position: relative;
  overflow: hidden;
}

.liquid-metal::before {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: linear-gradient(
    45deg,
    transparent 30%,
    rgba(255, 255, 255, 0.3) 50%,
    transparent 70%
  );
  animation: shine 3s ease-in-out infinite;
}

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

/* ===== GLASS MODAL ===== */

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

.modal--glass .modal__content {
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(30px) saturate(180%);
  -webkit-backdrop-filter: blur(30px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.5);
  box-shadow: 
    0 24px 64px 0 rgba(31, 38, 135, 0.3),
    inset 0 1px 0 0 rgba(255, 255, 255, 0.6);
}

/* ===== GLASS FORM INPUTS ===== */

.form__input--glass,
.form__textarea--glass,
.form__select--glass {
  background: rgba(255, 255, 255, 0.5);
  backdrop-filter: blur(10px) saturate(150%);
  -webkit-backdrop-filter: blur(10px) saturate(150%);
  border: 1px solid rgba(255, 255, 255, 0.3);
  box-shadow: inset 0 2px 4px 0 rgba(31, 38, 135, 0.05);
  transition: all 0.3s ease;
}

.form__input--glass:focus,
.form__textarea--glass:focus,
.form__select--glass:focus {
  background: rgba(255, 255, 255, 0.7);
  border-color: rgba(237, 28, 36, 0.5);
  box-shadow: 
    inset 0 2px 4px 0 rgba(31, 38, 135, 0.05),
    0 0 0 3px rgba(237, 28, 36, 0.1);
}

/* ===== GLASS NAVIGATION ===== */

.nav--glass .nav__link {
  position: relative;
  transition: all 0.3s ease;
}

.nav--glass .nav__link::before {
  content: '';
  position: absolute;
  bottom: -4px;
  left: 50%;
  transform: translateX(-50%) scaleX(0);
  width: 100%;
  height: 2px;
  background: linear-gradient(
    90deg,
    transparent,
    var(--color-primary),
    transparent
  );
  transition: transform 0.3s ease;
}

.nav--glass .nav__link:hover::before,
.nav--glass .nav__link--active::before {
  transform: translateX(-50%) scaleX(1);
}

/* ===== GLASS FOOTER ===== */

.footer--glass {
  background: rgba(26, 26, 26, 0.9);
  backdrop-filter: blur(30px) saturate(180%);
  -webkit-backdrop-filter: blur(30px) saturate(180%);
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: inset 0 1px 0 0 rgba(255, 255, 255, 0.05);
}

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

@keyframes liquidPulse {
  0%, 100% {
    transform: scale(1);
    opacity: 1;
  }
  50% {
    transform: scale(1.05);
    opacity: 0.8;
  }
}

.liquid-pulse {
  animation: liquidPulse 3s ease-in-out infinite;
}

@keyframes liquidRotate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

.liquid-rotate {
  animation: liquidRotate 20s linear infinite;
}

/* ===== IRIDESCENT EFFECT (Apple style) ===== */

.iridescent {
  background: linear-gradient(
    125deg,
    #667eea 0%,
    #764ba2 20%,
    #f093fb 40%,
    #4facfe 60%,
    #00f2fe 80%,
    #667eea 100%
  );
  background-size: 200% 200%;
  animation: iridescence 10s ease infinite;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

@keyframes iridescence {
  0%, 100% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
}

/* ===== GLASS CARD GRID ===== */

.glass-grid {
  display: grid;
  gap: var(--space-6);
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}

.glass-grid__item {
  position: relative;
  overflow: hidden;
}

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

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

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

@media (max-width: 767px) {
  .liquid-shape-1,
  .liquid-shape-2,
  .liquid-shape-3 {
    display: none;
  }
  
  .hero__glass-panel {
    padding: var(--space-8);
  }
  
  .glass,
  .glass-dark,
  .card--glass {
    backdrop-filter: blur(15px) saturate(150%);
    -webkit-backdrop-filter: blur(15px) saturate(150%);
  }
}

/* ===== PERFORMANCE OPTIMIZATION ===== */

@media (prefers-reduced-motion: reduce) {
  .liquid-gradient-1,
  .liquid-gradient-2,
  .liquid-gradient-3,
  .liquid-gradient-voxel,
  .liquid-shape,
  .liquid-pulse,
  .liquid-rotate,
  .iridescent {
    animation: none;
  }
  
  .liquid-metal::before {
    animation: none;
  }
}

/* ===== SAFARI SPECIFIC FIXES ===== */

@supports (-webkit-backdrop-filter: blur(20px)) or (backdrop-filter: blur(20px)) {
  .glass,
  .glass-dark,
  .card--glass,
  .btn--glass,
  .frosted,
  .frosted-dark,
  .liquid-metal {
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
  }
}

/* Fallback for browsers that don't support backdrop-filter */
@supports not ((-webkit-backdrop-filter: blur(20px)) or (backdrop-filter: blur(20px))) {
  .glass {
    background: rgba(255, 255, 255, 0.95);
  }
  
  .glass-dark {
    background: rgba(0, 0, 0, 0.85);
  }
  
  .card--glass {
    background: rgba(255, 255, 255, 0.95);
  }
}