/**
 * 《绛唇解语花》装饰性图片样式
 * Decorative Image Styles for Lips Aesthetics Book
 *
 * 设计原则：
 * - 不影响阅读体验
 * - 优雅、含蓄的装饰效果
 * - 随机化带来新鲜感
 */

/* ========================================
   基础装饰图片容器
   ======================================== */
.deco-image {
    position: absolute;
    pointer-events: none;
    opacity: 0;
    transition: opacity 1s ease-out;
    z-index: 0;
}

.deco-image.loaded {
    opacity: 1;
}

.deco-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* ========================================
   Hero 区域装饰
   ======================================== */
.hero-deco {
    position: absolute;
    z-index: 0;
}

/* 主装饰 - 右侧大图 */
.hero-deco-main {
    right: -5%;
    top: 50%;
    transform: translateY(-50%);
    width: 45%;
    max-width: 550px;
    aspect-ratio: 1/1;
    opacity: 0;
    transition: opacity 1.2s ease-out 0.5s;
}

.hero-deco-main.loaded {
    opacity: 0.15;
}

.hero-deco-main img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    filter: grayscale(20%) contrast(0.9);
    mix-blend-mode: multiply;
}

/* 辅助装饰 - 左上角小图 */
.hero-deco-accent {
    left: 5%;
    top: 10%;
    width: 15%;
    max-width: 180px;
    aspect-ratio: 1/1;
    opacity: 0;
    transition: opacity 1s ease-out 0.8s;
}

.hero-deco-accent.loaded {
    opacity: 0.1;
}

.hero-deco-accent img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    filter: grayscale(30%);
    mix-blend-mode: multiply;
}

/* ========================================
   章节区域装饰
   ======================================== */
.chapters-section {
    position: relative;
}

/* 章节背景装饰 */
.chapters-deco-bg {
    position: absolute;
    left: -10%;
    bottom: 5%;
    width: 25%;
    max-width: 300px;
    aspect-ratio: 1/1;
    opacity: 0;
    transition: opacity 0.8s ease-out;
    z-index: 0;
}

.chapters-deco-bg.loaded {
    opacity: 0.06;
}

.chapters-deco-bg img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    filter: grayscale(40%);
}

/* 章节区域右侧装饰 */
.chapters-deco-right {
    position: absolute;
    right: -5%;
    top: 20%;
    width: 20%;
    max-width: 250px;
    aspect-ratio: 1/1;
    opacity: 0;
    transition: opacity 0.8s ease-out 0.3s;
    z-index: 0;
}

.chapters-deco-right.loaded {
    opacity: 0.05;
}

.chapters-deco-right img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    filter: grayscale(50%);
}

/* ========================================
   卡片装饰图案
   ======================================== */
.chapter-card {
    position: relative;
    overflow: hidden;
}

.card-deco-image {
    position: absolute;
    top: 0;
    right: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: opacity 0.5s ease;
    pointer-events: none;
    z-index: 1;
}

.card-deco-image.loaded {
    opacity: 0.12;
}

.card-deco-image img {
    position: absolute;
    right: -10%;
    top: 50%;
    transform: translateY(-50%);
    width: 80%;
    height: auto;
    object-fit: contain;
    filter: grayscale(20%);
    mix-blend-mode: overlay;
}

/* 卡片悬停效果增强 */
.chapter-card:hover .card-deco-image {
    opacity: 0.18;
}

.chapter-card:hover .card-deco-image img {
    transform: translateY(-50%) scale(1.05);
    transition: transform 0.4s ease;
}

/* ========================================
   工具区域装饰
   ======================================== */
.tools-section {
    position: relative;
    overflow: hidden;
}

.tools-deco {
    position: absolute;
    opacity: 0;
    transition: opacity 0.8s ease-out;
    z-index: 0;
    pointer-events: none;
}

.tools-deco.loaded {
    opacity: 0.05;
}

.tools-deco-left {
    left: -8%;
    top: 30%;
    width: 18%;
    max-width: 220px;
}

.tools-deco-right {
    right: -8%;
    bottom: 15%;
    width: 20%;
    max-width: 240px;
}

.tools-deco img {
    width: 100%;
    height: auto;
    filter: grayscale(30%);
    mix-blend-mode: multiply;
}

/* ========================================
   统计区域装饰
   ======================================== */
.stats-section {
    position: relative;
    overflow: hidden;
}

