/* ================================================================
   ZY 工作室 · 手绘插画组件
   ---------------------------------------------------------------
   纯内联 SVG，无位图依赖，任意分辨率清晰。
   三个场景：思考中 / 敲代码 / 写文档
   ================================================================ */

/* ---------------------------------------------------------------
   1. 容器布局
   --------------------------------------------------------------- */
.zd-illus {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 40px;
    padding: 42px 46px;
    border-radius: var(--radius-xl);
    overflow: hidden;
    background:
        radial-gradient(520px 260px at 8% 18%, rgba(249, 115, 22, 0.12), transparent 62%),
        radial-gradient(480px 240px at 92% 82%, rgba(13, 148, 136, 0.13), transparent 64%),
        linear-gradient(128deg, #fffdfb 0%, #fbfcfe 48%, #f4fbfa 100%);
    border: 1px solid rgba(29, 78, 216, 0.09);
    box-shadow: var(--shadow-md);
}

/* 背景校园水印 */
.zd-illus::before {
    content: '';
    position: absolute;
    inset: 0;
    background: url('../images/wm-03-track.jpg') center/cover;
    opacity: 0.05;
    pointer-events: none;
}

.zd-illus > * {
    position: relative;
    z-index: 1;
}

/* 左侧文案 */
.zd-illus-text {
    flex: 0 1 380px;
    min-width: 0;
}

.zd-illus-eyebrow {
    display: inline-block;
    margin-bottom: 12px;
    padding: 4px 12px;
    border-radius: 999px;
    font-size: 0.76rem;
    font-weight: 700;
    letter-spacing: 1.4px;
    color: var(--color-daily);
    background: var(--color-daily-soft);
    border: 1px solid rgba(217, 72, 15, 0.18);
}

.zd-illus-title {
    margin: 0 0 10px;
    font-size: clamp(1.35rem, 2.4vw, 1.75rem);
    font-weight: 700;
    line-height: 1.4;
    color: var(--color-dark);
    letter-spacing: 0.5px;
}

.zd-illus-desc {
    margin: 0 0 18px;
    font-size: 0.92rem;
    line-height: 1.85;
    color: var(--color-gray);
}

/* 手写体风格的提示条 */
.zd-illus-note {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 15px;
    border-radius: 12px 14px 12px 4px;
    background: #fff;
    border: 1px dashed rgba(249, 115, 22, 0.4);
    box-shadow: 2px 3px 0 rgba(249, 115, 22, 0.08);
    font-size: 0.86rem;
    font-weight: 600;
    color: #9a3412;
    transform: rotate(-1.2deg);
}

.zd-illus-note svg {
    flex: 0 0 auto;
    color: #f97316;
}

/* 右侧三幅插画 */
.zd-illus-art {
    display: flex;
    align-items: flex-end;
    gap: 18px;
    flex: 0 0 auto;
}

.zd-art {
    width: 150px;
    height: 150px;
    color: var(--color-dark-2);
}

.zd-art-1 { color: #4c6ef5; }
.zd-art-2 { color: #e8734a; }
.zd-art-3 { color: #0d9488; }

/* 手绘线条：给一点轻微抖动感 */
.zd-art .sketch {
    fill: none;
    stroke: currentColor;
    stroke-width: 2.4;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.zd-art .sketch-fill {
    fill: currentColor;
    opacity: 0.10;
    stroke: currentColor;
    stroke-width: 2.2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.zd-art .accent {
    fill: none;
    stroke: #f97316;
    stroke-width: 2.2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.zd-art .soft {
    fill: none;
    stroke: currentColor;
    stroke-width: 1.6;
    stroke-linecap: round;
    opacity: 0.42;
}

/* 动效：轻微浮动 */
.zd-art {
    animation: zdFloat 5.5s ease-in-out infinite;
}

.zd-art-2 { animation-delay: -1.8s; }
.zd-art-3 { animation-delay: -3.6s; }

@keyframes zdFloat {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-7px); }
}

/* 灯泡呼吸（思考中） */
.zd-bulb {
    transform-origin: center;
    animation: zdBulb 2.8s ease-in-out infinite;
}

@keyframes zdBulb {
    0%, 100% { opacity: .55; transform: scale(1); }
    50% { opacity: 1; transform: scale(1.06); }
}

/* 屏幕上的代码行闪烁 */
.zd-caret {
    animation: zdBlink 1.15s steps(2, start) infinite;
}

@keyframes zdBlink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0; }
}

/* 思考的三个点 */
.zd-dots circle {
    animation: zdDot 1.4s ease-in-out infinite;
}

.zd-dots circle:nth-child(2) { animation-delay: .2s; }
.zd-dots circle:nth-child(3) { animation-delay: .4s; }

@keyframes zdDot {
    0%, 100% { transform: translateY(0); opacity: .35; }
    50% { transform: translateY(-4px); opacity: 1; }
}

/* ---------------------------------------------------------------
   2. 响应式
   --------------------------------------------------------------- */
@media (max-width: 980px) {
    .zd-illus {
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 26px;
        padding: 34px 24px;
    }

    .zd-illus-text {
        flex: 0 1 auto;
    }

    .zd-illus-desc {
        text-align: center;
    }

    .zd-illus-art {
        justify-content: center;
        flex-wrap: wrap;
    }

    .zd-art {
        width: 118px;
        height: 118px;
    }
}

@media (max-width: 520px) {
    .zd-art {
        width: 96px;
        height: 96px;
    }

    .zd-illus {
        padding: 28px 18px;
    }
}