/* 全局样式微调 */
body {
  background-color: #ffffff;
  color: #1a1a1a;
  overflow-x: hidden;
}

.bar-bg {
  background-color: #50cde3;
}

.bar:hover {
  background-color: #50cde3;
}

/* --- 2. 背景特效 (Canvas) --- */
#matrix-bg {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  opacity: 0.5;
  pointer-events: none;
}


/* 玻璃拟态导航 */
.glass-nav {
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

/* 输入框光标动画 */
.cursor-blink {
  animation: blink 1s step-end infinite;
}

@keyframes blink {
  50% {
    opacity: 0;
  }
}

/* Hero模块 */
.hero-container {
  width: 100%;
  padding: 160px 0 80px;
  min-height: 100vh;
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: center;
}

/* 平台轮播 */
.blur-rotator {
  position: relative;
  height: 6rem;
  /* 容器高度 */
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  /* 可选：添加遮罩让进出更柔和 */
  mask-image: linear-gradient(transparent 0%, black 20%, black 80%, transparent 100%);
  -webkit-mask-image: linear-gradient(transparent 0%, black 20%, black 80%, transparent 100%);
}

.rotator-item {
  /* 动画配置 */
  --item-count: 6;
  --visible-duration: 3s;
  /* 每个词停留时间 */
  --total-duration: calc(var(--item-count) * var(--visible-duration));

  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 15px;
  font-size: 3.5rem;
  font-weight: 600;
  white-space: nowrap;

  /* --- 你的核心要求：初始状态 --- */
  filter: blur(20px);
  opacity: 0;
  visibility: hidden;
  transform: translateY(50%);
  /* 从下方进入 */

  /* 动画绑定 */
  animation: blur-cycle var(--total-duration) linear infinite;
}

.brand-icon {
  width: 1em;
  height: 1em;
  display: block;
  border-radius: 6px;
}

/* 计算 Delay：
  Item 1: 0s
  Item 2: 3s
  Item 3: 6s
  Item 4: 9s
  Item 5: 12s */
.rotator-item:nth-child(1) {
  animation-delay: 0s;
}

.rotator-item:nth-child(2) {
  animation-delay: 3s;
}

.rotator-item:nth-child(3) {
  animation-delay: 6s;
}

.rotator-item:nth-child(4) {
  animation-delay: 9s;
}

.rotator-item:nth-child(5) {
  animation-delay: 12s;
}

.rotator-item:nth-child(6) {
  animation-delay: 15s;
}

/* --- 核心动画逻辑 --- */
@keyframes blur-cycle {

  /* 0% - 1.666%: 进入过程 (每个元素周期的5%) */
  0% {
    filter: blur(20px);
    opacity: 0;
    visibility: hidden;
    transform: translateY(50%);
  }

  /* 进入完成 */
  1.666% {
    filter: blur(0px);
    opacity: 1;
    visibility: inherit;
    transform: translateY(0);
  }

  /* 1.666% - 16.666%: 停留展示 (每个元素周期的50%) */
  16.666% {
    filter: blur(0px);
    opacity: 1;
    visibility: inherit;
    transform: translateY(0);
  }

  /* 16.666% - 18.333%: 离开过程 (每个元素周期的5%) */
  18.333% {
    filter: blur(20px);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-50%);
  }

  /* 18.333% - 100%: 全程隐藏，等待下一轮 */
  100% {
    filter: blur(20px);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-50%);
  }
}

/* 模块化 */
.mode-container {
  width: 1280px;
  padding: 80px 0;
  min-height: 100vh;
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: center;
  margin: 0 auto;
}

/* 核心算法模块 */
.algorithm-grid {
  grid-template-columns: 1fr 1.5fr;
}

/* 左侧 */
.formula-wrapper {
  background: #f9f9f9;
  border: 1px solid #eee;
  padding: 20px;
  border-radius: 8px;
  font-family: 'Times New Roman', serif;
  font-style: italic;
  font-size: 1.1rem;
  overflow: hidden;
  position: relative;
  width: 100%;
  height: 215px;
}

.formula-row {
  display: flex;
  flex-direction: column;
}

.formula-content {
  display: flex;
  white-space: nowrap;
  flex-shrink: 0;
  flex-direction: column;
  align-items: stretch;
}

.formula-item {
  font-family: 'Times New Roman', serif;
  font-style: italic;
  font-size: 1rem;
  width: 100%;
  margin-bottom: 20px;
  color: #999999;
}

.formula-item p {
  color: #333333;
}

.scroll-top {
  animation: scrollTop 3s linear infinite;
}

@keyframes scrollTop {
  0% {
    transform: translateY(0);
  }

  100% {
    transform: translateY(-100%);
  }
}

/* 算法table */
.data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.85rem;
  border: 1px solid #eee;
  cursor: pointer;
}

.data-table th,
.data-table td {
  padding: 14px;
  text-align: center;
  border: 1px solid #eee;
}

.data-table th {
  background: #f5f5f5;
  color: #000;
}

.data-table tr:hover td {
  background: #fafafa;
  color: #000;
  font-weight: 600;
}

