/* ===== cards.css —— 悬浮屏卡片、HUD 准星、激光扫描、悬停锁定 ===== */

.screen-link {
  position: absolute;
  display: flex;
  justify-content: center;
  align-items: center;
  text-decoration: none;
  cursor: pointer;
  box-sizing: border-box;
  border: 1px solid var(--accent-soft);
  background-color: rgba(0, 30, 80, 0.15);
  box-shadow: inset 0 0 15px var(--accent-faint);
  transition: all 0.3s var(--ease-smooth);
  z-index: 2; /* 位于门户背景层(0)与 HUD 网格(1) 之上 */
}

/* 核心特效 1：闲置时的 HUD 四角准星（外扩状态） */
.screen-link::before {
  content: '';
  position: absolute;
  top: -2px; left: -2px; right: -2px; bottom: -2px;
  background:
    linear-gradient(to right, var(--accent) 2px, transparent 2px) 0 0,
    linear-gradient(to bottom, var(--accent) 2px, transparent 2px) 0 0,
    linear-gradient(to left, var(--accent) 2px, transparent 2px) 100% 0,
    linear-gradient(to bottom, var(--accent) 2px, transparent 2px) 100% 0,
    linear-gradient(to right, var(--accent) 2px, transparent 2px) 0 100%,
    linear-gradient(to top, var(--accent) 2px, transparent 2px) 0 100%,
    linear-gradient(to left, var(--accent) 2px, transparent 2px) 100% 100%,
    linear-gradient(to top, var(--accent) 2px, transparent 2px) 100% 100%;
  background-repeat: no-repeat;
  background-size: 12px 12px;
  opacity: 0.6;
  transition: all 0.4s var(--ease-spring);
  z-index: 10;
  pointer-events: none;
}

/* 全息扫描线背景（悬停时显现） */
.screen-link::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(rgba(0, 40, 100, 0.7), rgba(0, 40, 100, 0.7)),
    repeating-linear-gradient(0deg, transparent, transparent 2px, rgba(0, 243, 255, 0.2) 2px, rgba(0, 243, 255, 0.2) 4px);
  opacity: 0;
  transition: opacity 0.3s ease;
  backdrop-filter: blur(3px);
  z-index: 1;
  pointer-events: none;
}

/* 内部文字排版容器 */
.ui-content {
  position: absolute;
  inset: 0;
  z-index: 20;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  overflow: hidden;
}

/* 核心特效 2：闲置时的高亮激光扫描线 */
.ui-content::before {
  content: '';
  position: absolute;
  left: 0; right: 0;
  top: 0;
  height: 4px;
  background: rgba(0, 243, 255, 1);
  box-shadow: 0 0 15px 3px rgba(0, 243, 255, 0.8), 0 10px 20px rgba(0, 243, 255, 0.4);
  animation: radarSweep 3.5s infinite var(--ease-smooth);
  z-index: -1;
  pointer-events: none;
}

@keyframes radarSweep {
  0%   { transform: translateY(-50px); opacity: 0; }
  10%  { opacity: 1; }
  80%  { transform: translateY(250px); opacity: 1; }
  90%  { transform: translateY(280px); opacity: 0; }
  100% { transform: translateY(280px); opacity: 0; }
}

/* 悬停 / 自动讲解点开时的"机械锁定"动作 */
.screen-link:hover,
.screen-link.is-auto-open {
  border-color: rgba(0, 243, 255, 0.8);
  background-color: transparent;
  box-shadow: 0 0 25px rgba(0, 243, 255, 0.4), inset 0 0 20px rgba(0, 243, 255, 0.2);
}
.screen-link:hover::before,
.screen-link.is-auto-open::before {
  top: 8px; left: 8px; right: 8px; bottom: 8px;
  background-size: 25px 25px;
  opacity: 1;
  filter: drop-shadow(0 0 5px var(--accent));
}
.screen-link:hover::after,
.screen-link.is-auto-open::after { opacity: 1; }
.screen-link:hover .ui-content::before,
.screen-link.is-auto-open .ui-content::before { display: none; }

