/* ============================================================
   顶部公告条（导航上方那一条）
   ------------------------------------------------------------------
   DOM：public/header.html 最前面（在 .nav-layoutcontainer 之上）
   数据：插件 www_index_hero 的「公告条」页签 -> $data.notice
   开启/关闭：$data.notice 为空时整段不输出，本文件规则自然不生效

   三套高度变量，别混：
     --notice-h      这条公告自己的高（= 后台「公告高度」），只给 .site-notice 用
     --noticeheight  同值，但设在 :root 上，给「正文让位 / 锚点补偿」用（静态，不随滚动变）
     --navoffset     导航当前应该往下让多少 = max(0, 公告高 - 已滚动距离)，
                     由 js/notice.js 每次滚动实时更新（动态）
   后台没配高度时回落 50px。

   滚动行为（2026-10-19 改）：
     公告条是 absolute 钉在**文档**最顶端，跟着页面一起往上滚，滚过自己那 50px
     之后自然离开视口；同时导航的 top 从 50 平滑收到 0（吸顶）。
     早期版本是「一离开顶部就把公告条 max-height 归 0」，看起来是「瞬间消失」，
     而且正文会跟着跳 50px；现在这两点都没有了。
   ============================================================ */

/* --noticeheight 要能「过渡」：关掉公告时正文让位从 50 收到 0，如果它是瞬间变的，
   正文会整块往上跳 50px（源站是平滑收起的，这就是「生硬」的来源之一）。
   自定义属性默认是不可动画的，必须先用 @property 声明成 <length> 才吃 transition。
   不支持 @property 的浏览器直接跳过过渡，退化成原来的瞬变，不影响功能。 */
@property --noticeheight {
  syntax: "<length>";
  inherits: true;
  initial-value: 0px;
}

:root {
  --noticeheight: 0px;
  --navoffset: 0px;
  /* 只过渡这一个变量：--navoffset 是滚动时每帧算的，绝不能带过渡 */
  transition: --noticeheight 0.26s ease-out;
}

