/* style.css */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* 防止手机端下拉刷新 */
body {
    overscroll-behavior-y: none;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-x pan-y;
}

html, body {
    overscroll-behavior: none;
    touch-action: manipulation;
}

.bg-404040 {
    background: #404040;
}
.bg-313131 {
    background-color: #313131;
}
.bg-63bbf3 {
    background-color: #63bbf3;
}
.bg-header {
    background-color: rgba(12, 60, 96, 1);
}

header.sticky {
    padding: 0.5vw 0 ;
    background-color: rgba(85, 82, 82, 1);
}

#videoText.transform {
    opacity: 0;
}
#btn.transform {
    opacity: 0;
}

.trans {
    transform: translateX(0px , 0%);
}

.slide-in {
    transform: translateX(-100%);
    transition: transform 0.5s ease-out;
}

.slide-in-visible {
    transform: translateX(0);
}

.test {
    background-position: 10% 20%;
}

.parallax {
  will-change: transform;
  transform: translate3d(0,0,0);
}

.fade-out {
  transition: opacity 0.7s;
  opacity: 0;
}

/* 视频播放优化 */
#mainVideo {
  object-fit: cover;
  width: 100%;
  height: 100vh;
}

/* 移动端视频优化 */
@media (max-width: 768px) {
  #mainVideo {
    object-position: center;
    min-height: 100vh;
  }
}

/* 下拉框打开状态的色差效果 */
.unfoldBox {
    transition: all 0.3s ease;
    border: 2px solid transparent;
}

.unfoldBox.opened {
    background-color: #e8f4fd !important; /* 浅蓝色背景 */
    box-shadow: 0 8px 25px rgba(12, 60, 96, 0.2);
    border: 2px solid rgba(12, 60, 96, 0.3);
    transform: translateY(-2px); /* 轻微上浮效果 */
}

/* 暗色模式下的打开状态 */
.dark .unfoldBox.opened {
    background-color: #2c4a5c !important; /* 深蓝灰色背景 */
    box-shadow: 0 8px 25px rgba(114, 188, 243, 0.3);
    border: 2px solid rgba(114, 188, 243, 0.4);
}

/* 下拉框标题在打开时的高亮效果 */
.unfoldBox.opened > p:first-of-type {
    color: #0c3c60;
    font-weight: 900;
}

.dark .unfoldBox.opened > p:first-of-type {
    color: #72bcf3;
}