/* Snake background: canvas + frosted-glass reading panels.
   Loaded after the theme's base.css so these rules win. */

/* Full-viewport canvas pinned behind all content. pointer-events:none so it
   never eats clicks; aria-hidden in the markup keeps it out of the a11y tree. */
#snakeCanvas {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  pointer-events: none;
  display: block;
}

/* The page body stays transparent so the canvas shows through everywhere. */
body {
  background: transparent;
}

/* Frosted-glass panels: translucent tint + blurred backdrop, so the snakes
   smear into a soft wash directly behind the text and stay readable.
   color-mix keeps the panel mostly paper-colored but lets colour bleed in. */
.p-article,
.c-article,
.toc {
  background: color-mix(in srgb, rgb(251, 250, 247) 82%, transparent);
  -webkit-backdrop-filter: blur(16px) saturate(155%);
  backdrop-filter: blur(16px) saturate(155%);
  border: 1px solid color-mix(in srgb, rgb(180, 178, 170) 60%, transparent);
  border-radius: 14px;
  box-shadow: 0 6px 28px rgba(0, 0, 0, 0.12);
  padding: 1.4rem 1.8rem;
}

/* Give the list cards on the home page a little breathing room between them. */
.p-list-article {
  margin-bottom: 1.6rem;
}

/* The site title/subtitle sit directly over the canvas; a soft paper halo
   keeps them legible without a full panel. */
.l-header .p-title__link,
.l-header .p-subtitle {
  text-shadow: 0 1px 10px rgba(251, 250, 247, 0.9);
}

/* Dark-OS readers get a dark panel + brighter halo. The snake palette also
   switches to neons via prefers-color-scheme in snake-background.js. */
@media (prefers-color-scheme: dark) {
  .p-article,
  .c-article,
  .toc {
    background: color-mix(in srgb, rgb(30, 31, 35) 78%, transparent);
    border-color: color-mix(in srgb, rgb(120, 122, 130) 45%, transparent);
    box-shadow: 0 6px 30px rgba(0, 0, 0, 0.4);
  }
  .l-header .p-title__link,
  .l-header .p-subtitle {
    text-shadow: 0 1px 12px rgba(20, 20, 24, 0.9);
  }
}

/* Fallback for browsers without backdrop-filter: lean on a more opaque panel
   so text never sits on bare animation. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .p-article,
  .c-article,
  .toc {
    background: rgb(251, 250, 247);
  }
  @media (prefers-color-scheme: dark) {
    .p-article,
    .c-article,
    .toc {
      background: rgb(30, 31, 35);
    }
  }
}