/* ============================================================
   Premium Animation System — 超越 ChatGPT 的动效层
   众泰云 旗舰级微交互系统

   设计哲学：
   1. Spring Physics — 所有交互用弹簧曲线，不是线性 ease
   2. 涟漪反馈 — 每次点击都有视觉反馈
   3. 视差呼吸 — 元素入场有深度感
   4. 光标跟随 — AI 对话页有动态光标
   5. 骨架屏 — 数据加载有优雅占位

   加载位置：chatgpt-enhanced.css 之后
   ============================================================ */

/* ============================================================
   1. Spring 曲线系统 — 替代所有 transition
   ============================================================ */

:root {
    /* Spring 曲线 — 模拟物理弹簧 */
    --spring-bounce:     cubic-bezier(0.34, 1.56, 0.64, 1);
    --spring-smooth:    cubic-bezier(0.16, 1, 0.3, 1);
    --spring-quick:     cubic-bezier(0.22, 1, 0.36, 1);
    --spring-decel:     cubic-bezier(0, 0.96, 0.21, 1);
    --spring-excite:    cubic-bezier(0.32, 0.72, 0, 1);

    /* 动画时长 */
    --dur-instant:  120ms;
    --dur-fast:     200ms;
    --dur-normal:  320ms;
    --dur-slow:    480ms;
    --dur-page:    640ms;
}

/* ============================================================
   2. 按钮涟漪效果 — Material Design 级点击反馈
   ============================================================ */

.btn,
.btn-primary,
.btn-brand,
.btn-ai,
.btn-secondary,
.btn-ghost,
.auth-submit-btn,
.ai-prompt-card,
.category-card,
.featured-card,
.service-card {
    position: relative !important;
    overflow: hidden !important;
    isolation: isolate;
}

/* 涟漪元素 */
.ripple {
    position: absolute;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.5);
    transform: scale(0);
    animation: ripple-expand var(--duration-slowest) var(--spring-smooth);
    pointer-events: none;
    z-index: 0;
}

.btn-primary .ripple,
.btn-brand .ripple,
.btn-ai .ripple,
.auth-submit-btn .ripple {
    background: rgba(255, 255, 255, 0.4);
}

.btn-ghost .ripple,
.btn-secondary .ripple {
    background: rgba(79, 70, 229, 0.15);
}

.category-card .ripple,
.featured-card .ripple,
.service-card .ripple {
    background: rgba(79, 70, 229, 0.1);
}

@keyframes ripple-expand {
    to {
        transform: scale(4);
        opacity: 0;
    }
}

/* ============================================================
   3. Spring Hover 效果 — 卡片悬浮有弹性
   ============================================================ */

.category-card,
.featured-card,
.service-card,
.article-card {
    transition: transform var(--dur-normal) var(--spring-bounce),
                box-shadow var(--dur-normal) var(--spring-smooth),
                border-color var(--dur-fast) var(--spring-smooth) !important;
    will-change: transform;
}

.category-card:hover,
.featured-card:hover,
.service-card:hover,
.article-card:hover {
    transform: translateY(-6px) scale(1.02) !important;
}

.category-card:active,
.featured-card:active,
.service-card:active,
.article-card:active {
    transform: translateY(-2px) scale(0.99) !important;
    transition: transform var(--dur-instant) var(--spring-quick) !important;
}

/* 卡片入场动画 */
.category-card,
.featured-card,
.service-card,
.article-card {
    opacity: 0;
    transform: translateY(24px);
    animation: card-enter var(--dur-slow) var(--spring-bounce) forwards;
}

.category-card:nth-child(1) { animation-delay: 0ms; }
.category-card:nth-child(2) { animation-delay: var(--duration-instant); }
.category-card:nth-child(3) { animation-delay: var(--duration-160); }
.category-card:nth-child(4) { animation-delay: var(--duration-240); }
.category-card:nth-child(5) { animation-delay: var(--duration-320); }
.category-card:nth-child(6) { animation-delay: var(--duration-slower); }

