/* ================================================================
   CT Photos - 性能优化 & UI增强样式
   功能9b: 提高网页访问速度，优化UI流畅度及美观度
   ================================================================ */

/* === GPU加速 & 渲染优化 === */
.photo-card,
.gallery-card,
.rank-list-item,
.jury-card,
.rule-card,
.group-card,
.appeal-work-card {
    will-change: transform, opacity;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    contain: layout style paint;
}

/* 减少重排：固定图片容器尺寸 */
.photo-card img,
.gallery-card img,
.pf-card-img img {
    aspect-ratio: 4 / 3;
    object-fit: cover;
    width: 100%;
    background: #f1f5f9;
    will-change: transform;
}

/* 图片加载占位 */
img[loading="lazy"] {
    opacity: 0;
    transition: opacity 0.35s ease;
}
img[loading="lazy"].loaded,
img.loaded {
    opacity: 1 !important;
}

/* === 滚动性能 === */
html {
    scroll-behavior: smooth;
}
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        transition-duration: 0.01ms !important;
    }
}

/* === 页面过渡优化 === */
.navbar {
    will-change: background-color, box-shadow;
    transition: background-color 0.2s ease, box-shadow 0.2s ease;
}

/* === 卡片hover微交互增强 === */
.photo-card {
    transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.25s ease;
}
.photo-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 28px rgba(79, 70, 229, 0.12), 0 4px 8px rgba(0, 0, 0, 0.06);
}

/* === 按钮交互优化 === */
button, .btn, [type="submit"], .nav-btn, .group-card-btn {
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
}
button:active, .btn:active, [type="submit"]:active {
    transform: scale(0.97);
}

/* === 输入框聚焦动效 === */
input:focus, textarea:focus, select:focus {
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

/* === 弹窗动效优化 === */
.create-group-modal,
#adminMemberModal {
    transition: opacity 0.25s ease;
}
.create-group-modal.show {
    animation: modalFadeIn 0.25s ease;
}
@keyframes modalFadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* === 骨架屏加载 === */
.skeleton-loading {
    background: linear-gradient(90deg, #f1f5f9 25%, #e2e8f0 50%, #f1f5f9 75%);
    background-size: 200% 100%;
    animation: skeletonShimmer 1.5s infinite;
    border-radius: 8px;
}
@keyframes skeletonShimmer {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* === 滚动条美化 === */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}
::-webkit-scrollbar-track {
    background: transparent;
}
::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
    background: #94a3b8;
}

/* === 选中文字颜色 === */
::selection {
    background: rgba(79, 70, 229, 0.15);
    color: #1e293b;
}

/* === 响应式优化 === */
@media (max-width: 768px) {
    .photo-card:hover {
        transform: none;
        box-shadow: var(--ct-shadow);
    }
    /* 移动端减少动画 */
    .photo-card, .gallery-card, .rank-list-item {
        will-change: auto;
    }
}

/* === 字体渲染优化 === */
body {
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* === 链接无延迟点击 === */
a {
    touch-action: manipulation;
}

/* === 表格响应式 === */
@media (max-width: 640px) {
    .data-table {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
}