/**
 * NexusAI Gallery Studio - Frontend Masonry Gallery Stylesheet
 */

.nexusai-gallery-container {
    width: 100%;
    margin: 30px auto;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    box-sizing: border-box;
}

.nexusai-gallery-container * {
    box-sizing: border-box;
}

/* Themes */
.nexusai-gallery-container.nexus-theme-dark {
    --nxg-bg: #090d16;
    --nxg-card-bg: #111827;
    --nxg-text: #f9fafb;
    --nxg-text-muted: #9ca3af;
    --nxg-border: rgba(255, 255, 255, 0.08);
    --nxg-overlay-bg: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(10,14,24,0.95) 85%);
}

.nexusai-gallery-container.nexus-theme-light {
    --nxg-bg: #f8fafc;
    --nxg-card-bg: #ffffff;
    --nxg-text: #0f172a;
    --nxg-text-muted: #64748b;
    --nxg-border: rgba(0, 0, 0, 0.08);
    --nxg-overlay-bg: linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(15,23,42,0.92) 80%);
}

/* Category Filter Tabs */
.nexusai-filter-tabs {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-bottom: 28px;
}

.nexusai-filter-tab {
    background: var(--nxg-card-bg);
    color: var(--nxg-text-muted);
    border: 1px solid var(--nxg-border);
    padding: 8px 18px;
    border-radius: 30px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.25s ease;
}

.nexusai-filter-tab:hover {
    color: #fff;
    border-color: #6366f1;
    transform: translateY(-1px);
}

.nexusai-filter-tab.active {
    background: linear-gradient(135deg, #6366f1 0%, #a855f7 100%);
    color: #ffffff;
    border-color: transparent;
    box-shadow: 0 4px 15px rgba(99, 102, 241, 0.35);
}

/* Masonry Columns */
.nexusai-masonry-grid {
    column-gap: 20px;
    opacity: 0;
    transition: opacity 0.55s cubic-bezier(0.16, 1, 0.3, 1);
}

.nexusai-masonry-grid.is-revealed {
    opacity: 1;
}

.nexusai-cols-2 { column-count: 2; }
.nexusai-cols-3 { column-count: 3; }
.nexusai-cols-4 { column-count: 4; }
.nexusai-cols-5 { column-count: 5; }

@media (max-width: 1024px) {
    .nexusai-cols-4, .nexusai-cols-5 { column-count: 3; }
}
@media (max-width: 768px) {
    .nexusai-cols-3, .nexusai-cols-4, .nexusai-cols-5 { column-count: 2; }
}
@media (max-width: 480px) {
    .nexusai-masonry-grid { column-count: 1; }
}

/* ==========================================================================
   Luxury AI Gallery Preloader & Skeleton Shimmer
   ========================================================================== */
.nexusai-gallery-preloader {
    width: 100%;
    margin-bottom: 24px;
    transition: opacity 0.45s cubic-bezier(0.16, 1, 0.3, 1), transform 0.45s ease, max-height 0.5s ease 0.2s, margin 0.5s ease 0.2s;
    overflow: hidden;
}

.nexusai-gallery-preloader.is-hidden {
    opacity: 0;
    transform: translateY(-10px);
    max-height: 0;
    margin: 0;
    padding: 0;
    pointer-events: none;
}

.nexusai-loader-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 40px 20px 32px 20px;
    text-align: center;
}