.featured-card:nth-child(1) { animation-delay: 0ms; }
.featured-card:nth-child(2) { animation-delay: var(--duration-fast); }
.featured-card:nth-child(3) { animation-delay: var(--duration-normal); }

@keyframes card-enter {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ============================================================
   4. 导航栏滑块指示器 — 平滑跟随当前菜单
   ============================================================ */

.topnav__menu {
    position: relative;
}

.topnav__link::after {
    content: '';
    position: absolute;
    bottom: 2px;
    left: 50%;
    width: 0;
    height: 2px;
    background: var(--color-interactive);
    border-radius: 2px;
    transform: translateX(-50%);
    transition: width var(--dur-normal) var(--spring-bounce);
}

.topnav__link:hover::after,
.topnav__link.active::after {
    width: 60%;
}

/* ============================================================
   5. Hero 区域视差 + 呼吸效果
   ============================================================ */

.hero__gradient {
    animation: hero-breathe var(--duration-8000) ease-in-out infinite;
}

@keyframes hero-breathe {
    0%, 100% {
        transform: translateX(-50%) scale(1);
        opacity: 1;
    }
    50% {
        transform: translateX(-50%) scale(1.08);
        opacity: 0.85;
    }
}

.hero__title {
    animation: title-rise var(--dur-page) var(--spring-excite) forwards;
}

.hero__subtitle {
    animation: title-rise var(--dur-page) var(--spring-excite) var(--duration-fast) forwards;
    opacity: 0;
}

.hero__features {
    animation: title-rise var(--dur-page) var(--spring-excite) var(--duration-normal) forwards;
    opacity: 0;
}

.hero__actions {
    animation: title-rise var(--dur-page) var(--spring-excite) var(--duration-slow) forwards;
    opacity: 0;
}

@keyframes title-rise {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Hero 网格图案视差 */
.hero__grid-pattern {
    animation: grid-drift var(--duration-20000) linear infinite;
}

@keyframes grid-drift {
    from { background-position: 0 0; }
    to { background-position: 56px 56px; }
}

/* ============================================================
   6. 按钮按压效果 — 物理感
   ============================================================ */

.btn,
.auth-submit-btn,
.ai-prompt-card,
.ai-new-chat-btn,
.auth-sms-btn {
    transition: transform var(--dur-fast) var(--spring-quick),
                box-shadow var(--dur-fast) var(--spring-smooth),
                background-color var(--dur-fast) var(--spring-smooth),
                border-color var(--dur-fast) var(--spring-smooth) !important;
}

.btn-primary:active,
.btn-brand:active,
.btn-ai:active,
.auth-submit-btn:active {
    transform: scale(0.97) !important;
    transition: transform var(--dur-instant) var(--spring-quick) !important;
}

/* ============================================================
   7. 主题切换动画 — 圆形扩散
   ============================================================ */

.theme-transition {
    position: fixed;
    border-radius: 50%;
    pointer-events: none;
    z-index: 99999;
    transition: clip-path var(--dur-slow) var(--spring-smooth);
}

/* ============================================================
   8. 输入框聚焦光效 — 动态边框
   ============================================================ */

.auth-field__input,
.ai-conv-search,
textarea.ai-chat-input-ds,
.topnav__search-inner {
    transition: border-color var(--dur-fast) var(--spring-smooth),
                box-shadow var(--dur-normal) var(--spring-bounce),
                background-color var(--dur-fast) var(--spring-smooth) !important;
}

.auth-field__input:focus,
.ai-conv-search:focus {
    animation: input-glow var(--dur-slow) var(--spring-smooth);
}

@keyframes input-glow {
    0% {
        box-shadow: 0 0 0 0 rgba(79, 70, 229, 0);
    }
    50% {
        box-shadow: 0 0 0 6px rgba(79, 70, 229, 0.15);
    }
    100% {
        box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.12);
    }
}

/* ============================================================
   9. 骨架屏 Loading 系统
   ============================================================ */

.skeleton {
    background: linear-gradient(
        90deg,
        var(--color-bg-hover) 25%,
        var(--color-bg-subtle) 50%,
        var(--color-bg-hover) 75%
    ) !important;
    background-size: 200% 100% !important;
    animation: skeleton-shimmer var(--duration-1500) infinite linear;
    border-radius: 8px;
    overflow: hidden;
    position: relative;
}

.skeleton::after {
    content: '';
    position: absolute;
    inset: 0;
    background: inherit;
    filter: blur(8px);
    opacity: 0.5;
}

.skeleton-text {
    height: 14px;
    margin-bottom: 8px;
    border-radius: 4px;
}

.skeleton-text--lg {
    height: 20px;
}

.skeleton-text--sm {
    height: 10px;
    width: 60%;
}

.skeleton-card {
    height: 200px;
    border-radius: 16px;
}

.skeleton-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
}

