/* ==========================================================================
 * scrollAnimation.css v2.0
 * 滚动页面动画效果样式 — 与 scrollAnimation.js 配套
 *
 * 包含:
 *   1. ScrollReveal 基础样式 (.wow / .animated)
 *   2. 常用动画关键帧 (fadeIn, fadeInUp, slideInLeft, zoomIn, pulse...)
 *   3. SwiperAnimate 样式 (.ani)
 *   4. Parallax 视差样式优化
 *   5. 性能优化 & 无障碍
 *
 * 原始依赖 animate.css — 如果已引入 animate.css，可以只用本文件的「基础样式」部分，
 * 注释掉「动画关键帧」部分避免重复。
 * ========================================================================== */


/* ==========================================================================
   一、ScrollReveal 基础样式 (.wow)
   ========================================================================== */

/* 未触发前的状态 — 隐藏元素，JS 通过行内样式禁用动画 */
.wow {
    visibility: hidden;
}

/* 动画触发后 — JS 会清除行内的 animation-name:none，让类定义的动画生效 */
.wow.animated {
    visibility: visible;
    animation-fill-mode: both;
    /* 保持动画结束状态 */
}

/* 已触发过的元素保持可见 */
.wow.animated:not([data-wow-iteration]) {
    /* 单次播放：保持最终帧 */
}

/* 性能优化：提示浏览器准备 GPU 合成层 */
.wow {
    will-change: transform, opacity;
}

.wow.animated {
    will-change: auto;
}

/* 移动端适当降低动画复杂度 */
@media (max-width: 768px) {
    .wow {
        animation-duration: 0.5s !important;
        /* 移动端缩短动画 */
    }
}


/* ==========================================================================
   二、常用动画关键帧 (不依赖 animate.css 时可使用)
   如果页面已引入 animate.css，可以删除此段避免冲突。
   ========================================================================== */

/* -- 淡入系列 -- */

@keyframes fadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}
.fadeIn {
    animation-name: fadeIn;
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translate3d(0, 40px, 0);
    }
    to {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
}
.fadeInUp {
    animation-name: fadeInUp;
}

