/* 此css文件仅用作Home */

body { padding-top: 56px;
  background-color: rgb(246, 241, 234); 
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  overflow-x: hidden; /* 防止因为微小误差出现水平滚动条 */
}

.fullscreen {
  position: absolute;
  top: 0;
  left: 0;
  width: 100vw; 
  height: auto;
  object-fit: cover;
}

.image-container {
  position: relative;
  width: 100%;
  text-align: center;
}

.text-container {
  font-family: 'Calistoga', Arial;
  color: rgb(64, 81, 68);
  position: relative;
  width: 100%;
  text-align: center;
}

.text-container p {
  margin-bottom: 10px;
}


/* -----------文字左右滑入动画---------- */
.slide-in-left, .slide-in-right {
  opacity: 0;
  transition: opacity 0.5s, transform 0.8s;
}

.slide-in-left {
  transform: translateX(-100%);
}

.slide-in-right {
  transform: translateX(100%);
}

@keyframes slideInFromLeft {
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

@keyframes slideInFromRight {
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

.slide-in-left.is-visible {
  animation: slideInFromLeft 0.8s ease-out forwards;
}

.slide-in-right.is-visible {
  animation: slideInFromRight 0.8s ease-out forwards;
}

/* -----------从下方出现动画----------- */
.slide-in-down {
  opacity: 0;
}

@keyframes slideInFromBottom {
  from {
    opacity: 0;
    transform: translateY(100%);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.slide-in-down.is-visible {
  animation: slideInFromBottom 0.8s ease-out forwards;
}

/* -----------logo噬菌体动画----------- */
@keyframes slideDownFadeIn {
  from {
    opacity: 0;
    transform: translate(-15%, -100%);
  }
  to {
    opacity: 1;
    transform: translate(-2%, -2%);
  }
}

/* 初始状态 */
#anime1 {
  opacity: 0;
  transform: translateY(-100%);
  position: absolute;
  top: 0;
  left: 0;
}

#anime1.start-animation {
  animation: slideDownFadeIn 2s ease-out forwards;
}

/* -----------logo文字动画----------- */
@keyframes slideDownFadeI1 {
  from {
    opacity: 0;
    transform: translate(0, 0);
  }
  to {
    opacity: 1;
    transform: translate(0.5%, 1.5%);
  }
}

#anime2 {
  opacity: 0;
  transform: translateY(-100%);
}
  
#anime2.start-animation1 {
  animation: slideDownFadeI1 1s ease-out forwards;
}

@keyframes slideDownFadeI2 {
  from {
    opacity: 0;
    transform: translate(0, 0);
  }
  to {
    opacity: 1;
    transform: translate(1%, 3%);
  }
}

#anime3 {
  opacity: 0;
  transform: translateY(-100%);
}
  
#anime3.start-animation2 {
  animation: slideDownFadeI2 1s ease-out forwards;
}

/* ------------awards动画------------- */
#awards {
  transform: rotate(16deg);
  opacity: 0.7;
  transition: all 0.3s ease;
}

#awards:hover {
  opacity: 1.0;
  cursor: pointer;
}

#awards1 {
  transition: transform 1s ease-in-out;
  transform: translateX(30vw);
}

#awards1.table-visible {
  transform: translateX(0);
}


/* ------------浮动动画------------- */
@keyframes float-up-down {
  from {
    transform: translateY(-20px);
  }
  to {
    transform: translateY(20px);
  }
}

.float {
  animation: float-up-down 2s ease-in-out infinite alternate;
}

/* ------------左右浮动动画------------- */
@keyframes float-left-right {
  from {
    transform: translateX(-20px);
  }
  to {
    transform: translateX(20px);
  }
}

.float-lr {
  animation: float-left-right 2s ease-in-out infinite alternate;
}

/* -------------轮播图片格式------------- */
.carousel-img {
  position: absolute; 
  width: 25vw;
  height: auto;
  object-fit: cover;
  left: 0;
  right: 0;
  margin-left: auto;
  margin-right: auto;
  transition: transform 0.5s ease-in-out, opacity 0.5s ease-in-out;
  cursor: pointer;
  box-shadow: 0 4px 8px rgba(0,0,0,0.2);
}

.center {
  transform: translateX(0) scale(1);
  opacity: 1;
  z-index: 3;
}

.left {
  transform: translateX(-70%) scale(0.7);
  opacity: 0.8;
  z-index: 2;
}

.right {
  transform: translateX(70%) scale(0.7);
  opacity: 0.8;
  z-index: 2;
}

/* ----------- 点击交互样式+循环缩放 ----------- */

#explain1 {
  opacity: 0;
  transition: opacity 0.5s ease-in-out;
  animation: enlarge 2s ease-in-out infinite alternate;
}

#explain2 {
  opacity: 0;
  transition: opacity 0.5s ease-in-out;
  animation: enlarge 2s ease-in-out infinite alternate;
}


#copper-spray {
  cursor: pointer; 
  animation: enlarge 2s ease-in-out infinite alternate;
}

#antibiotics {
  cursor: pointer; 
  animation: enlarge 2s ease-in-out infinite alternate;
}

.enlarge {
  animation: enlarge 1.5s ease-in-out infinite alternate;
}

@keyframes enlarge {
  from {
    transform: scale(0.9);
  }
  to {
    transform: scale(1);
  }
}

