/**
 * Marei Steel — Components layer (Perf 1.2.1).
 *
 * Moved here from inline <style> blocks in template-parts/portfolio.php
 * and template-parts/services.php. Inline styles are uncacheable and
 * re-downloaded with every HTML response; this file is cached by the
 * browser + LiteSpeed Cache once and reused across pages.
 */

/* ─── Portfolio gallery ─── */
.gallery-item {
    opacity: 0;
    animation: galleryFadeIn 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
@keyframes galleryFadeIn {
    from { opacity: 0; transform: translateY(15px); }
    to { opacity: 1; transform: translateY(0); }
}
.gallery-overlay {
    opacity: 0;
    transition: opacity 0.3s;
}
.group:hover .gallery-overlay {
    opacity: 1;
}
.gallery-overlay-content {
    transform: translateY(1rem);
    transition: transform 0.3s;
}
.group:hover .gallery-overlay-content {
    transform: translateY(0);
}
/* Lightbox */
.lightbox-backdrop {
    transition: opacity 0.3s;
}
.lightbox-content {
    animation: galleryFadeIn 0.4s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
/* Responsive grid row heights */
#portfolio-grid {
    grid-auto-rows: 300px;
}
@media (min-width: 768px) {
    #portfolio-grid {
        grid-auto-rows: 250px;
    }
}

/* ─── Services bento grid ─── */
.bento-card {
    box-shadow: 0 8px 30px rgba(0,0,0,0.04);
    transition: all 0.5s;
}
.bento-card:hover {
    box-shadow: 0 20px 40px rgba(245,158,11,0.1);
}
.bento-icon-box {
    background-image: linear-gradient(to bottom right, #f8fafc, #f1f5f9);
    transition: all 0.5s;
}
.group:hover .bento-icon-box {
    background-image: linear-gradient(to bottom right, #f59e0b, #fbbf24);
    border-color: transparent;
}
.bento-ghost {
    transition: all 0.7s;
}
.group:hover .bento-ghost {
    opacity: 0.03;
    transform: scale(1.1) rotate(12deg);
}
.group:hover .bento-icon-box .bento-icon {
    color: #fff;
    transform: scale(1.1);
}
/* Missing group-hover utilities */
.group:hover .gh-opacity-40 { opacity: 0.4; }
.group:hover .gh-bg-amber-100 { background-color: #fef3c7; }
.group:hover .gh-text-amber-500 { color: #f59e0b; }
.group:hover .gh-border-amber-100 { border-color: #fef3c7; }
.group:hover .gh-text-slate-600 { color: #475569; }

/* ─── Marquee (clients) — GPU-friendly ─── */
@keyframes infinite-scroll {
    from { transform: translateX(0); }
    to { transform: translateX(-50%); }
}
.animate-infinite-scroll {
    animation: infinite-scroll 40s linear infinite;
    will-change: transform;
}
@media (prefers-reduced-motion: reduce) {
    .animate-infinite-scroll,
    .gallery-item {
        animation: none;
        opacity: 1;
    }
}