/* ============================================================
   Liquid glass material (v2: deeper, richer)
   ============================================================ */

.glass {
  position: relative;
  isolation: isolate;
  background:
    linear-gradient(160deg, rgba(255, 255, 255, 0.12), transparent 60%),
    var(--glass-fill);
  border: 1px solid var(--glass-border);
  border-radius: var(--r-lg);
  -webkit-backdrop-filter: blur(22px) saturate(190%) brightness(1.05);
  backdrop-filter: blur(22px) saturate(190%) brightness(1.05);
  box-shadow:
    inset 0 1px 0 0 var(--glass-hi),
    inset 0 -1px 1px 0 rgba(0, 0, 0, 0.05),
    var(--shadow-soft);
  overflow: hidden;
}

/* Specular rim: bright bevel hugging the border */
.glass::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(
    135deg,
    var(--glass-hi) 0%,
    rgba(174, 245, 253, 0.6) 22%,
    transparent 44%,
    transparent 58%,
    rgba(102, 198, 255, 0.4) 82%,
    rgba(174, 245, 253, 0.55) 100%
  );
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
  z-index: 2;
}

/* Lichte modus: alle witte glas-kaarten krijgen een diepblauw gradient-randje
   (var(--grad-text), dezelfde kleur als de accenttekst). Donkere kaarten (.on-dark)
   en de donkere modus houden het lichtcyaan specular-randje. */
[data-theme="light"] .glass:not(.on-dark)::before {
  background: var(--grad-text);
}

/* Lege laag voor varianten (.glass--glow). De gloed die de muis volgde is
   op 1 okt 2026 site-breed geschrapt: storend boven tabellen en infographics. */
.glass::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  z-index: 1;
}

.glass--strong {
  background:
    linear-gradient(160deg, rgba(255, 255, 255, 0.16), transparent 58%),
    var(--glass-fill-strong);
  -webkit-backdrop-filter: blur(34px) saturate(200%) brightness(1.06);
  backdrop-filter: blur(34px) saturate(200%) brightness(1.06);
}
.glass--thin {
  -webkit-backdrop-filter: blur(12px) saturate(160%);
  backdrop-filter: blur(12px) saturate(160%);
}

/* Cyan/blue glow halo */
.glass--glow {
  box-shadow:
    inset 0 1px 0 0 var(--glass-hi),
    0 0 0 1px var(--glass-border),
    0 40px 120px -34px var(--accent-glow),
    var(--shadow-soft);
}
.glass--glow::after {
  background: radial-gradient(130% 90% at 50% 130%, var(--accent-glow), transparent 70%);
  opacity: 0.55;
}
[data-theme="dark"] .glass--glow::after {
  opacity: 0.95;
}

/* Refraction layer (hero / centrepieces only) */
.glass--refract > .glass-refract-layer {
  position: absolute;
  inset: -2px;
  z-index: 0;
  border-radius: inherit;
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
  filter: url(#liquid-refract);
  opacity: 0.6;
  pointer-events: none;
}

.glass > * {
  position: relative;
  z-index: 3;
}

/* Pills */
.glass-pill {
  border-radius: var(--r-pill);
  background:
    linear-gradient(160deg, rgba(255, 255, 255, 0.14), transparent 60%),
    var(--glass-fill-strong);
  border: 1px solid var(--glass-border);
  -webkit-backdrop-filter: blur(18px) saturate(190%);
  backdrop-filter: blur(18px) saturate(190%);
  box-shadow: inset 0 1px 0 0 var(--glass-hi), var(--shadow-soft);
}

/* Dark glass context (dark panels inside light mode) */
.on-dark {
  --glass-fill: rgba(255, 255, 255, 0.07);
  --glass-fill-strong: rgba(255, 255, 255, 0.11);
  --glass-border: rgba(174, 245, 253, 0.26);
  --glass-hi: rgba(174, 245, 253, 0.4);
  --ink: #f3f6fb;
  --ink-soft: #c2cad4;
  --ink-faint: #8a93a0;
  --line: rgba(255, 255, 255, 0.12);
  --line-strong: rgba(255, 255, 255, 0.26);
  --accent-deep: #aef5fd;
  --grad-text: var(--grad-text-dark);
  color: var(--ink);
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .glass,
  .glass-pill {
    background: var(--bg-2);
  }
  [data-theme="dark"] .glass,
  [data-theme="dark"] .glass-pill {
    background: var(--bg-2);
  }
}