/* overlay centering */
#lightbox {
    display: none;
    align-items: center;
    justify-content: center;
}
#lightbox:not(.hidden) {
    display: flex;
}
#lb-img {
    max-height: 85vh;
    max-width: 90vw;
    object-fit: contain;
}

/* simple fade-up animations */
@keyframes fadeUp {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}
.animate-fade-up {
    animation: fadeUp .6s ease forwards;
    opacity: 0;
}
.animate-fade-up.delay-1 { animation-delay: .12s; }
.animate-fade-up.delay-2 { animation-delay: .24s; }

/* slow bounce for pill label */
@keyframes bounceSlow {
    0%,100%{transform:translateY(0);}50%{transform:translateY(-6px);}
}
.animate-bounce-slow {
    animation: bounceSlow 2.5s ease-in-out infinite;
}

/* floating thumbnails */
.floating-thumb {
    transition: transform 800ms cubic-bezier(.2,.9,.2,1);
    transform-origin: center;
    animation: floaty 5s ease-in-out infinite;
}
.floating-thumb.delay-1 { transition-delay: 120ms; }
.floating-thumb.delay-2 { transition-delay: 220ms; }

/* subtle float animation */
@keyframes floaty {
    from {transform:translateY(0) rotate(0deg);}
    50%{transform:translateY(-6px) rotate(1deg);}
    to{transform:translateY(0) rotate(0deg);}
}

/* hero logo hover effect */
.hero-logo img { transition: transform .4s ease; }
.hero-logo img:hover { transform: scale(1.08) rotate(-2deg); }

/* hero background */
#hero-bg { transform: translateY(0); transition: transform 0.12s linear; }

/* header tweaks */
header a { color: inherit; text-decoration: none; }
header nav a { color: #0f172a; }
.rounded-3xl { border-radius: 1.25rem; }

/* social icons spacing */
footer img { display:inline-block; vertical-align:middle; }
footer a { color: #e5e7eb; }
footer a:hover { color: #fff; }

/* responsive nav */
@media (max-width:767px){ header nav{display:none !important;} }

/* ==================== */
/* CATEGORY IMAGE GRID */
/* ==================== */
.category-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 15px;
    justify-items: center;
    margin-bottom: 30px;
    padding: 10px 0;
}

.image-thumb {
    position: relative;
    overflow: hidden;
    border-radius: 8px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.image-thumb img {
    width: 150px;
    height: 150px;
    object-fit: cover;
    cursor: pointer;
    border-radius: 8px;
    transition: transform 0.25s ease-in-out;
}

.image-thumb:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 12px rgba(0,0,0,0.2);
}

.image-thumb img:hover {
    transform: scale(1.05);
}

/* Lightbox active image styling */
#lightbox img {
    border-radius: 10px;
    box-shadow: 0 8px 16px rgba(0,0,0,0.4);
}