/* ============================================
   LunarStar Motion Preset System
   全站统一交互动画 token，禁止使用裸 transition:.3s
   ============================================ */

:root {
    /* === Easing Tokens === */
    --ease-standard: cubic-bezier(0.22, 0.61, 0.36, 1);
    --ease-emphasized: cubic-bezier(0.2, 0.8, 0.2, 1);
    --ease-snappy: cubic-bezier(0.34, 1.56, 0.64, 1);
    --ease-decelerate: cubic-bezier(0, 0, 0.2, 1);
    --ease-accelerate: cubic-bezier(0.4, 0, 1, 1);

    /* === Duration Tokens === */
    --duration-instant: 80ms;
    --duration-fast: 160ms;
    --duration-normal: 280ms;
    --duration-slow: 480ms;
    --duration-page: 700ms;
}

/* ========================================
   1. Hover System
   ======================================== */
.ls-hover {
    transition:
        transform var(--duration-normal) var(--ease-standard),
        box-shadow var(--duration-normal) var(--ease-standard),
        border-color var(--duration-normal) var(--ease-standard),
        opacity var(--duration-normal) var(--ease-standard);
}
.ls-hover:hover {
    transform: translateY(-4px) scale(1.015);
    box-shadow: var(--shadow-hover);
}
.ls-hover:active {
    transform: translateY(-1px) scale(0.995);
    transition-duration: var(--duration-instant);
}

/* ========================================
   2. Press Animation
   ======================================== */
.ls-press {
    transition: transform var(--duration-instant) var(--ease-standard);
}
.ls-press:active {
    transform: scale(0.97);
}

/* ========================================
   3. Page Reveal
   ======================================== */
@keyframes pageReveal {
    0% {
        opacity: 0;
        transform: translateY(36px);
        filter: blur(16px);
    }
    100% {
        opacity: 1;
        transform: none;
        filter: none;
    }
}
.page-enter {
    animation: pageReveal var(--duration-page) var(--ease-emphasized) forwards;
}

/* ========================================
   4. Card Cascade Reveal
   ======================================== */
@keyframes cardReveal {
    from {
        opacity: 0;
        transform: translateY(28px) scale(0.96);
        filter: blur(12px);
    }
    to {
        opacity: 1;
        transform: none;
        filter: none;
    }
}
.card-cascade {
    opacity: 0;
    animation: cardReveal 560ms var(--ease-emphasized) forwards;
}

/* ========================================
   5. Glow Interaction (呼吸光)
   ======================================== */
@keyframes glowPulse {
    0%, 100% { opacity: 0.15; }
    50%      { opacity: 0.4; }
}
.ls-glow-hover {
    position: relative;
}
.ls-glow-hover::after {
    content: "";
    position: absolute;
    inset: -1px;
    border-radius: inherit;
    opacity: 0;
    transition: opacity var(--duration-normal) var(--ease-standard);
    pointer-events: none;
    z-index: -1;
    box-shadow: 0 0 20px rgba(214, 178, 86, 0.3), 0 0 40px rgba(214, 178, 86, 0.1);
}
.ls-glow-hover:hover::after {
    opacity: 1;
    animation: glowPulse 2s var(--ease-standard) infinite;
}
.ls-glow-hover:not(:hover)::after {
    animation: none;
}

/* ========================================
   6. Modal Animation
   ======================================== */
@keyframes modalEnter {
    from {
        opacity: 0;
        transform: translateY(20px) scale(0.94);
        filter: blur(8px);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
        filter: blur(0);
    }
}
@keyframes modalExit {
    from {
        opacity: 1;
        transform: translateY(0) scale(1);
        filter: blur(0);
    }
    to {
        opacity: 0;
        transform: translateY(12px) scale(0.96);
        filter: blur(4px);
    }
}
.ls-modal-enter {
    animation: modalEnter 240ms var(--ease-emphasized) forwards;
}
.ls-modal-exit {
    animation: modalExit 200ms var(--ease-accelerate) forwards;
}

/* ========================================
   7. Drawer Animation
   ======================================== */
@keyframes drawerEnter {
    from {
        opacity: 0;
        transform: translateX(40px);
        filter: blur(8px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
        filter: blur(0);
    }
}
@keyframes drawerExit {
    from {
        opacity: 1;
        transform: translateX(0);
        filter: blur(0);
    }
    to {
        opacity: 0;
        transform: translateX(30px);
        filter: blur(4px);
    }
}
.ls-drawer-enter {
    animation: drawerEnter 280ms var(--ease-emphasized) forwards;
}
.ls-drawer-exit {
    animation: drawerExit 200ms var(--ease-accelerate) forwards;
}

/* ========================================
   8. Tooltip Animation
   ======================================== */
@keyframes tooltipEnter {
    from {
        opacity: 0;
        transform: translateY(8px) scale(0.96);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}
.ls-tooltip {
    animation: tooltipEnter 160ms var(--ease-decelerate) forwards;
}

/* ========================================
   9. Loading — LunarStar 专属
   ======================================== */
@keyframes lunarPulse {
    0%, 100% { transform: scale(0.8); opacity: 0.4; }
    50%      { transform: scale(1.1); opacity: 1; }
}
@keyframes lunarRotate {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}
@keyframes starTwinkle {
    0%, 100% { opacity: 0.3; transform: scale(0.6); }
    50%      { opacity: 1; transform: scale(1); }
}
.ls-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 20px;
    padding: 60px 0;
}
.ls-loading-ring {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    border: 2px solid rgba(214, 178, 86, 0.15);
    border-top-color: rgba(214, 178, 86, 0.7);
    animation: lunarRotate 1.2s linear infinite;
}
.ls-loading-dots {
    display: flex;
    gap: 10px;
}
.ls-loading-dots span {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: rgba(214, 178, 86, 0.7);
}
.ls-loading-dots span:nth-child(1) { animation: lunarPulse 1.4s ease-in-out infinite; }
.ls-loading-dots span:nth-child(2) { animation: lunarPulse 1.4s ease-in-out 0.2s infinite; }
.ls-loading-dots span:nth-child(3) { animation: lunarPulse 1.4s ease-in-out 0.4s infinite; }

/* ========================================
   10. Tarot Motion Tokens
   ======================================== */
@keyframes cardFlip {
    0%   { transform: scale(1) rotateY(0deg); filter: brightness(1); }
    50%  { transform: scale(1.08) rotateY(90deg); filter: brightness(1.3); }
    100% { transform: scale(1) rotateY(180deg); filter: brightness(1); }
}
@keyframes particleRise {
    from {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
    to {
        opacity: 0;
        transform: translateY(-60px) scale(0.3);
    }
}
.ls-flip {
    animation: cardFlip 720ms var(--ease-emphasized) forwards;
}

/* ========================================
   11. Scroll Reveal
   ======================================== */
.ls-reveal-scroll {
    opacity: 0;
    transform: translateY(32px);
    filter: blur(8px);
    transition:
        opacity var(--duration-slow) var(--ease-emphasized),
        transform var(--duration-slow) var(--ease-emphasized),
        filter var(--duration-slow) var(--ease-emphasized);
}
.ls-reveal-scroll.revealed {
    opacity: 1;
    transform: translateY(0);
    filter: blur(0);
}