@keyframes fadeInDown {
    from {
        opacity: 0;
        transform: translate3d(0, -40px, 0);
    }
    to {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
}
.fadeInDown {
    animation-name: fadeInDown;
}

@keyframes fadeInLeft {
    from {
        opacity: 0;
        transform: translate3d(-60px, 0, 0);
    }
    to {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
}
.fadeInLeft {
    animation-name: fadeInLeft;
}

@keyframes fadeInRight {
    from {
        opacity: 0;
        transform: translate3d(60px, 0, 0);
    }
    to {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
}
.fadeInRight {
    animation-name: fadeInRight;
}

/* -- 滑入系列 -- */

@keyframes slideInUp {
    from {
        transform: translate3d(0, 100%, 0);
        visibility: visible;
    }
    to {
        transform: translate3d(0, 0, 0);
    }
}
.slideInUp {
    animation-name: slideInUp;
}

@keyframes slideInDown {
    from {
        transform: translate3d(0, -100%, 0);
        visibility: visible;
    }
    to {
        transform: translate3d(0, 0, 0);
    }
}
.slideInDown {
    animation-name: slideInDown;
}

@keyframes slideInLeft {
    from {
        transform: translate3d(-100%, 0, 0);
        visibility: visible;
    }
    to {
        transform: translate3d(0, 0, 0);
    }
}
.slideInLeft {
    animation-name: slideInLeft;
}

@keyframes slideInRight {
    from {
        transform: translate3d(100%, 0, 0);
        visibility: visible;
    }
    to {
        transform: translate3d(0, 0, 0);
    }
}
.slideInRight {
    animation-name: slideInRight;
}

/* -- 缩放系列 -- */

@keyframes zoomIn {
    from {
        opacity: 0;
        transform: scale3d(0.3, 0.3, 0.3);
    }
    to {
        opacity: 1;
        transform: scale3d(1, 1, 1);
    }
}
.zoomIn {
    animation-name: zoomIn;
}

@keyframes zoomInUp {
    from {
        opacity: 0;
        transform: scale3d(0.5, 0.5, 0.5) translate3d(0, 40px, 0);
    }
    to {
        opacity: 1;
        transform: scale3d(1, 1, 1) translate3d(0, 0, 0);
    }
}
.zoomInUp {
    animation-name: zoomInUp;
}

/* -- 弹入系列 -- */

@keyframes bounceIn {
    from, 20%, 40%, 60%, 80%, to {
        animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    }
    0% {
        opacity: 0;
        transform: scale3d(0.3, 0.3, 0.3);
    }
    20% {
        transform: scale3d(1.1, 1.1, 1.1);
    }
    40% {
        transform: scale3d(0.9, 0.9, 0.9);
    }
    60% {
        opacity: 1;
        transform: scale3d(1.03, 1.03, 1.03);
    }
    80% {
        transform: scale3d(0.97, 0.97, 0.97);
    }
    to {
        opacity: 1;
        transform: scale3d(1, 1, 1);
    }
}
.bounceIn {
    animation-name: bounceIn;
}

@keyframes bounceInUp {
    from, 60%, 75%, 90%, to {
        animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    }
    from {
        opacity: 0;
        transform: translate3d(0, 60px, 0);
    }
    60% {
        opacity: 1;
        transform: translate3d(0, -20px, 0);
    }
    75% {
        transform: translate3d(0, 10px, 0);
    }
    90% {
        transform: translate3d(0, -5px, 0);
    }
    to {
        transform: translate3d(0, 0, 0);
    }
}
.bounceInUp {
    animation-name: bounceInUp;
}

/* -- 翻转系列 -- */

@keyframes flipInX {
    from {
        transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
        opacity: 0;
    }
    40% {
        transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
    }
    60% {
        transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
        opacity: 1;
    }
    80% {
        transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
    }
    to {
        transform: perspective(400px);
    }
}
.flipInX {
    animation-name: flipInX;
    backface-visibility: visible !important;
}

@keyframes flipInY {
    from {
        transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
        opacity: 0;
    }
    40% {
        transform: perspective(400px) rotate3d(0, 1, 0, -20deg);
    }
    60% {
        transform: perspective(400px) rotate3d(0, 1, 0, 10deg);
        opacity: 1;
    }
    80% {
        transform: perspective(400px) rotate3d(0, 1, 0, -5deg);
    }
    to {
        transform: perspective(400px);
    }
}
.flipInY {
    animation-name: flipInY;
    backface-visibility: visible !important;
}

/* -- 脉冲 -- */

@keyframes pulse {
    from { transform: scale3d(1, 1, 1); }
    50%  { transform: scale3d(1.05, 1.05, 1.05); }
    to   { transform: scale3d(1, 1, 1); }
}
.pulse {
    animation-name: pulse;
}

/* -- 摇摆 -- */

@keyframes swing {
    20%  { transform: rotate3d(0, 0, 1, 15deg); }
    40%  { transform: rotate3d(0, 0, 1, -10deg); }
    60%  { transform: rotate3d(0, 0, 1, 5deg); }
    80%  { transform: rotate3d(0, 0, 1, -5deg); }
    to   { transform: rotate3d(0, 0, 1, 0deg); }
}
.swing {
    animation-name: swing;
    transform-origin: top center;
}

/* -- 闪烁 -- */

@keyframes flash {
    from, 50%, to { opacity: 1; }
    25%, 75%      { opacity: 0; }
}
.flash {
    animation-name: flash;
}


/* ==========================================================================
   三、通用动画属性
   ========================================================================== */

/* 默认动画时长 */
.animated {
    animation-duration: 1s;
    animation-fill-mode: both;
}

/* 快速动画 */
.animated.fast {
    animation-duration: 0.5s;
}

/* 慢速动画 */
.animated.slow {
    animation-duration: 1.5s;
}

/* 无限循环 */
.animated.infinite {
    animation-iteration-count: infinite;
}

/* 延迟工具类（不依赖 data-wow-delay 时使用） */
.delay-100  { animation-delay: 0.1s; }
.delay-200  { animation-delay: 0.2s; }
.delay-300  { animation-delay: 0.3s; }
.delay-400  { animation-delay: 0.4s; }
.delay-500  { animation-delay: 0.5s; }
.delay-700  { animation-delay: 0.7s; }
.delay-1000 { animation-delay: 1s; }

/* 持续时间工具类 */
.duration-500  { animation-duration: 0.5s; }
.duration-800  { animation-duration: 0.8s; }
.duration-1000 { animation-duration: 1s; }
.duration-1500 { animation-duration: 1.5s; }
.duration-2000 { animation-duration: 2s; }


/* ==========================================================================
   四、SwiperAnimate 样式 (.ani)
   ========================================================================== */

/* 幻灯片内的动画元素 — 初始隐藏，等 slide 激活时由 JS 触发 */
.ani {
    visibility: hidden;
}

/* 确保 Swiper 容器内动画元素可以正常溢出 */
.swiper-slide .ani {
    backface-visibility: hidden;
}


/* ==========================================================================
   五、Parallax 视差样式优化
   ========================================================================== */

.parallax {
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: scroll;
    /* JS 控制 background-position，这里不需要 fixed */
    overflow: hidden;
    position: relative;
    /* 为 translate3d 模式创建层 */
    will-change: transform;
}

/* 确保视差容器的子元素正确层叠 */
.parallax > * {
    position: relative;
    z-index: 1;
}


/* ==========================================================================
   六、性能优化
   ========================================================================== */

/* 推荐所有动画使用 transform 和 opacity
   这两者只触发 composite，不触发 layout/paint */
.animated,
.ani,
.wow {
    /* 默认使用 GPU 加速 */
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}

/* 减少移动端的动画开销 */
@media (max-width: 768px) {
    .animated {
        animation-duration: 0.5s !important;
    }
}


/* ==========================================================================
   七、无障碍 — 尊重用户偏好
   ========================================================================== */

/* 用户系统开启了「减少动画」时，禁用所有动画 */
@media (prefers-reduced-motion: reduce) {
    .wow,
    .ani,
    .animated,
    .parallax {
        animation: none !important;
        transition: none !important;
        visibility: visible !important;
        transform: none !important;
        will-change: auto !important;
    }

    .parallax {
        background-attachment: scroll !important;
    }
}


/* ==========================================================================
   八、调试工具（开发时使用，生产环境可删除）
   ========================================================================== */

/* 开发时高亮显示 .wow 元素位置 */
/* .wow { outline: 2px dashed rgba(255, 0, 0, 0.3); } */