/* Dual-Ring AI Spinner */
.nexusai-loader-spinner {
    position: relative;
    width: 64px;
    height: 64px;
    margin-bottom: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.nexusai-loader-ring {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 2px solid transparent;
}

.nexusai-loader-ring.outer {
    border-top-color: #6366f1;
    border-right-color: #a855f7;
    animation: nexus-spin-clockwise 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
    filter: drop-shadow(0 0 8px rgba(99, 102, 241, 0.5));
}

.nexusai-loader-ring.inner {
    inset: 6px;
    border-bottom-color: #ec4899;
    border-left-color: #38bdf8;
    animation: nexus-spin-counter 0.9s cubic-bezier(0.5, 0, 0.5, 1) infinite;
    filter: drop-shadow(0 0 6px rgba(236, 72, 153, 0.4));
}

.nexusai-loader-sparkle {
    font-size: 20px;
    color: #f8fafc;
    animation: nexus-sparkle-pulse 1.6s ease-in-out infinite alternate;
    text-shadow: 0 0 12px rgba(255, 255, 255, 0.8), 0 0 20px rgba(99, 102, 241, 0.6);
}

@keyframes nexus-spin-clockwise {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

@keyframes nexus-spin-counter {
    0% { transform: rotate(360deg); }
    100% { transform: rotate(0deg); }
}

@keyframes nexus-sparkle-pulse {
    0% { transform: scale(0.85); opacity: 0.6; }
    100% { transform: scale(1.15); opacity: 1; }
}

/* Luxury Typography */
.nexusai-loader-text {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.nexusai-loader-title {
    font-size: 16px;
    font-weight: 700;
    letter-spacing: 0.5px;
    background: linear-gradient(90deg, #94a3b8 0%, #ffffff 40%, #c084fc 60%, #94a3b8 100%);
    background-size: 200% auto;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: nexus-shimmer-text 2.5s linear infinite;
}

.nexusai-loader-sub {
    font-size: 12px;
    color: var(--nxg-text-muted);
    letter-spacing: 0.2px;
}

@keyframes nexus-shimmer-text {
    0% { background-position: -200% 0; }
    100% { background-position: 200% 0; }
}

/* Skeleton Preview Grid */
.nexusai-skeleton-grid {
    column-gap: 20px;
    width: 100%;
}

.nexusai-skeleton-card {
    border-radius: 14px;
    background: linear-gradient(90deg, rgba(255,255,255,0.03) 0%, rgba(255,255,255,0.09) 50%, rgba(255,255,255,0.03) 100%);
    background-size: 200% 100%;
    animation: nexus-skeleton-wave 1.8s ease-in-out infinite;
    border: 1px solid var(--nxg-border);
    break-inside: avoid;
    margin-bottom: 20px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
}

.nexus-theme-light .nexusai-skeleton-card {
    background: linear-gradient(90deg, rgba(0,0,0,0.03) 0%, rgba(0,0,0,0.07) 50%, rgba(0,0,0,0.03) 100%);
    background-size: 200% 100%;
}

@keyframes nexus-skeleton-wave {
    0% { background-position: -200% 0; }
    100% { background-position: 200% 0; }
}

/* Gallery Item Card with Staggered Entrance */
.nexusai-gallery-card {
    position: relative;
    break-inside: avoid;
    margin-bottom: 20px;
    border-radius: 14px;
    overflow: hidden;
    background: var(--nxg-card-bg);
    border: 1px solid var(--nxg-border);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
    cursor: pointer;
    opacity: 0;
    transform: translateY(24px) scale(0.98);
    transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.45s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.35s ease;
}

.nexusai-gallery-card.is-animated {
    opacity: 1;
    transform: translateY(0) scale(1);
}

.nexusai-gallery-card:hover {
    transform: translateY(-6px) scale(1.01) !important;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.35);
}

/* Shimmer placeholder per card */
.nexusai-card-shimmer {
    position: absolute;
    inset: 0;
    min-height: 220px;
    background: linear-gradient(90deg, rgba(255,255,255,0.03) 0%, rgba(255,255,255,0.08) 50%, rgba(255,255,255,0.03) 100%);
    background-size: 200% 100%;
    animation: nexus-skeleton-wave 1.8s ease-in-out infinite;
    z-index: 1;
    pointer-events: none;
    transition: opacity 0.4s ease, visibility 0.4s;
}

.nexus-theme-light .nexusai-card-shimmer {
    background: linear-gradient(90deg, rgba(0,0,0,0.03) 0%, rgba(0,0,0,0.07) 50%, rgba(0,0,0,0.03) 100%);
    background-size: 200% 100%;
}

.nexusai-gallery-card.is-loaded .nexusai-card-shimmer {
    opacity: 0;
    visibility: hidden;
}

.nexusai-gallery-card img.nexusai-card-img,
.nexusai-gallery-card img {
    display: block;
    width: 100%;
    height: auto;
    object-fit: cover;
    opacity: 0;
    transition: opacity 0.5s cubic-bezier(0.16, 1, 0.3, 1), transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.nexusai-gallery-card.is-loaded img.nexusai-card-img,
.nexusai-gallery-card.is-loaded img {
    opacity: 1;
}

.nexusai-gallery-card:hover img {
    transform: scale(1.04);
}

/* Card Hover Overlay */
.nexusai-card-overlay {
    position: absolute;
    inset: 0;
    background: var(--nxg-overlay-bg);
    opacity: 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 20px;
    transition: opacity 0.3s ease;
}

.nexusai-gallery-card:hover .nexusai-card-overlay {
    opacity: 1;
}

.nexusai-card-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
}

.nexusai-card-badge {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 3px 8px;
    border-radius: 6px;
    background: rgba(99, 102, 241, 0.3);
    color: #a5b4fc;
    border: 1px solid rgba(99, 102, 241, 0.4);
    backdrop-filter: blur(8px);
}

.nexusai-card-prompt {
    font-size: 13px;
    line-height: 1.4;
    color: #f8fafc;
    margin: 0 0 12px 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-shadow: 0 1px 3px rgba(0,0,0,0.8);
}

.nexusai-card-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.nexusai-view-btn {
    background: #6366f1;
    color: #fff;
    border: none;
    border-radius: 20px;
    padding: 6px 14px;
    font-size: 12px;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    transition: background 0.2s;
}

.nexusai-view-btn:hover {
    background: #4f46e5;
}

/* Copy Button Polish */
.nexusai-copy-btn {
    background: rgba(22, 21, 19, 0.75);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.18);
    color: #f1f5f9;
    width: 32px;
    height: 32px;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    padding: 0;
    line-height: 1;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.nexusai-copy-btn svg {
    display: block;
    width: 14px;
    height: 14px;
    stroke: currentColor;
    pointer-events: none;
    transition: transform 0.2s ease;
}

.nexusai-copy-btn:hover {
    background: #c1552f;
    border-color: #c1552f;
    color: #ffffff;
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(193, 85, 47, 0.4);
}

.nexusai-copy-btn:hover svg {
    transform: scale(1.1);
}

.nexusai-copy-btn.copied {
    background: #10b981 !important;
    border-color: #10b981 !important;
    color: #ffffff !important;
}