/* ===================================
   Antikythera Technologies Design System
   Glass Morphism + Tokyo Night Enhanced
   =================================== */

/* ===================================
   Glass Morphism Components
   =================================== */

/* Base Glass Container */
.glass {
  background: var(--glass-bg-primary);
  backdrop-filter: blur(var(--blur-md));
  -webkit-backdrop-filter: blur(var(--blur-md));
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  transition: all var(--transition-base);
}

.glass:hover {
  background: var(--glass-bg-secondary);
  border-color: var(--glass-border-light);
  box-shadow: var(--shadow-lg);
  transform: translateY(-2px);
}

/* Glass Variants */
.glass-light {
  background: var(--glass-bg-light);
  backdrop-filter: blur(var(--blur-sm));
  -webkit-backdrop-filter: blur(var(--blur-sm));
}

.glass-dark {
  background: var(--glass-bg-dark);
  backdrop-filter: blur(var(--blur-lg));
  -webkit-backdrop-filter: blur(var(--blur-lg));
}

.glass-clear {
  background: rgba(255, 255, 255, 0.02);
  backdrop-filter: blur(var(--blur-xl));
  -webkit-backdrop-filter: blur(var(--blur-xl));
}

/* Glass Card Component */
.glass-card {
  background: var(--glass-bg-primary);
  backdrop-filter: blur(var(--blur-md));
  -webkit-backdrop-filter: blur(var(--blur-md));
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-xl);
  padding: var(--space-xl);
  box-shadow: var(--shadow-md);
  transition: all var(--transition-base);
  position: relative;
  overflow: hidden;
}

.glass-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, 
    transparent,
    var(--glass-border-light) 50%,
    transparent
  );
  opacity: 0.6;
}

.glass-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-xl), var(--glow-blue);
  border-color: var(--glass-border-active);
}

/* Glass Button */
.glass-button {
  background: var(--glass-bg-secondary);
  backdrop-filter: blur(var(--blur-sm));
  -webkit-backdrop-filter: blur(var(--blur-sm));
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-md);
  padding: var(--space-md) var(--space-xl);
  color: var(--tn-text-primary);
  font-weight: 500;
  cursor: pointer;
  transition: all var(--transition-base);
  position: relative;
  overflow: hidden;
}

.glass-button::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  background: radial-gradient(circle, 
    rgba(122, 162, 247, 0.3) 0%,
    transparent 70%
  );
  transition: all var(--transition-slow);
  transform: translate(-50%, -50%);
}

.glass-button:hover {
  background: var(--glass-bg-light);
  border-color: var(--glass-border-active);
  transform: translateY(-2px);
  box-shadow: var(--shadow-md), var(--glow-blue);
}

.glass-button:hover::before {
  width: 300px;
  height: 300px;
}

.glass-button:active {
  transform: translateY(0);
  box-shadow: var(--shadow-sm);
}

/* Glass Input */
.glass-input {
  background: var(--glass-bg-secondary);
  backdrop-filter: blur(var(--blur-sm));
  -webkit-backdrop-filter: blur(var(--blur-sm));
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-md);
  padding: var(--space-md) var(--space-lg);
  color: var(--tn-text-primary);
  width: 100%;
  transition: all var(--transition-base);
  font-family: inherit;
}

.glass-input:focus {
  outline: none;
  background: var(--glass-bg-primary);
  border-color: var(--glass-border-active);
  box-shadow: 0 0 0 3px rgba(122, 162, 247, 0.1), var(--glow-blue);
}

.glass-input::placeholder {
  color: var(--tn-text-dim);
}

/* Glass Navigation */
.glass-nav {
  background: var(--glass-bg-dark);
  backdrop-filter: blur(var(--blur-lg));
  -webkit-backdrop-filter: blur(var(--blur-lg));
  border-bottom: 1px solid var(--glass-border);
  position: sticky;
  top: 0;
  z-index: var(--z-sticky);
  transition: all var(--transition-base);
}

.glass-nav.scrolled {
  background: rgba(26, 27, 38, 0.95);
  box-shadow: var(--shadow-lg);
}

/* Floating Elements */
.float-animation {
  animation: float 6s ease-in-out infinite;
}

@keyframes float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-20px); }
}

/* Glow Effects */
.glow-blue { box-shadow: var(--glow-blue); }
.glow-cyan { box-shadow: var(--glow-cyan); }
.glow-purple { box-shadow: var(--glow-purple); }
.glow-pink { box-shadow: var(--glow-pink); }

/* Gradient Backgrounds */
.gradient-blue-purple {
  background: linear-gradient(135deg, var(--tn-blue) 0%, var(--tn-purple) 100%);
}

.gradient-cyan-blue {
  background: linear-gradient(135deg, var(--tn-cyan) 0%, var(--tn-blue) 100%);
}

.gradient-pink-purple {
  background: linear-gradient(135deg, var(--tn-pink) 0%, var(--tn-purple) 100%);
}

.gradient-mesh {
  background: 
    radial-gradient(at 20% 80%, rgba(122, 162, 247, 0.15) 0%, transparent 50%),
    radial-gradient(at 80% 20%, rgba(187, 154, 247, 0.15) 0%, transparent 50%),
    radial-gradient(at 40% 40%, rgba(125, 207, 255, 0.1) 0%, transparent 50%),
    var(--tn-bg-primary);
}

/* Utility Classes */
.blur-sm { backdrop-filter: blur(var(--blur-sm)); }
.blur-md { backdrop-filter: blur(var(--blur-md)); }
.blur-lg { backdrop-filter: blur(var(--blur-lg)); }
.blur-xl { backdrop-filter: blur(var(--blur-xl)); }

.shadow-sm { box-shadow: var(--shadow-sm); }
.shadow-md { box-shadow: var(--shadow-md); }
.shadow-lg { box-shadow: var(--shadow-lg); }
.shadow-xl { box-shadow: var(--shadow-xl); }

/* Responsive Utilities */
@media (max-width: 768px) {
  .glass-card {
    padding: var(--space-lg);
  }
  
  .glass-button {
    padding: var(--space-sm) var(--space-lg);
  }
  
  /* Reduce blur on mobile for performance */
  .glass,
  .glass-card,
  .glass-nav {
    backdrop-filter: blur(var(--blur-sm));
    -webkit-backdrop-filter: blur(var(--blur-sm));
  }
}

/* Accessibility */
@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* Dark Mode Support (Already dark by default) */
@media (prefers-color-scheme: light) {
  /* Optional: Add light mode overrides if needed */
}