/* =========================================================
   斑馬網絡 | BANMABANMA  ——  参考鹰角网络官网的"桌面式"首页
   深色底 + 可拖拽卡片 + 可拼合图片碎片
   ========================================================= */

:root {
  --bg: #2b2b2b;
  --card: rgba(0, 0, 0, 0.88);
  --bar: rgba(51, 51, 51, 0.88);
  --accent: #f3ff00;          /* 强调黄 */
  --grid-icon: #d2ff00;       /* 九宫格图标黄 */
  --text: #ffffff;
  --muted: rgba(255, 255, 255, 0.62);
  --shadow: 0 0 15px #000;
  --piece: 80px;              /* 拼图单块尺寸 */
  --fs: "SourceHanSans-Regular", "Source Han Sans SC", "Noto Sans SC",
        "Noto Sans CJK SC", "PingFang SC", "Microsoft YaHei", system-ui, sans-serif;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  overflow: hidden;
}

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--fs);
  font-size: 1rem;
  -webkit-font-smoothing: antialiased;
  user-select: none;
}

a { color: inherit; text-decoration: none; }

/* ===================== 背景 ===================== */
/* 深灰底，正中央放置 logo */

/* 背景正中的 logo（居中、置底层） */
.bg-logo {
  position: fixed;
  inset: 0;
  z-index: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}

.bg-logo img {
  /* banmali-cutout.png 已抠掉方形底色，为透明底素材，
     可任意换背景色而不会出现方框；若换回不透明方图需改用遮罩羽化或降低 opacity */
  /* 放大尺寸：240~460px → 320~620px */
  width: clamp(320px, 46vmin, 620px);
  height: auto;
  /* 整体亮度压低一档，避免结晶亮面过于抢眼 */
  filter: brightness(0.85);
  opacity: 0.9;
}

/* ===================== 顶栏 ===================== */
.topbar {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 72px;
  z-index: 600;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 32px;
  background: var(--bar);
  box-shadow: var(--shadow);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.logo { display: flex; align-items: center; gap: 3px; height: 100%; }

.logo-icon {
  height: 42px;
  width: auto;
  /* 素材为深色图标，反白以适配深色顶栏 */
  filter: brightness(0) invert(1);
}

.logo-text { display: flex; flex-direction: column; justify-content: center; }

.logo-cn {
  font-size: 1.35rem;
  font-weight: 700;
  letter-spacing: 2px;
  line-height: 1.1;
  /* 中文斜体：字体无真斜体时浏览器会合成倾斜 */
  font-style: italic;
}

.logo-en {
  font-size: 0.62rem;
  /* 收紧字距 */
  letter-spacing: 0.8px;
  /* 以「斑馬網絡」的行宽为基准水平居中 */
  text-align: center;
  color: var(--muted);
  margin-top: 2px;
}

/* 顶栏右侧：回到旧版按钮（颜色与窗口标题一致，无边框） */
.back-old {
  display: inline-flex;
  align-items: center;
  height: 34px;
  padding: 0 16px;
  color: var(--text);
  font-size: 0.85rem;
  letter-spacing: 1px;
  text-decoration: none;
  white-space: nowrap;
  transition: color 0.2s ease;
}

.back-old:hover {
  color: var(--grid-icon);
}

/* ===================== 桌面容器 ===================== */
.desktop {
  position: fixed;
  inset: 0;
  z-index: 3;
  pointer-events: none;   /* 空白区域可穿透 */
}

.window,
.icons,
.puzzle,
.footer { pointer-events: auto; }

/* ===================== 通用窗口卡片 ===================== */
.window {
  position: absolute;
  background: var(--card);
  color: var(--text);
  border: 1px solid rgba(255, 255, 255, 0.09);
  box-shadow: var(--shadow);
  opacity: 0;
  animation: card-in 0.5s ease forwards;
}

.window:nth-of-type(1) { animation-delay: 0.05s; }
.window:nth-of-type(2) { animation-delay: 0.15s; }
.window:nth-of-type(3) { animation-delay: 0.25s; }

@keyframes card-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

.win-title {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 15px;
  position: relative;
}

.win-handle { cursor: move; }

.win-title h3 {
  margin: 0;
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 1px;
  display: flex;
  align-items: baseline;
  gap: 8px;
}

.win-title h3 em {
  font-style: normal;
  font-size: 0.75em;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 700;
}

/* 标题栏：黄色下划线变体（下划线长度与标题文字一致，左对齐） */
.win-title.underline h3 { position: relative; }

.win-title.underline h3::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -8px;
  width: 100%;
  height: 1px;
  background: var(--accent);
}

