/**
* BALAM AI - Centralized Animation & Motion System
* ═══════════════════════════════════════════════════════════════
*
* Single source of truth for ALL @keyframes and animation utilities.
* Deduplicates ~95 declarations across 15 CSS files down to ~45 unique,
* consistently named keyframes.
*
* NAMING CONVENTION:
* All keyframes prefixed `balam-` to prevent collisions.
* Utility classes prefixed `.animate-` or `.transition-`.
*
* USAGE:
* One-off:
* .my-element { animation: balam-fade-in-up var(--balam-dur-normal) var(--balam-ease-out) both; }
*
* Utility class:
* Content
*
* /* Staggered list: */
*
* - Item 1
← animates after 50ms
* - Item 2
← animates after 100ms
*
*
* ACCESSIBILITY:
* prefers-reduced-motion block at bottom — decorative motion is disabled,
* functional feedback (opacity changes) is retained.
*/
/* ═══════════════════════════════════════════════════════════════
1. ROTATION / SPIN
═══════════════════════════════════════════════════════════════ */
/* Standard 360° spin — used for loading spinners, refresh icons */
@keyframes balam-spin {
to { transform: rotate(360deg); }
}
/* ═══════════════════════════════════════════════════════════════
2. FADE IN (opacity + optional translateY)
═══════════════════════════════════════════════════════════════ */
/* Simple opacity fade — backdrop overlays, tab content */
@keyframes balam-fade-in {
from { opacity: 0; }
to { opacity: 1; }
}
/* Fade while sliding UP (starts below, moves up) — cards, alerts, dropdowns */
@keyframes balam-fade-in-up {
from { opacity: 0; transform: translateY(10px); }
to { opacity: 1; transform: translateY(0); }
}
/* Large-distance fade-up — auth page entries, modal content */
@keyframes balam-fade-in-up-lg {
from { opacity: 0; transform: translateY(20px); }
to { opacity: 1; transform: translateY(0); }
}
/* Fade while sliding DOWN (starts above, moves down) — dropdowns, tooltips */
@keyframes balam-fade-in-down {
from { opacity: 0; transform: translateY(-10px); }
to { opacity: 1; transform: translateY(0); }
}
/* Scale + fade entry — buttons appearing, small UI elements */
@keyframes balam-scale-in {
from { opacity: 0; transform: scale(0.9); }
to { opacity: 1; transform: scale(1); }
}
/* Subtle scale + fade — chips, tags, badges popping in */
@keyframes balam-chip-in {
from { opacity: 0; transform: scale(0.9); }
to { opacity: 1; transform: scale(1); }
}
/* Partial fade — expanding panels, details revealing */
@keyframes balam-expand-details {
from { opacity: 0.8; }
to { opacity: 1; }
}
/* Very subtle scale — widget preview updates, content refresh indicators */
@keyframes balam-preview-update {
0% { transform: scale(1); }
50% { transform: scale(1.01); }
100% { transform: scale(1); }
}
/* ═══════════════════════════════════════════════════════════════
3. SLIDE (translate only, no opacity required)
═══════════════════════════════════════════════════════════════ */
/* Slide in from right — panels, drawers, page transitions */
@keyframes balam-slide-in-right {
from { opacity: 0; transform: translateX(100%); }
to { opacity: 1; transform: translateX(0); }
}
/* Slide out to right — dismissals, page transitions out */
@keyframes balam-slide-out-right {
from { opacity: 1; transform: translateX(0); }
to { opacity: 0; transform: translateX(100%); }
}
/* Slide in from left — small offset, form steps, list items */
@keyframes balam-slide-in-left {
from { opacity: 0; transform: translateX(-10px); }
to { opacity: 1; transform: translateX(0); }
}
/* Navbar slide in — sticky nav appearing on scroll */
@keyframes balam-navbar-slide-in {
from { transform: translateY(-50%) scaleY(0); opacity: 0; }
to { transform: translateY(0) scaleY(1); opacity: 1; }
}
/* ═══════════════════════════════════════════════════════════════
4. MODAL / OVERLAY ENTRIES
═══════════════════════════════════════════════════════════════ */
/* Standard modal entry — scale + slide */
@keyframes balam-modal-slide-in {
from { opacity: 0; transform: scale(0.95) translateY(20px); }
to { opacity: 1; transform: scale(1) translateY(0); }
}
/* Premium modal entry — scale + slide + blur */
@keyframes balam-modal-pop-in {
from { opacity: 0; transform: scale(0.85) translateY(20px); filter: blur(4px); }
to { opacity: 1; transform: scale(1) translateY(0); filter: blur(0); }
}
/* ═══════════════════════════════════════════════════════════════
5. PULSE (opacity breathing)
═══════════════════════════════════════════════════════════════ */
/* Standard opacity pulse — active indicators, loading states */
@keyframes balam-pulse {
0%, 100% { opacity: 1; }
50% { opacity: 0.5; }
}
/* Subtle opacity pulse — skeleton loading, muted indicators */
@keyframes balam-pulse-subtle {
0%, 100% { opacity: 1; }
50% { opacity: 0.8; }
}
/* Dramatic pulse — recording button, critical alerts */
@keyframes balam-recording-pulse {
0%, 100% { opacity: 1; }
50% { opacity: 0.3; }
}
/* ═══════════════════════════════════════════════════════════════
6. PULSE (box-shadow ring / ripple)
═══════════════════════════════════════════════════════════════ */
/* Primary color ring ripple — CTA attention, focus indicators */
@keyframes balam-pulse-ring {
0%, 100% { box-shadow: 0 0 0 0 rgba(67, 97, 238, 0.7); }
50% { box-shadow: 0 0 0 8px rgba(67, 97, 238, 0); }
}
/* Success color ring ripple — completion indicators */
@keyframes balam-pulse-ring-success {
0%, 100% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.7); }
50% { box-shadow: 0 0 0 8px rgba(34, 197, 94, 0); }
}
/* Danger color ring ripple — alerts, errors */
@keyframes balam-pulse-ring-danger {
0%, 100% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.3); }
50% { box-shadow: 0 0 0 10px rgba(239, 68, 68, 0); }
}
/* Highlight pulse — selected row flash in tables/lists */
@keyframes balam-highlight-pulse {
0%, 100% { box-shadow: none; background-color: transparent; }
50% { box-shadow: 0 0 0 3px rgba(67, 97, 238, 0.4), 0 0 20px rgba(67, 97, 238, 0.3); background-color: rgba(67, 97, 238, 0.05); }
}
/* ═══════════════════════════════════════════════════════════════
7. PULSE (ambient glow — box-shadow size change)
═══════════════════════════════════════════════════════════════ */
/* Purple glow — AI badges, premium feature indicators */
@keyframes balam-pulse-glow-purple {
0%, 100% { box-shadow: 0 0 20px rgba(139, 92, 246, 0.2); }
50% { box-shadow: 0 0 30px rgba(139, 92, 246, 0.4); }
}
/* Green glow — success status, active/online indicators */
@keyframes balam-pulse-glow-success {
0%, 100% { box-shadow: 0 0 8px rgba(16, 185, 129, 0.5); }
50% { box-shadow: 0 0 20px rgba(16, 185, 129, 0.8); }
}
/* Brand gradient glow — subscription cards, premium elements */
@keyframes balam-pulse-glow-brand {
0%, 100% { box-shadow: 0 0 20px rgba(114, 9, 183, 0.3), 0 0 40px rgba(67, 97, 238, 0.2); }
50% { box-shadow: 0 0 30px rgba(114, 9, 183, 0.5), 0 0 60px rgba(67, 97, 238, 0.4); }
}
/* Inset glow — input focus, widget preview areas */
@keyframes balam-pulse-glow-inset {
0%, 100% { box-shadow: inset 0 0 10px rgba(99, 102, 241, 0.1), 0 0 20px rgba(99, 102, 241, 0.3); }
50% { box-shadow: inset 0 0 15px rgba(99, 102, 241, 0.2), 0 0 30px rgba(99, 102, 241, 0.5); }
}
/* Icon ring subtle pulse — notification badges, avatar rings */
@keyframes balam-icon-ring-pulse {
0%, 100% { opacity: 0.5; transform: scale(1); }
50% { opacity: 0.8; transform: scale(1.02); }
}
/* ═══════════════════════════════════════════════════════════════
8. PULSE (combined glow — border + box-shadow)
═══════════════════════════════════════════════════════════════ */
/* Summarized item — green border + glow flash */
@keyframes balam-summarized-pulse {
0%, 100% {
box-shadow: 0 0 0 0 rgba(34, 197, 94, 0);
border-color: rgba(34, 197, 94, 0.3);
}
50% {
box-shadow: 0 0 10px rgba(34, 197, 94, 0.4);
border-color: rgba(34, 197, 94, 0.8);
}
}
/* Stale/outdated item — amber border + glow flash */
@keyframes balam-summarized-pulse-stale {
0%, 100% {
box-shadow: 0 0 0 0 rgba(245, 158, 11, 0);
border-color: rgba(245, 158, 11, 0.3);
}
50% {
box-shadow: 0 0 10px rgba(245, 158, 11, 0.4);
border-color: rgba(245, 158, 11, 0.8);
}
}
/* Stale opacity + scale — status dots for outdated content */
@keyframes balam-stale-pulse {
0%, 100% { opacity: 0.6; transform: scale(1); }
50% { opacity: 1; transform: scale(1.15); }
}
/* ═══════════════════════════════════════════════════════════════
9. BORDER PULSE (animated border color)
═══════════════════════════════════════════════════════════════ */
/* Primary color border pulse — active form fields, upload targets */
@keyframes balam-border-pulse {
0%, 100% { border-color: rgba(67, 97, 238, 0.3); }
50% { border-color: rgba(67, 97, 238, 0.6); }
}
/* Purple border pulse — AI processing indicators */
@keyframes balam-border-pulse-purple {
0%, 100% { border-color: rgba(139, 92, 246, 0.3); }
50% { border-color: rgba(139, 92, 246, 0.6); }
}
/* ═══════════════════════════════════════════════════════════════
10. SCALE PULSE (transform: scale breathing)
═══════════════════════════════════════════════════════════════ */
/* Standard scale pulse — phase indicators, active steps */
@keyframes balam-scale-pulse {
0%, 100% { transform: scale(1); }
50% { transform: scale(1.1); }
}
/* Vertical scale pulse — credit/progress bar animations */
@keyframes balam-scale-pulse-y {
0%, 100% { transform: scaleY(1); }
50% { transform: scaleY(1.2); }
}
/* ═══════════════════════════════════════════════════════════════
11. SHIMMER / SKELETON LOADING
═══════════════════════════════════════════════════════════════ */
/* Background-position shimmer — skeleton loading cards, skeleton text */
@keyframes balam-shimmer {
0% { background-position: 200% 0; }
100% { background-position: -200% 0; }
}
/* Sliding overlay shimmer — pseudo-element shimmer on buttons, cards */
@keyframes balam-shimmer-slide {
0% { transform: translateX(-100%); }
100% { transform: translateX(100%); }
}
/* Gradient shift — animated gradient backgrounds */
@keyframes balam-gradient-shift {
0% { background-position: 0% 50%; }
50% { background-position: 100% 50%; }
100% { background-position: 0% 50%; }
}
/* ═══════════════════════════════════════════════════════════════
12. TYPING INDICATOR
═══════════════════════════════════════════════════════════════ */
/* Typing dots bounce — chat/AI typing indicator */
@keyframes balam-typing {
0%, 60%, 100% { transform: translateY(0); opacity: 0.4; }
30% { transform: translateY(-4px); opacity: 1; }
}
/* ═══════════════════════════════════════════════════════════════
13. FLOAT / AMBIENT MOVEMENT
═══════════════════════════════════════════════════════════════ */
/* Gentle float — small icons, decorative elements */
@keyframes balam-float {
0%, 100% { transform: translateY(0) rotate(0deg); }
50% { transform: translateY(-8px) rotate(10deg); }
}
/* Complex ambient float — background decorative blobs, gradients */
@keyframes balam-ambient-float {
0% { transform: translate(0, 0) scale(1); }
25% { transform: translate(30px, -20px) scale(1.05); }
50% { transform: translate(-20px, 30px) scale(0.95); }
75% { transform: translate(20px, 10px) scale(1.02); }
100% { transform: translate(0, 0) scale(1); }
}
/* ═══════════════════════════════════════════════════════════════
14. SHAKE (error feedback)
═══════════════════════════════════════════════════════════════ */
/* Horizontal shake — form validation errors, wrong input */
@keyframes balam-shake {
0%, 100% { transform: translateX(0); }
10%, 30%, 50%, 70%, 90% { transform: translateX(-5px); }
20%, 40%, 60%, 80% { transform: translateX(5px); }
}
/* ═══════════════════════════════════════════════════════════════
15. GLOW (filter-based)
═══════════════════════════════════════════════════════════════ */
/* White glow — light/logo elements on dark backgrounds */
@keyframes balam-glow-white {
0%, 100% { filter: drop-shadow(0 0 20px rgba(255, 255, 255, 0.4)); }
50% { filter: drop-shadow(0 0 40px rgba(255, 255, 255, 0.8)); }
}
/* ═══════════════════════════════════════════════════════════════
16. PROGRESS / FILL (width-based)
═══════════════════════════════════════════════════════════════ */
/* Progress bar fill — password strength, upload progress */
@keyframes balam-strength-bar-fill {
from { width: 0; }
}
/* Toast progress — countdown bar draining on toast notification */
@keyframes balam-toast-progress {
from { width: 100%; }
to { width: 0%; }
}
/* ═══════════════════════════════════════════════════════════════
17. TOAST-SPECIFIC (slide in/out for notifications)
═══════════════════════════════════════════════════════════════ */
@keyframes balam-toast-slide-in {
from { opacity: 0; transform: translateX(100%); }
to { opacity: 1; transform: translateX(0); }
}
@keyframes balam-toast-slide-out {
from { opacity: 1; transform: translateX(0); }
to { opacity: 0; transform: translateX(100%); }
}
/* ═══════════════════════════════════════════════════════════════
18. ANIMATION UTILITY CLASSES
═══════════════════════════════════════════════════════════════ */
/* Duration × Easing — ready-to-use with animation-name */
.animate-spin { animation: balam-spin var(--balam-dur-normal) linear infinite; }
.animate-spin-slow { animation: balam-spin 2s linear infinite; }
.animate-pulse { animation: balam-pulse 2s var(--balam-ease-in-out) infinite; }
.animate-pulse-subtle { animation: balam-pulse-subtle 3s var(--balam-ease-in-out) infinite; }
.animate-fade-in { animation: balam-fade-in var(--balam-dur-normal) var(--balam-ease-out) both; }
.animate-fade-in-up { animation: balam-fade-in-up var(--balam-dur-normal) var(--balam-ease-out) both; }
.animate-fade-in-down { animation: balam-fade-in-down var(--balam-dur-normal) var(--balam-ease-out) both; }
.animate-scale-in { animation: balam-scale-in var(--balam-dur-normal) var(--balam-ease-bounce) both; }
.animate-shimmer { animation: balam-shimmer 2s linear infinite; }
.animate-float { animation: balam-float 3s var(--balam-ease-in-out) infinite; }
.animate-shake { animation: balam-shake 0.5s var(--balam-ease-in-out) both; }
.animate-slide-in-right{ animation: balam-slide-in-right var(--balam-dur-normal) var(--balam-ease-out) both; }
.animate-slide-out-right{ animation: balam-slide-out-right var(--balam-dur-fast) var(--balam-ease-in) both; }
.animate-recording { animation: balam-recording-pulse 1.5s var(--balam-ease-in-out) infinite; }
/* ═══════════════════════════════════════════════════════════════
19. TRANSITION UTILITY CLASSES
═══════════════════════════════════════════════════════════════ */
.transition-fast { transition: all var(--balam-dur-fast) var(--balam-ease-default); }
.transition-normal { transition: all var(--balam-dur-normal) var(--balam-ease-default); }
.transition-slow { transition: all var(--balam-dur-slow) var(--balam-ease-default); }
.transition-colors { transition: background-color var(--balam-dur-normal) ease, color var(--balam-dur-normal) ease, border-color var(--balam-dur-normal) ease; }
.transition-transform { transition: transform var(--balam-dur-normal) var(--balam-ease-default); }
.transition-opacity { transition: opacity var(--balam-dur-normal) ease; }
.transition-none { transition: none !important; }
/* ═══════════════════════════════════════════════════════════════
20. STAGGER DELAYS (for list animations)
═══════════════════════════════════════════════════════════════ */
/* Apply .balam-stagger to a parent to stagger children's animation delays */
.balam-stagger > :nth-child(1) { animation-delay: 0ms; }
.balam-stagger > :nth-child(2) { animation-delay: 50ms; }
.balam-stagger > :nth-child(3) { animation-delay: 100ms; }
.balam-stagger > :nth-child(4) { animation-delay: 150ms; }
.balam-stagger > :nth-child(5) { animation-delay: 200ms; }
.balam-stagger > :nth-child(6) { animation-delay: 250ms; }
.balam-stagger > :nth-child(7) { animation-delay: 300ms; }
.balam-stagger > :nth-child(8) { animation-delay: 350ms; }
.balam-stagger > :nth-child(n+9){ animation-delay: 400ms; }
/* ═══════════════════════════════════════════════════════════════
21. REDUCED MOTION ACCESSIBILITY
═══════════════════════════════════════════════════════════════
Disables decorative animations for users who prefer reduced motion.
Functional feedback (fast opacity changes, focus rings) is retained. */
@media (prefers-reduced-motion: reduce) {
/* Remove all decorative animations */
.animate-spin,
.animate-spin-slow,
.animate-float,
.animate-recording,
.animate-pulse,
.animate-pulse-subtle,
.animate-shimmer {
animation: none;
}
/* Keep entry animations but make them instant */
.animate-fade-in,
.animate-fade-in-up,
.animate-fade-in-down,
.animate-scale-in,
.animate-slide-in-right {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
}
/* Remove ambient background animations */
[class*="balam-ambient"],
[class*="balam-gradient"] {
animation: none;
}
/* Keep transitions but instant */
.transition-fast,
.transition-normal,
.transition-slow,
.transition-colors,
.transition-transform,
.transition-opacity {
transition-duration: 0.01ms !important;
}
/* Global: all custom balam animations respect reduced motion */
*[style*="animation: balam"] {
animation-duration: 0.01ms !important;
}
}