.stats-deco {
    position: absolute;
    opacity: 0;
    transition: opacity 1s ease-out;
    pointer-events: none;
    z-index: 0;
}

.stats-deco.loaded {
    opacity: 0.08;
}

.stats-deco-center {
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 40%;
    max-width: 400px;
}

.stats-deco img {
    width: 100%;
    height: auto;
    filter: grayscale(100%) brightness(2);
    mix-blend-mode: overlay;
}

/* ========================================
   页脚装饰
   ======================================== */
.footer-topics {
    position: relative;
    overflow: hidden;
}

.footer-deco {
    position: absolute;
    opacity: 0;
    transition: opacity 0.8s ease-out;
    pointer-events: none;
    z-index: 0;
}

.footer-deco.loaded {
    opacity: 0.04;
}

.footer-deco-left {
    left: 0;
    bottom: 0;
    width: 25%;
    max-width: 280px;
}

.footer-deco-right {
    right: 0;
    top: 10%;
    width: 20%;
    max-width: 230px;
}

.footer-deco img {
    width: 100%;
    height: auto;
    filter: grayscale(30%);
}

/* ========================================
   阅读器装饰
   ======================================== */

/* 阅读器侧边装饰 */
.reader-deco-side {
    position: fixed;
    opacity: 0;
    transition: opacity 1s ease-out;
    pointer-events: none;
    z-index: 0;
}

.reader-deco-side.loaded {
    opacity: 0.04;
}

.reader-deco-left {
    left: 20px;
    top: 50%;
    transform: translateY(-50%);
    width: 120px;
}

.reader-deco-right {
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
    width: 120px;
}

.reader-deco-side img {
    width: 100%;
    height: auto;
    filter: grayscale(30%);
}

/* 章节标题装饰 */
.chapter-header-deco {
    position: absolute;
    right: 0;
    top: 0;
    width: 200px;
    height: 100%;
    opacity: 0;
    transition: opacity 0.6s ease-out;
    pointer-events: none;
    overflow: hidden;
}

.chapter-header-deco.loaded {
    opacity: 0.1;
}

.chapter-header-deco img {
    position: absolute;
    right: -20%;
    top: 50%;
    transform: translateY(-50%);
    width: 150%;
    height: auto;
    filter: grayscale(20%);
    mix-blend-mode: multiply;
}

/* ========================================
   分隔装饰线
   ======================================== */
.deco-divider {
    position: relative;
    width: 100%;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 3rem 0;
    overflow: hidden;
}

.deco-divider-image {
    position: absolute;
    width: 80px;
    height: 80px;
    opacity: 0;
    transition: opacity 0.5s ease-out;
}

.deco-divider-image.loaded {
    opacity: 0.15;
}

.deco-divider-image img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    filter: grayscale(30%);
}

.deco-divider::before,
.deco-divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg,
        transparent,
        var(--nude-pink, #E8D5D5) 20%,
        var(--rose-gold-light, #D4A5A5) 50%,
        var(--nude-pink, #E8D5D5) 80%,
        transparent);
}

/* ========================================
   工具卡片装饰
   ======================================== */
.tool-card {
    position: relative;
    overflow: hidden;
}

.tool-card-deco {
    position: absolute;
    right: -5%;
    bottom: -10%;
    width: 35%;
    max-width: 200px;
    aspect-ratio: 1/1;
    opacity: 0;
    transition: opacity 0.6s ease-out, transform 0.4s ease;
    pointer-events: none;
}

.tool-card-deco.loaded {
    opacity: 0.08;
}

.tool-card:hover .tool-card-deco {
    opacity: 0.12;
    transform: scale(1.05);
}

.tool-card-deco img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    filter: grayscale(20%);
}

/* ========================================
   工具页面装饰（评估工具等）
   ======================================== */
.tool-page-deco {
    position: absolute;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.8s ease-out;
    z-index: 0;
}

.tool-page-deco.loaded {
    opacity: 1;
}

/* 页面顶部装饰 */
.tool-page-header-deco {
    position: absolute;
    right: 0;
    bottom: 0;
    width: 200px;
    height: 100%;
    overflow: hidden;
}

.tool-page-header-deco.loaded {
    opacity: 0.15;
}

.tool-page-header-deco img {
    position: absolute;
    right: -20%;
    top: 50%;
    transform: translateY(-50%);
    width: 180%;
    height: auto;
    filter: grayscale(30%) brightness(1.2);
    mix-blend-mode: overlay;
}

