/* ============================================
   主页炫酷核心区：运行计时器 + 旋转地球
   配色：深海蓝 + 琥珀金（与 cyber.css 一致）
   ============================================ */

.hero-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  margin: 36px auto;
  max-width: 980px;
  padding: 0 20px;
}

.hero-cell {
  position: relative;
  padding: 18px 20px;
  border-radius: 14px;
  background: linear-gradient(135deg,
    rgba(14, 165, 233, 0.10) 0%,
    rgba(2, 132, 199, 0.06) 50%,
    rgba(245, 158, 11, 0.08) 100%);
  border: 1px solid rgba(14, 165, 233, 0.28);
  box-shadow:
    0 6px 22px rgba(14, 165, 233, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
  overflow: hidden;
  transition: transform 0.35s ease, box-shadow 0.35s ease;
}

.hero-cell:hover {
  transform: translateY(-3px);
  box-shadow:
    0 12px 38px rgba(14, 165, 233, 0.28),
    0 0 24px rgba(245, 158, 11, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.12);
}

.hero-cell::before {
  content: "";
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: conic-gradient(from 0deg,
    transparent 0deg,
    rgba(245, 158, 11, 0.08) 90deg,
    transparent 180deg,
    rgba(14, 165, 233, 0.08) 270deg,
    transparent 360deg);
  animation: hero-rotate-bg 20s linear infinite;
  pointer-events: none;
}

@keyframes hero-rotate-bg {
  to { transform: rotate(360deg); }
}

.hero-cell-inner {
  position: relative;
  z-index: 1;
  text-align: center;
  color: var(--snow, #f1f5f9);
}

.hero-cell h3 {
  font-size: 1rem;
  margin: 4px 0 10px;
  color: #e0f2fe;
  letter-spacing: 2px;
  font-weight: 500;
}

.hero-cell .fa-clock-rotate-left {
  font-size: 22px;
  color: #38bdf8;
  filter: drop-shadow(0 0 8px rgba(56, 189, 248, 0.6));
}

.hero-sub {
  margin-top: 10px;
  font-size: 0.8rem;
  color: #94a3b8;
  letter-spacing: 1px;
}

/* ---------- 1. 运行时间计数器 ---------- */
.uptime-counter {
  display: flex;
  justify-content: center;
  gap: 6px;
  flex-wrap: wrap;
  margin: 6px 0;
}

.uptime-counter span {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  min-width: 50px;
  padding: 7px 6px;
  border-radius: 8px;
  background: linear-gradient(135deg,
    rgba(14, 165, 233, 0.18),
    rgba(2, 132, 199, 0.10));
  border: 1px solid rgba(56, 189, 248, 0.35);
  box-shadow:
    0 3px 12px rgba(14, 165, 233, 0.20),
    inset 0 1px 0 rgba(255, 255, 255, 0.10);
}

.uptime-counter b {
  font-size: 1.4rem;
  font-weight: 700;
  color: #fff;
  font-family: 'Courier New', 'Source Code Pro', monospace;
  text-shadow: 0 0 10px rgba(56, 189, 248, 0.7);
  letter-spacing: 1px;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.uptime-counter em {
  margin-top: 3px;
  font-style: normal;
  font-size: 0.68rem;
  color: #cbd5e1;
  letter-spacing: 2px;
}

/* ---------- 2. 旋转地球（真实 NASA 卫星等距投影图） ---------- */
.earth-wrap {
  position: relative;
  width: 140px;
  height: 140px;
  margin: 6px auto 4px;
  perspective: 600px;
}

.earth-orbit {
  position: absolute;
  inset: -14px;
  border: 1px dashed rgba(56, 189, 248, 0.30);
  border-radius: 50%;
  animation: orbit-spin 30s linear infinite;
}

.earth-shadow {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 150px;
  height: 22px;
  margin: -11px 0 0 -75px;
  background: radial-gradient(ellipse at center,
    rgba(0, 0, 0, 0.55) 0%,
    rgba(0, 0, 0, 0.20) 50%,
    transparent 80%);
  filter: blur(5px);
  animation: orbit-spin 30s linear infinite reverse;
}

@keyframes orbit-spin {
  to { transform: rotate(360deg); }
}

/* 真实地球：用 NASA equirectangular 投影图（2:1）做圆球表面，
   background-position-x 从 0% 到 100% 实现横向旋转 */
.earth {
  position: relative;
  width: 140px;
  height: 140px;
  border-radius: 50%;
  overflow: hidden;
  background-color: #0c4a6e;
  background-image: url('/img/earth-equirect.webp');
  background-size: 200% 100%;       /* 高度铺满，宽度双倍以保证首尾无缝 */
  background-position: 0% center;
  background-repeat: repeat-x;
  box-shadow:
    inset 0 0 30px rgba(0, 0, 0, 0.45),
    inset -14px -8px 40px rgba(0, 0, 0, 0.55),
    0 0 36px rgba(56, 189, 248, 0.45),
    0 0 70px rgba(14, 165, 233, 0.22);
  animation: earth-spin 28s linear infinite;
  transform-style: preserve-3d;
  /* 把图裁成圆球：球面阴影 */
  -webkit-mask-image: radial-gradient(circle, #000 70%, transparent 100%);
          mask-image: radial-gradient(circle, #000 70%, transparent 100%);
}

@keyframes earth-spin {
  from { background-position: 0% center; }
  to   { background-position: -200% center; }
}

/* 大气辉光（在外层，柔化球边） */
.earth-glow {
  position: absolute;
  inset: -6%;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%,
    rgba(125, 211, 252, 0.30) 0%,
    rgba(56, 189, 248, 0.18) 50%,
    transparent 75%);
  pointer-events: none;
  animation: glow-pulse 4s ease-in-out infinite alternate;
}

@keyframes glow-pulse {
  from { opacity: 0.65; transform: scale(1); }
  to   { opacity: 1.0; transform: scale(1.04); }
}

/* 响应式：小屏单列 */
@media (max-width: 768px) {
  .hero-grid {
    grid-template-columns: 1fr;
    gap: 14px;
    margin: 24px auto;
  }
  .earth-wrap, .earth {
    width: 120px;
    height: 120px;
  }
  .earth-shadow {
    width: 130px;
    margin-left: -65px;
  }
  .uptime-counter b { font-size: 1.2rem; }
  .uptime-counter span { min-width: 44px; padding: 6px 4px; }
}

/* 减少动效偏好 */
@media (prefers-reduced-motion: reduce) {
  .earth,
  .earth-orbit,
  .earth-shadow,
  .earth-glow,
  .hero-cell::before {
    animation: none !important;
  }
}