/**
 * 图片灯箱组件样式
 * 适用于模特详情页、内容文章页等
 */

/* 灯箱遮罩 */
.gallery-lightbox {
    backdrop-filter: blur(4px);
}

/* 灯箱图片 - 禁止选择和拖拽 */
.gallery-lightbox img {
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -webkit-user-drag: none;
}

/* 缩略图容器样式 */
.gallery-thumbs {
    scrollbar-width: thin;
    scrollbar-color: #ec4899 transparent;
}

.gallery-thumbs::-webkit-scrollbar {
    height: 8px;
}

.gallery-thumbs::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.2);
    border-radius: 4px;
}

.gallery-thumbs::-webkit-scrollbar-thumb {
    background-color: #ec4899;
    border-radius: 4px;
}

.gallery-thumbs::-webkit-scrollbar-thumb:hover {
    background-color: #db2777;
}

/* 图片网格悬停效果 */
.gallery-item {
    position: relative;
    overflow: hidden;
    cursor: pointer;
}

.gallery-item::after {
    content: '🔍';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0);
    font-size: 2rem;
    color: white;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.8);
    transition: transform 0.2s;
    pointer-events: none;
    z-index: 1;
}

.gallery-item:hover::after {
    transform: translate(-50%, -50%) scale(1);
}

.gallery-item img {
    transition: transform 0.3s ease;
}

.gallery-item:hover img {
    transform: scale(1.05);
}

/* Alpine.js cloak */
[x-cloak] {
    display: none !important;
}

/* 灯箱按钮 - 移除 transform 避免与 Alpine.js x-show 冲突 */
.lightbox-btn {
    /* 不使用 transition，避免跳动 */
}

.lightbox-btn:active {
    opacity: 0.8;
}

/* 缩放指示器 */
.zoom-indicator {
    animation: fadeInOut 0.3s ease;
}

@keyframes fadeInOut {
    0% { opacity: 0; transform: translateY(10px); }
    100% { opacity: 1; transform: translateY(0); }
}