/* Home-only glass surfaces. Window geometry and animation code stay unchanged. */
.desktop .retro-window {
  background: transparent;
  box-shadow: 5px 5px 0 #111, inset 0 0 0 3px #d4d4d4;
}
.desktop .window-menu,
.desktop .clock-options { background: #d4d4d4; }
.logo-window #ascii-canvas,
.desktop .clock-face,
.desktop #botBody,
.desktop .file-icon,
.site-header .brand,
.site-header .menu-toggle {
  background: linear-gradient(125deg, rgba(255,255,255,.14), rgba(255,255,255,.025) 48%, rgba(255,255,255,.09));
  -webkit-backdrop-filter: blur(.65px) saturate(120%);
  backdrop-filter: blur(.65px) saturate(120%);
}
.logo-window #ascii-canvas,
.desktop .clock-face,
.desktop #botBody {
  box-shadow: inset 0 1px 0 rgba(255,255,255,.85), inset 1px 0 0 rgba(255,255,255,.45), inset 0 -1px 0 rgba(255,255,255,.35);
}
.desktop #chatLog,
.desktop #chatInput,
.desktop #chatForm button {
  background: rgba(255,255,255,.035);
}
/* The selector needs a clear path through its otherwise opaque grey panel. */
.desktop .clock-options {
  background: linear-gradient(to bottom, #d4d4d4 0 26px, transparent 26px 62px, #d4d4d4 62px);
  box-shadow: inset 0 0 0 12px #d4d4d4;
}
.desktop .clock-options label,
.desktop .clock-note { background: #d4d4d4; }
.desktop .clock-options select {
  background: rgba(255,255,255,.06);
  -webkit-backdrop-filter: blur(.65px);
  backdrop-filter: blur(.65px);
}
.desktop .clock-options option { background: #eeeeee; color: #111; }
.desktop .analog-clock circle:first-child { fill: rgba(255,255,255,.04); }
.site-header .brand img { background: transparent; mix-blend-mode: multiply; }
.desktop .file-icon::after { background: rgba(255,255,255,.45); }

/* Keep the shared decorative sheen from whitening these clear glass controls. */
.site-header .brand::before, .site-header .menu-toggle::before { opacity: .18; }
.site-header .brand::after, .site-header .menu-toggle::after { opacity: .25; }

/* A travelling reflection across the glass, without obscuring the ASCII beneath. */
.logo-window #ascii-canvas,
.desktop .clock-face,
.desktop #botBody,
.desktop .file-icon,
.desktop .clock-options select,
.site-header .brand,
.site-header .menu-toggle {
  background-image: linear-gradient(110deg, transparent 38%, rgba(255,255,255,.08) 44%, rgba(255,255,255,.48) 50%, rgba(255,255,255,.08) 56%, transparent 62%), linear-gradient(125deg, rgba(255,255,255,.14), rgba(255,255,255,.025) 48%, rgba(255,255,255,.09));
  background-size: 300% 100%, 100% 100%;
  background-repeat: no-repeat;
  animation: home-glass-shimmer 7s ease-in-out infinite;
}
.desktop .clock-face { animation-delay: -2s; }
.desktop #botBody { animation-delay: -4s; }
@keyframes home-glass-shimmer {
  0%, 15% { background-position: 150% 0, 0 0; }
  75%, 100% { background-position: -50% 0, 0 0; }
}
body.motion-paused .logo-window #ascii-canvas,
body.motion-paused .desktop .clock-face,
body.motion-paused .desktop #botBody,
body.motion-paused .desktop .file-icon,
body.motion-paused .desktop .clock-options select,
body.motion-paused .site-header .brand,
body.motion-paused .site-header .menu-toggle { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) {
  .logo-window #ascii-canvas, .desktop .clock-face, .desktop #botBody,
  .desktop .file-icon, .desktop .clock-options select,
  .site-header .brand, .site-header .menu-toggle { animation-duration: 14s; }
}