/* Glass: reserved for small floating controls over moving content.
   Frost (blur + saturation), a light tint, a fine top-edge highlight and
   a soft shadow. No refraction: on the web that only works in Chrome, and
   it costs performance and legibility. Loaded last so it refines the
   controls defined in styles.css, rail.css and coverflow.css. v20261006a */
:root {
  --glass-dark-bg: rgba(16, 18, 24, .5);
  --glass-dark-edge: rgba(255, 255, 255, .14);
  --glass-dark-hi: rgba(255, 255, 255, .2);
  --glass-light-bg: rgba(236, 236, 238, .55);
  --glass-light-edge: rgba(255, 255, 255, .6);
  --glass-light-hi: rgba(255, 255, 255, .75);
  --glass-frost: blur(20px) saturate(160%);
}

/* 1. Site navigation once scrolled (dark glass). Tint kept high enough
   that white links stay readable over the light grey sections. */
.nav.scrolled {
  background: rgba(10, 11, 15, .62);
  -webkit-backdrop-filter: var(--glass-frost);
          backdrop-filter: var(--glass-frost);
  border-bottom-color: var(--glass-dark-edge);
  box-shadow: inset 0 -1px 0 rgba(255, 255, 255, .05), 0 10px 30px -12px rgba(0, 0, 0, .45);
}

/* 2. Project view foot bar (light glass on grey) */
.cf-modal__foot {
  background: var(--glass-light-bg);
  -webkit-backdrop-filter: var(--glass-frost);
          backdrop-filter: var(--glass-frost);
  border-top: 1px solid var(--glass-light-edge);
  box-shadow: inset 0 1px 0 var(--glass-light-hi), 0 -12px 32px -16px rgba(10, 11, 15, .25);
}
.cf-fbtn,
.cf-close {
  background: rgba(255, 255, 255, .28);
  border-color: rgba(255, 255, 255, .7);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .8), 0 4px 14px -6px rgba(10, 11, 15, .25);
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
}
.cf-fbtn:hover:not(:disabled),
.cf-close:hover {
  background: rgba(255, 255, 255, .55);
  border-color: rgba(255, 255, 255, .95);
}

/* 3. "View project" hint on the covers (dark glass over imagery) */
.cf-hint {
  background: var(--glass-dark-bg);
  -webkit-backdrop-filter: var(--glass-frost);
          backdrop-filter: var(--glass-frost);
  border: 1px solid var(--glass-dark-edge);
  box-shadow: inset 0 1px 0 var(--glass-dark-hi), 0 6px 18px -8px rgba(0, 0, 0, .5);
}

/* 4. Play / duration badges on Current thinking */
.th-rail__badge {
  background: var(--glass-dark-bg);
  -webkit-backdrop-filter: var(--glass-frost);
          backdrop-filter: var(--glass-frost);
  border: 1px solid var(--glass-dark-edge);
  box-shadow: inset 0 1px 0 var(--glass-dark-hi), 0 6px 18px -8px rgba(0, 0, 0, .5);
}

/* 5. Close button in the Current thinking player (dark glass) */
.th-rail__close {
  background: var(--glass-dark-bg);
  -webkit-backdrop-filter: var(--glass-frost);
          backdrop-filter: var(--glass-frost);
  border-color: var(--glass-dark-edge);
  box-shadow: inset 0 1px 0 var(--glass-dark-hi), 0 6px 18px -8px rgba(0, 0, 0, .5);
}
.th-rail__close:hover { background: rgba(40, 44, 56, .6); }

/* Browsers without backdrop-filter get solid, readable fallbacks */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .nav.scrolled { background: rgba(10, 11, 15, .94); }
  .cf-modal__foot { background: rgba(217, 217, 217, .96); }
  .cf-hint, .th-rail__badge, .th-rail__close { background: rgba(16, 18, 24, .88); }
}
/* Users who ask for less transparency get solid controls */
@media (prefers-reduced-transparency: reduce) {
  .nav.scrolled { background: rgba(10, 11, 15, .96); }
  .cf-modal__foot { background: #D9D9D9; }
  .cf-hint, .th-rail__badge, .th-rail__close { background: rgba(16, 18, 24, .92); }
}