/* ============================================================
 * 众泰云 Page Transitions CSS
 * 依赖: tokens.css, design-tokens-extended.css
 *
 * 页面级过渡动画系统：
 *   1. 页面进入/离开动画
 *   2. 路由切换淡入淡出
 *   3. 滚动触发动画（Intersection Observer 友好）
 *   4. 视差滚动效果
 *   5. 元素入场动画
 *
 * 所有动画遵循 prefers-reduced-motion 偏好设置。
 * ============================================================ */

/* ============================================================
   1. 页面进入/离开动画
   ============================================================ */

/* 默认页面进入：淡入 + 轻微上移 */
.cl-page-enter {
    animation: cl-page-enter var(--duration-slowest) var(--ease-emphasized);
}

@keyframes cl-page-enter {
    from {
        opacity: 0;
        transform: translateY(12px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* 页面离开：淡出 + 下移 */
.cl-page-leave {
    animation: cl-page-leave var(--duration-slow) var(--ease-in-out) forwards;
}

@keyframes cl-page-leave {
    from {
        opacity: 1;
        transform: translateY(0);
    }
    to {
        opacity: 0;
        transform: translateY(-12px);
    }
}

/* 不同方向的页面进入 */
.cl-page-enter-left {
    animation: cl-page-enter-left var(--duration-slowest) var(--ease-emphasized);
}
@keyframes cl-page-enter-left {
    from { opacity: 0; transform: translateX(-24px); }
    to   { opacity: 1; transform: translateX(0); }
}

.cl-page-enter-right {
    animation: cl-page-enter-right var(--duration-slowest) var(--ease-emphasized);
}
@keyframes cl-page-enter-right {
    from { opacity: 0; transform: translateX(24px); }
    to   { opacity: 1; transform: translateX(0); }
}

.cl-page-enter-scale {
    animation: cl-page-enter-scale var(--duration-slowest) var(--ease-spring);
}
@keyframes cl-page-enter-scale {
    from { opacity: 0; transform: scale(0.96); }
    to   { opacity: 1; transform: scale(1); }
}

/* main 内容区域进入 */
main {
    animation: cl-page-enter var(--duration-slower) var(--ease-out);
}

/* ============================================================
   2. 路由切换淡入淡出
   ============================================================ */

/* 路由容器淡入淡出（配合前端路由或 Turbo/htmx 使用） */
.cl-route-container {
    position: relative;
    min-height: 200px;
}

.cl-route-fade-in {
    animation: cl-route-fade-in var(--duration-slow) var(--ease-default);
}

@keyframes cl-route-fade-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}

.cl-route-fade-out {
    animation: cl-route-fade-out var(--duration-fast) var(--ease-default) forwards;
}

@keyframes cl-route-fade-out {
    from { opacity: 1; }
    to   { opacity: 0; }
}

/* 路由切换时的加载占位 */
.cl-route-loading {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--surface-1);
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--duration-normal) var(--ease-default);
    z-index: var(--z-content);
}

.cl-route-container.is-loading .cl-route-loading {
    opacity: 1;
    pointer-events: auto;
}

/* 顶部进度条（路由切换指示器） */
.cl-route-progress-bar {
    position: fixed;
    top: 0;
    left: 0;
    height: 3px;
    width: 0;
    background: var(--gradient-primary);
    z-index: var(--z-max);
    box-shadow: var(--shadow-glow-brand);
    transition: width var(--duration-slow) var(--ease-out);
    opacity: 0;
}

.cl-route-progress-bar.is-active {
    opacity: 1;
    width: 30%;
    animation: cl-progress-bar-indeterminate var(--duration-1500) ease-in-out infinite;
}

@keyframes cl-progress-bar-indeterminate {
    0%   { width: 0;    left: 0; }
    50%  { width: 50%;  left: 25%; }
    100% { width: 100%; left: 0; }
}

.cl-route-progress-bar.is-complete {
    width: 100%;
    opacity: 0;
    transition: width var(--duration-fast) var(--ease-default),
                opacity var(--duration-slow) var(--ease-default) var(--duration-fast);
}

/* ============================================================
   3. 滚动触发动画（Intersection Observer 友好）
   使用方式：添加 .cl-reveal 类到元素，
   配合 JS IntersectionObserver 添加 .cl-reveal-visible
   ============================================================ */

