/* ── Keyframes ─────────────────────────────────────────────────────────────── */

@keyframes blobDrift {
    0%   { transform: translate(0, 0) scale(1); }
    33%  { transform: translate(30px, -20px) scale(1.05); }
    66%  { transform: translate(-15px, 25px) scale(0.97); }
    100% { transform: translate(20px, 10px) scale(1.02); }
}

@keyframes shimmer {
    0%   { background-position: -200% 0; }
    100% { background-position:  200% 0; }
}

@keyframes pulseDot {
    0%, 100% { opacity: 1; transform: scale(1); }
    50%       { opacity: 0.5; transform: scale(0.75); }
}

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

@keyframes float {
    0%, 100% { transform: translateY(0); }
    50%       { transform: translateY(-10px); }
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

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

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

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

@keyframes slideInLeft {
    from { opacity: 0; transform: translateX(-30px); }
    to   { opacity: 1; transform: translateX(0); }
}

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

@keyframes checkmark {
    0%   { stroke-dashoffset: 60; }
    100% { stroke-dashoffset: 0; }
}

@keyframes successPop {
    0%   { transform: scale(0.5); opacity: 0; }
    60%  { transform: scale(1.15); }
    100% { transform: scale(1); opacity: 1; }
}

@keyframes toastIn {
    from { opacity: 0; transform: translateY(-16px) scale(0.95); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes toastOut {
    from { opacity: 1; transform: translateY(0) scale(1); }
    to   { opacity: 0; transform: translateY(-12px) scale(0.95); }
}

@keyframes ringPulse {
    0%   { box-shadow: 0 0 0 0 rgba(108,99,255,0.4); }
    70%  { box-shadow: 0 0 0 10px rgba(108,99,255,0); }
    100% { box-shadow: 0 0 0 0 rgba(108,99,255,0); }
}

/* ── Spinner ───────────────────────────────────────────────────────────────── */
.spinner-ring {
    width: 36px; height: 36px;
    border: 3px solid rgba(108,99,255,0.2);
    border-top-color: var(--accent-primary);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

.spinner-sm {
    display: inline-block;
    width: 16px; height: 16px;
    border: 2px solid rgba(0,0,0,0.12);
    border-top-color: currentColor;
    border-radius: 50%;
    animation: spin 0.7s linear infinite;
    flex-shrink: 0;
}

/* ── Animation Utilities ───────────────────────────────────────────────────── */
.anim-fade-in       { animation: fadeIn 0.35s ease forwards; }
.anim-fade-in-up    { animation: fadeInUp 0.4s ease forwards; }
.anim-slide-right   { animation: slideInRight 0.35s ease forwards; }
.anim-slide-left    { animation: slideInLeft 0.35s ease forwards; }

/* Stagger children */
.stagger > * {
    opacity: 0;
    animation: fadeInUp 0.35s ease forwards;
}
.stagger > *:nth-child(1)  { animation-delay: 0.05s; }
.stagger > *:nth-child(2)  { animation-delay: 0.10s; }
.stagger > *:nth-child(3)  { animation-delay: 0.15s; }
.stagger > *:nth-child(4)  { animation-delay: 0.20s; }
.stagger > *:nth-child(5)  { animation-delay: 0.25s; }
.stagger > *:nth-child(6)  { animation-delay: 0.30s; }
.stagger > *:nth-child(7)  { animation-delay: 0.35s; }
.stagger > *:nth-child(8)  { animation-delay: 0.40s; }
.stagger > *:nth-child(9)  { animation-delay: 0.45s; }
.stagger > *:nth-child(10) { animation-delay: 0.50s; }

/* ── Page Transition ───────────────────────────────────────────────────────── */
.page-enter {
    animation: fadeInUp 0.3s ease forwards;
}

/* ── Success animation ─────────────────────────────────────────────────────── */
.success-icon {
    animation: successPop 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}

/* ── Glow animations ───────────────────────────────────────────────────────── */
.glow-pulse {
    animation: ringPulse 2s ease-in-out infinite;
}

/* ── Skeleton Shimmer ──────────────────────────────────────────────────────── */
.skeleton-wave {
    position: relative;
    overflow: hidden;
    background: rgba(0,0,0,0.04);
}

.skeleton-wave::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg,
        transparent 0%,
        rgba(0,0,0,0.06) 50%,
        transparent 100%);
    animation: shimmer 1.5s ease-in-out infinite;
}

/* ── Transition helper ─────────────────────────────────────────────────────── */
.transition-all  { transition: all 0.2s ease; }
.transition-fast { transition: all 0.15s ease; }
.transition-slow { transition: all 0.4s ease; }

/* ── Hover lift ────────────────────────────────────────────────────────────── */
.hover-lift { transition: transform 0.2s ease; }
.hover-lift:hover { transform: translateY(-2px); }