/* 确保全屏 Canvas 与主体纵向铺满 */
html,
body {
  min-height: 100%;
}

body.home.page {
  min-height: 100vh;
  background-color: #07040e;
  /* app.css body 默认 18px，首页整体 +3 */
  font-size: 21px;
}

/* 首页各档字号在 app.css 基础上 +3px */
.home .jumbotron h1 {
  font-size: 35px;
}

@media (min-width: 480px) {
  .home .jumbotron h1 {
    font-size: 43px;
  }
}

@media (min-width: 768px) {
  .home .jumbotron h1 {
    font-size: 55px;
  }
}

.home .jumbotron p,
.home .jumbotron p.description {
  font-size: 19px !important;
}

@media (min-width: 768px) {
  .home .jumbotron p,
  .home .jumbotron p.description {
    font-size: 21px !important;
  }
}

.home .jumbotron .button {
  font-size: 19px !important;
  line-height: 43px !important;
}

.home .copyright {
  font-size: 16px !important;
}

/*
 * 自下而上：全屏背景 .site-bg(3) < 光标 canvas(4) < 主内容 .jumbotron(5)。
 * canvas 用 destination-in 做拖尾淡出（见 bg_window.js），不再叠黑挡背景；光带叠在配图之上。
 */
.site-bg {
  position: fixed;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  overflow: hidden;
  background-color: #07040e;
}

.site-bg__photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  z-index: 0;
}

/* 深色叠层，保证文字对比度 */
.site-bg__shade {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(rgba(7, 4, 14, 0.5), rgba(7, 4, 14, 0.78));
}

#canvas {
  z-index: 4 !important;
  pointer-events: none;
  /* 提示合成层，减少主线程重绘与滚动的互相干扰 */
  transform: translateZ(0);
  backface-visibility: hidden;
}

/* 撤掉原 jumbotron 的装饰性多层背景，并让整块内容叠在背景图之上 */
.home .jumbotron {
  position: relative;
  z-index: 5;
  background: none !important;
  padding-top: 56px;
}

@media (min-width: 768px) {
  .home .jumbotron {
    padding-top: 72px;
  }
}

/* 首页导航：前三枚横排；从第 4 个起在下方纵向排列（PHP 同上按顺序切片） */
.home .nav-buttons {
  margin: 0 auto 25px;
  width: 100%;
  max-width: 980px;
  text-align: center;
}

.home .nav-buttons__row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 14px;
  margin-bottom: 14px;
}

/* 前三个横排按钮：加大字、增高、加厚边框与圆角（下面竖排沿用全局 .button 尺寸） */
.home .nav-buttons__row .button {
  font-size: 23px !important;
  line-height: 54px !important;
  padding-left: 34px !important;
  padding-right: 34px !important;
  border-radius: 14px !important;
  border-width: 3px !important;
  min-height: 54px;
  box-sizing: border-box;
}

.home .nav-buttons__col {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 12px;
  width: 100%;
  max-width: 560px;
  margin: 0 auto;
}

.home .nav-buttons__col .button {
  margin-right: 0 !important;
  width: 100%;
  box-sizing: border-box;
}

/* 原站按钮类名 */
.mr15 {
  margin-right: 15px;
}

/*
 * 「使用教程」：与同页 button-border 一致，默认无底透明；色系为青绿以区别于 primary
 */
.home .button.button-tutorial,
.home .button.button-tutorial:visited {
  background: none;
  background-color: transparent;
  border-color: #3dd9c4;
  color: #5feffe;
}

.home .button.button-tutorial:hover,
.home .button.button-tutorial:focus {
  background-color: rgba(94, 229, 219, 0.9);
  border-color: #5feffe;
  color: rgba(255, 255, 255, 0.9);
}

.home .button.button-tutorial:active {
  background-color: rgba(32, 172, 159, 0.7);
  border-color: #3dd9c4;
  color: rgba(255, 255, 255, 0.5);
  opacity: 0.3;
}

.button-glow.button-tutorial {
  animation-name: ot-glowing-tutorial !important;
}

@keyframes ot-glowing-tutorial {
  0%,
  100% {
    box-shadow: 0 0 12px rgba(61, 217, 196, 0.45),
      0 0 26px rgba(95, 239, 254, 0.22);
  }
  50% {
    box-shadow: 0 0 20px rgba(95, 239, 254, 0.55),
      0 0 36px rgba(58, 160, 255, 0.28);
  }
}

/* 后台「公告」区块 */
.site-announcement {
  margin: 0 auto 22px;
  max-width: 52rem;
  text-align: left;
  padding: 14px 16px 16px;
  border-radius: 12px;
  border: 1px solid rgba(0, 160, 255, 0.35);
  background: linear-gradient(135deg, rgba(15, 40, 72, 0.55), rgba(8, 14, 24, 0.65));
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.35);
}

.site-announcement__label {
  display: inline-block;
  margin-bottom: 8px;
  padding: 2px 10px;
  font-size: 15px;
  letter-spacing: 0.06em;
  color: #07040e;
  background: linear-gradient(90deg, #5feffe, #3aa0ff);
  border-radius: 999px;
  font-weight: 600;
}

.site-announcement__text {
  margin: 0;
  color: #dce6f2;
  font-size: 18px;
  line-height: 1.75;
  font-weight: 400;
}