/* Banner Animation Styles
   专门用于banner背景和粒子动画的样式文件
   =========================================== */

/* Banner Parallax - 主容器 */
#banner {
  position: relative;
  background: transparent;
  overflow: hidden;
}

.banner-parallax {
  position: relative;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  min-height: 800px;
  overflow: hidden;
}

/* 粒子动画画布 */
#particle-canvas.particle-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  display: block !important;
  pointer-events: none;
}

/* Banner内容区域 */
.banner-parallax .slide-content {
  position: relative;
  z-index: 10;
  height: 100%;
}

/* 确保容器和行正确显示 */
.banner-parallax .container {
  position: relative;
  z-index: 10;
  height: 100%;
}

.banner-parallax .row {
  display: flex;
  align-items: center;
  min-height: 800px;
}

.banner-parallax .row > [class*="col-"] {
  display: flex;
  align-items: center;
  min-height: 800px;
}

/* 背景动画效果 */
@keyframes gradientMove {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

/* 移动端适配 */
@media (max-width: 992px) {
  .banner-parallax {
    min-height: auto;
  }
  
  .banner-parallax .row {
    min-height: auto;
    flex-direction: column;
  }
  
  .banner-parallax .row > [class*="col-"] {
    min-height: auto;
    align-self: stretch;
    flex-grow: 1;
  }
  
  .banner-parallax [class*="col-"]:not(:first-child) .banner-center-box {
    padding-top: 0 !important;
    margin-top: -80px;
  }
}

@media (min-width: 992px) {
  .fullscreen .banner-parallax,
  .fullscreen .banner-slider {
    height: 100% !important;
  }
}