/* 标题栏右上角九宫格图标 */
.grid-icon {
  position: absolute;
  right: 15px;
  top: 50%;
  transform: translateY(-50%);
}

.win-body { padding: 4px 15px 16px; font-size: 0.85rem; line-height: 1.7; }
.win-body p { margin: 0 0 6px; }

/* ===================== 图二：关于我们 ===================== */
.about-lead { font-size: 1.02rem; font-weight: 700; letter-spacing: 1px; }
.about-slogan { color: var(--muted); letter-spacing: 1px; }

/* ===================== 图四：联系我们 ===================== */
.weibo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin-top: 8px;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.2);
  transition: background 0.2s ease, transform 0.2s ease;
}

.weibo:hover { background: var(--accent); transform: translateY(-2px); }
.weibo:hover svg path { fill: #000; }

/* ===================== 右侧：作品轮播 ===================== */
/* 图片铺满卡片左右与底部：移除内边距，顶边紧贴标题栏不变 */
#win-works .win-body { padding: 0; }

.slider { position: relative; overflow: hidden; }

.slides { display: flex; transition: transform 0.5s ease; }

.slide {
  flex: 0 0 100%;
  aspect-ratio: 2 / 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  overflow: hidden;
  background: #111;
}

/* 业务线 banner 图片：铺满整格，超出部分居中裁切 */
.slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.slide-tag { font-size: 0.8rem; letter-spacing: 2px; color: var(--accent); }
.slide-txt { font-size: 0.75rem; color: var(--muted); letter-spacing: 4px; }

.arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  border: 0;
  background: transparent;
  color: #fff;
  font-size: 60px;
  line-height: 1;
  padding: 0 6px;
  cursor: pointer;
  text-shadow: 0 0 15px #000;
  transition: all 0.5s ease;
  z-index: 2;
}

.arrow.left { left: 4px; }
.arrow.right { right: 4px; }
.arrow:hover { text-shadow: 0 0 18px #fff; }

/* ===================== 九个图标 ===================== */
/* 包裹层不生成盒子：九个方块直接相对 .desktop 定位，可各自独立拖动 */
.icons { display: contents; }

.icon-tile {
  position: absolute;
  width: 126px;
  height: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.72);
  box-shadow: var(--shadow);
  border: 1px solid rgba(255, 255, 255, 0.08);
  cursor: move;
  touch-action: none;
  opacity: 0;
  animation: tile-in 0.4s ease forwards;
  transition: transform 0.25s ease, background 0.25s ease, border-color 0.25s ease;
}

@keyframes tile-in { from { opacity: 0; } to { opacity: 1; } }

.icon-tile svg { width: 38%; height: 38%; fill: #fff; transition: fill 0.25s ease; }

.icon-tile:hover {
  transform: translateY(-4px);
  border-color: var(--accent);
  background: rgba(0, 0, 0, 0.9);
}
.icon-tile:hover svg { fill: var(--accent); }

/* 拖动中取消悬停位移，避免抖动 */
.icon-tile.dragging { transform: none; transition: none; }

/* ===================== 图五：可拼合图片碎片 ===================== */
.puzzle {
  position: absolute;
  left: 30px;
  bottom: 96px;
  width: 460px;
  /* 纵向布局：碎片行(2×piece) + 间距 + 提示 + 间距 + 目标框(2×piece) */
  height: calc(var(--piece) * 4 + 56px);
}

/* 拼合目标虚线引导 */
.puzzle-target {
  position: absolute;
  left: 0;
  bottom: 0;
  width: calc(var(--piece) * 2);
  height: calc(var(--piece) * 2);
  border: 1px dashed rgba(255, 255, 255, 0.28);
  overflow: hidden;
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

/* 拼合完成后在目标框内淡入的完整图片（zhaoxi.png） */
.puzzle-done {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 0.5s ease;
}

.puzzle.complete .puzzle-target { border-color: transparent; }
.puzzle.complete .puzzle-done { opacity: 1; }

/* 单块碎片：脚本随机生成的形状（若干网格格子拼成，非等分方块）。
   底色（--card，与卡片同色）只铺在碎片实际形状（各格子）内：
   banmaquanshen.png 为透明底抠图，透明处透出底色；包围盒内「被分隔」的空白处不加底色 */
.piece {
  position: absolute;
  filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.55));
  cursor: move;
  touch-action: none;
  opacity: 0;
  animation: tile-in 0.4s ease forwards;
}

