/* ============================================================
 * 04-decor.css — 大屏装饰特效包（纯 CSS，零依赖）
 * 命名约定：所有类名以 fx- 为前缀，避免与主应用样式冲突。
 * 主题色：荧光青 #00e5ff（藏青深色大屏），告警红 #ff3b3b。
 * 集成方式见 04-decor-说明.md
 * ============================================================ */

/* ---------- ① 卡片边框流光（光线沿边框循环） ---------- */

/* 注册可动画的自定义属性（Chrome/Edge 支持；不支持时退化为静态边框，不报错） */
@property --fx-angle {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}

/* 用法：给卡片容器加 fx-border-flow（卡片本身需有圆角时保持原 border-radius） */
.fx-border-flow {
  position: relative;
}

/* 流光层：conic-gradient 只留一段亮弧，用 mask 抠出 1px 边框区域 */
.fx-border-flow::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px; /* 流光线条宽度，需要更粗可改为 2px */
  background: conic-gradient(
    from var(--fx-angle),
    transparent 0%,
    transparent 72%,
    rgba(0, 229, 255, 0.25) 82%,
    #00e5ff 90%,
    rgba(0, 229, 255, 0.25) 96%,
    transparent 100%
  );
  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  mask-composite: exclude;
  animation: fx-border-flow-spin 4s linear infinite;
  pointer-events: none; /* 纯装饰，不挡点击 */
  z-index: 1; /* 盖在卡片边框上，低于卡内弹层即可 */
}

@keyframes fx-border-flow-spin {
  to {
    --fx-angle: 360deg;
  }
}

/* 变速变体：快速 */
.fx-border-flow--fast::before {
  animation-duration: 2s;
}

/* ---------- ② 标题下方扫描线 / divider ---------- */

/* 用法：在标题元素后放一个 <div class="fx-divider"></div> */
.fx-divider {
  position: relative;
  height: 2px;
  width: 100%;
  overflow: hidden;
  background: linear-gradient(
    90deg,
    rgba(0, 229, 255, 0.4),
    rgba(0, 229, 255, 0.08)
  );
}

/* 移动亮段：从左到右循环扫过 */
.fx-divider::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 40%;
  background: linear-gradient(90deg, transparent, #00e5ff, transparent);
  animation: fx-divider-scan 2.4s linear infinite;
  pointer-events: none;
}

@keyframes fx-divider-scan {
  from {
    left: -40%;
  }
  to {
    left: 100%;
  }
}

/* ---------- ④ 告警卡红色呼吸闪烁 ---------- */

/* 用法：给告警卡片加 fx-alert-blink，与原有卡片类共存 */
.fx-alert-blink {
  animation: fx-alert-breathe 1.6s ease-in-out infinite;
}

@keyframes fx-alert-breathe {
  0%,
  100% {
    border-color: rgba(255, 59, 59, 0.35);
    box-shadow: 0 0 0 0 rgba(255, 59, 59, 0);
  }
  50% {
    border-color: rgba(255, 59, 59, 0.95);
    box-shadow: 0 0 18px 2px rgba(255, 59, 59, 0.45);
  }
}

/* 加强版：边框 + 文字同步呼吸（给告警数值/标签用） */
.fx-alert-blink--strong {
  animation:
    fx-alert-breathe 1.2s ease-in-out infinite,
    fx-alert-text-breathe 1.2s ease-in-out infinite;
}

@keyframes fx-alert-text-breathe {
  0%,
  100% {
    color: rgba(255, 59, 59, 0.75);
    text-shadow: none;
  }
  50% {
    color: #ff3b3b;
    text-shadow: 0 0 8px rgba(255, 59, 59, 0.8);
  }
}

/* ---------- 无障碍：系统开启"减少动态"时全部停用 ---------- */
@media (prefers-reduced-motion: reduce) {
  .fx-border-flow::before,
  .fx-divider::after,
  .fx-alert-blink,
  .fx-alert-blink--strong {
    animation: none;
  }
}