/* ============================================================
   13 套花式主题的专属氛围动效（2026-10-28 宝宝：「现在所有主题的动效都是飘花，一点也不符合主题」）

   早先 13 套皮肤的 theme-data 里 atmosphere 全写成了 petal，所以不管什么主题天上都在飘花。
   现在它们共用 js/theme.js 里一个叫 skin 的粒子槽（26 个空 div），
   具体「是什么东西在动」全部由本文件按 data-theme-skin 决定：
     奶油纸=柔花瓣 / 莓=果籽上浮 / 赛博=数据流光 / 冰=落雪 / 墨=墨滴晕开 / 月光=萤火
     晨光=尘埃 / 夜=雨丝 / 瓷=青花细点 / 深红玫瑰=玫瑰花瓣 / 雪=细雪 / 春日=叶与花 / 星屑=星光闪烁
   颜色一律取主题自己的调色板（--skin-petal / --skin-line / --skin-gold / --skin-accent），
   换主题不会串色；只用 transform / opacity，不掉帧。
   新增主题的做法：在调色板与媒体之外，只要在本文件加一段 html[data-theme-skin="新主题"] 即可。
   ============================================================ */

#ambient-layer .amb-skin {
    position: absolute;
    top: -10vh;
    left: 0;
    opacity: 0;
    /* ★ 2026-10-30 去掉 will-change：十几个元素永久挂 will-change 会让它们一直被当成独立合成层占显存，
       宝宝实机「花瓣一收掉就不卡了」说明合成层本身就是负担。动画本身照样会被自动提升，不用手动提示。 */
}

/* —— 运动曲线：下落 / 翻转下落 / 上浮 / 直线急落 / 原地晕开 / 缓慢漂移 —— */
@keyframes skin-fall {
    0%   { transform: translate3d(0, -10vh, 0) rotate(0deg); }
    100% { transform: translate3d(3vw, 112vh, 0) rotate(180deg); }
}
@keyframes skin-fall-rot {
    0%   { transform: translate3d(0, -10vh, 0) rotate(0deg) scale(1); }
    50%  { transform: translate3d(-2vw, 50vh, 0) rotate(160deg) scale(1.06); }
    100% { transform: translate3d(2vw, 112vh, 0) rotate(340deg) scale(1); }
}
@keyframes skin-rise {
    0%   { transform: translate3d(0, 10vh, 0) scale(.85); }
    100% { transform: translate3d(-2.5vw, -112vh, 0) scale(1.12); }
}
@keyframes skin-streak {
    0%   { transform: translate3d(0, -12vh, 0); }
    100% { transform: translate3d(-1.5vw, 112vh, 0); }
}
@keyframes skin-drift {
    0%   { transform: translate3d(0, -10vh, 0); }
    100% { transform: translate3d(4vw, 112vh, 0); }
}
@keyframes skin-twinkle {
    0%, 100% { opacity: .16; }
    45%      { opacity: .92; }
}

/* 1. 奶油纸暖调 atelier：柔花瓣，慢慢落 */
html[data-theme-skin="atelier"] .amb-skin {
    width: 6px; height: 8px;
    border-radius: 50% 50% 50% 0;
    background: color-mix(in srgb, var(--skin-petal) 64%, transparent);
    animation: skin-fall 12s linear infinite, skin-twinkle 9s ease-in-out infinite;
}
html[data-theme-skin="atelier"] .amb-skin:nth-child(3n) {
    width: 4px; height: 6px; animation-duration: 17s, 11s;
}
html[data-theme-skin="atelier"] .amb-skin:nth-child(4n) {
    border-radius: 50%; animation-duration: 15s, 8s;
}

/* 2. 莓 berry：小果籽轻轻上浮 */
html[data-theme-skin="berry"] .amb-skin {
    top: 104vh;
    width: 4px; height: 4px;
    border-radius: 50%;
    background: color-mix(in srgb, var(--skin-petal) 78%, transparent);
    animation: skin-rise 14s ease-in-out infinite, skin-twinkle 7s ease-in-out infinite;
}
html[data-theme-skin="berry"] .amb-skin:nth-child(3n) {
    width: 2.5px; height: 2.5px; animation-duration: 19s, 9s;
}
html[data-theme-skin="berry"] .amb-skin:nth-child(4n) {
    width: 5px; height: 6px; border-radius: 50% 50% 50% 0;
}

