/**
 * NOCODEWORKS Glassmorphism Styles
 *
 * Modern glass-like UI elements with backdrop blur effect.
 * Adapts to each color palette for consistent theming.
 */

/* ============================================
   Glassmorphism Variables per Palette
   ============================================ */

/* Aizome (藍染) - Default */
:root,
[data-palette="aizome"] {
  --glass-bg: rgba(255, 255, 255, 0.1);
  --glass-bg-hover: rgba(255, 255, 255, 0.15);
  --glass-border: rgba(30, 58, 95, 0.2);
  --glass-shadow: 0 4px 30px rgba(30, 58, 95, 0.1);
  --glass-shadow-hover: 0 8px 40px rgba(30, 58, 95, 0.15);
  --glass-blur: 10px;
}

[data-theme="dark"][data-palette="aizome"],
[data-theme="dark"]:root {
  --glass-bg: rgba(107, 154, 196, 0.1);
  --glass-bg-hover: rgba(107, 154, 196, 0.15);
  --glass-border: rgba(107, 154, 196, 0.2);
  --glass-shadow: 0 4px 30px rgba(0, 0, 0, 0.3);
  --glass-shadow-hover: 0 8px 40px rgba(0, 0, 0, 0.4);
}

/* Washi (和紙) */
[data-palette="washi"] {
  --glass-bg: rgba(255, 255, 255, 0.08);
  --glass-bg-hover: rgba(255, 255, 255, 0.12);
  --glass-border: rgba(26, 22, 18, 0.15);
  --glass-shadow: 0 4px 30px rgba(26, 22, 18, 0.08);
  --glass-shadow-hover: 0 8px 40px rgba(26, 22, 18, 0.12);
}

[data-theme="dark"][data-palette="washi"] {
  --glass-bg: rgba(200, 195, 188, 0.1);
  --glass-bg-hover: rgba(200, 195, 188, 0.15);
  --glass-border: rgba(200, 195, 188, 0.15);
  --glass-shadow: 0 4px 30px rgba(0, 0, 0, 0.5);
  --glass-shadow-hover: 0 8px 40px rgba(0, 0, 0, 0.6);
}

/* Sakura (桜) */
[data-palette="sakura"] {
  --glass-bg: rgba(255, 255, 255, 0.12);
  --glass-bg-hover: rgba(255, 255, 255, 0.18);
  --glass-border: rgba(212, 114, 156, 0.2);
  --glass-shadow: 0 4px 30px rgba(212, 114, 156, 0.12);
  --glass-shadow-hover: 0 8px 40px rgba(212, 114, 156, 0.18);
}

[data-theme="dark"][data-palette="sakura"] {
  --glass-bg: rgba(232, 164, 190, 0.12);
  --glass-bg-hover: rgba(232, 164, 190, 0.18);
  --glass-border: rgba(232, 164, 190, 0.2);
  --glass-shadow: 0 4px 30px rgba(0, 0, 0, 0.3);
  --glass-shadow-hover: 0 8px 40px rgba(0, 0, 0, 0.4);
}

/* Matcha (抹茶) */
[data-palette="matcha"] {
  --glass-bg: rgba(255, 255, 255, 0.1);
  --glass-bg-hover: rgba(255, 255, 255, 0.15);
  --glass-border: rgba(74, 124, 78, 0.18);
  --glass-shadow: 0 4px 30px rgba(74, 124, 78, 0.1);
  --glass-shadow-hover: 0 8px 40px rgba(74, 124, 78, 0.15);
}

[data-theme="dark"][data-palette="matcha"] {
  --glass-bg: rgba(125, 181, 127, 0.12);
  --glass-bg-hover: rgba(125, 181, 127, 0.18);
  --glass-border: rgba(125, 181, 127, 0.2);
  --glass-shadow: 0 4px 30px rgba(0, 0, 0, 0.3);
  --glass-shadow-hover: 0 8px 40px rgba(0, 0, 0, 0.4);
}

/* Tsuki (月) */
[data-palette="tsuki"] {
  --glass-bg: rgba(255, 255, 255, 0.1);
  --glass-bg-hover: rgba(255, 255, 255, 0.15);
  --glass-border: rgba(124, 92, 191, 0.18);
  --glass-shadow: 0 4px 30px rgba(124, 92, 191, 0.12);
  --glass-shadow-hover: 0 8px 40px rgba(124, 92, 191, 0.18);
}

[data-theme="dark"][data-palette="tsuki"] {
  --glass-bg: rgba(163, 143, 212, 0.12);
  --glass-bg-hover: rgba(163, 143, 212, 0.18);
  --glass-border: rgba(163, 143, 212, 0.2);
  --glass-shadow: 0 4px 30px rgba(0, 0, 0, 0.4);
  --glass-shadow-hover: 0 8px 40px rgba(0, 0, 0, 0.5);
}

/* ============================================
   Glassmorphism Component Classes
   ============================================ */

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

.glass:hover {
  background: var(--glass-bg-hover);
  box-shadow: var(--glass-shadow-hover);
}

/* Glass card - for content sections */
.glass-card {
  background: var(--glass-bg);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--glass-shadow);
  padding: var(--space-lg);
  transition: all var(--transition-base) var(--ease-out);
}

.glass-card:hover {
  background: var(--glass-bg-hover);
  box-shadow: var(--glass-shadow-hover);
  transform: translateY(-2px);
}

@media (min-width: 768px) {
  .glass-card {
    padding: var(--space-xl);
  }
}

/* Glass navigation */
.glass-nav {
  background: var(--glass-bg);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--glass-border);
  box-shadow: var(--glass-shadow);
  position: sticky;
  top: 0;
  z-index: var(--z-sticky);
}

/* Glass panel - lighter glass effect */
.glass-panel {
  background: var(--glass-bg);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-md);
  padding: var(--space-md);
}

/* Glass overlay - for modals/dialogs */
.glass-overlay {
  background: var(--glass-bg);
  backdrop-filter: blur(15px);
  -webkit-backdrop-filter: blur(15px);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-xl);
  box-shadow: var(--glass-shadow-hover);
  padding: var(--space-2xl);
}

@media (max-width: 767px) {
  .glass-overlay {
    padding: var(--space-lg);
  }
}

/* Glass button */
.glass-button {
  background: var(--glass-bg);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-md);
  padding: var(--space-sm) var(--space-lg);
  cursor: pointer;
  transition: all var(--transition-fast) var(--ease-out);
  color: var(--nw-palette-text);
  font-weight: var(--font-medium);
}

.glass-button:hover {
  background: var(--glass-bg-hover);
  box-shadow: var(--glass-shadow);
  transform: translateY(-1px);
}

.glass-button:active {
  transform: translateY(0);
}

/* ============================================
   Fallback for browsers without backdrop-filter
   ============================================ */

@supports not (backdrop-filter: blur(10px)) {
  .glass,
  .glass-card,
  .glass-nav,
  .glass-panel,
  .glass-overlay,
  .glass-button {
    background: var(--nw-palette-surface);
    opacity: 0.95;
  }
}

/* ============================================
   Responsive adjustments
   ============================================ */

@media (max-width: 767px) {
  /* Reduce blur on mobile for performance */
  :root {
    --glass-blur: 8px;
  }

  .glass-card {
    padding: var(--space-md);
  }
}

/* Reduce motion for accessibility */
@media (prefers-reduced-motion: reduce) {
  .glass,
  .glass-card,
  .glass-button {
    transition: none;
  }

  .glass-card:hover,
  .glass-button:hover {
    transform: none;
  }
}