/* 基础 reveal — 淡入 + 上移 */
.cl-reveal {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity var(--duration-slower) var(--ease-emphasized),
                transform var(--duration-slower) var(--ease-emphasized);
    will-change: opacity, transform;
}
.cl-reveal.cl-reveal-visible {
    opacity: 1;
    transform: translateY(0);
}

/* 从左滑入 */
.cl-reveal-left {
    opacity: 0;
    transform: translateX(-40px);
    transition: opacity var(--duration-slower) var(--ease-emphasized),
                transform var(--duration-slower) var(--ease-emphasized);
}
.cl-reveal-left.cl-reveal-visible {
    opacity: 1;
    transform: translateX(0);
}

/* 从右滑入 */
.cl-reveal-right {
    opacity: 0;
    transform: translateX(40px);
    transition: opacity var(--duration-slower) var(--ease-emphasized),
                transform var(--duration-slower) var(--ease-emphasized);
}
.cl-reveal-right.cl-reveal-visible {
    opacity: 1;
    transform: translateX(0);
}

/* 缩放进入 */
.cl-reveal-scale {
    opacity: 0;
    transform: scale(0.9);
    transition: opacity var(--duration-slower) var(--ease-spring),
                transform var(--duration-slower) var(--ease-spring);
}
.cl-reveal-scale.cl-reveal-visible {
    opacity: 1;
    transform: scale(1);
}

/* 翻转进入 */
.cl-reveal-flip {
    opacity: 0;
    transform: perspective(800px) rotateX(-12deg);
    transition: opacity var(--duration-slower) var(--ease-emphasized),
                transform var(--duration-slower) var(--ease-emphasized);
}
.cl-reveal-flip.cl-reveal-visible {
    opacity: 1;
    transform: perspective(800px) rotateX(0);
}

/* 渐变模糊进入 */
.cl-reveal-blur {
    opacity: 0;
    filter: blur(8px);
    transition: opacity var(--duration-slower) var(--ease-emphasized),
                filter var(--duration-slower) var(--ease-emphasized);
}
.cl-reveal-blur.cl-reveal-visible {
    opacity: 1;
    filter: blur(0);
}

/* 交错延迟（用于列表/网格） */
.cl-reveal-delay-1 { transition-delay: var(--duration-60); }
.cl-reveal-delay-2 { transition-delay: var(--duration-120); }
.cl-reveal-delay-3 { transition-delay: var(--duration-180); }
.cl-reveal-delay-4 { transition-delay: var(--duration-240); }
.cl-reveal-delay-5 { transition-delay: var(--duration-slow); }
.cl-reveal-delay-6 { transition-delay: var(--duration-360); }
.cl-reveal-delay-7 { transition-delay: var(--duration-420); }
.cl-reveal-delay-8 { transition-delay: var(--duration-480); }

/* 数据属性方式设置延迟 */
.cl-reveal[data-cl-reveal-delay] {
    transition-delay: attr(data-cl-reveal-delay);
}

/* ============================================================
   4. 视差滚动效果
   使用方式：添加 .cl-parallax 类，通过 data-cl-parallax-speed
   控制速度（0.1 - 0.5），JS 自动监听 scroll 事件
   ============================================================ */

.cl-parallax {
    will-change: transform;
    transition: transform var(--duration-fast) linear;
}

