/* ============================================================
   SERPIENTE DE NOTIFICACIONES — Mascota premium (neón oscuro, menacing)
   Capa fija que NUNCA bloquea la interfaz (pointer-events:none).
   Reptación por columna segmentada (ver notification-snake.js).
   ============================================================ */

.snk-layer {
  position: fixed;
  inset: 0;
  z-index: 99999;
  pointer-events: none;       /* jamás interfiere con los clics del usuario */
  overflow: hidden;
}

/* Vignette de tensión: oscurece la pantalla mientras "algo se aproxima". */
.snk-dim {
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse at center, transparent 35%, rgba(2, 10, 6, .55) 100%),
    radial-gradient(circle at 50% 50%, rgba(10, 40, 24, .12), transparent 60%);
  will-change: opacity;
}

/* El SVG cubre todo el viewport. Look REALISTA: sombra proyectada oscura para
   asentar la serpiente (no flota), con un dejo de luz verde muy sutil (nada de
   neón de caricatura). Compositado en GPU para 60 FPS. */
.snk-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  filter:
    drop-shadow(0 5px 7px rgba(0, 0, 0, .6))
    drop-shadow(0 0 4px rgba(18, 110, 64, .35));
  will-change: transform;
}

/* Ojos de víbora: brillo contenido modulado por --snk-eye (0.4 → 1). */
.snk-head { --snk-eye: 0.5; }
.snk-eye {
  filter: drop-shadow(0 0 calc(var(--snk-eye, 0.5) * 4px) rgba(150, 240, 90, calc(var(--snk-eye, 0.5) * 0.85)));
}

/* Lengua bífida roja: oculta hasta el flick. */
.snk-tongue {
  opacity: 0;
  filter: drop-shadow(0 0 2px rgba(180, 12, 36, .7));
}

/* Glow temporal de la campana cuando la serpiente la alcanza. */
.snk-bell-glow { position: relative; }
.snk-bell-glow::after {
  content: '';
  position: absolute;
  inset: -9px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(31, 224, 122, .5), transparent 70%);
  animation: snkBellPulse .8s ease-out forwards;
  pointer-events: none;
  z-index: -1;
}
@keyframes snkBellPulse {
  0%   { opacity: 0; transform: scale(.6); }
  35%  { opacity: 1; transform: scale(1.1); }
  100% { opacity: 0; transform: scale(1.55); }
}

/* Notificación de anuncio en la campana: acento dorado/ámbar. */
.notification-item-icon.announcement {
  background: linear-gradient(135deg, #f59e0b, #ef4444);
  color: #fff;
}

/* Accesibilidad: si el usuario pide menos movimiento, ocultar por completo. */
@media (prefers-reduced-motion: reduce) {
  .snk-layer { display: none !important; }
}