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

/* 引入通用CSS变量 */
:root {
    /* 背景色 */
    --color-bg: #f8f8f8;
    --color-sidebar-bg: #f9f9f9;

    /* 简体中文字体栈 */
    --font-zh-cn: "Noto Serif SC", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "WenQuanYi Micro Hei", "Helvetica Neue", Arial, sans-serif;

    /* 字体颜色 */
    --color-text: #000000;
}

/* ===== 移动端样式 (max-width: 768px) ===== */
@media (max-width: 768px) {
    body {
        font-family: var(--font-zh-cn);
        color: var(--color-text);
        background-color: var(--color-bg);
        margin: 0;
        
    }

    /* 移动端页眉 */
    .mobile-header {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        height: 60px;
        background-color: var(--color-sidebar-bg);
        display: flex;
        align-items: center;
        padding: 0 20px;
        box-sizing: border-box;
        z-index: 1000;
        border-bottom: 1px solid #e0e0e0;
    }

    .hamburger-menu {
        width: 24px;
        height: 24px;
        cursor: pointer;
    }

    .logo-text {
        flex: 1;
        text-align: center;
        font-size: 18px;
        font-weight: bold;
    }

    /* 移动端侧边栏 */
    .sidebar {
        position: fixed;
        left: -300px;
        top: 60px;
        width: 300px;
        height: calc(100vh - 60px);
        background-color: var(--color-sidebar-bg);
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        padding: 20px;
        box-sizing: border-box;
        transition: left 0.3s ease;
        z-index: 999;
    }

    .sidebar.active {
        left: 0;
        border-right: 1px solid #e0e0e0;
    }

    /* 侧边栏导航部分样式 */
    .sidebar .nav-menu {
        flex: 1;
        display: flex;
        flex-direction: column;
    }

    .sidebar .nav-links {
        list-style: none;
        padding: 0;
        margin: 0;
        font-family: var(--font-zh-cn);
    }

    .sidebar .nav-links li {
        margin-bottom: 15px;
    }

    .sidebar .nav-links a {
        color: #000000;
        text-decoration: none;
        font-size: 20px;
        line-height: 1.5;
        display: block;
        padding: 10px 0;
    }

    .sidebar .nav-links a:hover {
        color: #666666;
    }

    /* 子菜单样式 */
    .sidebar .nav-links .submenu {
        list-style: none;
        padding: 0;
        margin: 0;
        margin-top: 10px;
        padding-left: 20px;
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.3s ease-out;
    }

    /* 展开状态的子菜单 */
    .sidebar .nav-links .has-submenu.active .submenu {
        max-height: 200px;
    }

    /* 箭头图标样式 */
    .sidebar .nav-links .arrow-icon {
        display: inline-block;
        margin-left: 10px;
        width: 0;
        height: 0;
        border-left: 5px solid transparent;
        border-right: 5px solid transparent;
        border-top: 5px solid #000000;
        transition: transform 0.3s ease;
        vertical-align: middle;
    }

    /* 展开状态的箭头 */
    .sidebar .nav-links .has-submenu.active .arrow-icon {
        transform: rotate(180deg);
    }

    /* 菜单项容器样式 */
    .sidebar .nav-links .menu-item-with-arrow {
        display: flex;
        align-items: center;
        justify-content: space-between;
        cursor: pointer;
    }

    .sidebar .nav-links .submenu li {
        margin-bottom: 10px;
    }

    .sidebar .nav-links .submenu a {
        font-size: 18px;
        color: #000000;
        padding: 5px 0;
    }

    .sidebar .nav-links .submenu a:hover {
        color: #000000;
    }

    /* 确保子菜单项没有任何列表标记 */
    .sidebar .nav-links .submenu li::before {
        content: none;
    }

    .sidebar .nav-links .submenu li {
        list-style-type: none;
    }

    /* 社交媒体图标容器 */
    .social-icons {
        display: flex;
        gap: 15px;
        justify-content: center;
        margin: 20px 0 30px;
        flex-wrap: wrap;
        max-width: auto;
        margin-left: auto;
        margin-right: auto;
    }

    .social-icons a {
        width: 45px;
        height: 45px;
        border: none;
        border-radius: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        overflow: hidden;
        cursor: pointer;
        flex-basis: calc(33.333% - 10px);
    }

    .social-icons img,
    .social-icons svg {
        width: 100%;
        height: 100%;
        object-fit: contain;
    }

    /* 微信弹窗样式 */
    #wechat-modal {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.7);
        z-index: 1001;
        justify-content: center;
        align-items: center;
    }

    #wechat-modal .modal-content {
        background-color: #ffffff;
        padding: 30px;
        border-radius: 8px;
        text-align: center;
        width: 240px;
    }

    #wechat-modal .close {
        position: absolute;
        top: 10px;
        right: 10px;
        font-size: 24px;
        cursor: pointer;
    }

    #wechat-modal img {
        width: 240px;
        height: 320px;
    }

    .modal {
        position: fixed;
        z-index: 1001;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0,0,0,0.5);
    }

    .modal-content {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        background-color: #fff;
        padding: 20px;
        border-radius: 8px;
        text-align: center;
        max-width: 90%;
    }

    .modal-content img {
        width: 450px;
        height: 600px;
    }

    .close {
        position: absolute;
        right: 10px;
        top: 10px;
        font-size: 24px;
        font-weight: bold;
        cursor: pointer;
    }

    /* 页脚备案信息样式 - 现在是body的直接子元素 */
    .footer {
        border-top: 1px solid #e0e0e0;  /* 顶部添加一条浅灰色实线 */
        padding-top: 20px;  /* 设置顶部间距，将备案信息与上方内容隔开 */
        padding-bottom: 0px; /* 设置底部间距，将备案信息与浏览器底部隔开 */
        text-align: center; /* 文本水平居中 */
        background-color: var(--color-bg); /* 确保背景色一致 */
        margin: 0; /* 移除所有margin */
    }

    .footer p {
        font-size: 12px; /* 字体大小：设置为12像素，让文字显得小巧不突兀 */
        color: #666666; /* 字体颜色：设置为柔和的灰色 */
        line-height: 1.5; /* 行高：设置为1.5倍字体大小，保证行间距适中 */
        margin-left: 0; /* 移除段落的默认上下外边距，防止与父元素footer的间距叠加 */
        margin-right: 0;
        margin-top: 0; /* 确保顶部没有margin */
        margin-bottom: 0; /* 确保底部没有margin */
        text-align: center; /* 关键改动：让文字在其容器内居中对齐 */
    }
    /* ===== 第一阶段：基础3D布局 ===== */

    /* 主内容区域 */
    .main-content {
        margin-top: 60px;
        /* 移除min-height限制，让内容决定高度 */
    }

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

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

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

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

    /* 画廊区域容器 - 设置3D透视 */
    .gallery-section {
        perspective: 1000px;
        width: 100%;
        height: 400px;
        position: relative;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }

    /* 3D旋转木马包装器 */
    .carousel-3d-wrapper {
        position: relative;
        width: 250px;
        height: 300px;
        margin: 0 auto;
    }

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

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

    /* 作品卡片基础样式 */
    .artwork-card {
        position: absolute;
        width: 150px;
        height: 200px;
        left: 50%;
        top: 50%;
        margin-left: -60px;
        margin-top: -60px;
        border-radius: 12px;
        overflow: hidden;
        box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);
        transition: all 0.3s ease;
        transform-style: preserve-3d;
    }

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

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

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

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

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

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

    /* ===== 第二阶段：卡片交互效果 ===== */

    /* 卡片悬停效果 - scale(1.1)放大 */
    .artwork-card:hover {
        transform-origin: center center;
        opacity: 1.0 !important;
        box-shadow: 0 15px 40px rgba(0, 0, 0, 0.4),
                    0 0 20px rgba(255, 255, 255, 0.3);
        z-index: 10;
    }

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

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

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

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

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

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

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

    /* 所有transform变化使用平滑过渡 */
    .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);
    }

    /* ===== 第三阶段：自动旋转动画 ===== */

    /* 旋转环自动旋转动画 */
    .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;
    }

    /* 鼠标离开时恢复播放 */
    .carousel-3d-container:not(:hover) .carousel-ring {
        animation-play-state: running;
    }

    /* 确保悬停卡片时也暂停旋转 */
    .carousel-3d-container:hover .carousel-ring,
    .artwork-card:hover .carousel-ring {
        animation-play-state: paused;
    }

    /* 为了更好的用户体验，当用户悬停在整个画廊区域时暂停动画 */
    .gallery-section:hover .carousel-ring {
        animation-play-state: paused;
    }

    /* ===== 第四阶段：组切换过渡效果 ===== */

    /* 旋转环的过渡效果设置 */
    .carousel-ring {
        transition: all 0.5s ease-in-out;
    }

    /* .active状态：完全显示，正常大小 */
    .carousel-ring.active {
        opacity: 1;
        transform: scale(1);
        z-index: 3;
        pointer-events: auto;
    }

    /* .leaving状态：淡出并向左移动缩小 */
    .carousel-ring.leaving {
        opacity: 0;
        transform: scale(0.8) translateX(-100px);
        z-index: 1;
        pointer-events: none;
    }

    /* .entering状态：淡入并从右侧进入 */
    .carousel-ring.entering {
        opacity: 0;
        transform: scale(0.8) translateX(100px);
        z-index: 2;
        pointer-events: none;
    }

    /* 隐藏状态：完全不可见 */
    .carousel-ring.hidden {
        opacity: 0;
        transform: scale(0.8);
        z-index: 0;
        pointer-events: none;
    }


    /* 修正之前的隐藏规则，现在使用状态类控制 */
    .carousel-ring:not(.active):not(.entering):not(.leaving) {
        opacity: 0;
        transform: scale(0.8);
        z-index: 0;
        pointer-events: none;
    }

    /* 组切换时暂时停止旋转动画 */
    .carousel-ring.entering,
    .carousel-ring.leaving {
        animation-play-state: paused;
    }

    /* 确保层级正确避免重叠问题 */
    .carousel-3d-container {
        position: relative;
        overflow: visible;
    }

    /* 动画进行时的特殊处理 */
    .carousel-ring.transitioning {
        animation-play-state: paused;
    }

    /* ===== 第五阶段：导航按钮样式 ===== */

    /* 左右导航按钮基础样式 - 重新定位到组指示器下方 */
    .left-nav-btn,
    .right-nav-btn {
        position: absolute;
        top: calc(100% + 80px);  /* 相对于容器底部向下80px，正好在组指示器下方 */
        width: 50px;
        height: 50px;
        border: none;
        border-radius: 50%;
        background: #0071e3;
        backdrop-filter: blur(10px);
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: all 0.3s ease;
        z-index: 10;
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
    }

    /* 左导航按钮定位 */
    .left-nav-btn {
        left: 25%;
        transform: translateX(-50%);
    }

    /* 右导航按钮定位 */
    .right-nav-btn {
        right: 25%;
        transform: translateX(50%);
    }

    /* 按钮内的SVG图标样式 */
    .left-nav-btn svg,
    .right-nav-btn svg {
        color: #f0f7fd;
        transition: color 0.3s ease;
    }

    /* 悬停效果 - 背景色加深，按钮轻微放大 */
    .left-nav-btn:hover,
    .right-nav-btn:hover {
        background: #005bb5;
        box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
    }

    /* 悬停时图标颜色变化 */
    .left-nav-btn:hover svg,
    .right-nav-btn:hover svg {
        color: #ffffff;
    }

    /* 点击时的反馈效果 */
    .left-nav-btn:active,
    .right-nav-btn:active {
        background: #004488;
    }

    /* 禁用状态样式 */
    .left-nav-btn:disabled,
    .right-nav-btn:disabled {
        opacity: 0.3;
        pointer-events: none;
        cursor: not-allowed;
        background: #0071e3;
    }

    .left-nav-btn:disabled svg,
    .right-nav-btn:disabled svg {
        color:  #f0f7fd;
    }

    /* 按钮的焦点样式 */
    .left-nav-btn:focus,
    .right-nav-btn:focus {
        outline: none;
        box-shadow:  0 0 0 3px rgba(0, 113, 227, 0.5); 
    }

    /* 移动端触摸反馈 */
    @media (hover: none) and (pointer: coarse) {
        .left-nav-btn:active,
        .right-nav-btn:active {
            background: #004488;
        }
    }

    /* ===== 第六阶段：组指示器样式 ===== */

    /* 组指示器容器 - 居中显示在画廊下方 */
    .group-indicators {
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 10px;
        margin-top: 30px;
        position: relative;
        z-index: 5;
    }

    /* 每个dot元素的基础样式 */
    .dot {
        width: 12px;
        height: 12px;
        border-radius: 50%;
        background: rgba(255, 255, 255, 0.4);
        cursor: pointer;
        transition: all 0.3s ease;
        position: relative;
        display: block;
        border: 2px solid transparent;
    }

    /* 活跃状态的dot - 不透明白色且稍大 */
    .dot.active {
        background: rgba(255, 255, 255, 1);
        transform: scale(1.3);
        box-shadow: 0 0 15px rgba(255, 255, 255, 0.6),
                    0 0 30px rgba(255, 255, 255, 0.3);
    }

    /* 悬停时dot放大效果 */
    .dot:hover {
        background: rgba(255, 255, 255, 0.7);
        transform: scale(1.2);
        box-shadow: 0 0 10px rgba(255, 255, 255, 0.4);
    }

    /* 活跃状态悬停时的效果 */
    .dot.active:hover {
        transform: scale(1.4);
        box-shadow: 0 0 20px rgba(255, 255, 255, 0.8),
                    0 0 40px rgba(255, 255, 255, 0.4);
    }

    /* 点击时的轻微缩放反馈动画 */
    .dot:active {
        transform: scale(0.9);
        transition: transform 0.1s ease;
    }

    .dot.active:active {
        transform: scale(1.1);
        transition: transform 0.1s ease;
    }

    /* dot的焦点样式 */
    .dot:focus {
        outline: none;
        border: 2px solid rgba(255, 255, 255, 0.6);
    }

    /* 为dot添加脉冲动画效果 */
    .dot.active::before {
        content: '';
        position: absolute;
        top: -4px;
        left: -4px;
        right: -4px;
        bottom: -4px;
        border-radius: 50%;
        border: 1px solid rgba(255, 255, 255, 0.3);
        animation: dot-pulse 2s ease-in-out infinite;
    }

    /* 脉冲动画关键帧 */
    @keyframes dot-pulse {
        0% {
            transform: scale(1);
            opacity: 1;
        }
        50% {
            transform: scale(1.5);
            opacity: 0.5;
        }
        100% {
            transform: scale(2);
            opacity: 0;
        }
    }

    /* 移动端触摸反馈优化 */
    @media (hover: none) and (pointer: coarse) {
        .dot {
            width: 14px;
            height: 14px;
        }

        .dot:active {
            background: rgba(255, 255, 255, 0.8);
            transform: scale(0.8);
        }

        .dot.active:active {
            transform: scale(1.2);
        }
    }
}