/* NHIS Shared Styles
 * Fonts are loaded via <link> tags in header.php (not @import, to avoid
 * the render-blocking fetch chain that used to happen here).
 * Design tokens + reusable components live in tokens.css — this file only
 * holds the handful of small animation/layout helpers still shared across
 * pages that aren't a good fit for a single-purpose component class.
 */

/* Modern Animations */
.hover-lift {
    transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275), box-shadow 0.4s ease;
}
.hover-lift:hover {
    transform: translateY(-8px) scale(1.02);
    box-shadow: 0 25px 50px -12px rgba(58, 53, 80, 0.18);
    z-index: 10;
}

.animate-fade-in-up {
    animation: fadeInUp 1s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.animate-float {
    animation: float 6s ease-in-out infinite;
}

@keyframes float {
    0% { transform: translateY(0px); }
    50% { transform: translateY(-20px); }
    100% { transform: translateY(0px); }
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(40px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Bento Grid (used on index.php stats section) */
.bento-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-auto-rows: minmax(200px, auto);
    gap: 1.5rem;
}
.bento-item {
    border-radius: 32px;
    overflow: hidden;
    position: relative;
}
.bento-item-large {
    grid-column: span 2;
    grid-row: span 2;
}
.bento-item-wide {
    grid-column: span 2;
}

@media (max-width: 1024px) {
    .bento-grid { grid-template-columns: repeat(2, 1fr); }
    .bento-item-large { grid-column: span 2; }
}
@media (max-width: 640px) {
    .bento-grid { grid-template-columns: 1fr; }
    .bento-item-large, .bento-item-wide { grid-column: span 1; }
}