/* 产品化第 5 步“灵动与设计感”的动效层（令牌 v2.3）：跨页过渡、内容到达时渐显、页签滑动指示条、悬停与按下反馈、
   弹窗 / 抽屉 / 菜单 / 提示的进出场、监测中的状态点脉动、标识声波一次“扫描”、情报速递每日柱的生长。
   开关：除跨页过渡外，全部规则都挂在 :root[data-ss-motion] 之下，由 motion.js 在可以动的时候打开；
   系统要求减弱动效、或页面由自动化测试驱动（navigator.webdriver）时 motion.js 不打开，页面与改动前完全一致，
   版面检查与截图不受过渡中间状态影响；动效本身由 motion-browser.cjs 单独检查。
   规则：只引用令牌颜色与时长；不写内联样式（页签指示条的位置由 motion.js 写进本文件末尾插入的规则）；打印不受影响。
   在全部页面样式之后加载，只叠加动效与悬停，不改版面与颜色。 */

/* ── 关键帧（以 ssm- 开头，避免与 result-first.css 的 ss-shimmer 等同名） ─────── */
@keyframes ssm-rise{from{opacity:0;transform:translateY(var(--ss-rise))}to{opacity:1;transform:none}}
@keyframes ssm-fade{from{opacity:0}to{opacity:1}}
@keyframes ssm-fade-out{from{opacity:1}to{opacity:0}}
@keyframes ssm-drop{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
@keyframes ssm-slide{from{opacity:0;transform:translateX(24px)}to{opacity:1;transform:none}}
@keyframes ssm-grow{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes ssm-wave{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
@keyframes ssm-pulse{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--ss-accent) 55%,transparent)}70%,100%{box-shadow:0 0 0 7px color-mix(in srgb,var(--ss-accent) 0%,transparent)}}
@keyframes ssm-bar{from{transform:scaleY(0)}to{transform:scaleY(1)}}
@keyframes ssm-flash{0%,40%{background-color:var(--ss-highlight)}100%{background-color:transparent}}

