/*
  effects.css

  Shared decorative layers: grain + cursor glow.
*/

.texture--grain {
  position: fixed;
  inset: 0;
  pointer-events: none;
  background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVQImWNgQAL///8AAQUBAf9luzwAAAAASUVORK5CYII=')
    repeat;
  opacity: 0.16;
  mix-blend-mode: soft-light;
  z-index: 0;
}

.cursor-glow {
  position: fixed;
  left: 0;
  top: 0;
  width: 120px;
  height: 120px;
  border-radius: 50%;
  pointer-events: none;
  background: radial-gradient(circle, rgba(42, 255, 138, 0.18), rgba(42, 255, 138, 0));
  mix-blend-mode: soft-light;
  z-index: 50;
  opacity: 0.55;
  transform: translate(-200px, -200px);
  will-change: transform;
}

@media (prefers-reduced-motion: reduce) {
  .cursor-glow {
    /* Keep it static; JS also respects reduced motion */
    will-change: auto;
  }
}