/* ============================================================
   VELAR — Glass surfaces
   Two intensities (subtle / full) switchable via [data-glass]
   Restrained: thin borders, single specular highlight, no chromatic edges
   ============================================================ */

.glass {
  background: var(--glass-bg);
  backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
  border: 1px solid var(--glass-border);
  box-shadow:
    0 1px 0 var(--glass-inner-light) inset,
    0 12px 28px rgba(0, 0, 0, 0.32);
  position: relative;
  isolation: isolate;
}

.glass-strong {
  background: var(--glass-bg-strong);
  backdrop-filter: blur(calc(var(--glass-blur) * 1.2)) saturate(var(--glass-saturate));
  -webkit-backdrop-filter: blur(calc(var(--glass-blur) * 1.2)) saturate(var(--glass-saturate));
  border: 1px solid var(--glass-border-hi);
  box-shadow:
    0 1px 0 var(--glass-inner-light) inset,
    0 16px 36px rgba(0, 0, 0, 0.38);
}

/* ------------------------------------------------------------
   FULL mode — soft specular along the top edge only.
   No chromatic dispersion, no colored aura.
   ------------------------------------------------------------ */
[data-glass="full"] .glass::after,
[data-glass="full"] .glass-strong::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(180deg,
    rgba(255, 255, 255, 0.06) 0%,
    rgba(255, 255, 255, 0) 30%);
  pointer-events: none;
  z-index: 1;
}
[data-glass="full"] .glass > *,
[data-glass="full"] .glass-strong > * {
  position: relative;
  z-index: 2;
}

[data-glass="subtle"] .glass::after,
[data-glass="subtle"] .glass-strong::after {
  display: none;
}

/* ------------------------------------------------------------
   HEADER / FOOTER variant — thin, near-flat
   ------------------------------------------------------------ */
.glass-thin {
  background: rgba(255, 255, 255, 0.015);
  backdrop-filter: blur(10px) saturate(120%);
  -webkit-backdrop-filter: blur(10px) saturate(120%);
  border: 1px solid var(--glass-border);
}
[data-glass="full"] .glass-thin {
  background: rgba(255, 255, 255, 0.03);
  border-color: var(--glass-border-hi);
}

/* ------------------------------------------------------------
   3D-SCENE wrapper — clean canvas frame
   ------------------------------------------------------------ */
.glass-scene {
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid var(--glass-border);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.025),
    0 18px 48px rgba(0, 0, 0, 0.4);
  position: relative;
}
[data-glass="full"] .glass-scene {
  border-color: var(--glass-border-hi);
}

.glass-lift {
  transition: transform 0.3s var(--ease-out), box-shadow 0.3s var(--ease-out);
}
.glass-lift:hover {
  transform: translateY(-1px);
}