.skeleton-button {
    height: 40px;
    width: 120px;
    border-radius: 10px;
}

@keyframes skeleton-shimmer {
    0% {
        background-position: 200% 0;
    }
    100% {
        background-position: -200% 0;
    }
}

/* 页面加载骨架 */
.page-skeleton {
    padding: 80px 24px;
    max-width: 1200px;
    margin: 0 auto;
}

.page-skeleton__header {
    height: 48px;
    width: 320px;
    margin: 0 auto 32px;
}

.page-skeleton__grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}

@media (max-width: 768px) {
    .page-skeleton__grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 480px) {
    .page-skeleton__grid {
        grid-template-columns: 1fr;
    }
}

/* ============================================================
   10. AI 对话页 — 流式打字机效果
   ============================================================ */

.ai-msg-text--streaming {
    position: relative;
}

.ai-msg-text--streaming::after {
    content: '▊';
    display: inline-block;
    margin-left: 2px;
    color: var(--color-interactive);
    animation: cursor-blink var(--duration-800) steps(2) infinite;
    font-weight: 300;
}

@keyframes cursor-blink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0; }
}

/* 消息入场动画 */
.ai-msg-user,
.ai-msg-assistant {
    animation: msg-slide-in var(--dur-normal) var(--spring-bounce) forwards;
    opacity: 0;
}

.ai-msg-user {
    transform-origin: right center;
    animation-name: msg-slide-in-right;
}

.ai-msg-assistant {
    transform-origin: left center;
    animation-name: msg-slide-in-left;
}

@keyframes msg-slide-in-right {
    from {
        opacity: 0;
        transform: translateX(16px) scale(0.96);
    }
    to {
        opacity: 1;
        transform: translateX(0) scale(1);
    }
}

@keyframes msg-slide-in-left {
    from {
        opacity: 0;
        transform: translateX(-16px) scale(0.96);
    }
    to {
        opacity: 1;
        transform: translateX(0) scale(1);
    }
}

/* AI 思考动画 */
.ai-thinking {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 0;
}

.ai-thinking__dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--color-text-muted);
    animation: thinking-bounce var(--duration-1400) infinite ease-in-out both;
}

.ai-thinking__dot:nth-child(1) { animation-delay: calc(-1 * var(--duration-320)); }
.ai-thinking__dot:nth-child(2) { animation-delay: calc(-1 * var(--duration-160)); }

@keyframes thinking-bounce {
    0%, 80%, 100% {
        transform: scale(0.6);
        opacity: 0.4;
    }
    40% {
        transform: scale(1);
        opacity: 1;
    }
}

/* ============================================================
   11. 数字滚动动画 — Trust Bar 数据动态增长
   ============================================================ */

.trust-bar__num {
    animation: count-up var(--dur-page) var(--spring-excite) forwards;
}

