/* ==================== ANIMATIONS ==================== */
@keyframes fade-in-down {
    from { opacity: 0; transform: translateY(-20px); }
    to   { opacity: 1; transform: translateY(0); }
}
@keyframes fade-in-up {
    from { opacity: 0; transform: translateY(20px); }
    to   { opacity: 1; transform: translateY(0); }
}
@keyframes fade-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}
@keyframes ambient-slow {
    0%, 100% { transform: translate(0, 0) scale(1); }
    25%  { transform: translate(30px, -30px) scale(1.05); }
    50%  { transform: translate(-20px, 30px) scale(0.95); }
    75%  { transform: translate(-30px, -20px) scale(1.02); }
}
@keyframes ambient-flow {
    0%, 100% { transform: translate(0, 0) scale(1); }
    25%  { transform: translate(50px, -50px) scale(1.08); }
    50%  { transform: translate(-30px, 40px) scale(0.92); }
    75%  { transform: translate(40px, 30px) scale(1.05); }
}
@keyframes ambient-flow-reverse {
    0%, 100% { transform: translate(0, 0) scale(1); }
    25%  { transform: translate(-50px, 50px) scale(0.92); }
    50%  { transform: translate(30px, -40px) scale(1.08); }
    75%  { transform: translate(-40px, -30px) scale(0.95); }
}

.animate-fade-in-down         { animation: fade-in-down 0.6s ease-out both; }
.animate-fade-in-up           { animation: fade-in-up 0.6s ease-out both; }
.animate-fade-in              { animation: fade-in 0.6s ease-out both; }
.animate-ambient-slow         { animation: ambient-slow 30s ease-in-out infinite; }
.animate-ambient-flow         { animation: ambient-flow 40s ease-in-out infinite; }
.animate-ambient-flow-reverse { animation: ambient-flow-reverse 45s ease-in-out infinite; }

/* ==================== SHIMMER KEYFRAME ==================== */
@keyframes shimmer-slide {
    0%   { background-position: -200% 0; }
    100% { background-position:  200% 0; }
}

/* ==================== PHOTO CARD SHIMMER ==================== */

/* Wrapper: background abu + sweep shimmer */
.photo-shimmer-wrap {
    position: relative;
    width: 100%;
    overflow: hidden;
    /* min-height diset via JS per-card, biar masonry tidak collapse */
    background-color: #e4e4e7;   /* zinc-200 */
    border-radius: inherit;
}
.dark .photo-shimmer-wrap {
    background-color: #27272a;   /* zinc-800 */
}

/* Shimmer sweep overlay */
.photo-shimmer-wrap::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    border-radius: inherit;
    background: linear-gradient(
        105deg,
        transparent 40%,
        rgba(255, 255, 255, 0.55) 50%,
        transparent 60%
    );
    background-size: 200% 100%;
    animation: shimmer-slide 1.3s ease-in-out infinite;
}
.dark .photo-shimmer-wrap::before {
    background: linear-gradient(
        105deg,
        transparent 40%,
        rgba(255, 255, 255, 0.06) 50%,
        transparent 60%
    );
    background-size: 200% 100%;
    animation: shimmer-slide 1.3s ease-in-out infinite;
}

/* Setelah gambar load: matikan shimmer, hapus min-height */
.photo-shimmer-wrap.shimmer-done {
    background-color: transparent !important;
}
.photo-shimmer-wrap.shimmer-done::before {
    display: none !important;
}

/* Foto: invisible dulu, fade-in setelah loaded */
.photo-shimmer-img {
    position: relative;
    z-index: 2;
    opacity: 0;
    display: block;
    width: 100%;
    height: auto;
    transition: opacity 0.4s ease-out;
    border-radius: inherit;
}
.photo-shimmer-img.loaded {
    opacity: 1;
}

/* ==================== AVATAR SHIMMER ==================== */
.avatar-shimmer {
    background: linear-gradient(90deg, #e5e7eb 25%, #f3f4f6 50%, #e5e7eb 75%);
    background-size: 200% 100%;
    animation: shimmer-slide 1.5s ease-in-out infinite;
    border-radius: 9999px;
}
.dark .avatar-shimmer {
    background: linear-gradient(90deg, #27272a 25%, #3f3f46 50%, #27272a 75%);
    background-size: 200% 100%;
    animation: shimmer-slide 1.5s ease-in-out infinite;
}
.avatar-shimmer.shimmer-done {
    background: none !important;
    animation: none !important;
}

/* ==================== MASONRY ==================== */
.columns-2, .columns-3, .columns-4 { column-gap: 0.5rem; }
@media (min-width: 640px)  { .sm\:columns-2, .sm\:columns-3, .sm\:columns-4 { column-gap: 0.75rem; } }
@media (min-width: 768px)  { .md\:columns-3, .md\:columns-4 { column-gap: 1rem; } }
@media (min-width: 1024px) { .lg\:columns-4 { column-gap: 1.25rem; } }
.break-inside-avoid { break-inside: avoid; }

/* ==================== LIKE BUTTON ==================== */
.like-btn { transition: all 0.2s ease; }
.like-btn .heart-icon { transition: all 0.2s ease; }
.like-btn.liked { background: rgba(239,68,68,.1) !important; border-color: rgba(239,68,68,.5) !important; }
.like-btn.liked .heart-icon { fill: currentColor !important; color: #ef4444 !important; stroke: #ef4444 !important; }
.like-btn.liked:hover { background: rgba(239,68,68,.2) !important; border-color: #ef4444 !important; }
.dark .like-btn.liked { background: rgba(239,68,68,.15) !important; border-color: rgba(239,68,68,.6) !important; }
.dark .like-btn.liked:hover { background: rgba(239,68,68,.25) !important; }

/* ==================== FLOATING BUTTON ==================== */
.floating-upload-btn { position: fixed !important; bottom: 24px !important; right: 24px !important; z-index: 9999 !important; display: flex !important; }

/* ==================== EMPTY STATE ==================== */
.empty-state-icon { animation: float 3s ease-in-out infinite; }
@keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }

/* ==================== MISC ==================== */
html { scroll-behavior: smooth; }
.line-clamp-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.line-clamp-3 { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }

@keyframes skeleton-loading { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }
.skeleton { background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%); background-size: 200% 100%; animation: skeleton-loading 1.5s ease-in-out infinite; }
.dark .skeleton { background: linear-gradient(90deg, #27272a 25%, #18181b 50%, #27272a 75%); background-size: 200% 100%; }

.hover-lift { transition: transform 0.3s ease, box-shadow 0.3s ease; }
.hover-lift:hover { transform: translateY(-4px); box-shadow: 0 20px 25px -5px rgba(0,0,0,.1), 0 10px 10px -5px rgba(0,0,0,.04); }
.dark .hover-lift:hover { box-shadow: 0 20px 25px -5px rgba(0,0,0,.5), 0 10px 10px -5px rgba(0,0,0,.2); }

.gradient-text { background: linear-gradient(to right, #18181b, #52525b); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
.dark .gradient-text { background: linear-gradient(to right, #ffffff, #a1a1aa); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }

button:focus-visible, a:focus-visible, input:focus-visible { outline: 2px solid #3b82f6; outline-offset: 2px; }
.dark button:focus-visible, .dark a:focus-visible, .dark input:focus-visible { outline-color: #60a5fa; }

@media print { .floating-upload-btn, nav, footer { display: none !important; } }