@keyframes pulse-critical {
  0%, 100% { transform: scale(1); opacity: 1; box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.4); }
  50% { transform: scale(1.3); opacity: 0.8; box-shadow: 0 0 0 8px rgba(239, 68, 68, 0); }
}

.pulse-critical { animation: pulse-critical 1.5s ease infinite; }

.is-dragging { transform: rotate(2deg) scale(1.05); opacity: 0.8; cursor: grabbing; }

@keyframes heartbeat {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.3); opacity: 0.7; }
}

.beat-high { animation: heartbeat 2.4s ease-in-out infinite; }
.beat-medium { animation: heartbeat 3.6s ease-in-out infinite; }

/* View transitions: only children animate so fixed-position drawers and tooltips keep the viewport as containing block. */
@keyframes view-in {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: none; }
}

@keyframes view-out {
  to { opacity: 0; transform: translateY(-6px); }
}

@keyframes card-in {
  from { opacity: 0; transform: translateY(14px) scale(0.98); }
  to { opacity: 1; transform: none; }
}

.motion .view-enter .stagger {
  animation: view-in 420ms var(--ease-out) backwards;
  animation-delay: calc(var(--s, 0) * 60ms);
}

.motion .view-enter .card {
  animation: card-in 420ms var(--ease-out) backwards;
  animation-delay: calc(140ms + var(--i, 0) * 35ms);
}

.motion .view-enter .flow-fill {
  animation: grow-x 900ms var(--ease-out) 250ms backwards;
}

.view-leave {
  animation: view-out 150ms ease forwards;
}

@keyframes grow-x {
  from { transform: scaleX(0); }
}

@keyframes flow-shimmer {
  from { background-position: -60% 0; }
  to { background-position: 160% 0; }
}

@keyframes border-breathe {
  0%, 100% { background-position: 0 0, 0% 50%; }
  50% { background-position: 0 0, 100% 50%; }
}

/* Chronicle reveal */
.motion .entry {
  transition: opacity 520ms var(--ease-out) var(--delay, 0ms), transform 520ms var(--ease-out) var(--delay, 0ms), border-color var(--transition-normal), box-shadow var(--transition-normal);
}

.motion .entry:not(.is-visible) {
  opacity: 0;
}

.motion .entry[data-side="left"]:not(.is-visible) { transform: translate(-18px, 12px); }
.motion .entry[data-side="right"]:not(.is-visible) { transform: translate(18px, 12px); }

/* Drawer */
@keyframes drawer-in {
  from { transform: translateX(100%); opacity: 0.4; }
  to { transform: none; opacity: 1; }
}

@keyframes drawer-out {
  to { transform: translateX(100%); opacity: 0; }
}

.motion .drawer-enter { animation: drawer-in 420ms var(--ease-out); }
.drawer-leave { animation: drawer-out 240ms ease-in forwards; pointer-events: none; }

.motion .drawer-enter .drawer-body > * {
  animation: view-in 380ms var(--ease-out) backwards;
}

.motion .drawer-enter .drawer-body > :nth-child(2) { animation-delay: 60ms; }
.motion .drawer-enter .drawer-body > :nth-child(3) { animation-delay: 110ms; }
.motion .drawer-enter .drawer-body > :nth-child(4) { animation-delay: 160ms; }
.motion .drawer-enter .drawer-body > :nth-child(n + 5) { animation-delay: 210ms; }

/* Overlays */
@keyframes fade-in { from { opacity: 0; } }
@keyframes fade-out { to { opacity: 0; } }

@keyframes modal-in {
  from { opacity: 0; transform: translateY(24px) scale(0.97); }
  to { opacity: 1; transform: none; }
}

@keyframes modal-out {
  to { opacity: 0; transform: translateY(14px) scale(0.98); }
}

.overlay.is-entering { animation: fade-in 200ms ease; }
.overlay.is-entering > * { animation: modal-in 340ms var(--ease-out); }
.overlay.is-leaving { animation: fade-out 200ms ease forwards; pointer-events: none; }
.overlay.is-leaving > * { animation: modal-out 200ms ease-in forwards; }

/* Toasts */
@keyframes toast-in {
  from { opacity: 0; transform: translateX(110%); }
  to { opacity: 1; transform: none; }
}

@keyframes toast-out {
  to { opacity: 0; transform: translateX(110%); }
}

.motion .toast { animation: toast-in 380ms var(--ease-out); }
.motion .toast.is-leaving { animation: toast-out 240ms ease-in forwards; }

/* Celebration */
@keyframes won-glow {
  0% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.75), 0 0 30px rgba(16, 185, 129, 0.6); }
  100% { box-shadow: 0 0 0 18px rgba(16, 185, 129, 0), 0 0 0 rgba(16, 185, 129, 0); }
}

@keyframes ambient-drift {
  from { transform: translate3d(0, 0, 0) scale(1); }
  to { transform: translate3d(-2%, 1.5%, 0) scale(1.06); }
}

.motion .ambient { animation: ambient-drift 26s ease-in-out infinite alternate; }

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    animation-delay: 0ms !important;
    transition-duration: 1ms !important;
    transition-delay: 0ms !important;
  }
}