@media (prefers-reduced-motion:no-preference){
  /* ── 跨页过渡：同源链接跳转时顶栏保持不动，页面区旧内容快速淡出、新内容淡入并上移 6px。
        自动化测试下 motion.js 在 pageswap 时跳过过渡（见文件头）。 ─────── */
  @view-transition{navigation:auto}
  :root[data-ss-motion] .topbar{view-transition-name:ss-topbar}
  :root[data-ss-motion] #workspace{view-transition-name:ss-main}
  ::view-transition-group(ss-main){animation-duration:0s}
  ::view-transition-old(ss-main){animation:ssm-fade-out var(--ss-dur-1) var(--ss-ease-out) both}
  ::view-transition-new(ss-main){animation:ssm-rise var(--ss-dur-3) var(--ss-ease-out) both}
  ::view-transition-old(root),::view-transition-new(root){animation-duration:var(--ss-dur-2)}

  /* ── 内容到达时渐显：motion.js 给首屏的各块（按顺序 0–5 错开 40ms）、替换骨架条的内容、切换页签后的内容区子节点
        加 data-ss-enter，动画结束即移除 ─────── */
  :root[data-ss-motion] [data-ss-enter]{animation:ssm-rise var(--ss-dur-3) var(--ss-ease-out) both}
  :root[data-ss-motion] [data-ss-enter="soft"]{animation:ssm-fade var(--ss-dur-2) var(--ss-ease-out) both}
  :root[data-ss-motion] [data-ss-enter="1"]{animation-delay:40ms}
  :root[data-ss-motion] [data-ss-enter="2"]{animation-delay:80ms}
  :root[data-ss-motion] [data-ss-enter="3"]{animation-delay:120ms}
  :root[data-ss-motion] [data-ss-enter="4"]{animation-delay:160ms}
  :root[data-ss-motion] [data-ss-enter="5"]{animation-delay:200ms}

  /* ── 主导航：当前项的下划线每次进入页面时从中间展开 ─────── */
  :root[data-ss-motion] .mainnav a[aria-current=page]::after{transform-origin:50% 100%;animation:ssm-grow var(--ss-dur-3) var(--ss-ease-out) 60ms both}
  :root[data-ss-motion] .mainnav a{transition:color var(--ss-dur-1) var(--ss-ease-out)}

  /* ── 标识：同一标签页第一次打开站点时，声波由内圈到外圈画出一遍，像一次声纳扫描；悬停品牌时再扫一次
        （顶栏模板里声波路径带 pathLength="1"，虚线长度按 1 计） ─────── */
  :root[data-ss-motion][data-ss-ping] .topbar .brand-mark .mark-wave,:root[data-ss-motion] .topbar .brand:hover .brand-mark .mark-wave{stroke-dasharray:1;animation:ssm-wave 900ms var(--ss-ease-out) both}

  /* ── 页签滑动指示条：motion.js 给原本用下划线表示选中的页签条（role=tablist 或 .tabs）加 data-ss-ink，
        并把选中页签的位置写进本文件末尾插入的规则（--ss-ink-x / -y / -w / -h）；原下划线改为透明，由指示条在页签之间滑动。
        颜色与原下划线一致：专题页等 .tabs 为声纳青，专题列表为海军蓝。键盘与读屏语义不变。 ─────── */
  :root[data-ss-motion] [data-ss-ink]{position:relative}
  :root[data-ss-motion] [data-ss-ink]>:is(button,a){border-bottom-color:transparent!important}
  :root[data-ss-motion] [data-ss-ink]::after{content:"";position:absolute;top:0;left:0;width:var(--ss-ink-w,0);height:var(--ss-ink-h,2px);background:var(--ss-primary);
    transform:translate(var(--ss-ink-x,0),var(--ss-ink-y,0));transition:transform var(--ss-dur-2) var(--ss-ease-out),width var(--ss-dur-2) var(--ss-ease-out);pointer-events:none}
  :root[data-ss-motion] .topic-register .tabs.topic-tabs[data-ss-ink]::after{background:var(--ss-primary-text)}
  :root[data-ss-motion] [data-ss-ink][data-ss-ink-still]::after{transition:none}

  /* ── 悬停与按下：只在进入悬停时过渡（离开与主题切换立即生效）；按下时按钮下沉 1px。
        用 :where() 把这两条的优先级降为 0，组件自己声明过 transition 或 transform 的（演示、阅读器等）保持原样 ─────── */
  :root[data-ss-motion] :where(button,a,summary):hover{transition:color var(--ss-dur-1) var(--ss-ease-out),background-color var(--ss-dur-1) var(--ss-ease-out),border-color var(--ss-dur-1) var(--ss-ease-out)}
  :root[data-ss-motion] :where(button:not(:disabled,[role=tab])):active{transform:translateY(1px)}

  /* 列表行：悬停时浅底渐入（今日待处理、近期重点、情报速递、专题列表、正式表格） */
  :root[data-ss-motion] :is(.today .todo-list>li,.today .news-row,.today .pick-row,.topic-register .topic-row,table.formal-table tbody tr){transition:background-color var(--ss-dur-2) var(--ss-ease-out)}
  :root[data-ss-motion] :is(.today .todo-list>li,.today .news-row,.today .pick-row,.topic-register .topic-row):hover{background-color:color-mix(in srgb,var(--ss-surface-2) 70%,var(--ss-primary-softer))}
  :root[data-ss-motion] table.formal-table tbody tr:not([aria-current=true]):hover{background-color:var(--ss-surface-2)}
  /* 行尾箭头：悬停时右移 3px */
  :root[data-ss-motion] :where(a,button) .topic-icon-arrow{transition:transform var(--ss-dur-2) var(--ss-ease-out)}
  :root[data-ss-motion] :where(a,button):hover .topic-icon-arrow{transform:translateX(3px)}

  /* ── 状态点：监测中、进行中的小圆点缓慢向外扩散，表示“正在运行”；暂停与其他状态不动 ─────── */
  :root[data-ss-motion] :is(.state-dot.is-active,.today .today-running-key,.today .monitor-state.is-on)::before{animation:ssm-pulse 2.4s var(--ss-ease-out) infinite}

  /* ── 弹窗、抽屉、菜单与提示 ─────── */
  :root[data-ss-motion] dialog[open]:not(.present-view,#evidence-drawer){animation:ssm-rise var(--ss-dur-2) var(--ss-ease-out) both}
  :root[data-ss-motion] dialog[open]:not(.present-view)::backdrop{animation:ssm-fade var(--ss-dur-2) var(--ss-ease-out) both}
  :root[data-ss-motion] #evidence-drawer[open]{animation:ssm-slide var(--ss-dur-3) var(--ss-ease-out) both}
  :root[data-ss-motion] :is(.account-menu:not([hidden]),.action-menu[open]>.action-menu-panel){animation:ssm-drop var(--ss-dur-1) var(--ss-ease-out) both}
  :root[data-ss-motion] #toast:not(.hidden){animation:ssm-rise var(--ss-dur-2) var(--ss-ease-out) both}

  /* ── 情报速递的每日柱：进入时由底向上依次长出；点柱子跳到当天时，那一天的标题闪一下浅青底 ─────── */
  :root[data-ss-motion] .feed-pulse-bar>i{transform-origin:50% 100%;animation:ssm-bar var(--ss-dur-3) var(--ss-ease-out) both}
  :root[data-ss-motion] .feed-pulse-bar:nth-child(4n+2)>i{animation-delay:30ms}
  :root[data-ss-motion] .feed-pulse-bar:nth-child(4n+3)>i{animation-delay:60ms}
  :root[data-ss-motion] .feed-pulse-bar:nth-child(4n+4)>i{animation-delay:90ms}
  :root[data-ss-motion] .feed-pulse-bar>i{transition:background-color var(--ss-dur-1) var(--ss-ease-out)}
  :root[data-ss-motion] .feed-day.is-flash>.feed-day-head{animation:ssm-flash 1.2s var(--ss-ease-out) both}
}

/* 强制配色：指示条用系统文字色（专题列表的范围页签原为 Highlight，保持一致） */
@media (forced-colors:active){
  :root[data-ss-motion] [data-ss-ink]::after{background:CanvasText}
  :root[data-ss-motion] .topic-register .tabs.topic-tabs[data-ss-ink]::after{background:Highlight}
}
@media print{
  [data-ss-ink]::after{display:none}
}