/* Custom Reveal Animations */
.reveal-up { 
    opacity: 0; 
    transform: translateY(20px); 
    transition: all 0.8s cubic-bezier(0.16, 1, 0.3, 1); 
}
.reveal-up.active { 
    opacity: 1; 
    transform: translateY(0); 
}
.delay-100 { transition-delay: 100ms; }
.delay-200 { transition-delay: 200ms; }
.delay-300 { transition-delay: 300ms; }

/* Bento Grid Mouse Spotlight Effect & Image Hover Scale */
.bento-card {
    position: relative;
    background: rgba(10, 10, 15, 0.6);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.05);
    overflow: hidden;
    border-radius: 1.5rem;
}
.bento-card::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: radial-gradient(600px circle at var(--mouse-x, 0) var(--mouse-y, 0), rgba(14, 165, 233, 0.15), transparent 40%);
    z-index: 0;
    transition: opacity 0.3s;
    opacity: 0;
}
.bento-card:hover::before { 
    opacity: 1; 
}
.bento-card > * { 
    position: relative; 
    z-index: 1; 
}
.bento-card img {
    transition: transform 0.7s ease;
}
.bento-card:hover img {
    transform: scale(1.1);
}

/* Background Grids & Gradients */
.bg-grid-animated { 
    background-size: 50px 50px; 
    animation: panGrid 20s linear infinite; 
}
@keyframes panGrid { 
    0% { background-position: 0 0; } 
    100% { background-position: 50px 50px; } 
}

.text-gradient {
    background: linear-gradient(to right, #ffffff, #94a3b8, #0ea5e9);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    background-size: 200% auto;
    animation: textShine 5s linear infinite;
}
@keyframes textShine { 
    to { background-position: 200% center; } 
}

/* UI Transitions */
#navbar {
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Mobile Menu */
#mobile-menu { 
    transition: max-height 0.4s ease-in-out, opacity 0.3s ease-in-out; 
    max-height: 0; 
    opacity: 0; 
    overflow: hidden; 
    pointer-events: none;
}
#mobile-menu.open { 
    max-height: 500px; 
    opacity: 1; 
    pointer-events: auto;
}

/* Slider Transitions */
.slide {
    transition: opacity 1s ease-in-out;
}
.slide-img { 
    transition: transform 6s ease-out; 
    transform: scale(1.05); 
}
.slide.active .slide-img { 
    transform: scale(1); 
}

#dynamic-slogan {
    transition: opacity 0.5s ease-in-out;
    display: inline-block;
}