/* image-effects.css */
/* 图片边框与阴影效果CSS样式库 */

/* ===== 基础图片样式 ===== */
.styled-image {
    max-width: 100%;
    height: auto;
    display: block;
    transition: all 0.3s ease;
}

/* ===== 边框样式 ===== */
/* 实线边框 */
.border-solid {
    border: 8px solid #3498db;
    padding: 5px;
}

.border-solid-thin {
    border: 3px solid #3498db;
    padding: 3px;
}

.border-solid-thick {
    border: 15px solid #3498db;
    padding: 8px;
}

/* 虚线边框 */
.border-dashed {
    border: 8px dashed #e74c3c;
    padding: 5px;
}

.border-dashed-thin {
    border: 3px dashed #e74c3c;
    padding: 3px;
}

/* 点线边框 */
.border-dotted {
    border: 8px dotted #2ecc71;
    padding: 5px;
}

/* 双线边框 */
.border-double {
    border: 10px double #9b59b6;
    padding: 5px;
}

/* 圆角边框 */
.border-rounded {
    border: 8px solid #3498db;
    border-radius: 20px;
    padding: 5px;
}

.border-rounded-large {
    border: 8px solid #3498db;
    border-radius: 50px;
    padding: 5px;
}

/* 圆形边框 */
.border-circle {
    border: 8px solid #3498db;
    border-radius: 50%;
    padding: 5px;
}

/* 渐变边框 */
.border-gradient {
    border: 2px solid transparent;
    background: linear-gradient(white, white) padding-box,
                linear-gradient(45deg, #3498db, #9b59b6) border-box;
    padding: 1px;
}

.border-gradient-rainbow {
    border: 8px solid transparent;
    background: linear-gradient(white, white) padding-box,
                linear-gradient(90deg, #ff0000, #ff9900, #ffff00, #00ff00, #0099ff, #6633ff) border-box;
    padding: 5px;
}

/* ===== 阴影效果 ===== */
/* 柔和阴影 */
.shadow-soft {
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

/* 中等阴影 */
.shadow-medium {
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
}

/* 强烈阴影 */
.shadow-strong {
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.2);
}

/* 内阴影 */
.shadow-inner {
    box-shadow: inset 0 0 15px rgba(0, 0, 0, 0.2);
}

/* 彩色阴影 */
.shadow-colored-blue {
    box-shadow: 0 10px 20px rgba(52, 152, 219, 0.4);
}

.shadow-colored-red {
    box-shadow: 0 10px 20px rgba(231, 76, 60, 0.4);
}

.shadow-colored-green {
    box-shadow: 0 10px 20px rgba(46, 204, 113, 0.4);
}

.shadow-colored-purple {
    box-shadow: 0 10px 20px rgba(155, 89, 182, 0.4);
}

/* 多重阴影 */
.shadow-multi {
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1),
                0 10px 30px rgba(0, 0, 0, 0.05);
}

/* 立体阴影 */
.shadow-elevated {
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.25),
                0 10px 10px rgba(0, 0, 0, 0.1);
}

/* ===== 悬停效果 ===== */
/* 缩放效果 */
.hover-zoom:hover {
    transform: scale(1.05);
}

.hover-zoom-large:hover {
    transform: scale(1.1);
}

/* 旋转效果 */
.hover-rotate:hover {
    transform: rotate(5deg) scale(1.05);
}

.hover-rotate-large:hover {
    transform: rotate(10deg) scale(1.1);
}

/* 灰度效果 */
.hover-grayscale:hover {
    filter: grayscale(100%);
}

/* 亮度效果 */
.hover-brightness:hover {
    filter: brightness(1.2);
}

/* 对比度效果 */
.hover-contrast:hover {
    filter: contrast(1.3);
}

/* 饱和度效果 */
.hover-saturate:hover {
    filter: saturate(2);
}

/* 模糊效果 */
.hover-blur:hover {
    filter: blur(2px);
}

/* 阴影增强效果 */
.hover-shadow:hover {
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.25);
}

/* 边框颜色变化 */
.hover-border-color:hover {
    border-color: #e74c3c;
}

/* ===== 组合效果 ===== */
/* 组合效果1 - 现代简约 */
.effect-modern {
    border: 8px solid #3498db;
    border-radius: 15px;
    box-shadow: 0 10px 25px rgba(52, 152, 219, 0.3);
    transition: all 0.3s ease;
}

.effect-modern:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 35px rgba(52, 152, 219, 0.4);
}

/* 组合效果2 - 艺术风格 */
.effect-artistic {
    border: 10px double #9b59b6;
    box-shadow: 0 15px 35px rgba(155, 89, 182, 0.3);
    transition: all 0.5s ease;
}

.effect-artistic:hover {
    transform: rotate(3deg) scale(1.05);
    box-shadow: 0 20px 40px rgba(155, 89, 182, 0.4);
}

/* 组合效果3 - 渐变风格 */
.effect-gradient {
    border: 12px solid transparent;
    background: linear-gradient(white, white) padding-box,
                linear-gradient(45deg, #3498db, #2ecc71) border-box;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.25);
    transition: all 0.4s ease;
}

.effect-gradient:hover {
    transform: translateY(-8px);
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.3);
}

/* 组合效果4 - 照片风格 */
.effect-photo {
    border: 15px solid #f1c40f;
    background-color: #f1c40f;
    padding: 10px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
    transition: all 0.3s ease;
}

.effect-photo:hover {
    transform: rotate(-2deg);
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.25);
}

/* 组合效果5 - 极简风格 */
.effect-minimal {
    border: 1px solid #ddd;
    padding: 10px;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.05);
    transition: all 0.3s ease;
}

.effect-minimal:hover {
    border-color: #3498db;
    box-shadow: 0 5px 15px rgba(52, 152, 219, 0.1);
}

/* ===== 动画效果 ===== */
/* 浮动动画 */
@keyframes float {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-10px);
    }
}

.animation-float {
    animation: float 3s ease-in-out infinite;
}

/* 脉动阴影动画 */
@keyframes pulse-shadow {
    0%, 100% {
        box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
    }
    50% {
        box-shadow: 0 15px 35px rgba(52, 152, 219, 0.4);
    }
}

.animation-pulse {
    animation: pulse-shadow 2s ease-in-out infinite;
}

/* ===== 响应式调整 ===== */
@media (max-width: 768px) {
    .border-solid,
    .border-dashed,
    .border-dotted,
    .border-double {
        border-width: 5px;
        padding: 3px;
    }
    
    .border-rounded,
    .border-rounded-large {
        border-radius: 10px;
    }
    
    .shadow-strong,
    .shadow-elevated {
        box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
    }
}

@media (max-width: 480px) {
    .border-solid,
    .border-dashed,
    .border-dotted,
    .border-double {
        border-width: 3px;
        padding: 2px;
    }
    
    .shadow-medium,
    .shadow-strong {
        box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
    }
}