@keyframes count-up {
    from {
        opacity: 0;
        transform: translateY(12px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ============================================================
   12. CTA 区域 — 光效流动
   ============================================================ */

.cta,
.cta-section {
    position: relative;
    overflow: hidden;
}

.cta::after,
.cta-section::after {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: linear-gradient(
        45deg,
        transparent 30%,
        rgba(79, 70, 229, 0.1) 50%,
        transparent 70%
    );
    animation: cta-shimmer var(--duration-6000) linear infinite;
    pointer-events: none;
}

@keyframes cta-shimmer {
    from { transform: translateX(-30%) translateY(-30%); }
    to { transform: translateX(30%) translateY(30%); }
}

/* ============================================================
   13. 暗色模式专属动画优化
   ============================================================ */

[data-theme="dark"] .hero__gradient {
    opacity: 0.6;
}

[data-theme="dark"] .hero__grid-pattern {
    opacity: 0.4;
}

[data-theme="dark"] .skeleton {
    background: linear-gradient(
        90deg,
        rgba(255, 255, 255, 0.04) 25%,
        rgba(255, 255, 255, 0.08) 50%,
        rgba(255, 255, 255, 0.04) 75%
    ) !important;
    background-size: 200% 100% !important;
}

[data-theme="dark"] .ripple {
    background: rgba(255, 255, 255, 0.15);
}

/* ============================================================
   14. 页面切换过渡 — 淡入淡出
   ============================================================ */

.page-transition {
    animation: page-fade-in var(--dur-normal) var(--spring-smooth) forwards;
}

@keyframes page-fade-in {
    from {
        opacity: 0;
        transform: translateY(8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ============================================================
   15. 滚动揭示动画 — Intersection Observer 触发
   ============================================================ */

.reveal {
    opacity: 0;
    transform: translateY(32px);
    transition: opacity var(--dur-slow) var(--spring-smooth),
                transform var(--dur-slow) var(--spring-bounce);
}

.reveal--visible {
    opacity: 1;
    transform: translateY(0);
}

.reveal--left {
    transform: translateX(-32px);
}

.reveal--right {
    transform: translateX(32px);
}

.reveal--scale {
    transform: scale(0.92);
}

.reveal--left.reveal--visible,
.reveal--right.reveal--visible {
    transform: translateX(0);
}

.reveal--scale.reveal--visible {
    transform: scale(1);
}

/* ============================================================
   16. 移动端手势交互基础
   ============================================================ */

.swipeable {
    touch-action: pan-y;
    transition: transform var(--dur-normal) var(--spring-bounce);
    will-change: transform;
}

.swipeable--swiping {
    transition: none;
}

.swipeable--left {
    transform: translateX(-80px);
}

.swipeable--right {
    transform: translateX(80px);
}

/* 长按反馈 */
.long-pressable {
    transition: transform var(--dur-fast) var(--spring-smooth);
}

.long-pressable--pressed {
    transform: scale(0.95);
    transition: transform var(--duration-slower) var(--spring-bounce);
}

/* ============================================================
   17. Focus 环 — 无障碍焦点指示
   ============================================================ */

*:focus-visible {
    outline: 2px solid var(--color-interactive);
    outline-offset: 2px;
    border-radius: 4px;
    transition: outline-offset var(--dur-fast) var(--spring-quick);
}

.btn:focus-visible,
.auth-submit-btn:focus-visible,
.auth-field__input:focus-visible {
    outline: 2px solid var(--color-interactive);
    outline-offset: 3px;
}

/* ============================================================
   18. 加载状态按钮 — Spinner
   ============================================================ */

.btn--loading,
.auth-submit-btn--loading {
    pointer-events: none;
    position: relative;
}

.btn--loading::before,
.auth-submit-btn--loading::before {
    content: '';
    position: absolute;
    width: 16px;
    height: 16px;
    border: 2px solid currentColor;
    border-bottom-color: transparent;
    border-radius: 50%;
    animation: btn-spinner var(--duration-slowest) linear infinite;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

@keyframes btn-spinner {
    to { transform: translate(-50%, -50%) rotate(360deg); }
}

/* ============================================================
   19. 减少动画偏好 — 尊重用户设置
   ============================================================ */

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }

    .hero__gradient,
    .hero__grid-pattern,
    .cta::after,
    .cta-section::after {
        animation: none !important;
    }
}