/* ===============================
   SCROLL FADE (SHOW / HIDE)
================================ */
.fade-up {
    opacity: 0;
    transform: translateY(40px);
    transition:
        opacity 0.6s cubic-bezier(0.22, 1, 0.36, 1),
        transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
    transition-delay: var(--delay, 0ms);
}

.fade-up.visible {
    opacity: 1;
    transform: translateY(0);
}

/* ===============================
   PRICING CARD
================================ */
.pricing-card {
    transition:
        transform 0.35s cubic-bezier(0.22, 1, 0.36, 1),
        box-shadow 0.35s ease;
}

.pricing-card:hover {
    transform: translateY(-8px);
}

/* ===============================
   BADGE
================================ */
@keyframes badgeScale {
    from {
        opacity: 0;
        transform: scale(0.9);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

.pricing-card.visible .popular-badge {
    animation: badgeScale 0.4s ease-out forwards;
}

/* ===============================
   BUTTON MICRO-INTERACTIONS
================================ */
.pricing-btn {
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.pricing-btn:hover {
    transform: scale(1.02);
    box-shadow: 0 10px 25px -5px rgba(37, 99, 235, 0.35);
}

.pricing-btn:active {
    transform: scale(0.98);
}

/* ===============================
   MOBILE
================================ */
@media (max-width: 768px) {
    .pricing-card:hover {
        transform: translateY(-4px);
    }
}