/* 侧边浮动装饰 */
.tool-page-side-left,
.tool-page-side-right {
    position: fixed;
    top: 50%;
    transform: translateY(-50%);
    width: 150px;
    max-width: 12vw;
}

.tool-page-side-left {
    left: 10px;
}

.tool-page-side-right {
    right: 10px;
}

.tool-page-side-left.loaded,
.tool-page-side-right.loaded {
    opacity: 0.06;
}

.tool-page-side-left img,
.tool-page-side-right img {
    width: 100%;
    height: auto;
    filter: grayscale(30%);
}

/* 表单区域装饰 */
.tool-page-form-deco {
    position: absolute;
    right: -5%;
    top: 50px;
    width: 180px;
    aspect-ratio: 1/1;
}

.tool-page-form-deco.loaded {
    opacity: 0.06;
}

.tool-page-form-deco img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    filter: grayscale(25%);
}

/* 结果区域装饰 */
.tool-page-results-deco {
    position: absolute;
    left: -3%;
    top: 20px;
    width: 160px;
    aspect-ratio: 1/1;
}

.tool-page-results-deco.loaded {
    opacity: 0.08;
}

.tool-page-results-deco img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    filter: grayscale(20%);
}

/* ========================================
   AI 助手装饰
   ======================================== */
.ai-deco {
    position: absolute;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.6s ease-out;
    z-index: 0;
}

.ai-deco.loaded {
    opacity: 1;
}

/* AI 头部装饰 */
.ai-header-deco {
    position: absolute;
    right: 50px;
    top: 50%;
    transform: translateY(-50%);
    width: 60px;
    height: 60px;
}

.ai-header-deco.loaded {
    opacity: 0.15;
}

.ai-header-deco img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    filter: grayscale(20%);
    mix-blend-mode: multiply;
}

/* AI 消息区域装饰 */
.ai-messages-deco {
    position: absolute;
    right: 10px;
    bottom: 10px;
    width: 120px;
    height: 120px;
}

.ai-messages-deco.loaded {
    opacity: 0.04;
}

.ai-messages-deco img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    filter: grayscale(30%);
}

/* AI 面板需要 position relative */
.ai-panel,
.ai-panel-header,
.ai-messages {
    position: relative;
}

/* ========================================
   响应式调整
   ======================================== */
@media (max-width: 1200px) {
    .hero-deco-main {
        width: 35%;
        opacity: 0.1;
    }

    .hero-deco-accent {
        display: none;
    }

    .chapters-deco-bg,
    .chapters-deco-right {
        opacity: 0.04;
    }
}

@media (max-width: 768px) {
    /* 移动端减少装饰 */
    .hero-deco-main {
        display: none;
    }

    .chapters-deco-bg,
    .chapters-deco-right,
    .tools-deco,
    .footer-deco,
    .reader-deco-side,
    .tool-page-side-left,
    .tool-page-side-right,
    .tool-page-form-deco,
    .tool-page-results-deco,
    .ai-messages-deco {
        display: none;
    }

    .card-deco-image {
        display: none;
    }

    .tool-card-deco {
        width: 25%;
        opacity: 0.05;
    }

    .stats-deco-center {
        width: 60%;
        opacity: 0.05;
    }

    .tool-page-header-deco {
        width: 120px;
        opacity: 0.1;
    }

    .ai-header-deco {
        width: 40px;
        height: 40px;
        right: 40px;
    }
}

/* ========================================
   打印时隐藏装饰
   ======================================== */
@media print {
    .deco-image,
    .hero-deco,
    .chapters-deco-bg,
    .chapters-deco-right,
    .tools-deco,
    .stats-deco,
    .footer-deco,
    .reader-deco-side,
    .card-deco-image,
    .tool-card-deco,
    .chapter-header-deco,
    .deco-divider-image,
    .tool-page-deco,
    .ai-deco {
        display: none !important;
    }
}

/* ========================================
   动画效果
   ======================================== */
@keyframes floatDeco {
    0%, 100% {
        transform: translateY(-50%) rotate(0deg);
    }
    50% {
        transform: translateY(-48%) rotate(2deg);
    }
}

.hero-deco-main.loaded img {
    animation: floatDeco 8s ease-in-out infinite;
}

/* 视差效果预留 */
.deco-parallax {
    will-change: transform;
}