@keyframes fadeIn   { from { opacity: 0; } to { opacity: 1; } }
@keyframes fadeOut  { from { opacity: 1; } to { opacity: 0; } }
@keyframes slideInRight { from { opacity: 0; transform: translateX(24px); } to { opacity: 1; transform: translateX(0); } }
@keyframes popIn    { from { opacity: 0; transform: scale(0.96); } to { opacity: 1; transform: scale(1); } }
@keyframes pulse    {
  0%, 100% { box-shadow: 0 0 0 0 rgba(45, 152, 94, 0.55); transform: scale(1); }
  50%      { box-shadow: 0 0 0 10px rgba(45, 152, 94, 0); transform: scale(1.03); }
}
@keyframes shake {
  0%, 100% { transform: translateX(0); }
  15%      { transform: translateX(-4px); }
  30%      { transform: translateX(4px); }
  45%      { transform: translateX(-3px); }
  60%      { transform: translateX(3px); }
  75%      { transform: translateX(-2px); }
  90%      { transform: translateX(2px); }
}
@keyframes bump {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.18); }
}
@keyframes toastIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes toastOut {
  from { opacity: 1; }
  to   { opacity: 0; }
}

.scene { animation: fadeIn var(--dur-slow) var(--ease-out); }
.scene-exit { animation: fadeOut var(--dur-base) var(--ease-out) forwards; }

/* Ghost cursor */
.ghost-cursor {
  position: absolute; width: 24px; height: 24px;
  pointer-events: none; z-index: 40;
  transition: transform var(--dur-slow) var(--ease-out);
}
.ghost-cursor::after {
  content: ""; position: absolute; inset: -6px;
  border-radius: 50%; background: rgba(45, 152, 94, 0.25);
  animation: pulse 1.2s var(--ease-out) infinite;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    transition-duration: 0.001ms !important;
  }
}