/* =====================================================================
   UniStudy 全站动效层（problem 6）
   气质目标：像成熟的高端 SaaS / 医疗科研平台 —— 安静、顺滑、昂贵、完成度高。
   明确不做：霓虹、扫描线、粒子、夸张炫技、影响可读性的抖动。

   三条硬规矩，整份文件都遵守：
     1. 所有规则都关在 `prefers-reduced-motion: no-preference` 里 ——
        系统里选了"减少动态效果"时，这份文件等于不存在；ui-motion.js 同时
        会直接不注册任何监听/不注入类，属于双重保险。
     2. 只动 transform / opacity。不 animate width/height/top/left/background-position，
        所以不会触发布局重排，滚动时也不掉帧。
     3. 全部挂在下 `html.motion-on` 之下：JS 没跑起来（老浏览器 / 脚本被拦 /
        CSP）时，页面与加动效之前完全一致，不会有"内容被 CSS 藏起来"的风险。
   ===================================================================== */
@media (prefers-reduced-motion: no-preference){

  /* ---------- 1) 页面加载层次：分区按顺序浮现 ----------
     JS 给分区打上 [data-motion-rise] 并在进入视口时加 .is-in；
     动画播完 JS 会把标记摘掉——留着的话这条规则的最终帧会一直压住
     transform，卡片 hover 的轻微抬升就永远生效不了。 */
  html.motion-on [data-motion-rise].is-in{
    animation:motion-rise .62s cubic-bezier(.22,.61,.36,1) both;
    animation-delay:var(--motion-delay,0ms);
  }

  /* ---------- 2) 卡片递进出现：错峰、间隔小且收敛 ----------
     由 JS 逐个给新插入的卡片加 .motion-in-card（这样异步渲染出来的
     任务入口卡片也能错峰），animationend 后立刻摘掉，不留副作用。 */
  html.motion-on .motion-in-card{
    animation:motion-rise .52s cubic-bezier(.22,.61,.36,1) both;
    animation-delay:var(--motion-delay,0ms);
  }

  /* ---------- 3) hover 微交互：幅度刻意压到 2px 级别 ---------- */
  /* 注意：这里把 home.css 里 .task-row 原有的 padding/background 过渡一起写上，
     因为 transition 不可叠加——只写 transform 会把原来那条顶掉。 */
  html.motion-on .task-row{
    transition:transform .22s cubic-bezier(.22,.61,.36,1),
               box-shadow .22s cubic-bezier(.22,.61,.36,1),
               padding .18s ease,
               background-color .18s ease;
  }
  html.motion-on .task-row:hover{transform:translate3d(0,-2px,0);box-shadow:0 12px 26px rgba(24,64,72,.07)}
  html.motion-on .task-row .task-code{transition:transform .22s cubic-bezier(.22,.61,.36,1)}
  /* 图标微动：只有 1px，够表达"被指到了"，又不会让整行跟着抖 */
  html.motion-on .task-row:hover .task-code{transform:translate3d(0,-1px,0)}

  html.motion-on .glass-card,
  html.motion-on .roadmap-card,
  html.motion-on .legal-section{
    transition:transform .24s cubic-bezier(.22,.61,.36,1),
               box-shadow .24s cubic-bezier(.22,.61,.36,1),
               border-color .24s ease;
  }
  html.motion-on .glass-card:hover,
  html.motion-on .roadmap-card:hover{transform:translate3d(0,-2px,0);box-shadow:var(--shadow-lg);border-color:var(--line-strong)}

  /* ---------- 4) 状态点呼吸：克制到几乎察觉不到，但"活着" ---------- */
  html.motion-on .api-row.ready i,
  html.motion-on .announcement-list i{animation:motion-breathe 3.6s ease-in-out infinite}
  /* 错开相位，三个点不会像节拍器一样整齐同步 */
  html.motion-on .api-row:nth-child(2).ready i{animation-delay:.5s}
  html.motion-on .api-row:nth-child(3).ready i{animation-delay:1s}
  html.motion-on .announcement-list li:nth-child(2) i{animation-delay:.42s}

  /* ---------- 5) 背景环境缓动：极缓慢的光斑漂移 ----------
     用独立的固定层做，不去动 body 的网格背景（那会改成 background-position，
     属于大面积重绘，代价高）。46 秒一个来回，静止看几乎看不出在动。 */
  body.clinical-app::before{
    content:"";position:fixed;inset:-18vh -18vw;z-index:-1;pointer-events:none;
    background:
      radial-gradient(38vw 38vw at 18% 22%,rgba(23,109,136,.10),transparent 70%),
      radial-gradient(42vw 42vw at 82% 68%,rgba(23,127,118,.085),transparent 72%);
    animation:motion-drift 46s ease-in-out infinite alternate;
    will-change:transform;
  }

  /* ---------- 6) 流光：hover 时一道极淡的高光扫过卡片 ---------- */
  html.motion-on .task-board{position:relative}
  html.motion-on .task-board::after{
    content:"";position:absolute;top:0;bottom:0;left:0;width:22%;
    background:linear-gradient(100deg,transparent,rgba(255,255,255,.3),transparent);
    transform:translate3d(-220%,0,0);opacity:0;pointer-events:none;
  }
  html.motion-on .task-board:hover::after{animation:motion-sheen 1.15s cubic-bezier(.22,.61,.36,1) 1}

  /* 主视觉实景图的轻微视差：位移由 ui-motion.js 写在 --hero-parallax 上（rAF 节流）。
     具体 transform 写在 home.css 的 .hero-board::before 里，这里不重复定义。 */
  html.motion-on .announcement-dialog-card{animation:motion-pop .3s cubic-bezier(.22,.61,.36,1) both}
  html.motion-on .announcement-dialog::backdrop{animation:motion-fade .3s ease both}
}

@keyframes motion-rise{from{opacity:0;transform:translate3d(0,14px,0)}to{opacity:1;transform:none}}
@keyframes motion-pop{from{opacity:0;transform:translate3d(0,10px,0) scale(.985)}to{opacity:1;transform:none}}
@keyframes motion-fade{from{opacity:0}to{opacity:1}}
@keyframes motion-breathe{0%,100%{opacity:.7;transform:scale(1)}50%{opacity:1;transform:scale(1.25)}}
@keyframes motion-drift{from{transform:translate3d(-2.2%,-1.6%,0) scale(1)}to{transform:translate3d(2.2%,1.8%,0) scale(1.06)}}
@keyframes motion-sheen{0%{opacity:0;transform:translate3d(-220%,0,0)}22%{opacity:.9}100%{opacity:0;transform:translate3d(560%,0,0)}}