/* .data-table tbody tr {
  border-left: 3px solid #e5e7eb;
} */

.data-table tbody tr:hover {
  border-left: 3px solid #000 !important;
  background: #fcfcfc;
}

/* === 特效重点：呼吸切换标签 === */
.tag-container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 60px;
  margin: 40px 0 0;
}

.tag-switcher {
  /* font-size: 3rem; */
  /* font-weight: 700; */
  letter-spacing: 2px;
  color: #000;
  /* position: relative; */
}

.tag-switcher::after {
  content: '';
  position: absolute;
  bottom: -5px;
  left: 0;
  width: 100%;
  height: 2px;
  background: #000;
  opacity: 0;
  animation: breathLine 3s infinite;
}

@keyframes breathLine {

  0%,
  100% {
    opacity: 0;
    width: 0%;
    left: 50%;
  }

  50% {
    opacity: 1;
    width: 100%;
    left: 0%;
  }
}

/* 监控系统 */
.dashboard-container {
  width: 100%;
  padding: 80px 0;
  min-height: 100vh;
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: center;
}

.dashboard-box {
  cursor: pointer;
}

.dashboard-box:hover {
  transform: translateY(-6px) !important;
  box-shadow: 0 10px 30px rgba(23, 23, 23, 0.2);
}

/* 监控3D */
.dashboard-section {
  /* padding: 80px 0; */
  perspective: 1000px;
  /* 3D 透视 */
}

.dashboard-window {
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 12px;
  box-shadow: 0 30px 60px rgba(0, 0, 0, 0.1);
  overflow: hidden;
  transition: transform 0.1s ease-out;
  /* 平滑跟随 */
}


/* 独家内容生成Agent */
.phone-card {
  position: relative;
  cursor: pointer;
  overflow: hidden;
  transition: 0.4s;
}

.phone-card:hover {
  transform: translateY(-20px);
  box-shadow: 0 40px 80px rgba(0, 0, 0, 0.15);
}

.phone-card .phone-btn {
  width: 220px;
  position: absolute;
  bottom: 0;
  opacity: 0;
  -webkit-transition: .4s;
  transition: .4s;
  text-align: center;
}

.phone-card:hover .phone-btn {
  bottom: 20px;
  opacity: 1;
}

.phone-card:hover .leading-tight {
  background-color: rgb(17, 24, 39);
  color: rgb(74, 222, 128);
}

/* 媒体墙 */
.media-img {
  width: auto;
  height: 28px;
  cursor: pointer;
}

.media-wrapper {
  mask-image: linear-gradient(to right,
      rgba(0, 0, 0, 0) 0%,
      rgb(0, 0, 0) 20%,
      rgb(0, 0, 0) 80%,
      rgba(0, 0, 0, 0) 100%);
  overflow: hidden;
  position: relative;
  padding: 10px 0;
}

.media-row {
  display: flex;
  margin-bottom: 10px;
}

.media-row:last-child {
  margin-bottom: 0;
}

.media-content {
  display: flex;
  white-space: nowrap;
  flex-shrink: 0;
}

.scroll-media-left {
  animation: scrollLeft 10s linear infinite;
}

.scroll-media-right {
  animation: scrollRight 10s linear infinite;
}


/* 走马灯 */
.marquee-wrapper {
  mask-image: linear-gradient(to right,
      rgba(0, 0, 0, 0) 0%,
      rgb(0, 0, 0) 20%,
      rgb(0, 0, 0) 80%,
      rgba(0, 0, 0, 0) 100%);
  overflow: hidden;
  position: relative;
  padding: 10px 0;
}

.marquee-row {
  display: flex;
  margin-bottom: 10px;
}

.marquee-row:last-child {
  margin-bottom: 0;
}

.marquee-content {
  display: flex;
  white-space: nowrap;
  flex-shrink: 0;
}

.marquee-item {
  display: flex;
  align-items: center;
  background: #ffffff;
  border-radius: 10px;
  overflow: hidden;
  padding: 4px 10px 4px 6px;
  box-shadow: 0 0 rgba(0, 0, 0, 0), 0 0 rgba(0, 0, 0, 0), 0 0 rgba(0, 0, 0, 0),
    0 0 rgba(0, 0, 0, 0), 0px 1px 2px 0px rgba(0, 0, 0, 0.0509803922),
    0px 2px 4px 0px rgba(0, 0, 0, 0.0196078431), 0px 0px 0px 1px #ebebeb;
  margin-right: 16px;
}

.marquee-img {
  width: 24px;
  height: 24px;
  margin-right: 6px;
  border-radius: 50%;
}

.marquee-txt {
  color: #333333;
  font-size: 14px;
  line-height: 24px;
}

/* 动画定义 */
.scroll-left {
  animation: scrollLeft 50s linear infinite;
}

.scroll-right {
  animation: scrollRight 50s linear infinite;
}

@keyframes scrollLeft {
  0% {
    transform: translateX(0);
  }

  100% {
    transform: translateX(-100%);
  }
}

@keyframes scrollRight {
  0% {
    transform: translateX(-100%);
  }

  100% {
    transform: translateX(0);
  }
}