/* ============================================================
   Motion 动效层 v1.0
   滚动揭示 · 转场 · 涟漪 · 微交互（配合 js/motion.js）
   ============================================================ */

/* ===== 滚动揭示 ===== */
[data-reveal] {
    opacity: 0;
    transform: translateY(22px);
    transition: opacity .62s cubic-bezier(.16, 1, .3, 1), transform .62s cubic-bezier(.16, 1, .3, 1);
    will-change: opacity, transform;
}
[data-reveal].is-revealed {
    opacity: 1;
    transform: none;
    will-change: auto;
}
.video-card[data-reveal] { transform: translateY(20px) scale(.97); }
.video-card[data-reveal].is-revealed { transform: none; }
.row-card[data-reveal] { transform: translateX(16px); }
.row-card[data-reveal].is-revealed { transform: none; }

/* ===== 页面转场 ===== */
body {
    opacity: 1;
    transition: opacity .22s cubic-bezier(.4, 0, .2, 1);
}
html.motion-ready body:not(.page-entered) { opacity: 0; }
body.page-leaving { opacity: 0; transition: opacity .19s cubic-bezier(.4, 0, .2, 1); }

/* ===== 涟漪 ===== */
.motion-ripple {
    position: absolute;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255,255,255,.32) 0%, rgba(255,255,255,0) 70%);
    transform: scale(0);
    animation: rippleExpand .6s cubic-bezier(.16, 1, .3, 1) forwards;
    pointer-events: none;
    z-index: 3;
}
@keyframes rippleExpand {
    to { transform: scale(1); opacity: 0; }
}

/* ===== 卡片交互强化 ===== */
.video-card {
    transition: transform .34s cubic-bezier(.16, 1, .3, 1),
                box-shadow .34s cubic-bezier(.16, 1, .3, 1);
    will-change: transform;
}
.video-card:hover {
    box-shadow: 0 18px 42px rgba(0,0,0,.55), 0 0 0 1px rgba(232,25,44,.28);
}
.video-card .video-cover img {
    transition: transform .5s cubic-bezier(.16, 1, .3, 1), filter .4s ease;
}
.video-card:hover .video-cover img { transform: scale(1.07); }

.video-card .play-overlay {
    opacity: 0;
    transform: scale(.82);
    transition: opacity .28s cubic-bezier(.16, 1, .3, 1), transform .34s cubic-bezier(.175, .885, .32, 1.275);
}
.video-card:hover .play-overlay { opacity: 1; transform: scale(1); }

/* ===== 顶栏滚动状态 ===== */
.header, .site-header, .top-nav {
    transition: background .34s cubic-bezier(.4, 0, .2, 1),
                backdrop-filter .34s ease,
                box-shadow .34s ease,
                transform .34s cubic-bezier(.4, 0, .2, 1),
                padding .3s ease;
}
.header.is-scrolled, .site-header.is-scrolled, .top-nav.is-scrolled {
    background: rgba(7, 7, 9, .86) !important;
    backdrop-filter: blur(20px) saturate(1.5);
    -webkit-backdrop-filter: blur(20px) saturate(1.5);
    box-shadow: 0 8px 30px rgba(0,0,0,.45);
}
.header.is-hidden, .site-header.is-hidden, .top-nav.is-hidden { transform: translateY(-102%); }

/* ===== 图片渐显 ===== */
.img-fade { opacity: 0; transition: opacity .5s cubic-bezier(.4, 0, .2, 1); }
.img-fade.img-loaded { opacity: 1; }

/* ===== 分类/选集 微交互 ===== */
.category-item, .episode-item {
    transition: transform .22s cubic-bezier(.16, 1, .3, 1),
                background .22s ease, color .22s ease, box-shadow .22s ease;
}
.category-item:hover, .episode-item:hover { transform: translateY(-2px); }
.category-item:active, .episode-item:active { transform: scale(.96); }

/* ===== 按钮统一微交互 ===== */
.btn-primary, .btn-shimmer, .search-btn, .hero-search-btn {
    transition: transform .24s cubic-bezier(.16, 1, .3, 1),
                box-shadow .3s ease, filter .24s ease;
}
.btn-primary:hover, .btn-shimmer:hover, .hero-search-btn:hover {
    transform: translateY(-2px) scale(1.02);
    box-shadow: 0 12px 32px rgba(232,25,44,.4);
}
.btn-primary:active, .btn-shimmer:active { transform: scale(.97); }

