/* Flexible Card Grid - CSS-only Animations */

/* Base transition for all cards */
.transform {
    transition-property: transform, box-shadow, opacity;
    transition-timing-function: ease;
}

/* Animation type variants for hover effects */
[data-animation="fade"]:hover {
    opacity: 0.95;
}

[data-animation="slide-up"]:hover {
    transform: translateY(-5px) scale(1.02);
}

[data-animation="bounce"]:hover {
    transform: translateY(-2px) scale(1.03);
    animation: bounce 0.3s ease;
}

[data-animation="rotate"]:hover {
    transform: rotate(-2deg) scale(1.02);
}

/* Bounce animation keyframes */
@keyframes bounce {
    0%, 100% { transform: translateY(0) scale(1); }
    50% { transform: translateY(-8px) scale(1.05); }
}

/* Ensure smooth transitions */
.duration-150 {
    transition-duration: 150ms;
}

.duration-200 {
    transition-duration: 200ms;
}

.duration-300 {
    transition-duration: 300ms;
}

.duration-500 {
    transition-duration: 500ms;
}

.duration-700 {
    transition-duration: 700ms;
}

.duration-1000 {
    transition-duration: 1000ms;
}

/* Hover scale effect */
.hover\:scale-105:hover {
    transform: scale(1.05);
}

/* Hover shadow effect */
.hover\:shadow-2xl:hover {
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
}

/* SVG Icon sizing - ensure proper dimensions */
.flexible-card-grid svg {
    width: auto;
    height: auto;
    min-width: 32px;
    min-height: 32px;
    max-width: 2rem;
    max-height: 2rem;
}

/* SVG container styling */
.flexible-card-grid .svg-icon-container {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 48px; /* h-12 = 3rem = 48px */
    min-width: 48px; /* w-12 = 3rem = 48px */
}