/* =====================================================================
   国庆节日氛围皮肤 v2  (2026-10-01)
   重主题：全站红金换装 + 标题国庆角标 + 灯笼外推呼吸 + 移动端缩小版灯笼
   仅由 views/front/partials/head.ejs 在 10.1—10.7 注入；节后自动失效。
   变量覆盖用 :root.festive-theme，不污染日常品牌色。删除本文件 +
   head.ejs 的注入行 + festive.js 加 class 即可完全还原。
   纯装饰，不影响任何既有布局与功能。
   ===================================================================== */
:root{
  --fest-red:#c8161d;
  --fest-red-d:#9d0b12;
  --fest-red-deep:#7a0a0e;
  --fest-gold:#ffd979;
  --fest-gold-d:#d4a017;
}

/* ============================================================
   ① 重主题：节日 7 天内 :root.festive-theme 覆盖品牌色
   仅影响用 var(--blue/--orange/...) 的元素，正文黑/灰不污染
   ============================================================ */
:root.festive-theme{
  --blue:#c8161d;          /* 朱红 */
  --blue-dark:#9d0b12;     /* 深朱红 */
  --blue-deep:#7a0a0e;     /* 暗红 */
  --orange:#d4a017;        /* 赤金 */
}
/* 节日版加深色模式兼容 */
html.dark-theme.festive-theme{
  --blue:#e23b3f;
  --blue-dark:#b51d22;
  --blue-deep:#8a1217;
  --orange:#e8b73a;
}

