/* ============================================================================
   节日主题装饰（整站通用，简化版 + 原生版都能用）· 鲜艳版
   ----------------------------------------------------------------------------
   站主反馈：「我国节日主题设计不够鲜艳」。
   上一版确实太淡了 —— 只有一层很浅的径向渐变，几乎看不出来。
   这一版重做，思路是：
     · 主色饱和度拉满（正红 #e60012、明黄 #ffd700 这种，不再用半透明的淡色）
     · 每个节日都有**主角元素**（灯笼 / 金星 / 明月 / 雪花），而不是只有背景
     · 加细微动效，让页面「活」起来
   全部装饰都用 position:fixed + pointer-events:none，
   绝不拦截点击 —— 这是「浮层卡死」事故留下的铁律。
   ========================================================================== */

/* ============================================================== 春节 ===== */
/* 正红+鎏金，两盏大红灯笼带流苏，顶部金色回纹带 */
html[data-festival="spring"] body::before {
  content: ''; position: fixed; inset: 0; pointer-events: none; z-index: 1;
  background:
    radial-gradient(1100px 560px at 50% -8%, rgba(230, 0, 18, .55), transparent 68%),
    radial-gradient(820px 460px at 100% 108%, rgba(255, 200, 40, .30), transparent 66%),
    linear-gradient(180deg, rgba(200, 0, 16, .16) 0%, transparent 22%, transparent 78%, rgba(200, 0, 16, .16) 100%);
}
/* 顶部一条鎏金回纹带 */
html[data-festival="spring"] body::after {
  content: ''; position: fixed; left: 0; right: 0; top: 0; height: 7px;
  pointer-events: none; z-index: 3;
  background: repeating-linear-gradient(90deg,
    #ffd700 0 14px, #e60012 14px 28px, #ffb300 28px 42px, #e60012 42px 56px);
  box-shadow: 0 2px 14px rgba(255, 190, 40, .7);
}

/* ============================================================== 国庆 ===== */
/* 正红主调 + 金色五星绶带 + 底部金色光带 */
html[data-festival="national"] body::before {
  content: ''; position: fixed; inset: 0; pointer-events: none; z-index: 1;
  background:
    radial-gradient(1100px 560px at 50% -8%, rgba(214, 0, 20, .58), transparent 68%),
    radial-gradient(820px 460px at 100% 108%, rgba(255, 205, 40, .32), transparent 66%),
    linear-gradient(180deg, rgba(214, 0, 20, .18) 0%, transparent 20%, transparent 80%, rgba(255, 190, 40, .16) 100%);
}
html[data-festival="national"] body::after {
  content: '★  ★  ★  ★  ★'; position: fixed; pointer-events: none; z-index: 3;
  top: 4px; left: 0; right: 0; height: 30px; line-height: 30px;
  text-align: center; font-size: 17px; letter-spacing: 14px;
  color: #ffd700; text-shadow: 0 0 12px rgba(255, 200, 40, .95), 0 0 26px rgba(255, 160, 20, .6);
  background: linear-gradient(180deg, rgba(200, 0, 18, .85), transparent);
  animation: gw-fest-glow 3s ease-in-out infinite;
}
@keyframes gw-fest-glow {
  0%, 100% { opacity: .78; }
  50%      { opacity: 1; }
}

/* ============================================================== 中秋 ===== */
/* 深蓝紫夜空 + 大而亮的满月 + 星点 */
html[data-festival="midautumn"] body::before {
  content: ''; position: fixed; inset: 0; pointer-events: none; z-index: 1;
  background:
    radial-gradient(1000px 540px at 76% -6%, rgba(255, 226, 150, .40), transparent 62%),
    radial-gradient(900px 520px at 12% 106%, rgba(96, 70, 200, .34), transparent 66%),
    linear-gradient(180deg, rgba(30, 26, 90, .30) 0%, transparent 30%, transparent 72%, rgba(60, 40, 120, .22) 100%);
}
/* 明月本体：多重光晕，比上一版大一圈、亮一档 */
html[data-festival="midautumn"] body::after {
  content: ''; position: fixed; pointer-events: none; z-index: 3;
  top: 26px; right: 40px; width: 88px; height: 88px; border-radius: 50%;
  background: radial-gradient(circle at 36% 32%, #ffffff 0 30%, #fff4c8 55%, #f7d97a 82%, #e8bf4e 100%);
  box-shadow:
    0 0 26px rgba(255, 240, 190, .95),
    0 0 64px rgba(250, 220, 130, .60),
    0 0 130px rgba(240, 200, 100, .32);
  animation: gw-fest-moon 6s ease-in-out infinite;
}
@keyframes gw-fest-moon {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-6px); }
}

