* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html, body {
    width: 100%;
    height: 100%;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI Symbol", "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif;
    overflow: hidden; /* 禁止滚动 */
    -webkit-tap-highlight-color: transparent;
}
/* 加载时覆盖层 */
.loading-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 99999;
  transition: opacity 0.5s ease; /* 仅在需要时做淡出 */
}
.loading-overlay.hidden {
  opacity: 0;
  pointer-events: none;
}
@media (prefers-color-scheme: dark) {
  body {
      background: black;
  }
  .loading-overlay {
    background: black;
  }
}
@media (prefers-color-scheme: light) {
  body {
    background: white;
  }
  .loading-overlay {
    background: white;
  }
}

img,
p,
span,
h1, h2, h3, h4, h5, h6,
li,
a {
  user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
}


/* 用于容器的最顶层样式 */
.image-container {
    position: relative;
    width: 100vw;
    height: 100vh;
    overflow: hidden; /* 防止超出内容显示 */
    display: flex; /* 居中对齐动画图层 */
    justify-content: center;
    align-items: center;
}

/* 屏幕阅读器专用内容（视觉上隐藏） */
.bg-sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* --------------------------------------------------------------------- */
/* 版权文字样式 */
.copyright {
    opacity: 0;
    position: absolute;
    right: 3%;
    bottom: 140px;
    font-size: 1rem;
    color: white;
    text-shadow: 1px 1px 7px #989898;
    text-align: right;
    z-index: 10001;
    pointer-events: none;
    user-select: none;
}
.copyright .beian {
    text-align: right;
    font-size: 0.85rem;
    margin-top: 10px;
    pointer-events: auto;
}
.copyright .beian a {
    color: white;
    text-decoration: none;
    margin-left: 10px;
}
.copyright .beian a:hover {
    text-decoration: underline;
}
.copyright .beian img {
    height: 1em;
    width: auto;
    vertical-align: middle;
    position: relative;
    right: 1px;
    bottom: 1px;
    pointer-events: none;
}

@media (max-width: 730px) {
    .copyright {
        right: 20px;
        bottom: 115px;
        font-size: 0.8rem;
    }
    .copyright .beian {
        font-size: 0.8rem;
    }
}

/* 底部导航栏样式 */
.bottom-navbar {
    opacity: 0; /* 初始状态下隐藏底部导航栏 */
    position: fixed;
    bottom: 0; /* 固定在底部 */
    left: 0;
    width: 100%; /* 占满整个屏幕宽度 */
    background: linear-gradient(to top, rgba(56,117,128,0.3), rgba(0,0,0,0.05));
    backdrop-filter: blur(10px); /* 高斯模糊背景 */
    z-index: 10000; /* 确保在图片和滤镜图层之上 */
    display: flex;
    justify-content: flex-start; /* 从第一个项目开始分配 */
    align-items: center;
    padding: 10px 20px 10px 10px;
}

/* 创建一个容器来分配文字按钮的空间 */
.bottom-navbar .text-buttons {
    display: flex; /* 使用flex布局 */
    flex-grow: 1; /* 让文字按钮分配剩余空间 */
    justify-content: space-evenly; /* 平均分配文字按钮之间的空间 */
    align-items: center; /* 垂直居中对齐按钮 */
}

/* 底部导航栏链接样式 */
.bottom-navbar a {
    color: white;
    text-decoration: none;
    font-size: 1.5rem;
    position: relative;
    z-index: 5; /* 确保文字在圆角矩形的上方 */
    transition: color 0.3s;
    display: flex; /* 确保图标和文字在同一行 */
    align-items: center; /* 垂直居中对齐图标和文字 */
}

/* 在文字背后创建圆角矩形背景 */
.bottom-navbar a::after {
    content: '';
    position: absolute;
    bottom: -10px;
    left: 50%;
    transform: translateX(-50%) scale(0); /* 初始时背景缩小至0 */
    width: 100%; /* 确保圆角矩形的宽度与文字一致 */
    height: 50px; /* 确保背景高度适应文字 */
    padding: 0 30px;
    background-color: white;
    border-radius: 50px;
    transition: transform 0.3s ease-out;
    z-index: -1; /* 确保圆角矩形位于文字背后 */
}

.siteLogo {
    margin: 0 10px 0 6vw;
    padding: 10px 0
}

/* 鼠标悬停时 */
@media (hover: hover) {
  .bottom-navbar a:hover {
    color: black;
  }

  .bottom-navbar a:hover::after {
    transform: translateX(-50%) scale(1);
  }
}
/* 触摸时使用 active 类 */
.bottom-navbar a.active {
  color: black;
}
.bottom-navbar a.active::after {
  transform: translateX(-50%) scale(1);
}

/* 添加图标的样式 */
.bottom-navbar a img {
    max-width: 3em; /* 图标最大宽度，跟文字大小相关 */
    max-height: 3em; /* 图标最大高度，跟文字大小相关 */
    width: auto; /* 保持比例 */
    height: auto; /* 保持比例 */
    pointer-events: none;
    filter: invert(5%);
}

/* 页面宽度小于500px时调整文字大小 */
@media (max-width: 730px) {
    .bottom-navbar a {
        font-size: 1.2rem; /* 小屏幕时减小文字大小 */
    }

    /* 确保小屏幕下圆角矩形的宽度与文字匹配 */
    .bottom-navbar a::after {
        width: 100%; /* 自动根据文字宽度调整 */
        padding: 0 15px; /* 为背景增加适当的内边距 */
        height: 45px;
    }

    .bottom-navbar a img {
        margin-left: 0;
    }
}

/* 不同语言的字间距调整 */
/* 拉丁语系（英 / 西 / 法） */
html[lang^="en"] .bottom-navbar a,
html[lang^="es"] .bottom-navbar a,
html[lang^="fr"] .bottom-navbar a {
  --ls-480: -0.5px;
  --ls-430: -1.5px;
}
/* 日语 */
html[lang^="ja"] .bottom-navbar a {
  --ls-480: -2px;
  --ls-430: -5px;
}

@media (max-width: 480px) {
  .bottom-navbar a {
    letter-spacing: var(--ls-480);
  }
}
@media (max-width: 430px) {
  .bottom-navbar a {
    letter-spacing: var(--ls-430);
  }
}

/* 点击图标返回主页时，移除白色背景 */
.bottom-navbar a.icon-no-bg::after {
    content: none; /* 禁用背景矩形 */
}

/* 在鼠标悬停时，图标链接跳转到主页 */
.bottom-navbar a:hover {
    cursor: pointer; /* 悬停时显示点击指针 */
}