/* 
 * Main CSS for Photo Gallery
 * Custom styles for elements that need special treatment beyond Tailwind
 */

/* ==================== 全局样式 ==================== */

/* Smooth scrolling for the entire page */
html {
    scroll-behavior: smooth;
}

/* Ensure images don't exceed container */
img {
    max-width: 100%;
    height: auto;
}

/* ==================== 语言选择器自定义样式 ==================== */

/* Custom dropdown arrow styling (already in HTML with Tailwind, but ensure compatibility) */
.language-dropdown {
    background-image: none; /* Remove any default browser styling */
}

/* ==================== 回到顶部按钮动画 ==================== */

/* Visible state for back-to-top button */
.back-to-top.visible {
    opacity: 1 !important;
    visibility: visible !important;
    transform: translateY(0) !important;
}

/* Clicked animation state */
.back-to-top.clicked {
    transform: translateY(-2px) scale(0.95) !important;
}

/* Hover effect enhancement */
.back-to-top:hover {
    transform: translateY(-4px);
}

/* Active/click effect */
.back-to-top:active {
    transform: translateY(-2px) scale(0.95);
}

/* ==================== 图片加载动画 ==================== */

/* Image loading shimmer animation */
@keyframes shimmer {
    0% {
        background-position: -1000px 0;
    }
    100% {
        background-position: 1000px 0;
    }
}

.image-loading {
    background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
    background-size: 1000px 100%;
    animation: shimmer 2s infinite;
}

/* ==================== 焦点样式（无障碍） ==================== */

/* Focus visible for accessibility */
a:focus-visible,
button:focus-visible {
    outline: 2px solid #3b82f6;
    outline-offset: 2px;
}

/* ==================== 文本选择样式 ==================== */

::selection {
    background-color: #3b82f6;
    color: white;
}

::-moz-selection {
    background-color: #3b82f6;
    color: white;
}

/* ==================== 响应式优化 ==================== */

/* Tablet devices (≤768px) */
@media (max-width: 768px) {
    .back-to-top {
        bottom: 1.25rem !important;
        right: 1.25rem !important;
        width: 2.75rem !important;
        height: 2.75rem !important;
    }
    
    .back-to-top svg {
        width: 1.25rem !important;
        height: 1.25rem !important;
    }
}

/* Mobile devices (≤480px) */
@media (max-width: 480px) {
    .back-to-top {
        bottom: 1rem !important;
        right: 1rem !important;
        width: 2.5rem !important;
        height: 2.5rem !important;
    }
    
    .back-to-top svg {
        width: 1rem !important;
        height: 1rem !important;
    }
}

/* ==================== 打印样式 ==================== */

@media print {
    .back-to-top {
        display: none !important;
    }
}

/* ==================== 图片查看器样式 ==================== */

/* Image Viewer - Active state */
.image-viewer.active {
    display: flex !important;
}

/* Viewer Image - Zoomed state */
#viewerImage.zoomed {
    max-width: none !important;
    max-height: none !important;
    width: auto !important;
    height: auto !important;
}

/* Loading Spinner Animation */
@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.loading-spinner {
    animation: spin 1s linear infinite;
}

/* Responsive - Image Viewer */
@media (max-width: 768px) {
    #viewerImage {
        max-width: 95% !important;
        max-h-95% !important;
    }
    
    /* Adjust viewer button sizes */
    .image-viewer button {
        width: 2.5rem !important;
        height: 2.5rem !important;
    }
    
    .image-viewer button i {
        font-size: 1rem !important;
    }
}

@media (max-width: 480px) {
    #viewerImage {
        max-width: 98% !important;
        max-height: 98% !important;
    }
    
    /* Smaller buttons on mobile */
    .image-viewer button {
        width: 2rem !important;
        height: 2rem !important;
    }
    
    .image-viewer button i {
        font-size: 0.875rem !important;
    }
    
    /* Adjust positions */
    .image-viewer .absolute.top-5.left-5 {
        top: 0.625rem !important;
        left: 0.625rem !important;
    }
    
    .image-viewer .absolute.top-5.right-5 {
        top: 0.625rem !important;
        right: 0.625rem !important;
    }
    
    .image-viewer .absolute.top-1\/2.left-5 {
        left: 0.625rem !important;
    }
    
    .image-viewer .absolute.top-1\/2.right-5 {
        right: 0.625rem !important;
    }
}

/* ==================== 无障碍访问优化 ==================== */

/* Reduce motion for users who prefer it */
@media (prefers-reduced-motion: reduce) {
    * {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
    
    html {
        scroll-behavior: auto;
    }
}