/* =========================================================
   Academic Painter — bg-painter.css
   - Background canvas (non-blocking)
   - Header palette button with sparkle
   - Toast notifications
========================================================= */

/* When actively painting, suppress page panning/zooming so brush feels direct */
body.ap-painting-active {
  touch-action: none;       /* mobile: don't pan/zoom while painting */
  overscroll-behavior: none;
}

/* ---- Background canvas (always behind, inert to clicks) ---- */
#ap-canvas {
  position: fixed;
  inset: 0;
  z-index: 0;            /* stays under page content */
  pointer-events: none;  /* never intercepts interactions */
  background: transparent;
}

/* ---- Palette button (inserted into .site-header by JS) ---- */
.ap-palette {
  /* Header grid places it in column 2; no fixed positioning here */
  width: 40px;
  height: 32px;
  display: grid;
  place-items: center;
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  filter: drop-shadow(0 3px 8px rgba(0,0,0,.15));
}
.ap-palette svg {
  width: 100%;
  height: 100%;
  display: block;
}
.ap-palette:focus-visible {
  outline: 2px solid #2B55AE; /* ultramarine accent */
  outline-offset: 2px;
}

/* Tiny sparkle lure near one paint well */
.ap-sparkle {
  position: absolute;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  pointer-events: none;
  background: radial-gradient(circle, #fff 0%, rgba(255,255,255,.9) 40%, rgba(255,255,255,0) 70%);
  opacity: 0;
  transform: scale(.6) translate(-4px,-4px);
  animation: ap-twinkle 2.8s ease-in-out infinite;
  top: 2px;
  right: -2px;
  mix-blend-mode: screen;
}

@keyframes ap-twinkle {
  0%, 60% { opacity: 0; transform: scale(.6) translate(-4px,-4px); }
  70%     { opacity: .9; transform: scale(1) translate(0,0); }
  100%    { opacity: 0; transform: scale(.6) translate(-4px,-4px); }
}

@media (prefers-reduced-motion: reduce) {
  .ap-sparkle { animation: none; opacity: 0; }
}

/* ---- Toast (brief status) ---- */
#ap-toast {
  position: fixed;
  bottom: 18px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(40, 40, 40, 0.88);
  color: #fff;
  padding: 8px 14px;
  border-radius: 8px;
  font: 500 0.9rem/1 system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  opacity: 0;
  pointer-events: none;
  transition: opacity .35s ease;
  z-index: 9999;
}
#ap-toast.show { opacity: 1; }