/*
 * TRiNOV WEBLOG fixed shell glass — synchronized with trinov.dev material pass 03.
 * Blog content remains independent; the fixed shell material and dimensions are shared.
 */

:root {
  --footer-bar-height: 74px;
  --shell-header-surface: rgba(210, 213, 205, 0.1);
  --shell-footer-surface: rgba(210, 213, 205, 0.1);
  --shell-sheen:
    linear-gradient(135deg,
      rgba(255, 255, 255, 0.052) 0%,
      rgba(255, 255, 255, 0.014) 45%,
      rgba(255, 255, 255, 0) 72%);
  --shell-saturation: 1.08;
  --shell-highlight: rgba(255, 255, 255, 0.065);
  --shell-lowlight: rgba(0, 0, 0, 0.08);
  --shell-depth: rgba(0, 0, 0, 0.14);
}

html[data-theme="light"] {
  --shell-header-surface: rgba(255, 255, 255, 0.38);
  --shell-footer-surface: rgba(178, 186, 182, 0.27);
  --shell-sheen:
    linear-gradient(135deg,
      rgba(255, 255, 255, 0.24) 0%,
      rgba(255, 255, 255, 0.065) 45%,
      rgba(255, 255, 255, 0) 72%);
  --shell-saturation: 1.03;
  --shell-highlight: rgba(255, 255, 255, 0.56);
  --shell-lowlight: rgba(20, 27, 23, 0.035);
  --shell-depth: rgba(33, 41, 36, 0.065);
}

.site-header.glass,
.site-footer.glass {
  z-index: 21;
  background-image: var(--shell-sheen);
  border-color: var(--line);
  backdrop-filter: blur(20px) saturate(var(--shell-saturation));
  -webkit-backdrop-filter: blur(20px) saturate(var(--shell-saturation));
}

.site-header.glass,
.site-header.glass.scrolled {
  top: 24px;
  background-color: var(--shell-header-surface);
  box-shadow:
    inset 0 1px 0 var(--shell-highlight),
    inset 0 -1px 0 var(--shell-lowlight),
    0 12px 34px var(--shell-depth);
}

.site-footer.glass {
  height: var(--footer-bar-height);
  background-color: var(--shell-footer-surface);
  box-shadow:
    inset 0 1px 0 var(--shell-highlight),
    inset 0 -1px 0 var(--shell-lowlight),
    0 -12px 34px var(--shell-depth);
}

@media (max-width: 600px) {
  .site-header.glass,
  .site-header.glass.scrolled {
    top: 14px;
  }
}

/* Windows uses the same approved live glass; no reduced-transparency override. */