/* ----------- 循环摇晃动画 ----------- */
@keyframes shake {
  from {
    transform: rotate(-4deg);
  }
  to {
    transform: rotate(4deg);
  }
}

.shake {
  animation-name: shake;
  animation-duration: 1s; /* 动画时长，可以调整快慢 */
  animation-timing-function: ease-in-out; /* 缓动效果 */
  animation-iteration-count: infinite; /* 无限循环 */
  animation-direction: alternate; /* 动画交替反向播放 */
}


/* ----------- 点击触发的table滑动动画 ----------- */
#table {
  transition: transform 1s ease-in-out;
  transform: translateX(-150vw);
}

#table.table-visible {
  transform: translateX(0);
}

/* ----------- 左右出现 ----------- */
.slide-in-left1, .slide-in-right1, .slide-in-left2, .slide-in-right2 {
  opacity: 0;
  transition: opacity 1s, transform 1.5s;
}

.slide-in-left1, .slide-in-left2 {
  transform: translateX(-100%);
}

.slide-in-right1, .slide-in-right2 {
  transform: translateX(100%);
}

@keyframes slideInFromLeft1 {
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

@keyframes slideInFromRight1 {
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

.slide-in-left1.is-visible, .slide-in-left2.is-visible {
  animation: slideInFromLeft1 1.5s ease-out forwards;
}

.slide-in-right1.is-visible, .slide-in-right2.is-visible {
  animation: slideInFromRight1 1.5s ease-out forwards;
}

.slide-in-left3.is-visible {
  animation: slideInFromLeft1 2s ease-out forwards;
}

.slide-in-right3.is-visible {
  animation: slideInFromRight1 2s ease-out forwards;
}

/* ----------------灯泡闪烁---------------- */
#light {
  opacity: 1;
  transform: translateY(-10%);
  transition: transform 1.5s, opacity 1.5s;
}

/* 定义从上方滑入的动画 */
@keyframes slideInFromTop {
  from {
    transform: translateY(-10%);
  }
  to {
    transform: translateY(0);
  }
}

@keyframes pulseOpacity {
  from {
    opacity: 1;
  }
  to {
    opacity: 0.5;
  }
}

#light.is-visible {
  animation: slideInFromTop 1.5s ease-out forwards, 
             pulseOpacity 2s ease-in-out infinite alternate 1.5s;
}

/* --------------------what if滚动进入--------------------- */
#rolling {
  perspective: 400px;
}

#rolling span {
  display: inline-block; 
  opacity: 0;
  transform-origin: 50% 100%; 
}

#rolling.is-visible span {
  animation: rollIn 0.8s ease-out forwards;
}

@keyframes rollIn {
  from {
    opacity: 0;
    /* 从右侧150px、向上50px的位置开始，并带有旋转效果 */
    transform: translateX(150px) translateY(50px) translateZ(-100px) rotateX(-180deg);
  }
  to {
    opacity: 1;
    transform: translateX(0) translateY(0) translateZ(0) rotateX(0deg);
  }
}


/* --------------------旋转动画--------------------- */

/* 定义顺时针旋转的关键帧动画 */
@keyframes rotateClockwise {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

.clockwise {
  animation: rotateClockwise 8s linear infinite;
}

/* 定义逆时针旋转的关键帧动画 */
@keyframes rotateCounterClockwise {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(-360deg);
  }
}

.counterclockwise {
  animation: rotateCounterClockwise 8s linear infinite;
}


/* -----------------"SMART" 字母容器样式--------------- */
.smart-letters {
  display: flex;
  justify-content: center;
  gap: 1vw;
  margin: 40px 0;
  font-size: max(2em, 4vw); /* 响应式字体大小 */
  font-weight: bold;
  font-family: 'Calistoga';
}

/* 单个字母的样式 */
.smart-letter {
  cursor: pointer;
  transition: transform 0.3s ease;
  text-shadow: 8px 2px rgba(187, 178, 159, 0.8);
  
}

/* 鼠标悬浮或被点击激活时的放大效果 */
.smart-letter:hover,
.smart-letter.active {
  transform: scale(1.1);
}

/* 旋转图片样式 */
#cycle {
  width: 100%;
  height: 100%;
  transition: transform 0.8s cubic-bezier(0.68, -0.55, 0.27, 1.55); /* 平滑且带回弹的旋转动画 */
}

/* 字母对应的说明图片通用样式 */
.letter-image {
  display: absolute;
  transform: translate(-50%, -50%);
  opacity: 0; /* 默认完全透明 */
  transition: opacity 0.5s ease-in-out;
  pointer-events: none;
}

.letter-image.visible {
  opacity: 1;
}

/* --- 为pop1, pop2, pop3添加不同步浮动效果 --- */
#pop1, #pop2, #pop3 {
  animation-name: float-up-down; /* 应用已有的上下浮动动画 */
  animation-timing-function: ease-in-out; /* 缓动效果 */
  animation-iteration-count: infinite; /* 无限循环 */
  animation-direction: alternate; /* 动画往返播放 */
}

#pop1 {
  animation-duration: 3s;
  animation-delay: 0s;
}

#pop2 {
  animation-duration: 2.5s;
  animation-delay: 0.5s;
}

#pop3 {
  animation-duration: 3.5s;
  animation-delay: 1s;
}


/* 此css文件仅用作Home */