/* 装饰性小字（系统代号/状态） */
.ui-subtext {
  color: var(--accent);
  font-size: 0.7vw;
  letter-spacing: 4px;
  margin-bottom: 5px;
  opacity: 0;
  transform: translateY(-15px);
  transition: all 0.4s var(--ease-smooth);
}

/* 主平台名称：常驻显示，悬停时仅拉开字距 */
.site-name {
  color: var(--text);
  font-size: 1.6vw;
  font-weight: 800;
  letter-spacing: 2px;
  line-height: 1.3;
  text-shadow: 0 0 10px rgba(0, 243, 255, 0.8);
  transition: letter-spacing 0.4s var(--ease-smooth);
}

.screen-link:hover .ui-subtext,
.screen-link.is-auto-open .ui-subtext {
  opacity: 0.8;
  transform: translateY(0);
  transition-delay: 0.1s;
}
.screen-link:hover .site-name,
.screen-link.is-auto-open .site-name { letter-spacing: 4px; }

/* ===== 屏幕位置与透视（数据与样式解耦：位置由配置 position 字段映射） ===== */
.screen-far-left {
  top: 18.0%; left: 12.1%; width: 11%; height: 18%;
  transform: perspective(800px) rotateY(18deg);
}
.screen-far-left:hover, .screen-far-left.is-auto-open { transform: perspective(800px) rotateY(18deg) scale(1.02); }

.screen-left {
  top: 26.5%; left: 27.8%; width: 8.5%; height: 15.5%;
  transform: perspective(800px) rotateY(15deg);
}
.screen-left:hover, .screen-left.is-auto-open { transform: perspective(800px) rotateY(15deg) scale(1.02); }

.screen-center {
  top: 25.5%; left: 39.5%; width: 21%; height: 23%;
}
.screen-center::before { background-size: 15px 15px; }
.screen-center:hover::before, .screen-center.is-auto-open::before { background-size: 35px 35px; }
.screen-center:hover, .screen-center.is-auto-open { transform: scale(1.02); }

.screen-right {
  top: 26.5%; left: 65%; width: 8.5%; height: 15.5%;
  transform: perspective(800px) rotateY(-15deg);
}
.screen-right:hover, .screen-right.is-auto-open { transform: perspective(800px) rotateY(-15deg) scale(1.02); }

.screen-far-right {
  top: 18.1%; left: 77.5%; width: 11%; height: 18%;
  transform: perspective(800px) rotateY(-18deg);
}
.screen-far-right:hover, .screen-far-right.is-auto-open { transform: perspective(800px) rotateY(-18deg) scale(1.02); }

/* 加载失败/跨域提示（在卡片上覆盖） */
.screen-link.is-error .ui-content::after {
  content: '子系统暂不可达';
  position: absolute;
  color: var(--text-dim);
  font-size: 0.8vw;
}

/* ===== 后台「模块页面自定义」注入的视觉层 ===== */
/* 背景图 / 背景视频：位于内容之下、卡片描边之上，不拦截点击 */
.card-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  pointer-events: none;
  border-radius: inherit;
}
.card-bg-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/* 模块 LOGO：左上角徽标 */
.card-logo {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 25;
  width: 36px;
  height: 36px;
  pointer-events: none;
}
.card-logo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: 6px;
  filter: drop-shadow(0 0 4px rgba(0, 243, 255, 0.6));
}

/* 布局模板变体（后台可切换） */
.screen-link.layout-compact .site-name { font-size: 1.1vw; }
.screen-link.layout-compact .ui-subtext { letter-spacing: 2px; }
.screen-link.layout-minimal::after { display: none; }
.screen-link.layout-minimal .ui-content::before { display: none; }
.screen-link.layout-emphasis .site-name {
  font-size: 2vw;
  text-shadow: 0 0 18px rgba(0, 243, 255, 1);
}
.screen-link.layout-emphasis { box-shadow: 0 0 30px rgba(0, 243, 255, 0.35), inset 0 0 22px rgba(0, 243, 255, 0.25); }