/* ===========================================================
 *  红境云创 · 极简
 *  - 动态背景：从图片提取的色调柔化后流动
 *  - 底部小角标：克制，不抢图
 *  - 单击图片 → 进入「查看」模式；再次单击退出
 * =========================================================== */

:root {
    /* 从 Callery 笔记本图提取并柔化的色调 */
    --c-1: #f7d8d3;        /* 剪纸红柔化 */
    --c-2: #e6d4c8;        /* 米黄底柔化 */
    --c-3: #efe1d6;        /* 暖米光晕 */
    --c-base: #faf6ee;     /* 米白基底 */
    --ink: #1a1a1a;
    --ink-soft: #6b6b6b;
    --ink-mute: #b3aea0;
    --red: #8e1e23;        /* 深红（呼应笔记本封面） */
    --shadow-img: 0 18px 50px -10px rgba(142, 30, 35, 0.18),
                  0 6px 18px -4px rgba(142, 30, 35, 0.10);
    --shadow-img-strong: 0 24px 60px -12px rgba(142, 30, 35, 0.32),
                        0 8px 24px -6px rgba(142, 30, 35, 0.18);
}

*,
*::before,
*::after { box-sizing: border-box; }

html,
body {
    margin: 0;
    padding: 0;
    height: 100%;
    width: 100%;
    -webkit-font-smoothing: antialiased;
    -webkit-tap-highlight-color: transparent;
    overflow: hidden;
    overscroll-behavior: none;
    touch-action: manipulation;
    color: var(--ink);
}

body {
    padding-top: env(safe-area-inset-top, 0px);
    padding-bottom: env(safe-area-inset-bottom, 0px);

    background:
        radial-gradient(60vmax 60vmax at 25% 30%, var(--c-1) 0%, transparent 55%),
        radial-gradient(55vmax 55vmax at 75% 75%, var(--c-3) 0%, transparent 55%),
        radial-gradient(45vmax 45vmax at 50% 60%, var(--c-2) 0%, transparent 60%),
        var(--c-base);
    background-size: 220% 220%, 220% 220%, 220% 220%, 100% 100%;
    background-position: 25% 30%, 75% 75%, 50% 60%, 0 0;
    animation: drift 26s cubic-bezier(0.4, 0, 0.6, 1) infinite;
    background-attachment: fixed;
}

@keyframes drift {
    0%, 100% {
        background-position: 25% 30%, 75% 75%, 50% 60%, 0 0;
    }
    33% {
        background-position: 65% 25%, 35% 70%, 55% 55%, 0 0;
    }
    66% {
        background-position: 55% 65%, 80% 35%, 45% 50%, 0 0;
    }
}

.viewer {
    position: fixed;
    inset: 0;
    display: grid;
    grid-template-rows: 1fr auto;
    padding: 0 clamp(16px, 5vw, 56px)
        calc(20px + env(safe-area-inset-bottom, 0px));
}

.stage {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    min-height: 0;
}

.slide {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    user-select: none;
    -webkit-user-drag: none;
    pointer-events: auto;
    transform-origin: center center;
    will-change: transform, opacity, filter;

    opacity: 0;
    transform: scale(0.985);
    filter: blur(10px);

    transition:
        opacity 0.7s cubic-bezier(0.22, 0.61, 0.36, 1),
        transform 0.7s cubic-bezier(0.22, 0.61, 0.36, 1),
        filter 0.7s cubic-bezier(0.22, 0.61, 0.36, 1),
        box-shadow 0.5s ease,
        border-radius 0.5s ease;

    box-shadow: var(--shadow-img);
    border-radius: 8px;
    cursor: zoom-in;
}

.slide.is-active {
    opacity: 1;
    transform: scale(1);
    filter: blur(0);
}

.slide.is-loading {
    opacity: 0;
    transform: scale(0.985);
    filter: blur(10px);
}

.slide.is-zoomed {
    cursor: zoom-out;
}

.mark {
    text-align: center;
    padding: 16px 8px 4px;
    user-select: none;
    opacity: 0;
    animation: fadeUp 0.9s cubic-bezier(0.22, 0.61, 0.36, 1) 0.5s forwards;
    color: var(--ink);
}

.mark-dot {
    display: inline-block;
    width: 4px;
    height: 4px;
    background: var(--red);
    border-radius: 50%;
    margin: 0 14px;
    vertical-align: middle;
    transform: translateY(-3px);
    box-shadow: 0 0 0 3px rgba(142, 30, 35, 0.12);
}

.mark-text {
    font-family: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei",
        sans-serif;
    font-size: 17px;
    font-weight: 500;
    letter-spacing: 0.36em;
    color: var(--ink);
}

.mark-sub {
    margin: 8px 0 0;
    font-family: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei",
        sans-serif;
    font-size: 11px;
    letter-spacing: 0.32em;
    color: var(--ink-mute);
    font-weight: 400;
}

.viewer.is-viewing .stage {
    background: transparent;
}

.viewer.is-viewing .slide {
    border-radius: 0;
    box-shadow: none;
    padding: 0;
    cursor: zoom-out;
}

.viewer.is-viewing .mark {
    opacity: 0;
    pointer-events: none;
    transform: translateY(8px);
}

.viewer.is-viewing {
    padding: 0;
}

.viewer.is-viewing {
    background:
        radial-gradient(60vmax 60vmax at 50% 50%, #1a1a1a 0%, #000 70%);
    animation: none;
}

.error {
    color: rgba(0, 0, 0, 0.55);
    font-family: "PingFang SC", "Microsoft YaHei", sans-serif;
    font-size: 14px;
    text-align: center;
    padding: 24px;
    line-height: 1.7;
}

img { -webkit-touch-callout: none; }

@keyframes fadeUp {
    from {
        opacity: 0;
        transform: translateY(8px);
    }
    to {
        opacity: 0.92;
        transform: translateY(0);
    }
}

@media (prefers-reduced-motion: reduce) {
    body, .mark, .slide {
        animation: none !important;
        transition: none !important;
    }
    .mark { opacity: 0.92; }
    .slide.is-active { opacity: 1; transform: scale(1); filter: blur(0); }
}