/* ========================================================================
   ANIMAÇÕES — O Sistema
   ======================================================================== */

@keyframes bgPulse {
  0%, 100% { opacity: 0.8; }
  50% { opacity: 1; }
}

@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes popIn {
  0%   { opacity: 0; transform: scale(0.92); }
  60%  { opacity: 1; transform: scale(1.02); }
  100% { transform: scale(1); }
}

@keyframes slideInRight {
  from { opacity: 0; transform: translateX(24px); }
  to   { opacity: 1; transform: translateX(0); }
}

@keyframes pulseGlow {
  0%, 100% { box-shadow: var(--shadow-glow); }
  50% { box-shadow: 0 0 26px rgba(0, 229, 255, 0.4), 0 0 70px rgba(0, 229, 255, 0.15); }
}

@keyframes scanline {
  0%   { transform: translateY(-100%); }
  100% { transform: translateY(100%); }
}

/* ----- Texto glitch (tela de despertar) ----- */

.glitch-text {
  position: relative;
}

.glitch-text::before,
.glitch-text::after {
  content: attr(data-text);
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.glitch-text::before {
  color: var(--cyan);
  z-index: -1;
  animation: glitchShift 3.2s infinite linear alternate-reverse;
  opacity: 0.7;
}

.glitch-text::after {
  color: var(--danger);
  z-index: -2;
  animation: glitchShift 2.6s infinite linear alternate-reverse;
  opacity: 0.5;
}

@keyframes glitchShift {
  0%   { clip-path: inset(0 0 90% 0); transform: translate(0, 0); }
  10%  { clip-path: inset(10% 0 75% 0); transform: translate(-2px, 1px); }
  20%  { clip-path: inset(40% 0 40% 0); transform: translate(2px, -1px); }
  30%  { clip-path: inset(70% 0 5% 0); transform: translate(-1px, 2px); }
  40%  { clip-path: inset(20% 0 60% 0); transform: translate(1px, -2px); }
  50%  { clip-path: inset(55% 0 20% 0); transform: translate(-2px, 0); }
  60%  { clip-path: inset(5% 0 80% 0); transform: translate(2px, 1px); }
  70%  { clip-path: inset(35% 0 50% 0); transform: translate(0, -1px); }
  80%  { clip-path: inset(65% 0 15% 0); transform: translate(-1px, 0); }
  90%  { clip-path: inset(15% 0 65% 0); transform: translate(1px, 2px); }
  100% { clip-path: inset(0 0 90% 0); transform: translate(0, 0); }
}

/* ----- Entrada de janelas / cards ----- */

.system-window,
.mission-card,
.category-card,
.suggested-card,
.item-card,
.history-item,
.daily-quest-item {
  animation: fadeInUp 0.35s ease both;
}

/* ----- Modais ----- */

.modal-overlay.open .modal-box {
  animation: popIn 0.28s cubic-bezier(0.22, 1, 0.36, 1) both;
}

/* ----- Toasts ----- */

.toast {
  animation: slideInRight 0.3s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.toast.toast--leaving {
  animation: fadeOut 0.25s ease forwards;
}

@keyframes fadeOut {
  to { opacity: 0; transform: translateX(24px); }
}

/* ----- Level Up ----- */

.levelup-overlay.open .levelup-box {
  animation: popIn 0.5s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.levelup-overlay.open .levelup-title {
  animation: pulseGlow 1.4s ease-in-out infinite;
}

/* ----- Penalidade ----- */

.penalty-overlay.open .penalty-box {
  animation: penaltyShake 0.5s ease both;
}

@keyframes penaltyShake {
  0%   { opacity: 0; transform: scale(0.95); }
  20%  { transform: translateX(-6px); }
  40%  { transform: translateX(6px); }
  60%  { transform: translateX(-3px); }
  80%  { transform: translateX(3px); }
  100% { opacity: 1; transform: translateX(0); }
}

/* ----- Barra de XP: brilho contínuo sutil ----- */

.xp-bar-fill {
  position: relative;
}

.xp-bar-fill::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.35), transparent);
  width: 40px;
  animation: xpSheen 2.4s ease-in-out infinite;
}

@keyframes xpSheen {
  0%   { transform: translateX(-40px); }
  100% { transform: translateX(220px); }
}

/* ----- Conclusão de missão: pulso rápido ----- */

@keyframes completePulse {
  0%   { box-shadow: 0 0 0 rgba(52, 245, 161, 0); }
  40%  { box-shadow: 0 0 22px rgba(52, 245, 161, 0.5); }
  100% { box-shadow: 0 0 0 rgba(52, 245, 161, 0); }
}

.mission-card.just-completed,
.daily-quest-item.just-completed {
  animation: completePulse 0.6s ease;
}