/* ===== 骨架屏呼吸 ===== */
.skeleton-card, .skeleton {
    animation: skeletonBreath 1.5s cubic-bezier(.4, 0, .2, 1) infinite;
}
@keyframes skeletonBreath {
    0%, 100% { opacity: .55; }
    50% { opacity: .92; }
}

/* ===== 滚动条美化（桌面） ===== */
@media (hover: hover) and (pointer: fine) {
    ::-webkit-scrollbar { width: 10px; height: 10px; }
    ::-webkit-scrollbar-track { background: rgba(255,255,255,.03); }
    ::-webkit-scrollbar-thumb {
        background: linear-gradient(180deg, rgba(232,25,44,.55), rgba(232,25,44,.28));
        border-radius: 6px;
        border: 2px solid transparent;
        background-clip: padding-box;
    }
    ::-webkit-scrollbar-thumb:hover { background: rgba(232,25,44,.75); background-clip: padding-box; }
}

/* ===== 模态弹窗灵动 ===== */
.modal-overlay, .auth-modal, .modal {
    animation: modalFadeIn .26s cubic-bezier(.16, 1, .3, 1);
}
@keyframes modalFadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}
.modal-content, .auth-content, .modal-box {
    animation: modalPopIn .38s cubic-bezier(.175, .885, .32, 1.275);
}
@keyframes modalPopIn {
    from { opacity: 0; transform: translateY(18px) scale(.96); }
    to { opacity: 1; transform: none; }
}

/* ===== Toast 灵动 ===== */
.toast {
    animation: toastSlide .42s cubic-bezier(.175, .885, .32, 1.275);
}
@keyframes toastSlide {
    from { opacity: 0; transform: translateY(22px) scale(.94); }
    to { opacity: 1; transform: none; }
}

/* ===== 滚动行 ===== */
.row-scroller {
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
}
.row-scroller::-webkit-scrollbar { height: 0; }

/* ===== 焦点可达性 ===== */
:focus-visible {
    outline: 2px solid rgba(232,25,44,.7);
    outline-offset: 2px;
    border-radius: 4px;
}

/* ===== 骨架屏 ===== */
.skeleton-card {
    background: linear-gradient(160deg, #17171e, #101015);
    border-radius: 12px;
    overflow: hidden;
    position: relative;
}
.skeleton-card::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.06), transparent);
    transform: translateX(-100%);
    animation: skeletonSweep 1.6s cubic-bezier(.4, 0, .2, 1) infinite;
}
@keyframes skeletonSweep {
    to { transform: translateX(100%); }
}

/* ===== 网络状态横幅 ===== */
.net-banner {
    position: fixed;
    left: 50%;
    bottom: 26px;
    transform: translate(-50%, 20px) scale(.96);
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 10px 20px;
    background: rgba(20, 20, 26, .94);
    border: 1px solid rgba(232, 25, 44, .35);
    border-radius: 999px;
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    box-shadow: 0 14px 40px rgba(0,0,0,.5);
    color: #f4f4f6;
    font-size: 13px;
    z-index: 99999;
    opacity: 0;
    pointer-events: none;
    transition: opacity .34s cubic-bezier(.16,1,.3,1), transform .42s cubic-bezier(.175,.885,.32,1.275);
}
.net-banner.is-visible { opacity: 1; transform: translate(-50%, 0) scale(1); }
.net-banner.is-ok { border-color: rgba(46, 204, 113, .5); }
.net-dot {
    width: 8px; height: 8px; border-radius: 50%;
    background: #e8192c;
    box-shadow: 0 0 10px rgba(232,25,44,.8);
    animation: netPulse 1.3s cubic-bezier(.4,0,.2,1) infinite;
    flex-shrink: 0;
}
.net-banner.is-ok .net-dot {
    background: #2ecc71;
    box-shadow: 0 0 10px rgba(46,204,113,.8);
    animation: none;
}
@keyframes netPulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: .45; transform: scale(.82); }
}

/* ===== 减少动效偏好 ===== */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
        scroll-behavior: auto !important;
    }
    [data-reveal] { opacity: 1 !important; transform: none !important; }
    body { opacity: 1 !important; }
}