/* ===========================================
   通用动画效果库 - Universal Animation Library
   版本: 1.0.0
   作者: OUC-Haide Team
   =========================================== */

/* 基础动画配置 */
.animate-element {
  transition-duration: 0.6s;
  transition-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
  will-change: transform, opacity;
}

/* 淡入效果 */
.fade-in {
  opacity: 0;
  transform: translateY(30px);
}
.fade-in.animate-in {
  opacity: 1;
  transform: translateY(0);
}

/* 缩放效果 */
.scale-in {
  opacity: 0;
  transform: scale(0.8);
}
.scale-in.animate-in {
  opacity: 1;
  transform: scale(1);
}

/* 滑入效果 */
.slide-in-left {
  opacity: 0;
  transform: translateX(-50px);
}
.slide-in-left.animate-in {
  opacity: 1;
  transform: translateX(0);
}

.slide-in-right {
  opacity: 0;
  transform: translateX(50px);
}
.slide-in-right.animate-in {
  opacity: 1;
  transform: translateX(0);
}

/* 旋转效果 */
.rotate-in {
  opacity: 0;
  transform: rotate(-180deg) scale(0.5);
}
.rotate-in.animate-in {
  opacity: 1;
  transform: rotate(0deg) scale(1);
}

/* 弹跳效果 */
.bounce-in {
  opacity: 0;
  transform: scale(0.3);
  transition-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55);
}
.bounce-in.animate-in {
  opacity: 1;
  transform: scale(1);
}

/* 翻转效果 */
.flip-in {
  opacity: 0;
  transform: rotateY(-90deg);
}
.flip-in.animate-in {
  opacity: 1;
  transform: rotateY(0deg);
}

/* 延迟动画 */
.delay-100 { transition-delay: 0.1s; }
.delay-200 { transition-delay: 0.2s; }
.delay-300 { transition-delay: 0.3s; }
.delay-400 { transition-delay: 0.4s; }
.delay-500 { transition-delay: 0.5s; }

/* 动画持续时间 */
.duration-fast { transition-duration: 0.3s; }
.duration-normal { transition-duration: 0.6s; }
.duration-slow { transition-duration: 1.2s; }

/* 特殊效果 */
.glow-effect {
  box-shadow: 0 0 20px rgba(0, 204, 255, 0.5);
  transition: box-shadow 0.3s ease;
}

.pulse-effect {
  animation: pulse 2s infinite;
}

/* 酵母特效 */



@keyframes pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.05); }
}

/* ===========================================
   酵母滚动固定效果样式
   =========================================== */

/* 酵母元素基础样式 */
.yeast-scroll-effect {
  transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  transform-origin: center;
}

/* 酵母固定状态样式 */
.yeast-scroll-effect.fixed-position {
  position: fixed !important;
  top: 20% !important;
  right: 20px !important;
  width: 60px !important;
  height: 60px !important;
  z-index: 1000 !important;
  border-radius: 50%;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
  background: rgba(255, 255, 255, 0.9);
  padding: 8px;
  backdrop-filter: blur(10px);
}

/* 酵母悬停效果 */
.yeast-scroll-effect.fixed-position:hover {
  transform: scale(1.1);
  box-shadow: 0 6px 25px rgba(0, 204, 255, 0.3);
  background: rgba(255, 255, 255, 0.95);
}

/* 酵母点击动画 */
.yeast-scroll-effect.clicking {
  transform: scale(0.9);
}

/* 返回顶部提示文字 */
.yeast-tooltip {
  position: absolute;
  bottom: -35px;
  right: 0;
  background: rgba(0, 0, 0, 0.8);
  color: white;
  padding: 5px 10px;
  border-radius: 4px;
  font-size: 12px;
  white-space: nowrap;
  opacity: 0;
  transform: translateY(10px);
  transition: all 0.3s ease;
  pointer-events: none;
}

.yeast-scroll-effect.fixed-position:hover .yeast-tooltip {
  opacity: 1;
  transform: translateY(0);
}

/* 响应式适配 */
@media (max-width: 768px) {
  .yeast-scroll-effect.fixed-position {
    width: 50px !important;
    height: 50px !important;
    right: 15px !important;
    top: 15px !important;
  }
}

/* 最后一页动画效果 */
.last-page-container {
  overflow: hidden;
}

/* 背景颜色替换动画 - 使用CSS滤镜精确控制 */
.background-transition {
  transition: filter 1.2s ease-in-out;
}

/* 使用SVG滤镜进行颜色替换 */
.background-transition.animate-in {
  filter: url(#color-replace);
}

/* 或者使用多重滤镜组合 */
.background-transition.animate-in {
  filter: 
    sepia(1) 
    hue-rotate(200deg) 
    saturate(2) 
    brightness(0.9);
}

/* 橙色文字动画 */
.yeast-medics-text {
  opacity: 0;
  transform: scale(0);
  display: inline-block;
  transition: all 1s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

.yeast-medics-text.animate-in {
  opacity: 1;
  transform: scale(1);
}

/* 文字容器动画 */
.last-page-text {
  opacity: 0;
  transform: translateY(30px);
  transition: all 0.8s ease-out;
}

.last-page-text.animate-in {
  opacity: 1;
  transform: translateY(0);
}