.site-notice {
  /* ★ absolute 而不是 fixed：absolute 相对初始包含块（= 文档原点）定位，
     所以它会跟着页面一起滚走；fixed 会一直钉在视口上，怎么滚都在。
     它不占文档流，正文的让位交给 body padding-top（见下面「导航 / 正文让位」）。
     ★ 例外：≤1200（移动壳层）改成 fixed，见文件末尾那条媒体查询。 */
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  /* ★ 必须低于导航的 999：刷新入场时导航是从 top:0 往下滑的，前半秒它正好压在
     公告条上，靠 .headerBg 的毛玻璃把公告条「糊」住再让出来；公告条要是 1000，
     就会盖在毛玻璃上面，看不到覆盖效果。移动端抽屉（1001）和遮罩（1002）仍在上层。 */
  z-index: 990;
  height: var(--notice-h, 50px);
  box-sizing: border-box;
  background-color: var(--notice-bg, rgba(61, 72, 93, 1));
  background-image: var(--notice-bg-img, none);
  background-size: cover;
  background-position: center;
  color: var(--notice-color, #fff);
  /* ★ 字号 / 行高照抄源站 .announcement a：14px + normal（源站量到 a 高 16px） */
  font-size: 14px;
  line-height: normal;
  /* 标题滚动（.is-scroll）时文字溢出，靠这层裁住不压到关闭按钮上 */
  overflow: hidden;
  /* 关闭：高度收到 0（和源站 .announcement-container 的 height 收起一致），
     内容靠 opacity 同步淡出；不要再用 translateY 整条滑走，那是两个动作叠在一起。 */
  transition: height 0.26s ease-out, opacity 0.2s ease-out;
}

/* ---------- 刷新后的入场：导航带着毛玻璃先盖住，再往下滑 ----------
   早期做法是给公告条做「高度 0 → 50」的展开动画，但公告条上方那段是 body 的白底，
   导航又一直停在 top:50 —— 撑高的过程中先露出一条白底，撑满后导航才「啪」地贴上，
   就是用户说的「显示一下空白」。
   现在反过来：公告条第一帧就是满高（藏在导航后面），导航从 top:0（整条毛玻璃正好
   把公告条糊住，透过模糊还能看到一点字）滑到自己的 top:--navoffset，像把盖板往下拉，
   公告条被一点点让出来。
   ★ 公告条 z-index 必须低于导航，见上面 .site-notice 那条。
   ★ from 写 0 而不是 -50px：刷新时若浏览器恢复了滚动位置（--navoffset 已是 0），
     首尾值相等，动画自然空转，不会把导航硬拽下来。
   ★ 只动 top，不动 transform：transform 会给导航建新的包含块，.headerBg 的
     backdrop-filter 取到的底可能变成空白，毛玻璃就糊不出公告条了。 */
@keyframes navNoticeIn {
  from { top: 0; }
  to   { top: var(--navoffset, 0px); }
}

html:has(.site-notice) .nav-layoutcontainer {
  animation: navNoticeIn 0.32s cubic-bezier(0.22, 0.61, 0.36, 1) backwards;
}

/* 入场那半秒导航正好压在深色公告条上，底色 0.2 的白太薄，导航黑字会糊在暗底里；
   先用浓一点的白纱起手（0.5：公告条透过来是一层中灰，条带和文字都还看得出来，
   导航黑字压在 0.5 白纱上对比度约 5.7:1，读得清），淡回到各页面原本的底色。
   不写 to，100% 自动取元素自己的计算值 —— 所以白色实底页、深色 Banner 页都不会被改坏。 */
@keyframes headerBgCover {
  from { background-color: rgba(255, 255, 255, 0.5); }
}

html:has(.site-notice) .nav-layoutcontainer .horizontal-menu-navbar .headerBg {
  animation: headerBgCover 0.32s ease-out;
}

/* 已经完全滚出视口（js/notice.js 判定 scrollY >= 公告高后加）：
   藏起来省一次绘制，也避免被 Tab 键选到屏幕外的内容 */
.site-notice.is-past {
  visibility: hidden;
}

/* 关闭：高度 50→0 + 淡出，动画结束（260ms）后由 JS 移除 DOM */
.site-notice.is-closing {
  height: 0;
  opacity: 0;
}

/* 系统开了「减少动态效果」就不做任何过渡（含多条公告的淡出淡入） */
@media (prefers-reduced-motion: reduce) {
  .site-notice,
  .site-notice__item,
  :root,
  .nav-layoutcontainer,
  .nav-layoutcontainer .horizontal-menu-navbar .headerBg {
    animation: none;
    transition: none;
  }
}

.site-notice__inner {
  /* 刻意不写 position:relative —— 关闭按钮要相对整条（视口右边缘）定位，
     而不是相对某个居中容器；写成 relative 会离右边差出 (视口-容器宽)/2 */
  height: 100%;
  /* ★ 布局照抄源站 .announcement-row-container：整行铺满 + 左 40 / 右 100 内边距，
     不是 1200 居中容器。右边那 100px 是留给关闭按钮的（关闭按钮 right:20、宽 26）。 */
  width: 100%;
  padding: 0 100px 0 40px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
}

/* 后台「显示位置」：整段内容在整行里的水平位置（对应源站 --topjustify） */
.site-notice__inner.is-center { justify-content: center; }
.site-notice__inner.is-left { justify-content: flex-start; }
.site-notice__inner.is-right { justify-content: flex-end; }

/* 左侧蓝标签 —— 逐项照抄源站 .jyy-tag（22 高 / 12px / #0052d9 / 圆角 2px 且右下角为 0） */
.site-notice__label {
  position: relative;
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  height: 22px;
  padding: 0 8px;
  background: #0052d9;
  color: #fff;
  border-radius: 2px;
  border-bottom-right-radius: 0;
  margin-right: 20px;
  font-size: 12px;
  font-weight: 400;
  line-height: 22px;
  white-space: nowrap;
}

/* 右下角的小三角：源站是 left:100% / bottom:0 + border-width 3px 4px（下+左着色） */
.site-notice__label::after {
  content: "";
  position: absolute;
  left: 100%;
  bottom: 0;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 3px 4px;
  border-color: transparent transparent #0052d9 #0052d9;
}

.site-notice__icon {
  display: block;
  width: 14px;
  height: 14px;
  object-fit: contain;
}

/* 公告文字区：多条公告时只显示 .is-active 那条 */
.site-notice__track {
  display: flex;
  align-items: center;
  min-width: 0;
}

.site-notice__item {
  display: none;
  align-items: center;
  gap: 8px;
  max-width: min(72vw, 780px);
  /* 照抄源站 .announcement.cutOneSHairjyy：relative + 右侧留白给箭头。
     ★ 这个 20px 不能改小：折角箭头旋转 -45° 后，墨迹的左边缘落在
       「item 右边缘 - 14.9px」附近（不是 right:10 那条边），20 - 14.9 ≈ 5px
       才是文字和箭头之间真正的间距；改成 16 就只剩 1px，箭头会糊在字上。
     ★ 改这个值必须和下面 ::after 的 right 一起看，见手机段那条注释。 */
  position: relative;
  padding-right: 20px;
  color: inherit;
  text-decoration: none;
  /* ★ 多条公告切换（源站同款）：每 5 秒「淡出 → 换条 → 淡入」，各 0.4 秒，
     位置不动、只有透明度变化，不滑不缩放。
     类由 js/notice.js 控制：.is-out 是「当前正处于透明态」。 */
  transition: opacity 0.4s ease;
}

.site-notice__item.is-active {
  display: inline-flex;
}

/* 淡出中 / 淡入的起始帧（透明）。切换时 JS 会先加上它、强制回流后再摘掉，
   于是 opacity 从 0 过渡到 1，形成淡入。 */
.site-notice__item.is-out {
  opacity: 0;
}

/* 文字窗口：自己 overflow:hidden，宽度被 item 的 max-width 压住，
   超出部分省略号；滚动时由内层 .site-notice__text-inner 移动，
   这样文字永远裁在窗口里，不会压到箭头和关闭按钮上。 */
.site-notice__text {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.site-notice__text-inner {
  display: inline-block;
  white-space: nowrap;
}

/* ★ 不滚动时把内层改回真正的 inline：外层 .site-notice__text 只有一个 inline-block
   子项时，text-overflow: ellipsis 是不生效的，浏览器只会把字硬裁在半个字上
   （窄屏 + 加了「查看详情」之后文字窗口变窄，这个硬裁很容易看到）。
   滚动（.is-scroll）时必须是 inline-block，否则 transform 对 inline 元素无效。 */
.site-notice:not(.is-scroll) .site-notice__text-inner {
  display: inline;
}

/* 右侧「查看详情」：源站是把它拼在 a 的文本里（标题后面跟三个 &nbsp; 再跟「查看详情」），
   但那样它会被省略号一起吃掉、也会跟着横向滚动跑出去。
   这里做成标题窗口之外的一个独立 flex 项：不收缩、不换行，永远完整显示，
   标题该省略号省略号、该滚动滚动，互不影响。
   ★ flex: none 必须写：默认的 flex-shrink:1 会在标题超长时把它压成「查看…」。
   ★ 只在电脑端出现（≤768 被下面手机段 display:none 掉）：手机上文字窗口本来就只有
     60vw，再挂 56px 的「查看详情」会把标题挤成三四个字，所以只留箭头。 */
.site-notice__more {
  flex: none;
  white-space: nowrap;
}

/* 固定的独立箭头（只手机端用，见文件末尾手机段）。
   源站 .cutOneSHairjyy 就是文字窗口之外的独立块，所以标题长短跟它无关。
   电脑端箭头仍是 .site-notice__item::after（要跟在「查看详情」后面），这里关掉。 */
.site-notice__arrow {
  display: none;
}

/* 悬停：不做任何变化（2026-10-22 按用户要求去掉下划线）。
   源站是整条 a 一起加下划线，这里特意不加 —— 要恢复就写：
   .site-notice__item:hover .site-notice__text,
   .site-notice__item:hover .site-notice__more { text-decoration: underline; }
   注意 text-decoration 不会穿过 flex 容器传给 flex item，两个 span 必须分别命中。 */

/* 箭头：照抄源站 .cutOneSHairjyy::after（5×5 + 2px 折角 + 旋转 -45° + right:10 / top:55%）
   纯 CSS 折角，不依赖图标字体。★ box-sizing 必须显式 content-box：
   源站是 content-box（总高 7px），本主题全局是 border-box，不写会让折角小一圈。 */
.site-notice__item::after {
  content: "";
  position: absolute;
  right: 10px;
  top: 55%;
  width: 5px;
  height: 5px;
  box-sizing: content-box;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: translateY(-50%) rotate(-45deg);
  transition: right 0.3s ease;
}

/* 关闭按钮：照抄源站 .announcement-close —— 26×26 的半透明圆环 + 中间一个叉
   源站用的是一张 63×63 的 png（白色 + 40% alpha），按比例拆成 26px：环宽 2.5 / 叉跨 8.8。 */
.site-notice__close {
  position: absolute;
  right: 20px;
  top: 50%;
  transform: translateY(-50%);
  width: 26px;
  height: 26px;
  padding: 0;
  display: block;
  border: 0;
  background: transparent;
  color: inherit;
  cursor: pointer;
}

.site-notice__close svg {
  display: block;
  width: 100%;
  height: 100%;
  opacity: 0.4;
  transition: opacity 0.2s ease;
}

/* 源站没有 hover 态；这里只把图形整体提亮，不动尺寸位置 */
.site-notice__close:hover svg {
  opacity: 0.85;
}

/* 后台「滚动事件」开启且文字超宽时（js/notice.js 判定后加 .is-scroll）
   --marquee-x = 需要移动的像素（负数），--marquee-d = 一个来回的总时长。 */
.site-notice.is-scroll .site-notice__item.is-active .site-notice__text {
  text-overflow: clip;
}

.site-notice.is-scroll .site-notice__item.is-active .site-notice__text-inner {
  animation: site-notice-marquee var(--marquee-d, 20s) linear infinite;
}

/* 兜底下用的静态 keyframes。
   ★ 实际生效的是 js/notice.js 现写的那条同名规则（百分比按「两端各停 2 秒」
     和实际溢出距离算，这里算不出来），它插在 head 末尾、排在本文之后，会覆盖这条。
     所以这里只在 JS 没跑起来时兜个底，别拿它当准。 */
@keyframes site-notice-marquee {
  0%,
  15% {
    transform: translateX(0);
  }
  50%,
  65% {
    transform: translateX(var(--marquee-x, -40px));
  }
  100% {
    transform: translateX(0);
  }
}

/* ---------- 导航 / 正文让位 ----------
   公告条不占文档流，所以要手动把导航压下来、正文让出这段高度。
   权重都比 bridge.css 第 6 节那几条高一级，且本文件排在 bridge.css / mobile.css 之后。

   导航读 --navoffset（动态：滚多少收多少），正文读 --noticeheight（静态：一次让够），
   两者不能共用一个变量 —— 共用的话滚动时正文会被顶上顶下，页面会跳。 */
.nav-layoutcontainer {
  top: var(--navoffset, 0px);
}

/* nav.css 给 .nav-layoutcontainer 写了 transition: all .2s，
   滚动时每帧改 top 会被这个过渡拖慢半拍，导航和公告条之间会裂开一条缝。
   这里只留底色过渡，top 变成即时生效。 */
body:has(.site-notice) .nav-layoutcontainer {
  transition: background-color 0.3s ease-out;
}

/* 关公告的那 260ms 例外：这时候 top 也要平滑（不然导航跟着 --navoffset 归 0 是「啪」一下跳上去，
   比公告条本身的收起还显眼）。JS 只在点 × 时给 <html> 挂 is-notice-anim，动画结束就摘掉，
   所以滚动吸顶仍然是即时跟手，不会滞后半拍、也不会裂出那条缝。
   ★ 权重与上一条相同（0,2,1），靠「写在后面」胜出，别往上挪。 */
html.is-notice-anim .nav-layoutcontainer {
  transition: top 0.26s ease-out, background-color 0.3s ease-out;
}

/* 常规内页：原来让 62，现在让 62 + 公告高 */
body:has(.site-notice):not(.has-hero):not(#index) {
  padding-top: calc(var(--navheight, 62px) + var(--noticeheight, 0px));
}

/* 首页有 Hero：原来不让位（Hero 顶到 y=0），现在让出公告高，Hero 从公告下面开始 */
body.has-hero:has(.site-notice) {
  padding-top: var(--noticeheight, 0px);
}

/* 首页没配 Hero 的兜底：bridge.css 那条是 62，这里补上公告高 */
body#index:not(:has(.hp-hero)):has(.site-notice) {
  padding-top: calc(var(--navheight, 62px) + var(--noticeheight, 0px));
}

/* ---------- 移动壳层：公告条 + 导航一起钉在顶部（≤1200）----------
   断点必须与 mobile-nav.js 的 MOBILE、mobile.css 首节完全一致（都是 1200）。
   手机上下滑时，只有正文（banner 图）在动，公告条和导航一直贴在视口顶部，
   不会出现「banner 从公告条底下穿过、顶部被盖住」的观感。
   JS 那半在 ≤1200 时会把 --navoffset 冻结成公告高（notice.js 的 isMobile()），
   两边阈值要一起改 —— 只改一边会让导航停在错的位置。 */
@media (max-width: 1200px) {
  .site-notice {
    position: fixed;
  }
}

/* ---------- 手机 ----------
   字号 / 标签高度跟 PC 完全一致（源站手机端也是 14px + 22px 标签），只收紧左右内边距 */
@media (max-width: 768px) {
  /* ===== 手机端矮 10px（用户 2026-10-23 要求）=====
     后台「公告高度」是 50，手机上只留 40（正好等于源站 .announcement-row-container 的 40）。
     ★ 值只在这一处定义：--noticeheight 同时被「公告条自身高度 / 导航让位 / 正文让位」三处读，
       分开写必然有一天只改了一处，于是条子矮了但导航还停在 50，中间裂出一条缝。
     ★ 必须 html:root（0,1,1）才压得过模板头部那段内联的 :root（0,1,0，写在本文之后）。
     ★ max(32px, …)：后台把高度调到 30 时手机端不至于缩成一条线。 */
  html:root {
    --noticeheight: max(32px, calc(var(--notice-h, 50px) - 10px));
  }

  .site-notice {
    height: var(--noticeheight);
  }

  /* ===== 手机端版式：1:1 照源站 .announcement-row-container（2026-10-23 改）=====
     源站的 DOM 是四段 + 两个固定件：
       [padding 12] 标签(76×22) [margin 20] 文字窗口(flex:1) 箭头块(20) [12] ×(16) [padding 12]
     箭头**不在文字窗口里** —— 源站源码里就是一个并列的 <div class="cutOneSHairjyy">，
     注释写着「固定箭头」。所以标题无论多长多短，箭头的 x 都不会动。
     391 宽实测：12 + 76 + 20 + 223 + 20 + 12 + 16 + 12 = 391。

     ★ 本站对应：右侧内边距 60 = 箭头块 20 + 与× 的 12 + × 16 + 右边距 12。
       文字窗口右边缘就停在 屏宽-60，箭头块钉在 屏宽-60 → 屏宽-40，
       关闭按钮 right:12 宽 16 → 屏宽-28 → 屏宽-12。三个值都只跟屏宽有关。 */
  .site-notice__inner {
    padding: 0 60px 0 12px;
  }

  /* 手机上「居中」也改成靠左：窄屏里居中会让标签离左边太远，源站也是贴左 */
  .site-notice__inner.is-center {
    justify-content: flex-start;
  }

  .site-notice__label {
    margin-right: 20px;
  }

  /* 手机上不要「查看详情」这四个字，只留箭头：
     标题区本来就不宽，再挂「查看详情」会挤成三四个字。 */
  .site-notice__more {
    display: none;
  }

  /* 文字窗口吃满「标签 → 箭头块」之间 */
  .site-notice__track {
    flex: 1 1 auto;
    min-width: 0;
  }

  .site-notice__item {
    flex: 1 1 auto;
    width: 100%;
    max-width: none;   /* 取消 60vw 的「跟着文字走」 */
    padding-right: 0;  /* 箭头已经挪出去了，这里不再留白 */
  }

  .site-notice__text {
    flex: 1 1 auto;
  }

  /* 关掉条目自带的 ::after（那是电脑端跟着「查看详情」走的那个），换独立箭头 */
  .site-notice__item::after {
    display: none;
  }

  /* 固定箭头：和关闭按钮一样相对 .site-notice（整条、全屏宽）定位，
     所以 right 就是「离屏幕右边的距离」，跟公告内容完全无关。
     20 宽的块 = 源站 .cutOneSHairjyy；折角画在 left:3 / 垂直居中，
     旋转 -45° 后墨迹落在块内 331.1~343.9（391 宽时），与源站逐像素一致。 */
  .site-notice__arrow {
    display: block;
    position: absolute;
    right: 40px;
    top: 0;
    bottom: 0;
    width: 20px;
    pointer-events: none;
  }

  .site-notice__arrow::after {
    content: "";
    position: absolute;
    left: 3px;
    top: calc(50% - 3.5px);
    width: 5px;
    height: 5px;
    /* 源站是 content-box（总 7×7），本主题全局 border-box，不写会小一圈 */
    box-sizing: content-box;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(-45deg);
  }

  /* 源站手机上关闭按钮只有 16×16（img height:16），比电脑端小一圈 */
  .site-notice__close {
    right: 12px;
    width: 16px;
    height: 16px;
  }
}

/* ---------- 吸顶元素：贴的是「导航当前的下沿」----------
   吸顶条真正吸住时页面早就滚过公告条了（--navoffset 已经是 0），
   所以这里跟导航一样读 --navoffset 而不是 --noticeheight；
   读 --noticeheight 会让它停在 112，和导航底边差出 50px 的一条空白。
   权重比原规则各多一个 body:has(...)，覆盖 activities / bt / plan 三处。 */
body:has(.site-notice) .cloud-tabs_bg,
body:has(.site-notice) .et-container.container_bg1,
body:has(.site-notice) .p-anchor {
  top: calc(var(--navheight, 62px) + var(--navoffset, 0px));
}

/* 锚点跳转的落点补偿同理（scroll-margin-top 决定滚到锚点时顶上留多少） */
body:has(.site-notice) .bt-section {
  scroll-margin-top: calc(var(--navheight, 62px) + var(--navoffset, 0px) + var(--bt-tabbar-h, 74px) + 8px);
}

body:has(.site-notice) .plan-anchor-section {
  scroll-margin-top: calc(var(--navheight, 62px) + var(--navoffset, 0px) + var(--plan-anchor-h, 56px) + 12px);
}