/* =========================================================
   ANIMATIONS & VISUAL JUICINESS (Tumbal Proyek)
   ========================================================= */

/* Screen Shake Normal */
@keyframes shakeNormal {
  0% { transform: translate(0, 0); }
  20% { transform: translate(-3px, 3px); }
  40% { transform: translate(3px, -2px); }
  60% { transform: translate(-3px, -2px); }
  80% { transform: translate(2px, 3px); }
  100% { transform: translate(0, 0); }
}

.shake-normal {
  animation: shakeNormal 0.35s ease-in-out;
}

/* Screen Shake Heavy (Boss / Big Damage) */
@keyframes shakeHeavy {
  0% { transform: translate(0, 0) rotate(0deg); }
  15% { transform: translate(-8px, 6px) rotate(-1.5deg); }
  30% { transform: translate(7px, -6px) rotate(1.5deg); }
  45% { transform: translate(-6px, -4px) rotate(-1deg); }
  60% { transform: translate(6px, 5px) rotate(1deg); }
  75% { transform: translate(-4px, 2px) rotate(-0.5deg); }
  100% { transform: translate(0, 0) rotate(0deg); }
}

.shake-heavy {
  animation: shakeHeavy 0.55s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
}

/* Red Flash Vignette (Damage) */
.flash-red {
  background: radial-gradient(circle, transparent 40%, rgba(239, 68, 68, 0.45) 100%) !important;
  opacity: 1 !important;
  transition: opacity 0.35s ease;
}

/* Green Flash (Coffee Sanity Boost) */
.flash-green {
  background: radial-gradient(circle, transparent 40%, rgba(16, 185, 129, 0.35) 100%) !important;
  opacity: 1 !important;
  transition: opacity 0.4s ease;
}

/* Critical Low Sanity Pulsing */
@keyframes pulseCritical {
  0%, 100% {
    opacity: 0.35;
    background: radial-gradient(circle, transparent 50%, rgba(220, 38, 38, 0.4) 100%);
  }
  50% {
    opacity: 0.85;
    background: radial-gradient(circle, transparent 35%, rgba(220, 38, 38, 0.7) 100%);
  }
}

.critical-pulse {
  animation: pulseCritical 1.2s infinite ease-in-out;
  pointer-events: none;
}

/* Slide Up Fade In (Bubble Chat Baru) */
@keyframes slideUpFade {
  from {
    opacity: 0;
    transform: translateY(14px) scale(0.97);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.slide-up {
  animation: slideUpFade 0.28s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* Typing Indicator Dots */
@keyframes bounceDot {
  0%, 80%, 100% {
    transform: translateY(0);
    opacity: 0.4;
  }
  40% {
    transform: translateY(-5px);
    opacity: 1;
  }
}

.typing-dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  background-color: #64748b;
  border-radius: 50%;
  margin: 0 2px;
  animation: bounceDot 1.2s infinite ease-in-out both;
}

.typing-dot:nth-child(1) { animation-delay: -0.32s; }
.typing-dot:nth-child(2) { animation-delay: -0.16s; }
.typing-dot:nth-child(3) { animation-delay: 0s; }

/* Airplane Mode Frozen Effect */
.effect-frozen {
  filter: contrast(1.05) hue-rotate(185deg);
  transition: filter 0.4s ease;
}

/* Screenshot Shield Flash */
@keyframes shieldGlow {
  0% { box-shadow: 0 0 0 0 rgba(59, 130, 246, 0.7); }
  50% { box-shadow: 0 0 25px 8px rgba(59, 130, 246, 0.9); }
  100% { box-shadow: 0 0 0 0 rgba(59, 130, 246, 0); }
}

.effect-shield {
  animation: shieldGlow 0.6s ease-out;
}