/* Scroll Reveal Animations */
.reveal {
    opacity: 0;
    transform: perspective(600px) rotateX(20deg) translateY(40px);
    transform-origin: bottom center;
    transition: opacity 0.8s ease-out, transform 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.reveal.active {
    opacity: 1;
    transform: perspective(600px) rotateX(0deg) translateY(0);
}

/* Card Confetti / Flip for Recommendation */
@keyframes flipIn {
    0% {
        transform: perspective(600px) rotateY(90deg) scale(0.8);
        opacity: 0;
    }
    60% {
        transform: perspective(600px) rotateY(-10deg) scale(1.05);
        opacity: 1;
    }
    80% {
        transform: perspective(600px) rotateY(5deg) scale(0.98);
    }
    100% {
        transform: perspective(600px) rotateY(0deg) scale(1);
        opacity: 1;
    }
}

.animate-flip {
    animation: flipIn 1s cubic-bezier(0.25, 0.8, 0.25, 1) forwards;
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

.fade-in {
    animation: fadeIn 0.5s ease-in-out forwards;
}

/* Ripple Effect for Buttons */
.ripple {
    position: relative;
    overflow: hidden;
}

.ripple::after {
    content: "";
    display: block;
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    pointer-events: none;
    background-image: radial-gradient(circle, #fff 10%, transparent 10.01%);
    background-repeat: no-repeat;
    background-position: 50%;
    transform: scale(10, 10);
    opacity: 0;
    transition: transform .5s, opacity 1s;
}

.ripple:active::after {
    transform: scale(0, 0);
    opacity: 0.3;
    transition: 0s;
}