/* ============================================================================
 * ReactBits 效果移植 —— 卡片科技感增强
 * 来源：ReactBits GlareHover / StarBorder（已由 React 改写为原生 DOM+CSS）
 * 依赖：无（不需要 React / npm / 任何 CDN）
 * 挂载：本文件只提供「样式」，由 reactbits-effects.js 自动注入 DOM 节点
 * 撤回：删除本文件 + 移除 layout.php 中的两行引用即可（见 07 文档）
 * ==========================================================================*/

/* ---- ① 卡片：鼠标跟随眩光（GlareHover 移植）--------------------------------
   在原卡片（.index-products-V2 ul li）上叠加一层跟随指针的高光，
   不改变克隆版式：节点由 JS 追加，pointer-events:none 不拦截点击。 */
.index-products-V2 ul li {
  position: relative;
  isolation: isolate;            /* 让 mix-blend-mode 只在卡片内部混合 */
}
.index-products-V2 ul li > .rb-glare {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  opacity: 0;
  transition: opacity .38s ease;
  mix-blend-mode: screen;
  z-index: 3;
  background:
    radial-gradient(210px circle at var(--rb-x, 50%) var(--rb-y, 50%),
      rgba(255, 255, 255, .34) 0%,
      rgba(140, 200, 255, .16) 42%,
      transparent 72%);
}
.index-products-V2 ul li:hover > .rb-glare { opacity: 1; }

/* ---- ② 卡片：边框流光（StarBorder 思路，纯 CSS 动画）--------------------- */
.index-products-V2 ul li > .rb-starborder {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  z-index: 4;
  opacity: 0;
  transition: opacity .38s ease;
  background: transparent;
}
.index-products-V2 ul li > .rb-starborder::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1.5px;
  background: linear-gradient(135deg,
      rgba(255, 255, 255, .0) 0%,
      rgba(255, 255, 255, .95) 18%,
      rgba(120, 195, 255, .85) 32%,
      rgba(255, 255, 255, .0) 50%,
      rgba(255, 255, 255, .8) 68%,
      rgba(120, 195, 255, .7) 82%,
      rgba(255, 255, 255, 0) 100%);
  background-size: 260% 260%;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask-composite: exclude;
  animation: rb-border-flow 2.6s linear infinite;
}
.index-products-V2 ul li:hover > .rb-starborder { opacity: 1; }

@keyframes rb-border-flow {
  0%   { background-position:   0%   0%; }
  100% { background-position: 260% 260%; }
}

/* ---- 无障碍：偏好减少动效时全部关闭（跟随系统设置）------------------------ */
@media (prefers-reduced-motion: reduce) {
  .index-products-V2 ul li > .rb-glare,
  .index-products-V2 ul li > .rb-starborder { display: none !important; }
}

/* ---- 触屏设备：没有 hover，关闭眩光（避免残留高光）------------------------ */
@media (hover: none) {
  .index-products-V2 ul li > .rb-glare,
  .index-products-V2 ul li > .rb-starborder { display: none !important; }
}

/* ---- ③ 动态极光背景（ReactBits Aurora 移植）-----------------------------
   适用：<body class="rb-aurora-page"> 的「独立版式」注册页
         （如 /263/mailbox —— 由 pages.template = 'bare,aurora' 打标）。

   把页面原本那张静态 JPG 大图（reg-ad-mail2023.jpg）换成动态极光。
   分两层，职责不重叠：
     · 底色  —— 这里的 CSS 线性渐变（蓝色系），渐变由深到浅，无需 JS
     · 极光  —— 由 reactbits-effects.js 运行时插入 <canvas> 用 WebGL 画

   渐进增强：JS 被禁用 / 不支持 WebGL / 系统开了「减少动效」时，
   canvas 不会出现，只剩这层静态蓝底 —— 页面照样完整可用，不会白屏。
   （所以【不要】把极光做成背景图，那样降级时就没有背景了。） */

body.rb-aurora-page {
  /* 蓝色系底色，取站点主色 #1677ff 的浅色展开，保证左侧深色正文仍可读 */
  background: linear-gradient(160deg, #f4f9ff 0%, #dceafe 46%, #c2dcff 100%);
}

body.rb-aurora-page .rb-aurora-canvas {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  z-index: 0;
  pointer-events: none;   /* 纯装饰，绝不拦截表单的点击 */

  /* canvas 由 defer 脚本在页面加载后插入，直接出现会「跳」一下；
     淡入让「静态蓝底 -> 极光」的过渡自然。--rb-aurora-op 见下方移动端覆盖。

     ⚠️ 2026-10-13：由 1 降到 .6。原值下极光把整屏压得太深 —— 实测左上标题区
     背景 rgb(66,103,167)（亮度 .136）、右上电话区 rgb(64,89,141)（亮度 .102），
     深色文字与它的对比度只有 1.82:1 ~ 2.24:1，远低于 WCAG AA 的 4.5:1，
     正文「安全 高效 稳定」「售前/售后 400-…」肉眼发糊。
     取值是反推出来的：按合成式 final = op*canvas + (1-op)*底色 解出的那一片深色，
     op=.7 时对比度 4.06:1（仍差一点），op=.6 时可过 4.5:1。 */
  --rb-aurora-op: .6;
  opacity: 0;
  animation: rb-aurora-in 1.4s ease-out .1s forwards;
}

@keyframes rb-aurora-in {
  from { opacity: 0; }
  to   { opacity: var(--rb-aurora-op, 1); }
}

/* 移动端：视口又窄又长，色带被压成竖条，顶部会显得偏浓 —— 再降一档透明度，
   让它回到「柔和底纹」的观感，不与白色表单卡片抢戏。
   桌面已是 .6，这里跟到 .5（原为 1 / .7，同等幅度降了两档）。 */
@media (max-width: 768px) {
  body.rb-aurora-page .rb-aurora-canvas { --rb-aurora-op: .5; }
}

/* 盖掉页面自带的那张静态 JPG（含移动端 media query 里的那张），让极光露出来；
   同时把整块内容抬到 canvas 之上 —— canvas 是 z-index:0，这里是 1。 */
body.rb-aurora-page .main-warp {
  background-image: none !important;
  position: relative;
  z-index: 1;
}

/* 极光是纯装饰动效：系统开了「减少动效」时，JS 不插入 canvas，
   这里顺手把底色的过渡也去掉，保持完全静止。 */
@media (prefers-reduced-motion: reduce) {
  body.rb-aurora-page {
    background: linear-gradient(160deg, #f4f9ff 0%, #dceafe 46%, #c2dcff 100%);
  }
}