:root {
  --gov-red: #c8102e;
  --gov-gold: #d4a84b;
}

/* ============ 政务首页：两排 4 列网格 ============ */
#fs-container {
  position: relative;
  z-index: 1;
  overflow: hidden;
  display: -webkit-box;
  display: -webkit-flex;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
}

/* 背景大图层：全屏固定视频背景 + 从上到下的渐变滤镜遮罩 */
.fs-bg {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}

.fs-video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover;
}

/* 从上到下的滤镜遮罩：顶部加深保证首排文字清晰，中间柔和过渡，底部略压 */
.fs-video-filter {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background:
    linear-gradient(
      to bottom,
      rgba(24, 2, 10, 0.72) 0%,
      rgba(120, 14, 34, 0.34) 45%,
      rgba(150, 16, 38, 0.5) 100%
    );
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

/* fsZoom 动画已移除，视频正常播放 */

/* 闪烁五角星层 */
.fs-stars {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
  pointer-events: none;
  overflow: hidden;
}

.star {
  position: absolute;
  top: var(--s-top);
  left: var(--s-left);
  width: var(--s-size, 16px);
  height: var(--s-size, 16px);
  background: radial-gradient(circle, #ffe9a8 0%, #ffd65e 45%, rgba(255, 214, 94, 0) 72%);
  -webkit-clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
  clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
  -webkit-animation: starTwinkle var(--s-dur, 3s) ease-in-out var(--s-delay, 0s) infinite;
  animation: starTwinkle var(--s-dur, 3s) ease-in-out var(--s-delay, 0s) infinite;
  filter: drop-shadow(0 0 6px rgba(255, 215, 0, 0.85));
  opacity: 0.2;
}

@keyframes starTwinkle {
  0%, 100% { opacity: 0.12; transform: scale(0.6) rotate(0deg); }
  50%      { opacity: 1;    transform: scale(1.05) rotate(18deg); }
}

/* 模块层（注意：容器内第 1、2 个子元素是背景层与星星层，模块从第 3 个开始） */
.media-project-hover {
  position: relative;
  z-index: 2;
  width: calc(100% / 4);
  height: 50%;
  border-right: 1px solid rgba(255, 255, 255, 0.12);
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  -webkit-transition: -webkit-filter 0.5s ease, border-color 0.4s ease, box-shadow 0.5s ease, -webkit-backdrop-filter 0.5s ease;
  transition: filter 0.5s ease, border-color 0.4s ease, box-shadow 0.5s ease, backdrop-filter 0.5s ease;
}

.media-project-hover:hover {
  -webkit-backdrop-filter: blur(16px) saturate(1.6) brightness(1.08);
  backdrop-filter: blur(16px) saturate(1.6) brightness(1.08);
  border-color: rgba(212, 168, 75, 0.4);
  box-shadow: inset 0 0 50px rgba(255, 255, 255, 0.07);
}

.media-project-hover:nth-child(4n + 2) {
  border-right: none;
}

.media-project-hover:nth-child(n + 7) {
  border-bottom: none;
}

/* 悬停玻璃模糊背景 */
.media-project-hover .bg-overlay {
  background: rgba(0, 0, 0, 0.35);
  -webkit-transition: background 0.5s cubic-bezier(.25, .46, .45, .94);
  transition: background 0.5s cubic-bezier(.25, .46, .45, .94);
}

.media-project-hover:hover .bg-overlay {
  background: rgba(255, 255, 255, 0.08);
}

/* 调整小格子内的字号与间距 */
.media-project-hover .media__number {
  font-size: 96px;
  bottom: -18px;
  color: rgba(212, 168, 75, 0.55);
  text-shadow: 0 2px 14px rgba(0, 0, 0, 0.45);
  -webkit-transition: bottom 0.4s ease, color 0.4s ease, -webkit-transform 0.4s ease;
  transition: bottom 0.4s ease, color 0.4s ease, transform 0.4s ease;
}

.media-project-hover:hover .media__number {
  bottom: -10px;
  color: rgba(255, 224, 138, 0.95);
  -webkit-transform: translateY(-6px) scale(1.06);
  transform: translateY(-6px) scale(1.06);
}

/* 悬停时文字轻微上浮 */
.media-project-hover .media__body {
  padding: 25px 30px;
  -webkit-transition: -webkit-transform 0.5s ease;
  transition: transform 0.5s ease;
}

.media-project-hover:hover .media__body {
  -webkit-transform: translateY(-8px);
  transform: translateY(-8px);
}

.media-project-hover .media__sub-title {
  font-size: 14px;
  letter-spacing: 2px;
  color: rgba(255, 255, 255, 0.75);
  margin-bottom: 6px;
}

.media-project-hover .media__title {
  font-size: 22px;
  line-height: 1.35;
  margin-bottom: 16px;
}

.media-project-hover .media__title a {
  color: #fff;
}

.media-project-hover .media__link {
  font-size: 13px;
  color: var(--gov-gold);
  border-bottom-color: var(--gov-gold);
}

.media-project-hover:hover .media__link {
  color: #fff;
  border-bottom-color: #fff;
}

/* 悬停时模块顶部光泽高光线 */
.media-project-hover::after {
  content: "";
  position: absolute;
  top: 0;
  left: 10%;
  right: 10%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.5), transparent);
  opacity: 0;
  transition: opacity 0.5s ease;
  z-index: 5;
}

.media-project-hover:hover::after {
  opacity: 1;
}

/* ============ 平板：两列 ============ */
@media (max-width: 991px) {
  #fs-container {
    height: auto;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
  }

  .media-project-hover {
    width: 50%;
    height: 280px;
    border-right: 1px solid rgba(255, 255, 255, 0.12);
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  }

  .media-project-hover:nth-child(even) {
    border-right: none;
  }

  .media-project-hover:nth-child(n + 9) {
    border-bottom: none;
  }

  .media-project-hover .media__number {
    font-size: 72px;
  }

  .media-project-hover .media__title {
    font-size: 18px;
  }
}

/* ============ 手机：单列 ============ */
@media (max-width: 575px) {
  .media-project-hover {
    width: 100%;
    height: 200px;
    border-right: none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  }

  .media-project-hover:nth-child(n + 7) {
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  }

  .media-project-hover:last-child {
    border-bottom: none;
  }

  .media-project-hover .media__number {
    font-size: 60px;
  }

  .media-project-hover .media__title {
    font-size: 17px;
  }
}

/* ============ 右上角弹窗侧边栏：玻璃透明效果 ============ */
.menu-sidebar {
  background: rgba(120, 14, 34, 0.22);
  border-left: 1px solid rgba(255, 255, 255, 0.18);
  -webkit-backdrop-filter: blur(20px) saturate(1.5);
  backdrop-filter: blur(20px) saturate(1.5);
}

#menu-sidebar-overlay {
  background: rgba(0, 0, 0, 0.35);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}

/* 玻璃背景上的文字改为浅色保证可读 */
.menu-sidebar-nav-menu .menu > .menu-item > a {
  color: #fff;
}

.menu-sidebar-nav-menu .menu a:hover {
  color: var(--gov-gold);
}

.menu-sidebar-nav-menu .menu-item .sub-menu .menu-item a {
  color: rgba(255, 255, 255, 0.75);
}

.menu-sidebar-nav-menu .menu-item .sub-menu .menu-item a:hover {
  color: #fff;
}

.menu-sidebar .btn-close {
  color: rgba(255, 255, 255, 0.9);
}

.menu-sidebar .btn-close:hover {
  color: #fff;
}

.menu-sidebar .copyright {
  color: rgba(255, 255, 255, 0.55);
}
