/* 首页特有样式 - AI照片处理平台 */

/* 小图片高度修正 */
.h-15 {
    height: 3.75rem; /* 60px */
}

/* 垂直排列图片的悬停效果 */
.right-images img {
    transition: all 0.3s ease;
}

.right-images img:hover {
    transform: scale(1.1);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.5);
}

/* 功能标签样式优化 */
.right-images .absolute {
    transition: all 0.3s ease;
}

.right-images div:hover .absolute {
    opacity: 0.9;
}

/* 黑白图片的样式 */
.grayscale {
    filter: grayscale(100%);
}

/* 左侧单张图片的旋转效果 */
.left-image img {
    transition: transform 0.3s ease;
}

/* 图片区域布局 - 水平布局 */
.image-section {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: center;
    gap: 25px;
    max-width: 550px;
    padding: 20px;
    position: relative;
    background: radial-gradient(circle at center, rgba(255, 215, 0, 0.05) 0%, transparent 50%);
    border-radius: 20px;
    backdrop-filter: blur(10px);
}

.left-image {
    position: relative;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.right-images {
    position: relative;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
}

/* 简单箭头样式 */
.simple-arrow {
    width: 50px;
    height: 3px;
    background: linear-gradient(to right, #FFD700, #FFD700);
    position: relative;
    margin: 0 15px;
}

.simple-arrow::after {
    content: '';
    position: absolute;
    right: -8px;
    top: 50%;
    transform: translateY(-50%);
    width: 0;
    height: 0;
    border-left: 10px solid #FFD700;
    border-top: 5px solid transparent;
    border-bottom: 5px solid transparent;
}

/* 响应式调整 */
@media (max-width: 768px) {
    .image-section {
        flex-direction: column;
        gap: 20px;
        max-width: 350px;
        padding: 15px;
    }

    .left-image img {
        width: 100px !important;
        height: 100px !important;
        transform: none !important; /* 移动端取消旋转 */
    }

    .right-images img {
        width: 100px !important;
        height: 100px !important;
    }

    .simple-arrow {
        width: 30px !important;
        margin: 0 12px !important;
        transform: rotate(90deg); /* 移动端箭头垂直 */
    }

    .simple-arrow::after {
        border-left-width: 6px !important;
        border-top-width: 3px !important;
        border-bottom-width: 3px !important;
        border-left-color: transparent !important;
        border-top-color: #FFD700 !important;
        border-bottom: none !important;
        right: -3px !important;
        top: -4.5px !important;
    }

    /* 移动端文字标签样式 */
    .left-image .text-center span,
    .right-images .text-center span {
        font-size: 12px !important;
        padding: 6px 12px !important;
    }
}