/* ── Keyframes ── */
@keyframes spin {
    to {
        transform: rotate(360deg)
    }
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(12px)
    }

    to {
        opacity: 1;
        transform: translateY(0)
    }
}

@keyframes slideUp {
    from {
        opacity: 0;
        transform: translateY(24px)
    }

    to {
        opacity: 1;
        transform: translateY(0)
    }
}

@keyframes popIn {
    from {
        opacity: 0;
        transform: scale(.88)
    }

    to {
        opacity: 1;
        transform: scale(1)
    }
}

@keyframes pulse {

    0%,
    100% {
        opacity: 1
    }

    50% {
        opacity: .5
    }
}

@keyframes countUp {
    from {
        opacity: 0;
        transform: scale(.9)
    }

    to {
        opacity: 1;
        transform: scale(1)
    }
}

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

    100% {
        background-position: 200% 0
    }
}

/* ── Page transition ── */
.page-enter {
    animation: fadeIn .28s ease forwards
}

.page-slide {
    animation: slideUp .3s ease forwards
}

/* ── Card enter ── */
.card-enter {
    animation: popIn .25s ease forwards
}

.card-enter-delay-1 {
    animation: popIn .25s .05s ease both
}

.card-enter-delay-2 {
    animation: popIn .25s .1s ease both
}

.card-enter-delay-3 {
    animation: popIn .25s .15s ease both
}

/* ── Balance number ── */
.balance-amount {
    animation: countUp .4s ease forwards
}

/* ── Skeleton shimmer ── */
.skeleton {
    background: linear-gradient(90deg, var(--glass) 25%, rgba(255, 255, 255, .08) 50%, var(--glass) 75%);
    background-size: 200% 100%;
    animation: shimmer 1.5s infinite;
    border-radius: 8px
}

/* ── Ripple ── */
.ripple {
    position: relative;
    overflow: hidden
}

.ripple::after {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at var(--rx, 50%) var(--ry, 50%), rgba(255, 255, 255, .15) 0%, transparent 60%);
    opacity: 0;
    transition: opacity .5s
}

.ripple:active::after {
    opacity: 1;
    transition: none
}

/* ── FAB spin on add page ── */
.nav-fab.rotate svg {
    transform: rotate(45deg)
}

.nav-fab svg {
    transition: transform .3s ease
}

/* ── Slide in from right (page nav) ── */
@keyframes slideRight {
    from {
        opacity: 0;
        transform: translateX(30px)
    }

    to {
        opacity: 1;
        transform: translateX(0)
    }
}

.slide-right {
    animation: slideRight .28s ease forwards
}

/* ── Success check animation ── */
@keyframes checkDraw {
    from {
        stroke-dashoffset: 100
    }

    to {
        stroke-dashoffset: 0
    }
}

.check-animate {
    stroke-dasharray: 100;
    animation: checkDraw .4s ease forwards
}

/* ── Hover lift ── */
.hover-lift {
    transition: transform .2s ease, box-shadow .2s ease
}

.hover-lift:hover {
    transform: translateY(-2px);
    box-shadow: var(--sh)
}