/* 背景视差 */
.cl-parallax-bg {
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

/* 移动端禁用 fixed 背景（性能问题） */
@media (max-width: 768px) {
    .cl-parallax-bg {
        background-attachment: scroll;
    }
}

/* 视差容器 */
.cl-parallax-container {
    position: relative;
    overflow: hidden;
}

.cl-parallax-layer {
    position: absolute;
    inset: -10%;
    will-change: transform;
}

/* ============================================================
   5. 元素入场动画预设
   ============================================================ */

/* 淡入 */
.cl-animate-fade-in {
    animation: cl-fade-in var(--duration-slow) var(--ease-default);
}

@keyframes cl-fade-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* 上滑入场 */
.cl-animate-slide-up {
    animation: cl-slide-up var(--duration-slow) var(--ease-emphasized);
}

@keyframes cl-slide-up {
    from { opacity: 0; transform: translateY(20px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* 下滑入场 */
.cl-animate-slide-down {
    animation: cl-slide-down var(--duration-slow) var(--ease-emphasized);
}

@keyframes cl-slide-down {
    from { opacity: 0; transform: translateY(-20px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* 左滑入场 */
.cl-animate-slide-left {
    animation: cl-slide-left var(--duration-slow) var(--ease-emphasized);
}

@keyframes cl-slide-left {
    from { opacity: 0; transform: translateX(20px); }
    to   { opacity: 1; transform: translateX(0); }
}

/* 右滑入场 */
.cl-animate-slide-right {
    animation: cl-slide-right var(--duration-slow) var(--ease-emphasized);
}

@keyframes cl-slide-right {
    from { opacity: 0; transform: translateX(-20px); }
    to   { opacity: 1; transform: translateX(0); }
}

/* 缩放入场 */
.cl-animate-zoom-in {
    animation: cl-zoom-in var(--duration-slow) var(--ease-spring);
}

@keyframes cl-zoom-in {
    from { opacity: 0; transform: scale(0.85); }
    to   { opacity: 1; transform: scale(1); }
}

/* 弹跳入场 */
.cl-animate-bounce-in {
    animation: cl-bounce-in var(--duration-slowest) var(--ease-bounce);
}

@keyframes cl-bounce-in {
    0%   { opacity: 0; transform: scale(0.3); }
    50%  { opacity: 1; transform: scale(1.05); }
    70%  { transform: scale(0.95); }
    100% { transform: scale(1); }
}

/* 翻转入场 */
.cl-animate-flip-in {
    animation: cl-flip-in var(--duration-slower) var(--ease-emphasized);
    transform-origin: top;
    backface-visibility: hidden;
}

@keyframes cl-flip-in {
    from { opacity: 0; transform: perspective(600px) rotateX(-30deg); }
    to   { opacity: 1; transform: perspective(600px) rotateX(0); }
}

/* 从下方弹出 */
.cl-animate-pop-up {
    animation: cl-pop-up var(--duration-slow) var(--ease-spring);
}

@keyframes cl-pop-up {
    0%   { opacity: 0; transform: translateY(100%) scale(0.8); }
    100% { opacity: 1; transform: translateY(0) scale(1); }
}

/* 文字逐字打字效果 */
.cl-animate-typing {
    overflow: hidden;
    white-space: nowrap;
    border-right: 2px solid var(--color-primary);
    animation: cl-typing var(--duration-2000) steps(30, end) forwards,
               cl-blink-caret var(--duration-750) step-end infinite;
}

@keyframes cl-typing {
    from { width: 0; }
    to   { width: 100%; }
}

@keyframes cl-blink-caret {
    50% { border-color: transparent; }
}

/* ============================================================
   6. 交错入场（用于列表/网格项）
   ============================================================ */

.cl-stagger > * {
    opacity: 0;
    animation: cl-stagger-item var(--duration-slow) var(--ease-emphasized) forwards;
}

.cl-stagger > *:nth-child(1)  { animation-delay: var(--duration-40); }
.cl-stagger > *:nth-child(2)  { animation-delay: var(--duration-instant); }
.cl-stagger > *:nth-child(3)  { animation-delay: var(--duration-120); }
.cl-stagger > *:nth-child(4)  { animation-delay: var(--duration-160); }
.cl-stagger > *:nth-child(5)  { animation-delay: var(--duration-normal); }
.cl-stagger > *:nth-child(6)  { animation-delay: var(--duration-240); }
.cl-stagger > *:nth-child(7)  { animation-delay: var(--duration-280); }
.cl-stagger > *:nth-child(8)  { animation-delay: var(--duration-320); }
.cl-stagger > *:nth-child(9)  { animation-delay: var(--duration-360); }
.cl-stagger > *:nth-child(10) { animation-delay: var(--duration-slower); }
.cl-stagger > *:nth-child(11) { animation-delay: var(--duration-440); }
.cl-stagger > *:nth-child(12) { animation-delay: var(--duration-480); }

@keyframes cl-stagger-item {
    from { opacity: 0; transform: translateY(16px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ============================================================
   7. 页面级过渡辅助类
   ============================================================ */

/* 页面标题入场 */
.cl-page-title-enter {
    animation: cl-slide-up var(--duration-slow) var(--ease-emphasized);
}

/* 面包屑入场 */
.cl-breadcrumb-enter {
    animation: cl-fade-in var(--duration-normal) var(--ease-default);
    animation-delay: var(--duration-fast);
    animation-fill-mode: both;
}

/* 卡片网格入场 */
.cl-card-grid-enter > * {
    opacity: 0;
    animation: cl-card-enter var(--duration-slower) var(--ease-emphasized) forwards;
}

.cl-card-grid-enter > *:nth-child(1)  { animation-delay: var(--duration-50); }
.cl-card-grid-enter > *:nth-child(2)  { animation-delay: var(--duration-fast); }
.cl-card-grid-enter > *:nth-child(3)  { animation-delay: var(--duration-150); }
.cl-card-grid-enter > *:nth-child(4)  { animation-delay: var(--duration-normal); }
.cl-card-grid-enter > *:nth-child(5)  { animation-delay: var(--duration-250); }
.cl-card-grid-enter > *:nth-child(6)  { animation-delay: var(--duration-slow); }
.cl-card-grid-enter > *:nth-child(7)  { animation-delay: var(--duration-350); }
.cl-card-grid-enter > *:nth-child(8)  { animation-delay: var(--duration-slower); }
.cl-card-grid-enter > *:nth-child(9)  { animation-delay: var(--duration-450); }
.cl-card-grid-enter > *:nth-child(10) { animation-delay: var(--duration-500); }
.cl-card-grid-enter > *:nth-child(11) { animation-delay: var(--duration-550); }
.cl-card-grid-enter > *:nth-child(12) { animation-delay: var(--duration-slowest); }

@keyframes cl-card-enter {
    from {
        opacity: 0;
        transform: translateY(24px) scale(0.96);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* 表格行入场 */
.cl-table-row-enter tr {
    animation: cl-row-enter var(--duration-normal) var(--ease-default);
}

@keyframes cl-row-enter {
    from { opacity: 0; transform: translateX(-8px); }
    to   { opacity: 1; transform: translateX(0); }
}

/* ============================================================
   8. 滚动进度指示器
   ============================================================ */

.cl-scroll-progress {
    position: fixed;
    top: 0;
    left: 0;
    height: 3px;
    background: var(--gradient-primary);
    z-index: var(--z-max);
    width: 0%;
    transition: width var(--duration-fast) linear;
    box-shadow: 0 0 8px rgba(8, 145, 178, 0.3);
}

/* ============================================================
   9. 页面过渡遮罩
   ============================================================ */

.cl-page-overlay {
    position: fixed;
    inset: 0;
    background-color: var(--surface-1);
    z-index: var(--z-fullscreen);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--duration-slow) var(--ease-default),
                visibility var(--duration-slow);
}

.cl-page-overlay.is-visible {
    opacity: 1;
    visibility: visible;
}

/* ============================================================
   10. 减弱动画偏好
   ============================================================ */

@media (prefers-reduced-motion: reduce) {
    .cl-page-enter,
    .cl-page-leave,
    .cl-page-enter-left,
    .cl-page-enter-right,
    .cl-page-enter-scale,
    .cl-route-fade-in,
    .cl-route-fade-out,
    .cl-reveal,
    .cl-reveal-left,
    .cl-reveal-right,
    .cl-reveal-scale,
    .cl-reveal-flip,
    .cl-reveal-blur,
    .cl-animate-fade-in,
    .cl-animate-slide-up,
    .cl-animate-slide-down,
    .cl-animate-slide-left,
    .cl-animate-slide-right,
    .cl-animate-zoom-in,
    .cl-animate-bounce-in,
    .cl-animate-flip-in,
    .cl-animate-pop-up,
    .cl-animate-typing,
    .cl-stagger > *,
    .cl-card-grid-enter > *,
    .cl-table-row-enter tr,
    main {
        animation: none !important;
        transition: none !important;
        opacity: 1 !important;
        transform: none !important;
        filter: none !important;
    }

    .cl-parallax {
        transform: none !important;
    }

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