/* Page transition animations with Swup - Enhanced version inspired by yukina */

/* 主要内容区域的过渡动画 - 参考yukina的侧滑效果 */
.transition-main {
    transition:
        opacity 300ms cubic-bezier(0.25, 0.46, 0.45, 0.94),
        translate 300ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* 离开动画 - 内容向右上滑出并淡出 */
.transition-leaving {
    transition:
        translate 300ms cubic-bezier(0.55, 0.055, 0.675, 0.19),
        opacity 300ms cubic-bezier(0.55, 0.055, 0.675, 0.19);
}

html.is-changing .transition-main {
    transition:
        opacity 300ms cubic-bezier(0.25, 0.46, 0.45, 0.94),
        translate 300ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

html.is-leaving .transition-main {
    transition:
        opacity 300ms cubic-bezier(0.55, 0.055, 0.675, 0.19),
        translate 300ms cubic-bezier(0.55, 0.055, 0.675, 0.19);
}

/* 进入动画 - 从右下角轻微滑入，模仿yukina效果 */
html.is-animating .transition-main {
    opacity: 0;
    translate: 0.5rem 1.5rem;
}

/* 离开动画 - 向左上角滑出 */
html.is-animating.is-leaving .transition-leaving {
    translate: -0.5rem -1rem;
    opacity: 0;
}

/* Swup fade 动画 - 保持兼容性 */
html.is-changing .transition-swup-fade {
    transition: all 300ms ease-out;
}

html.is-animating .transition-swup-fade {
    opacity: 0;
    translate: 0 1.5rem;
}

/* Loading 状态下禁止滚动 */
html.is-loading {
    overflow: hidden;
}

/* 淡入动画 */
@keyframes fade-in-up {
    from {
        opacity: 0;
        translate: 0 1.5rem;
    }
    to {
        opacity: 1;
        translate: 0 0;
    }
}
@keyframes fade-in-down {
    from {
        opacity: 0;
        translate: 0 -1.5rem;
    }
    to {
        opacity: 1;
        translate: 0 0;
    }
}
/* 淡出动画 */
@keyframes fade-out-down {
    from {
        opacity: 1;
        translate: 0 0;
    }
    to {
        opacity: 0;
        translate: 0 -1.5rem;
    }
}

/* 隐藏页面加载动画 */
.onload-animation-up, .onload-animation-down {
    opacity: 0;
}
/* 动画结束后或在非加载/非初始动画状态下保持可见 */
html:not(.is-loading):not(.show-initial-animation) :is(.onload-animation-up, .onload-animation-down) {
    opacity: 1;
}
/* 初始加载动画，仅在 .show-initial-animation 存在时触发以避免与 Swup 自身的过渡动画冲突 */
.show-initial-animation .onload-animation-up {
    animation: fade-in-up 600ms ease-out forwards;
}
.show-initial-animation .onload-animation-down {
    animation: fade-in-down 600ms ease-out forwards;
}
/* 渐进式动画延迟 - 仅在初始加载时应用 */
.show-initial-animation :is(.onload-animation-up, .onload-animation-down):nth-child(1) { animation-delay: 0ms; }
.show-initial-animation :is(.onload-animation-up, .onload-animation-down):nth-child(2) { animation-delay: 150ms; }
.show-initial-animation :is(.onload-animation-up, .onload-animation-down):nth-child(3) { animation-delay: 300ms; }
.show-initial-animation :is(.onload-animation-up, .onload-animation-down):nth-child(4) { animation-delay: 450ms; }
.show-initial-animation :is(.onload-animation-up, .onload-animation-down):nth-child(5) { animation-delay: 600ms; }

/* 特殊元素的动画 */
.transition-slide-in {
    opacity: 0;
    translate: 8px 20px;
    transition: all 300ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.transition-slide-in.active {
    opacity: 1;
    translate: 0 0;
}

/* 卡片动画 */
.card-animation {
    opacity: 0;
    translate: 10px 30px;
    scale: 0.98;
    transition: all 300ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.card-animation.visible {
    opacity: 1;
    translate: 0 0;
    scale: 1;
}

/* 导航动画 */
.nav-animation {
    opacity: 0;
    translate: -20px 0;
    transition: all 300ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.nav-animation.loaded {
    opacity: 1;
    translate: 0 0;
}

/* 性能优化 */
.transition-main,
.transition-leaving,
.onload-animation-up,
.onload-animation-down,
.transition-slide-in,
.card-animation {
    backface-visibility: hidden;
    -webkit-font-smoothing: antialiased;
}

/* 响应式调整 */
@media (max-width: 768px) {
    html.is-animating .transition-main {
        translate: 0.3rem 1rem;
    }

    html.is-animating.is-leaving .transition-leaving {
        translate: -0.3rem -0.8rem;
    }

    .transition-slide-in {
        translate: 5px 15px;
    }

    .card-animation {
        translate: 6px 20px;
        scale: 0.99;
    }
}

/* 减少动画的用户偏好设置 */
@media (prefers-reduced-motion: reduce) {
    .transition-main,
    .transition-leaving,
    .onload-animation-up,
    .onload-animation-down,
    .transition-slide-in,
    .card-animation,
    .nav-animation {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}