/* ═══════════════════════════════════════════════════════════════════════
   Atmosphere · grain film + fixed watcher specimen frame
   These live above content but never interact with it.
   ═══════════════════════════════════════════════════════════════════════ */

/* Grain film over entire viewport */
body::before{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:9999;
  opacity:.35;
  mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .17 0 0 0 0 .17 0 0 0 0 .17 0 0 0 .06 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}

/* Watcher · tiny specimen frame in bottom-right, present on every page */
.watcher{
  position:fixed;
  bottom:2rem;
  right:2rem;
  width:70px;
  height:98px;
  z-index:70;
  pointer-events:none;
  opacity:0;
  animation:watcherFade 1s ease 3.5s forwards;
}
.watcher svg{
  width:100%;
  height:100%;
  overflow:visible;
}
.watcher .wfill{fill:var(--bg);opacity:.85}
.watcher .wstroke{stroke:var(--ink-soft);fill:none;stroke-width:1.2}
.watcher .winner{stroke:var(--ink-soft);fill:none;stroke-width:.6}
.watcher .wdot{fill:var(--accent)}
.watcher .wpulse{
  transform-origin:center;
  animation:pulse 4s ease-in-out infinite;
}

@keyframes watcherFade{to{opacity:1}}
@keyframes pulse{
  0%,100%{opacity:.4}
  50%{opacity:1}
}

/* Hide watcher on mobile · breathing room on small screens */
@media (max-width: 1000px){
  .watcher{display:none}
}

@media (prefers-reduced-motion: reduce){
  body::before{opacity:.25}
  .watcher{animation:none;opacity:1}
  .watcher .wpulse{animation:none}
}