/* 碎片内的单个格子：各自裁出 banmaquanshen.png 的对应区域，并垫上同色底色 */
.piece .cell {
  position: absolute;
  background-color: var(--card);
  background-repeat: no-repeat;
}

.piece.dragging { filter: drop-shadow(0 8px 22px rgba(0, 0, 0, 0.9)); z-index: 9999; }

/* 拼合完成后碎片淡出（取消入场动画，否则 opacity 会被动画锁定），目标框内展示完整的 zhaoxi.png */
.puzzle.complete .piece {
  animation: none;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.45s ease;
}

.puzzle-hint {
  position: absolute;
  left: 0;
  bottom: calc(var(--piece) * 2 + 12px);
  margin: 0;
  font-size: 0.72rem;
  letter-spacing: 1px;
  color: var(--muted);
  white-space: nowrap;
}

/* 切换按钮（圆形图标）：默认隐藏且不接收指针事件（未拼合时点击所在位置无任何作用）；
   仅当拼合完成（.puzzle.complete）时淡入并可点击。
   位置：拼合框（原虚线正方形）内侧的右下角，贴右边与下边 */
.puzzle-switch {
  position: absolute;
  left: calc(var(--piece) * 2 - 36px); /* 贴右：30 直径 + 6 内边距 */
  bottom: 6px;                          /* 贴底 */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  padding: 0;
  color: var(--text);
  background: var(--card);
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 50%;
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease, color 0.2s ease, border-color 0.2s ease,
              background 0.2s ease, transform 0.3s ease;
}

/* 图标（双箭头圆形刷新） */
.puzzle-switch svg { width: 62%; height: 62%; display: block; }

.puzzle.complete .puzzle-switch {
  opacity: 1;
  pointer-events: auto;
}

.puzzle-switch:hover {
  color: var(--accent);
  border-color: var(--accent);
  background: rgba(0, 0, 0, 0.92);
  transform: rotate(180deg);
}

/* ===================== 页脚 ===================== */
.footer {
  position: absolute;
  left: 34px;
  bottom: 24px;
  font-size: 0.72rem;
  line-height: 1.6;
  color: var(--muted);
  opacity: 0.85;
}
.footer p { margin: 0; }
.footer .c { display: flex; align-items: center; gap: 6px; }
.footer img { vertical-align: middle; }
.footer a:hover { color: var(--accent); }

/* ===================== 拖拽中通用态 ===================== */
.window.dragging,
.icons.dragging { opacity: 0.92; }
.window.dragging { border-color: rgba(243, 255, 0, 0.55); }

/* ===================== 响应式：窄屏降级为静态堆叠 ===================== */
@media (max-width: 960px) {
  html, body { overflow: auto; }

  .desktop {
    position: static;
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 88px 16px 24px;
    pointer-events: auto;
  }

  .window,
  .icons {
    position: static !important;
    width: 100% !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
  }

  .icons {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
  }

  .icon-tile {
    position: static;
    width: auto;
    height: 88px;
    opacity: 1;
    animation: none;
  }

  /* 拼图在窄屏隐藏 */
  .puzzle { display: none; }

  .bg-logo img { width: min(86vw, 460px); }

  .footer { position: static; padding: 8px 0 0; }
}