/* 3. 赛博 cyber：光点与数据流光，急落 */
html[data-theme-skin="cyber"] .amb-skin {
    width: 1.5px; height: 18px;
    border-radius: 1px;
    background: linear-gradient(180deg, transparent, color-mix(in srgb, var(--skin-accent) 90%, transparent));
    box-shadow: 0 0 6px color-mix(in srgb, var(--skin-accent) 60%, transparent);
    animation: skin-streak 4.6s linear infinite;
}
html[data-theme-skin="cyber"] .amb-skin:nth-child(3n) {
    width: 3px; height: 3px;
    border-radius: 50%;
    background: color-mix(in srgb, var(--skin-accent) 70%, #ffffff);
    box-shadow: 0 0 9px color-mix(in srgb, var(--skin-accent) 85%, transparent);
    animation: skin-streak 7.5s linear infinite;
}
html[data-theme-skin="cyber"] .amb-skin:nth-child(5n) {
    width: 1px; height: 30px; animation-duration: 3.4s;
}

/* 4. 冰蓝 ice：落雪 */
html[data-theme-skin="ice"] .amb-skin {
    width: 4px; height: 4px;
    border-radius: 50%;
    background: color-mix(in srgb, #ffffff 82%, var(--skin-line));
    box-shadow: 0 0 5px color-mix(in srgb, var(--skin-line) 45%, transparent);
    animation: skin-fall 13s linear infinite, skin-twinkle 8s ease-in-out infinite;
}
html[data-theme-skin="ice"] .amb-skin:nth-child(even) {
    width: 2.5px; height: 2.5px; animation-duration: 19s, 10s;
}
html[data-theme-skin="ice"] .amb-skin:nth-child(5n) {
    width: 5.5px; height: 5.5px; border-radius: 1px; transform: rotate(45deg);
    animation-duration: 16s, 12s;
}

/* 5. 水墨 ink：墨滴晕开（不落，自己在原地散掉、再慢慢上浮） */
html[data-theme-skin="ink"] .amb-skin {
    top: 104vh;
    width: 14px; height: 14px;
    border-radius: 50%;
    background: radial-gradient(circle, color-mix(in srgb, var(--skin-line) 55%, transparent) 0%, transparent 68%);
    filter: blur(.4px);
    animation: skin-rise 26s ease-out infinite;
}
html[data-theme-skin="ink"] .amb-skin:nth-child(n+9) { display: none; }
html[data-theme-skin="ink"] .amb-skin:nth-child(3n) { width: 22px; height: 22px; animation-duration: 34s; }
html[data-theme-skin="ink"] .amb-skin:nth-child(4n) { width: 9px; height: 9px; animation-duration: 21s; }

/* 6. 月光 moonlit：萤火（暖光点上浮、呼吸） */
html[data-theme-skin="moonlit"] .amb-skin {
    top: 104vh;
    width: 4px; height: 4px;
    border-radius: 50%;
    background: color-mix(in srgb, var(--skin-gold) 88%, #ffffff);
    box-shadow: 0 0 10px color-mix(in srgb, var(--skin-gold) 80%, transparent);
    animation: skin-rise 20s linear infinite, skin-twinkle 5.5s ease-in-out infinite;
}
html[data-theme-skin="moonlit"] .amb-skin:nth-child(3n) { animation-duration: 27s, 7s; }
html[data-theme-skin="moonlit"] .amb-skin:nth-child(n+17) { display: none; }

/* 7. 晨光 morning：晨光里的浮尘，缓缓上升 */
html[data-theme-skin="morning"] .amb-skin {
    top: 104vh;
    width: 2.5px; height: 2.5px;
    border-radius: 50%;
    background: color-mix(in srgb, var(--skin-gold) 70%, #ffffff);
    box-shadow: 0 0 6px color-mix(in srgb, var(--skin-gold) 45%, transparent);
    animation: skin-rise 22s linear infinite, skin-twinkle 6s ease-in-out infinite;
}
html[data-theme-skin="morning"] .amb-skin:nth-child(2n) { animation-duration: 29s, 8s; width: 1.8px; height: 1.8px; }
html[data-theme-skin="morning"] .amb-skin:nth-child(5n) { width: 4px; height: 4px; animation-duration: 17s, 5s; }

/* 8. 黑夜 noir：雨丝 */
html[data-theme-skin="noir"] .amb-skin {
    width: 1px; height: 22px;
    border-radius: 1px;
    background: linear-gradient(180deg, transparent, color-mix(in srgb, var(--skin-line) 70%, #ffffff));
    animation: skin-streak 3.8s linear infinite;
}
html[data-theme-skin="noir"] .amb-skin:nth-child(2n) { height: 14px; animation-duration: 3s; opacity: 0; }
html[data-theme-skin="noir"] .amb-skin:nth-child(4n) { height: 30px; animation-duration: 4.6s; }

/* 9. 青花瓷 porcelain：青花细点，极慢飘落 */
html[data-theme-skin="porcelain"] .amb-skin {
    width: 3px; height: 3px;
    border-radius: 50%;
    background: color-mix(in srgb, var(--skin-accent) 62%, transparent);
    animation: skin-fall 22s linear infinite, skin-twinkle 9s ease-in-out infinite;
}
html[data-theme-skin="porcelain"] .amb-skin:nth-child(4n) {
    background: transparent;
    border: 1px solid color-mix(in srgb, var(--skin-accent) 55%, transparent);
    width: 7px; height: 7px;
}
html[data-theme-skin="porcelain"] .amb-skin:nth-child(n+19) { display: none; }

/* 10. 深红玫瑰 redrose：玫瑰花瓣 */
html[data-theme-skin="redrose"] .amb-skin {
    width: 7px; height: 9px;
    border-radius: 50% 50% 50% 4px;
    background: color-mix(in srgb, var(--skin-petal) 78%, transparent);
    animation: skin-fall-rot 13s linear infinite, skin-twinkle 8s ease-in-out infinite;
}
html[data-theme-skin="redrose"] .amb-skin:nth-child(3n) { width: 5px; height: 7px; animation-duration: 18s, 10s; }
html[data-theme-skin="redrose"] .amb-skin:nth-child(5n) { border-radius: 50%; }

/* 11. 雪雪白 snow：细雪 */
html[data-theme-skin="snow"] .amb-skin {
    width: 3px; height: 3px;
    border-radius: 50%;
    background: color-mix(in srgb, #ffffff 88%, var(--skin-line));
    box-shadow: 0 0 4px color-mix(in srgb, var(--skin-line) 35%, transparent);
    animation: skin-fall 16s linear infinite, skin-twinkle 10s ease-in-out infinite;
}
html[data-theme-skin="snow"] .amb-skin:nth-child(3n) { width: 2px; height: 2px; animation-duration: 22s, 12s; }
html[data-theme-skin="snow"] .amb-skin:nth-child(7n) { width: 4.5px; height: 4.5px; animation-duration: 13s, 8s; }

/* 12. 春日 spring：叶与花（一半叶子、一半花瓣） */
html[data-theme-skin="spring"] .amb-skin {
    width: 6px; height: 6px;
    border-radius: 0 60% 0 60%;
    background: color-mix(in srgb, var(--skin-line) 52%, transparent);
    animation: skin-fall-rot 12s linear infinite, skin-twinkle 7s ease-in-out infinite;
}
html[data-theme-skin="spring"] .amb-skin:nth-child(2n) {
    width: 5px; height: 7px;
    border-radius: 50% 50% 50% 0;
    background: color-mix(in srgb, var(--skin-petal) 66%, transparent);
    animation-duration: 16s, 9s;
}
html[data-theme-skin="spring"] .amb-skin:nth-child(5n) { width: 4px; height: 4px; border-radius: 50%; }

/* 13. 星屑 stardust：星光闪烁（慢慢漂、明暗呼吸） */
html[data-theme-skin="stardust"] .amb-skin {
    width: 3px; height: 3px;
    border-radius: 50%;
    background: color-mix(in srgb, var(--skin-gold) 92%, #ffffff);
    box-shadow: 0 0 8px color-mix(in srgb, var(--skin-gold) 85%, transparent);
    animation: skin-drift 30s linear infinite, skin-twinkle 4.5s ease-in-out infinite;
}
html[data-theme-skin="stardust"] .amb-skin:nth-child(3n) { width: 2px; height: 2px; animation-duration: 40s, 3.2s; }
html[data-theme-skin="stardust"] .amb-skin:nth-child(6n) { width: 4.5px; height: 4.5px; animation-duration: 24s, 6s; }

/* 低端机/省电模式：只保留最省的那一层 */
@media (prefers-reduced-motion: reduce) {
    #ambient-layer .amb-skin { animation-duration: 0s !important; opacity: .18 !important; }
}