/* Glass Morphism Effects - Core System */

/* Declaration order matters here, and not for the usual cascade reason: the CSS
   pipeline collapses `backdrop-filter` and `-webkit-backdrop-filter` into one
   declaration and keeps whichever was written last. Only one of the two ever
   reaches the browser, so the standard property goes second — the prefixed one
   alone leaves current Chrome with no blur at all. Safari below 18 then has no
   backdrop-filter to match and picks up the `@supports not` fallback at the
   bottom of this file. */

/* Base glass mixin */
.glass {
  background: var(--glass-bg);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));
  backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));
  border: 1px solid var(--glass-border);
  box-shadow: var(--glass-shadow);
  transition:
    transform var(--transition-base),
    box-shadow var(--transition-base),
    border-color var(--transition-base),
    background-color var(--transition-base);
}

/* Glass panel component */
.glass-panel {
  background: var(--glass-bg);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));
  backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-lg);
  box-shadow:
    var(--glass-shadow),
    inset 0 1px 0 0 rgba(255, 255, 255, 0.1);
  position: relative;
  overflow: hidden;
}

/* Noise texture overlay for depth */
.glass-panel::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: repeating-linear-gradient(
    45deg,
    transparent,
    transparent 35px,
    rgba(255, 255, 255, 0.01) 35px,
    rgba(255, 255, 255, 0.01) 70px
  );
  pointer-events: none;
  opacity: 0.4;
}

/* Interactive glass card */
.glass-card {
  background: var(--glass-bg);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));
  backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--glass-shadow);
  transition:
    transform var(--transition-base),
    box-shadow var(--transition-base),
    border-color var(--transition-base),
    background-color var(--transition-base);
  position: relative;
  overflow: hidden;
}

@media (hover: hover) {
  .glass-card:hover {
    transform: translateY(-2px);
    box-shadow:
      0 12px 40px 0 rgba(31, 38, 135, 0.25),
      inset 0 1px 0 0 rgba(255, 255, 255, 0.15);
    border-color: rgba(255, 255, 255, 0.25);
  }
}

/* Glass button */
.glass-button {
  background: var(--glass-bg);
  -webkit-backdrop-filter: blur(var(--glass-blur-sm)) saturate(var(--glass-sat));
  backdrop-filter: blur(var(--glass-blur-sm)) saturate(var(--glass-sat));
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-md);
  padding: var(--space-sm) var(--space-lg);
  color: var(--color-text);
  font-weight: 500;
  transition:
    background-color var(--transition-fast),
    transform var(--transition-fast),
    box-shadow var(--transition-fast);
  position: relative;
  overflow: hidden;
  cursor: pointer;
}

.glass-button::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.2),
    transparent
  );
  transition: left var(--transition-slow);
}

@media (hover: hover) {
  .glass-button:hover::before {
    left: 100%;
  }

  .glass-button:hover {
    background: rgba(255, 255, 255, 0.15);
    transform: translateY(-1px);
    box-shadow: 0 4px 20px 0 rgba(31, 38, 135, 0.2);
  }
}

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

/* Glass navigation bar */
.glass-nav {
  background: var(--glass-bg-solid);
  -webkit-backdrop-filter: blur(var(--glass-blur-lg)) saturate(var(--glass-sat));
  backdrop-filter: blur(var(--glass-blur-lg)) saturate(var(--glass-sat));
  border-bottom: 1px solid var(--glass-border);
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
  position: sticky;
  top: 0;
  z-index: var(--z-sticky);
}

/* Glass divider */
.glass-divider {
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent,
    var(--glass-border),
    transparent
  );
  border: none;
  margin: var(--space-xl) 0;
}

/* Fallback for browsers without backdrop-filter support */
@supports not (backdrop-filter: blur(1px)) {
  .glass,
  .glass-panel,
  .glass-card,
  .glass-button,
  .glass-nav {
    background: var(--color-surface);
    opacity: 0.95;
  }
}

/* High contrast mode adjustments */
@media (prefers-contrast: high) {
  .glass,
  .glass-panel,
  .glass-card {
    border-width: 2px;
  }
}