/* AI绘图作品页面样式：简体中文, 桌面端 */

/* 桌面端样式 (宽度大于768px) */
@media (min-width: 769px) {

    /* ===== 第一阶段：媒体查询基础设置 ===== */

    /* 主容器样式 */
    .main-container {
        padding: 40px;
        max-width: 1200px;
        margin: 0 auto;
    }

    /* 标题区域样式 */
    .header-section {
        text-align: center;
        margin-bottom: 60px;
    }

    .header-section h1 {
        font-size: 36px;
        color: #333;
        margin-bottom: 20px;
        font-weight: 600;
    }

    .header-section p {
        font-size: 18px;
        color: #666;
        line-height: 1.6;
        margin: 0;
    }

    /* 画廊区域容器 - 桌面端增强的3D透视 */
    .gallery-section {
        perspective: 1500px;
        width: 100%;
        height: 600px;
        position: relative;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        margin: 0 auto;
    }

    /* 3D旋转木马包装器 - 桌面端尺寸 */
    .carousel-3d-wrapper {
        position: relative;
        width: 500px;
        height: 500px;
        margin: 0 auto;
    }

    /* 3D容器 - 保持3D变换，调整比例 */
    .carousel-3d-container {
        width: 100%;
        height: 100%;
        position: relative;
        transform-style: preserve-3d;
    }

    /* ===== 第二阶段：3D画廊尺寸扩展 ===== */

    /* 旋转环 - 绝对定位，居中显示 */
    .carousel-ring {
        position: absolute;
        width: 100%;
        height: 100%;
        transform-style: preserve-3d;
        top: 0;
        left: 0;
        opacity: 0;
        visibility: hidden;
        transition: opacity 0.6s ease, visibility 0.6s ease;
    }

    /* 只有活跃的ring显示 */
    .carousel-ring.active {
        opacity: 1;
        visibility: visible;
    }

    /* 隐藏状态的ring */
    .carousel-ring.hidden {
        opacity: 0;
        visibility: hidden;
    }

    /* 作品卡片基础样式 - 桌面端1.5倍放大 */
    .artwork-card {
        position: absolute;
        width: 240px;
        height: 320px;
        left: 50%;
        top: 50%;
        margin-left: -90px;
        margin-top: -90px;
        border-radius: 15px;
        overflow: hidden;
        transition: all 0.4s ease;
        transform-style: preserve-3d;
    }

    /* 卡片内的图片样式 */
    .artwork-card img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        border-radius: 15px;
    }

    /* 5张卡片的3D环形位置 - 扩展半径到400px */
    .artwork-card[data-position="1"] {
        transform: rotateY(0deg) translateZ(400px);
        opacity: 1.0;
    }

    .artwork-card[data-position="2"] {
        transform: rotateY(72deg) translateZ(400px);
        opacity: 0.8;
    }

    .artwork-card[data-position="3"] {
        transform: rotateY(144deg) translateZ(400px);
        opacity: 0.6;
    }

    .artwork-card[data-position="4"] {
        transform: rotateY(216deg) translateZ(400px);
        opacity: 0.6;
    }

    .artwork-card[data-position="5"] {
        transform: rotateY(288deg) translateZ(400px);
        opacity: 0.8;
    }

    /* ===== 第三阶段：增强视觉效果 ===== */

    /* 画廊区域环境反射效果 */
    .gallery-section {
        background: radial-gradient(ellipse at center,
            rgba(255, 255, 255, 0.1) 0%,
            rgba(200, 200, 200, 0.05) 40%,
            transparent 70%);
    }

    /* 3D旋转木马包装器毛玻璃背景 */
    .carousel-3d-wrapper {
        backdrop-filter: blur(10px);
        background: rgba(255, 255, 255, 0.1);
        border-radius: 50%;
        border: 1px solid rgba(255, 255, 255, 0.2);
    }

    /* 增强卡片视觉效果 */
    .artwork-card {
        box-shadow:
            0 20px 60px rgba(0, 0, 0, 0.4),
            0 8px 25px rgba(0, 0, 0, 0.2),
            inset 0 1px 0 rgba(255, 255, 255, 0.3);
        background: linear-gradient(145deg,
            rgba(255, 255, 255, 0.1) 0%,
            rgba(255, 255, 255, 0.05) 100%);
        border: 1px solid rgba(255, 255, 255, 0.2);
    }

    /* 卡片3D厚度效果 */
    .artwork-card::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: linear-gradient(145deg,
            rgba(255, 255, 255, 0.2) 0%,
            rgba(0, 0, 0, 0.1) 100%);
        border-radius: 15px;
        transform: translateZ(-10px);
        z-index: -1;
    }

    /* 根据卡片位置设置不同的视觉效果 */
    .artwork-card[data-position="1"] {
        filter: brightness(1.2) contrast(1.1);
        box-shadow:
            0 25px 70px rgba(0, 0, 0, 0.5),
            0 0 30px rgba(255, 255, 255, 0.3);
    }

    .artwork-card[data-position="2"],
    .artwork-card[data-position="5"] {
        filter: brightness(1.0) contrast(1.05) blur(0.5px);
    }

    .artwork-card[data-position="3"],
    .artwork-card[data-position="4"] {
        filter: brightness(0.8) contrast(0.9) blur(1px);
    }

    /* 旋转环自动旋转动画增强 */
    .carousel-ring.active {
        animation: rotation 30s linear infinite;
    }

    @keyframes rotation {
        0% {
            transform: rotateY(0deg);
        }
        100% {
            transform: rotateY(360deg);
        }
    }

    /* 3D容器悬停时暂停动画 */
    .carousel-3d-container:hover .carousel-ring {
        animation-play-state: paused;
    }

    /* ===== 第四阶段：鼠标交互增强 ===== */

    /* 卡片悬停增强效果 */
    .artwork-card:hover {
        transform-origin: center center;
        opacity: 1.0 !important;
        box-shadow:
            0 30px 80px rgba(0, 0, 0, 0.6),
            0 0 40px rgba(255, 255, 255, 0.5),
            0 0 80px rgba(255, 255, 255, 0.3);
        z-index: 10;
        filter: brightness(1.3) contrast(1.2) !important;
    }

    /* 具体位置的卡片悬停效果 - scale 1.3 + translateZ突出 */
    .artwork-card[data-position="1"]:hover {
        transform: rotateY(0deg) translateZ(500px) scale(1.3);
    }

    .artwork-card[data-position="2"]:hover {
        transform: rotateY(72deg) translateZ(500px) scale(1.3);
    }

    .artwork-card[data-position="3"]:hover {
        transform: rotateY(144deg) translateZ(500px) scale(1.3);
    }

    .artwork-card[data-position="4"]:hover {
        transform: rotateY(216deg) translateZ(500px) scale(1.3);
    }

    .artwork-card[data-position="5"]:hover {
        transform: rotateY(288deg) translateZ(500px) scale(1.3);
    }

    /* 增强悬停时的发光边框效果 */
    .artwork-card:hover::before {
        content: '';
        position: absolute;
        top: -3px;
        left: -3px;
        right: -3px;
        bottom: -3px;
        background: linear-gradient(45deg,
            #ff6b6b, #4ecdc4, #45b7d1, #96ceb4, #ffeaa7, #ff6b6b);
        border-radius: 18px;
        z-index: -1;
        filter: blur(8px);
        opacity: 0.8;
        animation: glow-pulse 2s ease-in-out infinite alternate;
    }

    /* 发光脉冲动画 */
    @keyframes glow-pulse {
        0% {
            filter: blur(8px);
            opacity: 0.8;
        }
        100% {
            filter: blur(12px);
            opacity: 1.0;
        }
    }

    /* 画廊区域鼠标追踪倾斜效果 */
    .gallery-section {
        transition: transform 0.3s ease-out;
    }

    .gallery-section:hover {
        transform-style: preserve-3d;
    }

    /* 鼠标进入画廊区域时的聚光灯效果 */
    .gallery-section::after {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: radial-gradient(circle at var(--mouse-x, 50%) var(--mouse-y, 50%),
            rgba(255, 255, 255, 0.15) 0%,
            rgba(255, 255, 255, 0.05) 30%,
            transparent 60%);
        pointer-events: none;
        opacity: 0;
        transition: opacity 0.3s ease;
        border-radius: 50%;
    }

    .gallery-section:hover::after {
        opacity: 1;
    }

    /* 3D容器鼠标跟随倾斜 */
    .carousel-3d-container {
        transition: transform 0.2s ease-out;
    }

    /* smooth鼠标跟随动画过渡 */
    .artwork-card {
        transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    }

    /* 卡片图片的过渡效果 */
    .artwork-card img {
        transition: transform 0.4s ease;
    }

    .artwork-card:hover img {
        transform: scale(1.05);
    }

    /* ===== 第五阶段：导航控件优化 ===== */

    /* 左右导航按钮重新设计 */
    .left-nav-btn,
    .right-nav-btn {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        width: 70px;
        height: 70px;
        border: none;
        border-radius: 50%;
        background: #0071e3;
        backdrop-filter: blur(20px);
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
        z-index: 15;
    }

    /* 左导航按钮定位 */
    .left-nav-btn {
        left: -400px;
    }

    /* 右导航按钮定位 */
    .right-nav-btn {
        right: -400px;
    }

    /* 按钮内的SVG图标样式增强 */
    .left-nav-btn svg,
    .right-nav-btn svg {
        color: #f0f7fd;
        transition: all 0.3s ease;
        filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
    }

    /* 悬停效果增强 */
    .left-nav-btn:hover,
    .right-nav-btn:hover {
        background: #005bb5;
        transform: translateY(-50%) scale(1.15);

    }

    /* 悬停时图标效果 */
    .left-nav-btn:hover svg,
    .right-nav-btn:hover svg {
        color:  #ffffff;
        transform: scale(1.1);
        filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.4));
    }

    /* 点击时的反馈效果 */
    .left-nav-btn:active,
    .right-nav-btn:active {
        background: #004488;
        transform: translateY(-50%) scale(0.95);
        box-shadow:
            0 4px 16px rgba(0, 0, 0, 0.4),
            inset 0 1px 0 rgba(255, 255, 255, 0.2);
    }

    /* 键盘焦点的可视化指示器 */
    .left-nav-btn:focus,
    .right-nav-btn:focus {
        outline: none;
        box-shadow:
            0 8px 32px rgba(0, 0, 0, 0.3),
            inset 0 1px 0 rgba(255, 255, 255, 0.3),
            0 0 0 3px rgba(74, 144, 226, 0.6),
            0 0 0 1px rgba(255, 255, 255, 0.2);
    }

    /* 组指示器增强设计 */
    .group-indicators {
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 20px;
        margin-top: 50px;
        position: relative;
        z-index: 10;
    }

    /* 每个dot元素的增强样式 */
    .dot {
        width: 16px;
        height: 16px;
        border-radius: 50%;
        background: linear-gradient(145deg,
            rgba(255, 255, 255, 0.3) 0%,
            rgba(255, 255, 255, 0.1) 100%);
        backdrop-filter: blur(10px);
        cursor: pointer;
        transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
        position: relative;
        display: block;
        border: 1px solid rgba(255, 255, 255, 0.3);
        box-shadow:
            0 4px 16px rgba(0, 0, 0, 0.2),
            inset 0 1px 0 rgba(255, 255, 255, 0.4);
    }

    /* 活跃状态的dot增强效果 */
    .dot.active {
        background: linear-gradient(145deg,
            rgba(255, 255, 255, 0.8) 0%,
            rgba(255, 255, 255, 0.6) 100%);
        transform: scale(1.4);
        box-shadow:
            0 8px 24px rgba(0, 0, 0, 0.3),
            0 0 20px rgba(255, 255, 255, 0.6),
            0 0 40px rgba(255, 255, 255, 0.3),
            inset 0 1px 0 rgba(255, 255, 255, 0.6);
    }

    /* 悬停时dot预览缩略图效果 */
    .dot:hover {
        background: linear-gradient(145deg,
            rgba(255, 255, 255, 0.5) 0%,
            rgba(255, 255, 255, 0.3) 100%);
        transform: scale(1.3);
        box-shadow:
            0 6px 20px rgba(0, 0, 0, 0.3),
            0 0 15px rgba(255, 255, 255, 0.5),
            inset 0 1px 0 rgba(255, 255, 255, 0.5);
    }

    /* 活跃状态悬停时的效果 */
    .dot.active:hover {
        transform: scale(1.5);
        box-shadow:
            0 10px 30px rgba(0, 0, 0, 0.4),
            0 0 25px rgba(255, 255, 255, 0.8),
            0 0 50px rgba(255, 255, 255, 0.4),
            inset 0 1px 0 rgba(255, 255, 255, 0.7);
    }

    /* dot的脉冲动画效果增强 */
    .dot.active::before {
        content: '';
        position: absolute;
        top: -6px;
        left: -6px;
        right: -6px;
        bottom: -6px;
        border-radius: 50%;
        border: 2px solid rgba(255, 255, 255, 0.4);
        animation: dot-pulse-enhanced 3s ease-in-out infinite;
    }

    /* 增强脉冲动画关键帧 */
    @keyframes dot-pulse-enhanced {
        0% {
            transform: scale(1);
            opacity: 1;
            border-color: rgba(255, 255, 255, 0.4);
        }
        50% {
            transform: scale(1.8);
            opacity: 0.6;
            border-color: rgba(255, 255, 255, 0.2);
        }
        100% {
            transform: scale(2.5);
            opacity: 0;
            border-color: rgba(255, 255, 255, 0.1);
        }
    }

    /* 进度条显示当前播放进度 */
    .group-indicators::after {
        content: '';
        position: absolute;
        bottom: -15px;
        left: 0;
        right: 0;
        height: 3px;
        background: linear-gradient(90deg,
            rgba(255, 255, 255, 0.1) 0%,
            rgba(255, 255, 255, 0.3) 50%,
            rgba(255, 255, 255, 0.1) 100%);
        border-radius: 2px;
        backdrop-filter: blur(5px);
    }

    /* dot焦点样式 */
    .dot:focus {
        outline: none;
        border: 2px solid rgba(74, 144, 226, 0.8);
        box-shadow:
            0 4px 16px rgba(0, 0, 0, 0.2),
            0 0 0 3px rgba(74, 144, 226, 0.3),
            inset 0 1px 0 rgba(255, 255, 255, 0.4);
    }
}