@charset "UTF-8";
/* 自定义样式 */
.primary-bg {
  background-color: #1A1A1D;
  /* 深色背景 */ }

.accent-bg {
  background-color: #FF4C60;
  /* 亮色点缀 */ }

.video-container {
  position: relative;
  width: 100%;
  padding-bottom: 56.25%;
  /* 16:9 的宽高比 */
  overflow: hidden; }

.video-container video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover; }

.video-container .content {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: white;
  text-align: center;
  z-index: 10; }

.video-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 5; }

.start-button {
  margin-top: 20px;
  padding: 12px 24px;
  background-color: #FF4C60;
  color: white;
  border-radius: 9999px;
  transition: background-color 0.3s ease; }

.start-button:hover {
  background-color: #E03A50; }

.carousel-container {
  width: 100%;
  height: 100%;
  perspective: 1000px;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  padding: 300px 0 100px 0;
  flex-direction: column; }

.gradient-background {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 300%;
  height: 300%;
  background: radial-gradient(circle at center, rgba(255, 0, 255, 0.6), rgba(0, 255, 255, 0.6), rgba(255, 255, 0, 0.6), rgba(0, 0, 255, 0.6), rgba(255, 0, 0, 0.6));
  transform: translate(-50%, -50%);
  filter: blur(150px);
  opacity: 0.4;
  animation: rotate 30s infinite linear;
  z-index: 1; }

.carousel {
  position: relative;
  width: 80%;
  height: 300px;
  perspective: 1000px;
  display: flex;
  justify-content: center; }

.carousel video {
  position: absolute;
  width: 300px;
  height: 200px;
  border-radius: 10px;
  perspective: 1000px;
  opacity: 0;
  /*transform-origin: center center;*/
  /*transition: transform 10s linear, opacity 6s linear;*/ }

/* 左移动画 */
@keyframes moveLeft {
  0% {
    transform: translateX(20px) rotateY(10deg) scale(0);
    opacity: 1;
    filter: none; }
  20% {
    transform: translateX(-300px) rotateY(20deg) scale(1.25);
    opacity: 1;
    z-index: 2;
    filter: none; }
  40% {
    transform: translateX(-600px) rotateY(30deg) scale(1.75);
    opacity: 1;
    z-index: 4;
    filter: none; }
  60% {
    transform: translateX(-1000px) rotateY(40deg) scale(2.25);
    opacity: 1;
    z-index: 6;
    filter: blur(1px); }
  80% {
    transform: translateX(-1600px) rotateY(50deg) scale(2.75);
    opacity: 1;
    z-index: 8;
    filter: blur(2px); }
  100% {
    transform: translateX(-2100px) rotateY(60deg) scale(3.25);
    opacity: 0;
    z-index: 10;
    filter: blur(3px); } }
/* 右移动画 */
@keyframes moveRight {
  0% {
    transform: translateX(-20px) rotateY(-10deg) scale(0);
    opacity: 1;
    filter: none; }
  20% {
    transform: translateX(300px) rotateY(-20deg) scale(1.25);
    opacity: 1;
    z-index: 2;
    filter: none; }
  40% {
    transform: translateX(600px) rotateY(-30deg) scale(1.75);
    opacity: 1;
    z-index: 4;
    filter: none; }
  60% {
    transform: translateX(1000px) rotateY(-40deg) scale(2.25);
    opacity: 1;
    z-index: 6;
    filter: blur(1px); }
  80% {
    transform: translateX(1600px) rotateY(-50deg) scale(2.75);
    opacity: 1;
    z-index: 8;
    filter: blur(2px); }
  100% {
    transform: translateX(2100px) rotateY(-60deg) scale(3.25);
    opacity: 0;
    z-index: 10;
    filter: blur(3px); } }
/* 设置左移图片 */
.m1, .m3, .m5, .m7, m9, m11, m13 {
  animation: moveLeft 12s infinite linear; }

/* 设置右移图片 */
.m2, .m4, .m6, .m8, m10, m12, m14 {
  animation: moveRight 12s infinite linear; }

/* 延迟设置，使图片交错出现 */
/*.img2 {
    animation-delay: 1.5s;
}*/
.m3, .m4 {
  animation-delay: 3s; }

.m5, .m6 {
  animation-delay: 6s; }

.m7, .m8 {
  animation-delay: 9s; }

/*
.m9, m10 {
  animation-delay: 6s;
}
.m11, m12 {
  animation-delay: 6s;
}
.m13, m14 {
  animation-delay: 6s;
}
*/

/*# sourceMappingURL=ai-video.css.map */