/* ---------- ② 顶部国庆通栏（全站，不挡吸顶导航） ---------- */
.festive-top{
  position:relative;z-index:101;
  display:flex;align-items:center;justify-content:center;gap:9px;
  padding:10px 56px 10px 16px;
  background:linear-gradient(100deg,#7a0a0e,var(--fest-red) 42%,#e13a34 58%,var(--fest-red) 78%,#7a0a0e);
  background-size:220% 100%;
  color:#fff4d4;font-size:14.5px;line-height:1.4;letter-spacing:.6px;
  text-align:center;
  animation:festShine 9s linear infinite;
  box-shadow:
    inset 0 -2px 0 var(--fest-gold-d),
    inset 0 1px 0 rgba(255,255,255,.18),
    0 2px 8px rgba(120,0,0,.25);
  border-bottom:1px solid rgba(255,217,121,.5);
}
.festive-top::before,.festive-top::after{
  content:'★';position:absolute;top:50%;transform:translateY(-50%);
  color:var(--fest-gold);font-size:14px;line-height:1;opacity:.85;
  filter:drop-shadow(0 0 4px rgba(255,214,120,.7));
}
.festive-top::before{left:8px;animation:festTwinkle 2.6s ease-in-out infinite}
.festive-top::after{right:40px;animation:festTwinkle 2.6s ease-in-out infinite reverse}
@keyframes festShine{0%{background-position:0 0}100%{background-position:-220% 0}}
@keyframes festTwinkle{0%,100%{opacity:1;transform:translateY(-50%) scale(1)}50%{opacity:.55;transform:translateY(-50%) scale(.78)}}

.festive-top .ft-main b{color:var(--fest-gold);font-weight:800;letter-spacing:1.5px;padding:0 2px;
  text-shadow:0 0 8px rgba(255,214,120,.6)}
.festive-top .ft-sub{opacity:.95;padding-left:10px;border-left:1px solid rgba(255,217,121,.4);
  margin-left:6px;letter-spacing:1px}
.festive-top .ft-sep{color:var(--fest-gold);opacity:.6;font-size:13px;padding:0 2px}

@media (max-width:680px){
  .festive-top{font-size:12.5px;padding:8px 44px 8px 12px;letter-spacing:0;gap:4px}
  .festive-top .ft-sub{display:none}
  .festive-top::before{left:4px;font-size:12px}
  .festive-top::after{right:36px;font-size:12px}
}
.festive-close{
  position:absolute;right:11px;top:50%;transform:translateY(-50%);
  width:24px;height:24px;line-height:22px;text-align:center;border-radius:50%;
  border:1px solid rgba(255,255,255,.5);background:rgba(255,255,255,.12);
  color:#fff;font-size:15px;font-weight:700;cursor:pointer;padding:0;transition:.2s;
}
.festive-close:hover{background:rgba(255,255,255,.3)}

/* ============================================================
   ③ 主导航底部红金色带（全站，加强：加金边）
   ============================================================ */
.main-nav{position:relative}
.main-nav::after{
  content:'';position:absolute;left:0;right:0;bottom:-4px;height:4px;z-index:3;
  background:linear-gradient(90deg,var(--fest-red-d) 0%,var(--fest-gold-d) 35%,var(--fest-gold) 50%,var(--fest-gold-d) 65%,var(--fest-red-d) 100%);
  box-shadow:0 1px 4px rgba(180,120,30,.4);
}
/* 移动端主导航变为全屏抽屉(front.css ≤767px 的 .main-nav)，此绝对定位色带会随抽屉"穿"进菜单；移动端隐藏 */
@media (max-width:767px){ .main-nav::after{display:none} }

/* ============================================================
   ④ 标题国庆角标（栏目标题 sec-title h2 + banner 主标题）
   ============================================================ */
/* 栏目标题前加红色五角星 + 后加小金色「国庆」角标 */
.festive-theme .sec-title h2{
  position:relative;display:inline-block;padding:0 12px 11px;
  /* 国庆期间去掉标题下橙色横线，恢复时由 front.css ::after 接管 */
}
.festive-theme .sec-title h2::before{
  content:'';display:inline-block;width:18px;height:18px;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><polygon fill='%23c8161d' points='12,2 14.6,8.6 21.6,8.6 16,12.6 18.3,19.4 12,15.4 5.7,19.4 8,12.6 2.4,8.6 9.4,8.6'/></svg>");
  background-size:contain;background-repeat:no-repeat;background-position:center;
  vertical-align:middle;margin-right:8px;transform:translateY(-2px);
  filter:none;
}
.festive-theme .sec-title h2::after{
  content:'国庆';display:inline;margin-left:20px;padding:3px 9px 5px;
  font-size:13px;font-weight:700;letter-spacing:1.5px;line-height:1.6;
  color:#fff;background:var(--fest-red);
  border-radius:4px;vertical-align:middle;
  -webkit-font-smoothing:antialiased;
  /* padding-bottom:5px → 留足下沿空间 */
}
/* banner 内主标题加「国庆特辑」金色徽章 */
.festive-theme .banner-title{
  position:relative;display:inline-block;
}
/* .festive-theme .banner-anim::after{...} — 已移除，不在 banner 加文字徽章 */
/* ============================================================
   ⑤ 首页 banner 垂挂灯笼（由 festive.js 注入）——外推呼吸版
   ============================================================ */
.festive-lantern{
  position:absolute;top:36px;z-index:6;pointer-events:none;width:46px;height:58px;
  background:radial-gradient(circle at 34% 28%,#ff8377,#d81e06 66%,#a30f12);
  border-radius:50% 50% 50% 50% / 46% 46% 54% 54%;
  box-shadow:inset 0 0 14px rgba(120,0,0,.5),0 0 0 2px rgba(255,240,200,.55),0 8px 18px rgba(150,0,0,.35),0 0 16px rgba(255,220,150,.55);
  transform-origin:50% -34px;animation:lanternSway 4.2s ease-in-out infinite;
}
.festive-lantern::before{content:'';position:absolute;left:50%;top:-72px;width:2px;height:72px;
  background:linear-gradient(#e8c36a,#b8860b);transform:translateX(-50%)}
.festive-lantern::after{content:'';position:absolute;left:50%;top:calc(100% - 5px);width:3px;height:30px;
  background:linear-gradient(#f0cf6a,#c19a1f);transform:translateX(-50%);border-radius:2px;
  box-shadow:0 0 7px rgba(255,200,80,.6)}
.festive-lantern i{position:absolute;left:50%;top:12%;width:3px;height:74%;border-radius:2px;
  background:rgba(255,222,150,.42);transform:translateX(-50%)}
.festive-lantern i.i2{left:26%}
.festive-lantern i.i3{left:74%}
/* 桌面位置：左 lantern 再左一点，右 lantern 大幅外推给关闭按钮让位 */
.festive-lantern.l1{left:10px}
.festive-lantern.l2{right:62px;animation-delay:-2.1s}

html.dark-theme .festive-lantern{box-shadow:inset 0 0 14px rgba(120,0,0,.65),0 8px 18px rgba(0,0,0,.55)}
@keyframes lanternSway{0%,100%{transform:rotate(-5deg)}50%{transform:rotate(5deg)}}

/* ============================================================
   ⑥ "国庆"印章（桌面 + 移动，桌面调整位置避开右灯笼）
   ============================================================ */
.festive-seal{
  position:absolute;right:142px;top:22px;z-index:6;pointer-events:none;
  width:82px;height:82px;border-radius:50%;border:2px solid var(--fest-gold);
  background:radial-gradient(circle at 35% 30%,#e2352f,#ad1119);
  color:#ffe6a8;display:flex;flex-direction:column;align-items:center;justify-content:center;
  font-weight:800;text-align:center;transform:rotate(-8deg);
  box-shadow:
    0 7px 20px rgba(140,0,0,.45),
    inset 0 0 0 3px rgba(255,214,120,.32),
    0 0 18px rgba(255,217,121,.35);
  text-shadow:0 1px 2px rgba(0,0,0,.35);
  animation:sealPulse 3.4s ease-in-out infinite;
}
.festive-seal .fs1{font-size:21px;letter-spacing:3px;line-height:1;padding-left:3px}
.festive-seal .fs2{font-size:10px;letter-spacing:1px;margin-top:5px;opacity:.95}
@keyframes sealPulse{
  0%,100%{box-shadow:0 7px 20px rgba(140,0,0,.45),inset 0 0 0 3px rgba(255,214,120,.32),0 0 12px rgba(255,217,121,.3)}
  50%{box-shadow:0 7px 22px rgba(140,0,0,.55),inset 0 0 0 3px rgba(255,214,120,.4),0 0 26px rgba(255,217,121,.65)}
}

/* ============================================================
   ⑦ 媒体查询（按断点从大到小排列，后写的覆盖先写的）
   ============================================================ */
/* ≤1100px：中等屏幕，印章缩小让位右灯笼 */
@media (max-width:1100px){
  .festive-seal{right:108px;top:18px;width:72px;height:72px}
  .festive-seal .fs1{font-size:18px}
  .festive-seal .fs2{font-size:9px}
}
/* ≤860px：移动端，灯笼缩小版 + 印章进一步缩 */
@media (max-width:860px){
  .festive-lantern{display:block !important;animation:none !important;
    transform:scale(.85);transform-origin:top center}
  .festive-lantern.l1{left:24px;top:40px}
  .festive-lantern.l2{right:24px;top:40px}
  .festive-seal{transform:scale(.55) rotate(-8deg);
    transform-origin:top right;right:38px;top:6px;width:70px;height:70px}
  .festive-seal .fs1{font-size:18px}
  .festive-seal .fs2{font-size:9px}
}
/* ≤480px：再缩 */
@media (max-width:480px){
  .festive-lantern{transform:scale(.62)}
  .festive-seal{transform:scale(.45) rotate(-8deg);right:34px;top:4px}
}

/* ============================================================
   ⑧ 减弱动效偏好
   ============================================================ */
@media (prefers-reduced-motion:reduce){
  .festive-top,.festive-top::before,.festive-top::after,
  .festive-lantern,.festive-seal{animation:none}
}