/* ============================================================== 圣诞 ===== */
/* 圣诞红 + 松针绿 + 密集飘雪 */
html[data-festival="christmas"] body::before {
  content: ''; position: fixed; inset: 0; pointer-events: none; z-index: 1;
  background:
    radial-gradient(1000px 540px at 50% -8%, rgba(200, 20, 30, .42), transparent 66%),
    radial-gradient(820px 460px at 100% 108%, rgba(16, 130, 70, .36), transparent 66%),
    linear-gradient(180deg, rgba(200, 20, 30, .14) 0%, transparent 20%, transparent 80%, rgba(16, 130, 70, .16) 100%);
}
/* 飘雪：两层不同速度的雪花叠加，看起来更深更密 */
html[data-festival="christmas"] body::after {
  content: ''; position: fixed; inset: -80px 0 0 0; pointer-events: none; z-index: 3;
  background-image:
    radial-gradient(3px 3px at 24px 30px, rgba(255,255,255,.98) 50%, transparent 51%),
    radial-gradient(2px 2px at 132px 96px, rgba(255,255,255,.85) 50%, transparent 51%),
    radial-gradient(4px 4px at 244px 22px, rgba(255,255,255,.95) 50%, transparent 51%),
    radial-gradient(2px 2px at 336px 148px, rgba(255,255,255,.80) 50%, transparent 51%),
    radial-gradient(3px 3px at 74px 206px, rgba(255,255,255,.90) 50%, transparent 51%),
    radial-gradient(2px 2px at 190px 170px, rgba(255,255,255,.75) 50%, transparent 51%),
    radial-gradient(3px 3px at 300px 74px, rgba(255,255,255,.88) 50%, transparent 51%);
  background-size: 400px 260px;
  animation: gw-fest-snow 12s linear infinite;
}
@keyframes gw-fest-snow {
  from { transform: translateY(-260px); }
  to   { transform: translateY(260px); }
}

/* ====================================================== 灯笼（春节专用） */
/* 单独用一层 fixed 元素画灯笼：body::after 已经被回纹带占用了 */
html[data-festival="spring"] .gw-fest-lantern {
  position: fixed; top: 0; pointer-events: none; z-index: 4;
  animation: gw-fest-sway 4s ease-in-out infinite;
}
html[data-festival="spring"] .gw-fest-lantern i {
  display: block; width: 56px; height: 52px; border-radius: 50%;
  background: radial-gradient(circle at 50% 34%, #ff7b6b 0 38%, #ee1c25 64%, #b30f16 100%);
  box-shadow: 0 0 24px rgba(238, 28, 37, .85), 0 0 60px rgba(238, 28, 37, .40);
  position: relative;
}
/* 灯笼顶盖与底部流苏 */
html[data-festival="spring"] .gw-fest-lantern i::before {
  content: ''; position: absolute; left: 50%; transform: translateX(-50%);
  top: -7px; width: 22px; height: 8px; border-radius: 3px; background: #ffd700;
}
html[data-festival="spring"] .gw-fest-lantern i::after {
  content: ''; position: absolute; left: 50%; transform: translateX(-50%);
  bottom: -18px; width: 4px; height: 18px;
  background: linear-gradient(180deg, #ffd700, #e6a700 60%, transparent);
  box-shadow: 0 0 8px rgba(255, 200, 40, .9);
}
@keyframes gw-fest-sway {
  0%, 100% { transform: rotate(-5deg); }
  50%      { transform: rotate(5deg); }
}

/* 尊重「减少动态效果」设置 */
@media (prefers-reduced-motion: reduce) {
  html[data-festival] body::after,
  html[data-festival] .gw-fest-lantern { animation: none !important; }
}