/* ==========================================================================
   Liquid Glass Design System
   3 levels: Basic → Specular → Refraction
   ========================================================================== */

/* ── Level 1: Basic Glass ── */

.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:
    0 8px 32px rgba(0, 0, 0, 0.07),
    0 2px 8px rgba(0, 0, 0, 0.04),
    inset 0 1px 0 var(--glass-highlight);
}

.glass--light {
  background: var(--glass-bg-light);
}

.glass--heavy {
  backdrop-filter: blur(var(--glass-blur-heavy));
  -webkit-backdrop-filter: blur(var(--glass-blur-heavy));
}

/* ── Level 2: Specular Glass (catch light + edge highlight) ── */

.glass-specular {
  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:
    0 8px 32px rgba(0, 0, 0, 0.07),
    0 2px 8px rgba(0, 0, 0, 0.04),
    inset 0 1px 0 var(--glass-highlight);
  position: relative;
  overflow: hidden;
}

/* Catch light — diagonal gradient */
.glass-specular::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.50) 0%,
    rgba(255, 255, 255, 0.10) 50%,
    transparent 100%
  );
  pointer-events: none;
  z-index: 1;
}

/* Edge highlight — top border glow */
.glass-specular::after {
  content: '';
  position: absolute;
  top: 0;
  left: 10%;
  right: 10%;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(91, 223, 176, 0.35),
    rgba(255, 255, 255, 0.60),
    rgba(91, 223, 176, 0.35),
    transparent
  );
  pointer-events: none;
  z-index: 1;
}

/* ── Level 3: Refraction Glass (SVG filter) ── */

@supports (filter: url(#glass-refraction)) {
  .glass-refraction {
    filter: url(#glass-refraction);
  }
}

/* ── Glass hover states ── */

.glass-interactive {
  transition:
    border-color var(--duration-base) var(--ease-out),
    box-shadow var(--duration-base) var(--ease-out),
    transform var(--duration-base) var(--ease-out),
    background var(--duration-base) var(--ease-out);
}

.glass-interactive:hover {
  border-color: var(--glass-border-hover);
  box-shadow:
    0 12px 48px rgba(0, 0, 0, 0.10),
    0 2px 8px rgba(0, 0, 0, 0.06),
    inset 0 1px 0 rgba(255, 255, 255, 0.80),
    0 0 0 1px rgba(91, 223, 176, 0.25);
  transform: translateY(-2px);
}

/* ── Glass shine on hover (animated gradient sweep) ── */

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

.glass-shine::before {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: linear-gradient(
    45deg,
    transparent 40%,
    rgba(255, 255, 255, 0.20) 45%,
    rgba(255, 255, 255, 0.45) 50%,
    rgba(255, 255, 255, 0.20) 55%,
    transparent 60%
  );
  transform: translateX(-100%);
  transition: none;
  pointer-events: none;
  z-index: 2;
}

.glass-shine:hover::before {
  transform: translateX(100%);
  transition: transform 0.8s var(--ease-out);
}

/* ── Orbs (floating glass elements) ── */

.glass-orb {
  position: absolute;
  border-radius: 50%;
  background: radial-gradient(
    circle at 30% 30%,
    rgba(91, 223, 176, 0.12),
    rgba(91, 223, 176, 0.03) 50%,
    transparent 70%
  );
  backdrop-filter: blur(40px);
  -webkit-backdrop-filter: blur(40px);
  border: 1px solid rgba(91, 223, 176, 0.12);
  pointer-events: none;
}