/**
 * Bento Grid Specific Animations & Premium Styles
 * 
 * Includes: Scroll entries, hover morphs, and glassmorphism refinements.
 */

/* 1. Scroll Entrance Animations (Simple Fade+Up) */
@keyframes bento-fade-in-up {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.bento-item-animate {
    opacity: 0; /* Hidden by default for JS to trigger */
}

.bento-item-animate.is-visible {
    animation: bento-fade-in-up 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* 2. Glassmorphism Utilities (If Tailwind is missing them) */
.glass-card {
    background: rgba(255, 255, 255, 0.7);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);

    border: 1px solid rgba(255, 255, 255, 0.3);
}

/* 3. Bento Card Internal Micro-interactions */
#bento-highlights article {
    will-change: transform, box-shadow;
}

#bento-highlights article:hover {
    transform: translateY(-8px) scale(1.005);
}

/* Staggered Delay Helpers */
.delay-100 { animation-delay: 100ms; }
.delay-200 { animation-delay: 200ms; }
.delay-300 { animation-delay: 300ms; }
.delay-400 { animation-delay: 400ms; }

/* 4. Text Balance Fallback for non-supporting browsers */
.text-balance {
    text-wrap: balance;
}

/* 5. Custom Scrollbar for Bento Area (If needed) */
/* 6. Modal Specific Animations */
@keyframes bounce-subtle {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-5px); }
}

.animate-bounce-subtle {
    animation: bounce-subtle 2s infinite ease-in-out;
}

/* Spinner Fallback (If Tailwind animate-spin is not picked up) */
@keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}
.animate-spin {
    animation: spin 1s linear infinite;
}