/**
 * 全站樱花主题：淡桜色底 + 飘落花瓣（花瓣由 sakura.js 生成）。
 * html.mao-sakura 由 mao_desktop_render_head() 在首屏前加上。
 */
html.mao-sakura {
    --sakura-bg: #fdf5f6;
    --sakura-bg-deep: #f9e8ec;
    --sakura-line: #f3d3dc;
    --sakura-petal: #f7c6d3;
    --sakura-petal-deep: #ee9fb5;
    /* 首页主题变量同步为桜色 */
    --jp-paper: #fdf5f6;
    --jp-paper-deep: #f9e8ec;
    --jp-card: #fffafb;
    --jp-line: #f1d9df;
}

html.mao-sakura,
html.mao-sakura body {
    background-color: var(--sakura-bg) !important;
}

html.mao-sakura body {
    background-image:
        radial-gradient(ellipse at 0% 0%, rgba(247, 198, 211, 0.35), transparent 45%),
        radial-gradient(ellipse at 100% 12%, rgba(250, 214, 224, 0.30), transparent 42%),
        radial-gradient(ellipse at 50% 100%, rgba(247, 198, 211, 0.22), transparent 55%) !important;
    background-attachment: fixed !important;
}

html.mao-sakura body .fui-page-group,
html.mao-sakura body .fui-page,
html.mao-sakura body .fui-content,
html.mao-sakura.jp-home body .fui-page.page-content,
html.mao-sakura.jp-home body .fui-page-group {
    background-color: transparent !important;
}

/* 飘落花瓣 */
.mao-sakura-layer {
    position: fixed;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
    z-index: 900;
}

.mao-sakura-petal {
    position: absolute;
    top: -40px;
    will-change: transform;
    animation-name: maoSakuraFall;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
}

.mao-sakura-petal i {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 150% 0 150% 0;
    background: linear-gradient(135deg, var(--sakura-petal, #f7c6d3) 0%, var(--sakura-petal-deep, #ee9fb5) 100%);
    box-shadow: 0 0 2px rgba(238, 159, 181, 0.35);
    animation: maoSakuraSway 3.2s ease-in-out infinite alternate;
}

@keyframes maoSakuraFall {
    0% { transform: translate3d(0, -40px, 0) rotate(0deg); opacity: 0; }
    8% { opacity: 0.85; }
    90% { opacity: 0.75; }
    100% { transform: translate3d(var(--drift, 80px), 105vh, 0) rotate(540deg); opacity: 0; }
}

@keyframes maoSakuraSway {
    0% { transform: rotateY(0deg) translateX(0); }
    100% { transform: rotateY(160deg) translateX(18px); }
}

@media (prefers-reduced-motion: reduce) {
    .mao-sakura-layer { display: none; }
}