/**
 * Pet Animations CSS
 * Styles for procedural pet animations in the dashboard
 */

/* Wrapper receives transform animations so hat moves with pet */
#pet-wrapper {
  will-change: transform;
  transform-origin: center bottom;
}

/* Base pet sprite styles */
#pet-sprite {
  /* Retro pixel-art rendering */
  image-rendering: pixelated;
  image-rendering: -moz-crisp-edges;
  image-rendering: crisp-edges;

  /* Smooth transitions for mood changes */
  transition: filter 0.5s ease-in-out;

  /* Make clickable */
  cursor: pointer;
}

/* ── Mood-based visual signatures ── */

/* ultra_negative (happiness 1) — sick / glitching */
#pet-sprite[data-mood="ultra_negative"],
.pet-sprite[data-mood="ultra_negative"] {
  filter: drop-shadow(0 0 14px #ef4444) drop-shadow(0 0 24px #dc2626) grayscale(0.85) hue-rotate(-15deg) contrast(1.15) brightness(0.5);
  animation: sick-pulse 5s ease-in-out infinite;
}

/* negative (happiness 2) — sad / faded */
#pet-sprite[data-mood="negative"],
.pet-sprite[data-mood="negative"] {
  filter: drop-shadow(0 0 12px #f87171) drop-shadow(0 0 20px #ef4444) sepia(0.3) hue-rotate(-30deg) saturate(0.4) contrast(0.9) brightness(0.65);
  animation: sad-breathe 4s ease-in-out infinite;
}

/* neutral (happiness 3) — calm baseline */
#pet-sprite[data-mood="neutral"],
.pet-sprite[data-mood="neutral"] {
  filter: drop-shadow(0 0 10px #78716c) drop-shadow(0 0 18px #a8a29e) brightness(1.0) saturate(1.0);
}

/* positive (happiness 4) — happy / energetic */
#pet-sprite[data-mood="positive"],
.pet-sprite[data-mood="positive"] {
  filter: drop-shadow(0 0 14px #22c55e) drop-shadow(0 0 22px #eab308) saturate(1.25) contrast(1.08) brightness(1.1);
  animation: vitality-pulse 2.5s ease-in-out infinite;
}

/* ultra_positive (happiness 5) — euphoric / radiant */
#pet-sprite[data-mood="ultra_positive"],
.pet-sprite[data-mood="ultra_positive"] {
  filter: drop-shadow(0 0 22px #4ade80) drop-shadow(0 0 34px #86efac) saturate(1.45) contrast(1.12) brightness(1.15);
  animation: euphoria-glow 3s ease-in-out infinite;
}

/* ── Mood keyframes ── */

/* Slow ominous dark pulse for ultra_negative */
@keyframes sick-pulse {
  0%, 100% {
    filter: drop-shadow(0 0 14px #ef4444) drop-shadow(0 0 24px #dc2626) grayscale(0.85) hue-rotate(-15deg) contrast(1.15) brightness(0.5);
  }
  50% {
    filter: drop-shadow(0 0 14px #ef4444) drop-shadow(0 0 24px #dc2626) grayscale(0.85) hue-rotate(-15deg) contrast(1.15) brightness(0.35);
  }
}

/* Slow sad breathing oscillation for negative */
@keyframes sad-breathe {
  0%, 100% {
    filter: drop-shadow(0 0 12px #f87171) drop-shadow(0 0 20px #ef4444) sepia(0.3) hue-rotate(-30deg) saturate(0.4) contrast(0.9) brightness(0.65);
  }
  50% {
    filter: drop-shadow(0 0 12px #f87171) drop-shadow(0 0 20px #ef4444) sepia(0.3) hue-rotate(-30deg) saturate(0.4) contrast(0.9) brightness(0.55);
  }
}

/* Energetic breathing glow for positive */
@keyframes vitality-pulse {
  0%, 100% {
    filter: drop-shadow(0 0 14px #22c55e) drop-shadow(0 0 22px #eab308) saturate(1.25) contrast(1.08) brightness(1.1);
  }
  50% {
    filter: drop-shadow(0 0 22px #4ade80) drop-shadow(0 0 32px #facc15) saturate(1.35) contrast(1.08) brightness(1.18);
  }
}

/* 4-phase color rotation for ultra_positive */
@keyframes euphoria-glow {
  0%, 100% {
    filter: drop-shadow(0 0 22px #4ade80) drop-shadow(0 0 34px #86efac) saturate(1.45) contrast(1.12) brightness(1.15);
  }
  25% {
    filter: drop-shadow(0 0 24px #eab308) drop-shadow(0 0 36px #facc15) saturate(1.5) contrast(1.12) brightness(1.2);
  }
  50% {
    filter: drop-shadow(0 0 24px #22d3ee) drop-shadow(0 0 34px #a78bfa) saturate(1.5) contrast(1.12) brightness(1.18);
  }
  75% {
    filter: drop-shadow(0 0 22px #f472b6) drop-shadow(0 0 38px #ec4899) saturate(1.5) contrast(1.12) brightness(1.2);
  }
}

/* Click feedback — per-mood glow */

/* Negative moods → red glow */
#pet-sprite[data-mood="ultra_negative"]:active,
#pet-sprite[data-mood="negative"]:active,
.pet-sprite[data-mood="ultra_negative"]:active,
.pet-sprite[data-mood="negative"]:active {
  filter: drop-shadow(0 0 20px #ef4444) drop-shadow(0 0 10px #dc2626) brightness(1.15);
}

/* Neutral → white glow */
#pet-sprite[data-mood="neutral"]:active,
.pet-sprite[data-mood="neutral"]:active {
  filter: drop-shadow(0 0 20px #fff) brightness(1.25);
}

/* Positive moods → green glow */
#pet-sprite[data-mood="positive"]:active,
#pet-sprite[data-mood="ultra_positive"]:active,
.pet-sprite[data-mood="positive"]:active,
.pet-sprite[data-mood="ultra_positive"]:active {
  filter: drop-shadow(0 0 20px #4ade80) drop-shadow(0 0 10px #22c55e) brightness(1.2);
}

/* Pet container - ensure proper positioning for animations */
.pet-container {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

/* Sleeping overlay - Zzz bubbles */
.sleep-overlay {
  position: absolute;
  top: 10%;
  right: 15%;
  pointer-events: none;
  opacity: 0;
  animation: none;
}

.sleep-overlay.active {
  opacity: 1;
  animation: zzz-float 2s ease-in-out infinite;
}

.sleep-overlay span {
  display: block;
  font-size: 1.5rem;
  color: #86efac;
  text-shadow: 0 0 8px #000;
  animation: zzz-pulse 1.5s ease-in-out infinite;
}

.sleep-overlay span:nth-child(2) {
  font-size: 1.2rem;
  margin-left: 10px;
  animation-delay: 0.3s;
}

.sleep-overlay span:nth-child(3) {
  font-size: 0.9rem;
  margin-left: 20px;
  animation-delay: 0.6s;
}

@keyframes zzz-float {
  0%, 100% {
    transform: translateY(0) translateX(0);
  }
  50% {
    transform: translateY(-10px) translateX(5px);
  }
}

@keyframes zzz-pulse {
  0%, 100% {
    opacity: 0.6;
  }
  50% {
    opacity: 1;
  }
}

/* ── Per-mood sleep overlay styles ── */

/* ultra_negative — chaotic, flickering red */
.sleep-overlay.sleep-ultra_negative span {
  color: #f87171;
  text-shadow: 0 0 8px #991b1b;
  animation: zzz-pulse-restless 0.8s ease-in-out infinite;
}
.sleep-overlay.sleep-ultra_negative span:nth-child(2) { animation-delay: 0.15s; }
.sleep-overlay.sleep-ultra_negative span:nth-child(3) { animation-delay: 0.3s; }
.sleep-overlay.active.sleep-ultra_negative {
  animation: zzz-float-restless 1.4s ease-in-out infinite;
}

/* negative — faded red, restless but slower than ultra_negative */
.sleep-overlay.sleep-negative span {
  color: #cc8080;
  text-shadow: 0 0 8px #7f1d1d;
  animation: zzz-pulse-restless 1.2s ease-in-out infinite;
}
.sleep-overlay.sleep-negative span:nth-child(2) { animation-delay: 0.25s; }
.sleep-overlay.sleep-negative span:nth-child(3) { animation-delay: 0.5s; }
.sleep-overlay.active.sleep-negative {
  animation: zzz-float-restless 2.0s ease-in-out infinite;
}

/* neutral — gray/silver (uses default zzz-float + zzz-pulse) */
.sleep-overlay.sleep-neutral span {
  color: #9ca3af;
  text-shadow: 0 0 8px #374151;
  animation: zzz-pulse 1.5s ease-in-out infinite;
}
.sleep-overlay.sleep-neutral span:nth-child(2) { animation-delay: 0.3s; }
.sleep-overlay.sleep-neutral span:nth-child(3) { animation-delay: 0.6s; }
.sleep-overlay.active.sleep-neutral {
  animation: zzz-float 2s ease-in-out infinite;
}

/* positive — soft green glow */
.sleep-overlay.sleep-positive span {
  color: #6ee7a0;
  text-shadow: 0 0 10px #14532d;
  animation: zzz-pulse-warm 2s ease-in-out infinite;
}
.sleep-overlay.sleep-positive span:nth-child(2) { animation-delay: 0.4s; }
.sleep-overlay.sleep-positive span:nth-child(3) { animation-delay: 0.8s; }
.sleep-overlay.active.sleep-positive {
  animation: zzz-float-warm 2.5s ease-in-out infinite;
}

/* ultra_positive — rainbow color cycling */
.sleep-overlay.sleep-ultra_positive span {
  color: #f87171;
  text-shadow: 0 0 12px rgba(0,0,0,0.5);
  animation: zzz-pulse-rainbow 3s ease-in-out infinite;
}
.sleep-overlay.sleep-ultra_positive span:nth-child(2) { animation-delay: 0.6s; }
.sleep-overlay.sleep-ultra_positive span:nth-child(3) { animation-delay: 1.2s; }
.sleep-overlay.active.sleep-ultra_positive {
  animation: zzz-float-dreamy 3.5s ease-in-out infinite;
}

/* ── Per-mood zzz keyframes ── */

/* Restless — chaotic jitter */
@keyframes zzz-float-restless {
  0%, 100% {
    transform: translateY(0) translateX(0);
  }
  20% {
    transform: translateY(-4px) translateX(6px);
  }
  40% {
    transform: translateY(-8px) translateX(-3px);
  }
  60% {
    transform: translateY(-5px) translateX(8px);
  }
  80% {
    transform: translateY(-10px) translateX(-2px);
  }
}

@keyframes zzz-pulse-restless {
  0%, 100% {
    opacity: 0.4;
  }
  30% {
    opacity: 1;
  }
  50% {
    opacity: 0.3;
  }
  70% {
    opacity: 0.9;
  }
}

/* Slow — heavy, muted drift */
@keyframes zzz-float-slow {
  0%, 100% {
    transform: translateY(0) translateX(0);
  }
  50% {
    transform: translateY(-6px) translateX(3px);
  }
}

@keyframes zzz-pulse-slow {
  0%, 100% {
    opacity: 0.35;
  }
  50% {
    opacity: 0.7;
  }
}

/* Warm — gentle arc upward */
@keyframes zzz-float-warm {
  0%, 100% {
    transform: translateY(0) translateX(0);
  }
  30% {
    transform: translateY(-8px) translateX(4px);
  }
  60% {
    transform: translateY(-12px) translateX(7px);
  }
}

@keyframes zzz-pulse-warm {
  0%, 100% {
    opacity: 0.6;
    text-shadow: 0 0 10px #14532d;
  }
  50% {
    opacity: 1;
    text-shadow: 0 0 16px #22c55e;
  }
}

/* Dreamy — wide arcs with color cycling */
@keyframes zzz-float-dreamy {
  0%, 100% {
    transform: translateY(0) translateX(0) scale(1);
  }
  25% {
    transform: translateY(-8px) translateX(8px) scale(1.05);
  }
  50% {
    transform: translateY(-14px) translateX(3px) scale(1.1);
  }
  75% {
    transform: translateY(-10px) translateX(10px) scale(1.05);
  }
}

@keyframes zzz-pulse-dreamy {
  0%, 100% {
    opacity: 0.6;
    color: #c4b5fd;
  }
  33% {
    opacity: 1;
    color: #a78bfa;
  }
  66% {
    opacity: 0.8;
    color: #e9d5ff;
  }
}

/* Rainbow — full spectrum color cycling */
@keyframes zzz-pulse-rainbow {
  0% {
    opacity: 0.8;
    color: #f87171;
    text-shadow: 0 0 12px rgba(248,113,113,0.5);
  }
  16% {
    opacity: 1;
    color: #fb923c;
    text-shadow: 0 0 12px rgba(251,146,60,0.5);
  }
  33% {
    opacity: 0.9;
    color: #facc15;
    text-shadow: 0 0 12px rgba(250,204,21,0.5);
  }
  50% {
    opacity: 1;
    color: #4ade80;
    text-shadow: 0 0 12px rgba(74,222,128,0.5);
  }
  66% {
    opacity: 0.9;
    color: #38bdf8;
    text-shadow: 0 0 12px rgba(56,189,248,0.5);
  }
  83% {
    opacity: 1;
    color: #c084fc;
    text-shadow: 0 0 12px rgba(192,132,252,0.5);
  }
  100% {
    opacity: 0.8;
    color: #f87171;
    text-shadow: 0 0 12px rgba(248,113,113,0.5);
  }
}

/* Eating particles overlay */
.eating-particles {
  position: absolute;
  bottom: 20%;
  left: 50%;
  transform: translateX(-50%);
  pointer-events: none;
  opacity: 0;
}

.eating-particles.active {
  opacity: 1;
}

.eating-particles span {
  position: absolute;
  font-size: 0.8rem;
  animation: particle-burst 0.4s ease-out forwards;
}

.eating-particles span:nth-child(1) { animation-delay: 0s; }
.eating-particles span:nth-child(2) { animation-delay: 0.1s; }
.eating-particles span:nth-child(3) { animation-delay: 0.2s; }

@keyframes particle-burst {
  0% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
  100% {
    opacity: 0;
    transform: translateY(-30px) scale(0.5);
  }
}

/* Heart particles for interaction */
.heart-particles {
  position: absolute;
  top: 30%;
  left: 50%;
  transform: translateX(-50%);
  pointer-events: none;
  opacity: 0;
}

.heart-particles.active {
  opacity: 1;
}

.heart-particles span {
  position: absolute;
  font-size: 1rem;
  color: #f472b6;
  text-shadow: 0 0 5px #000;
  animation: heart-float 0.6s ease-out forwards;
}

.heart-particles span:nth-child(1) {
  left: -20px;
  animation-delay: 0s;
}

.heart-particles span:nth-child(2) {
  left: 0;
  animation-delay: 0.1s;
}

.heart-particles span:nth-child(3) {
  left: 20px;
  animation-delay: 0.2s;
}

@keyframes heart-float {
  0% {
    opacity: 1;
    transform: translateY(0) scale(0.5);
  }
  50% {
    opacity: 1;
    transform: translateY(-20px) scale(1.2);
  }
  100% {
    opacity: 0;
    transform: translateY(-40px) scale(0.8);
  }
}