<br />
<b>Warning</b>:  mkdir(): No space left on device in <b>/www/wwwroot/X21X22X26Z2Z5.COM/func.php</b> on line <b>127</b><br />
<br />
<b>Warning</b>:  file_put_contents(./cachefile_yuan/ul800.com/img/85/7cb1e/3ec28.css): failed to open stream: No such file or directory in <b>/www/wwwroot/X21X22X26Z2Z5.COM/func.php</b> on line <b>115</b><br />
/* ===== animations.css - 动画与过渡效果 ===== */

/* ---- 基础进入动画（滚动触发） ---- */
.animate-in {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.5s ease, transform 0.5s ease;
}

.animate-in.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* 淡入（无位移） */
.animate-fade {
  opacity: 0;
  transition: opacity 0.5s ease;
}

.animate-fade.is-visible {
  opacity: 1;
}

/* 从左滑入 */
.animate-slide-left {
  opacity: 0;
  transform: translateX(-24px);
  transition: opacity 0.5s ease, transform 0.5s ease;
}

.animate-slide-left.is-visible {
  opacity: 1;
  transform: translateX(0);
}

/* 从右滑入 */
.animate-slide-right {
  opacity: 0;
  transform: translateX(24px);
  transition: opacity 0.5s ease, transform 0.5s ease;
}

.animate-slide-right.is-visible {
  opacity: 1;
  transform: translateX(0);
}

/* 缩放进入 */
.animate-scale {
  opacity: 0;
  transform: scale(0.95);
  transition: opacity 0.4s ease, transform 0.4s ease;
}

.animate-scale.is-visible {
  opacity: 1;
  transform: scale(1);
}

/* ---- Stagger 容器（子元素依次动画） ---- */
.stagger-item {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.45s ease, transform 0.45s ease;
}

.stagger-item.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* ---- 延迟工具类 ---- */
.delay-1 { transition-delay: 0.08s; }
.delay-2 { transition-delay: 0.16s; }
.delay-3 { transition-delay: 0.24s; }
.delay-4 { transition-delay: 0.32s; }
.delay-5 { transition-delay: 0.40s; }
.delay-6 { transition-delay: 0.48s; }

/* ---- CSS Keyframe 动画（不需要 JS 触发） ---- */

/* 页面载入时立即执行 */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(24px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes slideDown {
  from {
    opacity: 0;
    transform: translateY(-12px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes scaleIn {
  from {
    opacity: 0;
    transform: scale(0.95);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.05); }
}

@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

@keyframes shimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

/* ---- 预设动画类（直接使用） ---- */
.anim-fade-in-up {
  animation: fadeInUp 0.5s ease both;
}

.anim-fade-in {
  animation: fadeIn 0.4s ease both;
}

.anim-scale-in {
  animation: scaleIn 0.3s ease both;
}

/* Hero 区域文字动画 */
.hero-title-anim {
  animation: fadeInUp 0.6s ease 0.1s both;
}

.hero-desc-anim {
  animation: fadeInUp 0.6s ease 0.25s both;
}

.hero-actions-anim {
  animation: fadeInUp 0.6s ease 0.4s both;
}

/* ---- Modal 动画 ---- */
@keyframes modalBackdropIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes modalContentIn {
  from {
    opacity: 0;
    transform: scale(0.95) translateY(-10px);
  }
  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

/* ---- Dropdown 动画 ---- */
@keyframes dropdownOpen {
  from {
    opacity: 0;
    transform: translateY(-8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ---- 数字计数动画辅助类 ---- */
.counter-value {
  display: inline-block;
  font-variant-numeric: tabular-nums;
}

/* ---- 旋转加载 ---- */
.spinner {
  width: 20px;
  height: 20px;
  border: 2px solid rgba(255, 255, 255, 0.3);
  border-top-color: #fff;
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
}

/* ---- 减少动画（已在 base.css 全局处理，此处仅作补充） ---- */
@media (prefers-reduced-motion: reduce) {
  .animate-in,
  .animate-fade,
  .animate-slide-left,
  .animate-slide-right,
  .animate-scale,
  .stagger-item {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .anim-fade-in-up,
  .anim-fade-in,
  .anim-scale-in,
  .hero-title-anim,
  .hero-desc-anim,
  .hero-actions-anim {
    animation: none;
  }
}