/* =====================================================
   Pop Animation Component
   Reusable pop entrance animation for cards and elements
   ===================================================== */

/* Pop entrance keyframes */
@keyframes popIn {
    0% {
        opacity: 0;
        transform: scale(0.3) translateZ(0) rotateY(0) rotateX(0);
    }
    60% {
        opacity: 1;
        transform: scale(1.08) translateZ(var(--pop-tz, 0)) rotateY(var(--pop-ry, 0)) rotateX(var(--pop-rx, 0));
    }
    100% {
        opacity: 1;
        transform: scale(1) translateZ(var(--pop-tz, 0)) rotateY(var(--pop-ry, 0)) rotateX(var(--pop-rx, 0));
    }
}

/* Base pop animation class */
.pop-animation {
    animation: popIn 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

/* Staggered delays for multiple elements */
.pop-animation--delay-1 { animation-delay: 0.1s; }
.pop-animation--delay-2 { animation-delay: 0.2s; }
.pop-animation--delay-3 { animation-delay: 0.3s; }
.pop-animation--delay-4 { animation-delay: 0.4s; }
.pop-animation--delay-5 { animation-delay: 0.5s; }
.pop-animation--delay-6 { animation-delay: 0.6s; }
.pop-animation--delay-7 { animation-delay: 0.7s; }
.pop-animation--delay-8 { animation-delay: 0.8s; }

/* Speed variants */
.pop-animation--fast {
    animation-duration: 0.4s;
}

.pop-animation--slow {
    animation-duration: 0.8s;
}

/* 3D transform presets - apply these to customize the end position */
.pop-animation--3d-left {
    --pop-tz: 30px;
    --pop-ry: -12deg;
    --pop-rx: 6deg;
}

.pop-animation--3d-right {
    --pop-tz: 30px;
    --pop-ry: 12deg;
    --pop-rx: 6deg;
}

.pop-animation--3d-center {
    --pop-tz: 50px;
    --pop-ry: 0deg;
    --pop-rx: 0deg;
}

/* Subtle variant (less overshoot) */
@keyframes popInSubtle {
    0% {
        opacity: 0;
        transform: scale(0.5);
    }
    70% {
        opacity: 1;
        transform: scale(1.03);
    }
    100% {
        opacity: 1;
        transform: scale(1);
    }
}

.pop-animation--subtle {
    animation-name: popInSubtle;
}