/* ==========================================================================
   FiveM 资源站 — 前台动效系统
   尊重 prefers-reduced-motion；需配合 app.js 的 motion-enabled 类
   ========================================================================== */

:root {
    --motion-fast: 0.15s;
    --motion-normal: 0.28s;
    --motion-slow: 0.45s;
    --motion-slower: 0.65s;
    --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
    --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
    --ease-smooth: cubic-bezier(0.4, 0, 0.2, 1);
}

/* -------------------------------------------------------------------------- */
/* Page & layout entrance                                                     */
/* -------------------------------------------------------------------------- */

html.motion-enabled .site-main {
    animation: motion-page-enter var(--motion-slow) var(--ease-out) both;
}

.site-header {
    transition:
        box-shadow var(--motion-normal) var(--ease-smooth),
        backdrop-filter var(--motion-normal) var(--ease-smooth),
        background-color var(--motion-normal) var(--ease-smooth);
}

.site-header.is-scrolled {
    box-shadow: 0 4px 24px rgba(26, 35, 50, 0.1);
    backdrop-filter: blur(12px);
    background: rgba(255, 255, 255, 0.92);
}

.site-header.is-scrolled .header-top {
    border-bottom-color: transparent;
}

/* -------------------------------------------------------------------------- */
/* Scroll reveal                                                              */
/* -------------------------------------------------------------------------- */

html.motion-enabled [data-reveal] {
    opacity: 0;
    transform: translate3d(0, 20px, 0);
    transition:
        opacity var(--motion-slow) var(--ease-out),
        transform var(--motion-slow) var(--ease-out);
    will-change: opacity, transform;
}

html.motion-enabled [data-reveal="fade"] {
    transform: none;
}

html.motion-enabled [data-reveal="scale"] {
    transform: scale(0.96);
}

html.motion-enabled [data-reveal="left"] {
    transform: translate3d(-20px, 0, 0);
}

html.motion-enabled [data-reveal="right"] {
    transform: translate3d(20px, 0, 0);
}

html.motion-enabled [data-reveal].is-visible {
    opacity: 1;
    transform: none;
}

/* -------------------------------------------------------------------------- */
/* Header interactions                                                        */
/* -------------------------------------------------------------------------- */

.logo {
    transition: transform var(--motion-fast) var(--ease-out);
}

.logo:hover {
    transform: scale(1.02);
}

.logo:active {
    transform: scale(0.98);
}

.site-logo-img {
    transition: transform var(--motion-normal) var(--ease-out);
}

.search-form-main .search-icon {
    transition:
        color var(--motion-fast) var(--ease-out),
        transform var(--motion-fast) var(--ease-out);
}

.search-form-main:focus-within .search-icon {
    color: var(--primary);
    transform: translateY(-50%) scale(1.08);
}

.search-form-main input {
    transition:
        border-color var(--motion-fast) var(--ease-out),
        box-shadow var(--motion-normal) var(--ease-out),
        background var(--motion-fast) var(--ease-out),
        transform var(--motion-fast) var(--ease-out);
}

.search-form-main input:focus {
    transform: translateY(-1px);
}

.main-nav a {
    transition:
        color var(--motion-fast) var(--ease-out),
        background var(--motion-fast) var(--ease-out),
        transform var(--motion-fast) var(--ease-out);
}

.main-nav a:active {
    transform: scale(0.97);
}

.main-nav a.nav-vip {
    position: relative;
}

.main-nav a.nav-vip::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 2px;
    background: transparent;
    transform: none;
    transition: background var(--motion-fast) var(--ease-out);
    pointer-events: none;
}

.main-nav a.nav-vip.is-active::after {
    background: var(--vip);
}

.main-nav a.nav-vip:hover::after {
    transform: none;
}

.user-pill {
    transition:
        transform var(--motion-fast) var(--ease-out),
        box-shadow var(--motion-fast) var(--ease-out),
        background var(--motion-fast) var(--ease-out);
}

.user-pill:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(59, 108, 244, 0.18);
}

.link-muted {
    transition: color var(--motion-fast) var(--ease-out);
}

.header-message-link {
    transition:
        background var(--motion-fast) var(--ease-out),
        color var(--motion-fast) var(--ease-out),
        transform var(--motion-fast) var(--ease-out);
}

.header-message-link:hover {
    transform: translateY(-1px);
}

.header-message-link .header-message-badge {
    animation: motion-badge-pulse 2.4s ease-in-out infinite;
}

/* Hamburger → X */
.nav-toggle {
    transition:
        border-color var(--motion-fast) var(--ease-out),
        background var(--motion-fast) var(--ease-out),
        transform var(--motion-fast) var(--ease-out);
}

.nav-toggle span {
    transition:
        transform var(--motion-normal) var(--ease-out),
        opacity var(--motion-fast) var(--ease-out),
        background var(--motion-fast) var(--ease-out);
    transform-origin: center;
}

.nav-toggle.is-active span:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
}

.nav-toggle.is-active span:nth-child(2) {
    opacity: 0;
    transform: scaleX(0);
}

.nav-toggle.is-active span:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
}

/* -------------------------------------------------------------------------- */
/* Buttons & chips                                                            */
/* -------------------------------------------------------------------------- */

.btn {
    transition:
        background var(--motion-fast) var(--ease-out),
        border-color var(--motion-fast) var(--ease-out),
        color var(--motion-fast) var(--ease-out),
        box-shadow var(--motion-normal) var(--ease-out),
        transform var(--motion-fast) var(--ease-spring);
}

.btn-primary,
.btn-soft {
    position: relative;
    overflow: hidden;
}

.motion-ripple {
    position: absolute;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.38);
    pointer-events: none;
    animation: motion-ripple 0.55s var(--ease-out) forwards;
}

.main-nav a.nav-vip .motion-ripple {
    background: rgba(255, 255, 255, 0.5);
}

@keyframes motion-ripple {
    from {
        transform: scale(0);
        opacity: 0.55;
    }
    to {
        transform: scale(1);
        opacity: 0;
    }
}

.btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(59, 108, 244, 0.32);
}

.btn-primary:active {
    transform: translateY(0) scale(0.98);
}

.btn-soft,
.btn-outline {
    transition:
        background var(--motion-fast) var(--ease-out),
        border-color var(--motion-fast) var(--ease-out),
        color var(--motion-fast) var(--ease-out),
        transform var(--motion-fast) var(--ease-spring),
        box-shadow var(--motion-normal) var(--ease-out);
}

.btn-soft:hover,
.btn-outline:hover {
    transform: translateY(-1px);
}

.btn-soft:active,
.btn-outline:active {
    transform: translateY(0) scale(0.98);
}

.filter-chip {
    transition:
        background var(--motion-fast) var(--ease-out),
        border-color var(--motion-fast) var(--ease-out),
        color var(--motion-fast) var(--ease-out),
        transform var(--motion-fast) var(--ease-spring),
        box-shadow var(--motion-normal) var(--ease-out);
}

.filter-chip:hover:not(.active) {
    transform: translateY(-1px);
    box-shadow: var(--shadow-sm);
}

.filter-chip.active {
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(59, 108, 244, 0.15);
}

.filter-chip:active {
    transform: scale(0.96);
}

/* -------------------------------------------------------------------------- */
/* Cards & media                                                              */
/* -------------------------------------------------------------------------- */

.resource-card,
.category-card,
.uc-stat-card,
.uc-action-card,
.side-panel,
.vip-plan-card {
    transition:
        transform var(--motion-normal) var(--ease-out),
        box-shadow var(--motion-normal) var(--ease-out),
        border-color var(--motion-normal) var(--ease-out);
}

.resource-cover img {
    transition: transform 0.55s var(--ease-out);
}

.resource-card:hover .resource-cover img {
    transform: scale(1.06);
}

.resource-card .badge {
    transition: transform var(--motion-fast) var(--ease-spring);
}

.resource-card:hover .badge {
    transform: scale(1.05);
}

.vip-plan-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-md);
}

.panel-card,
.uc-panel {
    transition: box-shadow var(--motion-normal) var(--ease-out);
}

.panel-card:hover,
.uc-panel:hover {
    box-shadow: var(--shadow-md);
}

.detail-cover {
    overflow: hidden;
}

.detail-cover img {
    transition: transform 0.8s var(--ease-out);
}

.detail-cover:hover img {
    transform: scale(1.03);
}

/* -------------------------------------------------------------------------- */
/* Links & navigation accents                                                 */
/* -------------------------------------------------------------------------- */

.block-head a,
.section-more,
.footer-col-links a,
.side-links a,
.uc-back-link {
    transition:
        color var(--motion-fast) var(--ease-out),
        transform var(--motion-fast) var(--ease-out);
}

.block-head a,
.section-more {
    position: relative;
}

.block-head a::after,
.section-more::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -2px;
    width: 0;
    height: 1.5px;
    background: var(--primary);
    border-radius: 1px;
    transition: width var(--motion-normal) var(--ease-out);
}

.block-head a:hover::after,
.section-more:hover::after {
    width: 100%;
}

.footer-col-links a:hover {
    transform: translateX(4px);
}

.side-links a {
    transition:
        background var(--motion-fast) var(--ease-out),
        color var(--motion-fast) var(--ease-out),
        transform var(--motion-fast) var(--ease-out),
        padding-left var(--motion-normal) var(--ease-out);
}

.side-links a:hover {
    transform: translateX(3px);
}

.resource-breadcrumb a {
    transition: color var(--motion-fast) var(--ease-out);
}

a.tag {
    transition:
        color var(--motion-fast) var(--ease-out),
        border-color var(--motion-fast) var(--ease-out),
        background var(--motion-fast) var(--ease-out),
        transform var(--motion-fast) var(--ease-spring);
}

a.tag:hover {
    transform: translateY(-1px);
}

/* User center nav indicator */
.uc-nav-link {
    position: relative;
    transition:
        background var(--motion-fast) var(--ease-out),
        color var(--motion-fast) var(--ease-out),
        padding-left var(--motion-normal) var(--ease-out);
}

.uc-nav-link::before {
    content: "";
    position: absolute;
    left: 4px;
    top: 50%;
    width: 3px;
    height: 0;
    border-radius: 2px;
    background: var(--primary);
    transform: translateY(-50%);
    transition: height var(--motion-normal) var(--ease-spring);
}

.uc-nav-link.active::before {
    height: 55%;
}

.uc-nav-link:hover {
    padding-left: 16px;
}

.uc-pill {
    transition:
        border-color var(--motion-fast) var(--ease-out),
        background var(--motion-fast) var(--ease-out),
        transform var(--motion-fast) var(--ease-out),
        box-shadow var(--motion-normal) var(--ease-out);
}

.uc-pill:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-sm);
}

/* -------------------------------------------------------------------------- */
/* Pagination & lists                                                         */
/* -------------------------------------------------------------------------- */

.pagination a {
    transition:
        background var(--motion-fast) var(--ease-out),
        border-color var(--motion-fast) var(--ease-out),
        color var(--motion-fast) var(--ease-out),
        transform var(--motion-fast) var(--ease-spring),
        box-shadow var(--motion-normal) var(--ease-out);
}

.pagination a:hover:not(.active) {
    transform: translateY(-2px);
    box-shadow: var(--shadow-sm);
}

.pagination a:active {
    transform: scale(0.94);
}

.message-item-link {
    transition:
        background var(--motion-normal) var(--ease-out),
        padding-left var(--motion-normal) var(--ease-out);
}

.message-item-link:hover {
    background: var(--bg-hover);
    padding-left: 20px;
}

.comment-item {
    transition: background var(--motion-normal) var(--ease-out);
    border-radius: var(--radius-sm);
}

.comment-item:hover {
    background: var(--bg-hover);
}

.uc-recent-list li {
    transition: background var(--motion-fast) var(--ease-out);
}

.uc-recent-list li:hover {
    background: var(--bg-hover);
    border-radius: var(--radius-sm);
}

.wallet-tx-list li,
.wallet-mini-list li {
    transition: background var(--motion-fast) var(--ease-out);
}

.wallet-tx-list li:hover,
.wallet-mini-list li:hover {
    background: var(--bg-hover);
    border-radius: var(--radius-sm);
}

/* -------------------------------------------------------------------------- */
/* Forms & alerts                                                             */
/* -------------------------------------------------------------------------- */

.panel-card input:not([type="checkbox"]):not([type="radio"]),
.panel-card select,
.panel-card textarea,
.pay-form input,
.wallet-form input,
.comment-form textarea {
    transition:
        border-color var(--motion-fast) var(--ease-out),
        box-shadow var(--motion-normal) var(--ease-out),
        background var(--motion-fast) var(--ease-out);
}

.panel-card input:focus,
.panel-card select:focus,
.panel-card textarea:focus,
.pay-form input:focus,
.wallet-form input:focus,
.comment-form textarea:focus {
    border-color: var(--primary-border);
    box-shadow: 0 0 0 3px var(--primary-muted);
}

.alert {
    animation: motion-alert-enter 0.5s var(--ease-out) both;
}

/* -------------------------------------------------------------------------- */
/* Carousel                                                                   */
/* -------------------------------------------------------------------------- */

.carousel-viewport {
    transition: box-shadow var(--motion-normal) var(--ease-out);
}

.carousel-shell:hover .carousel-viewport {
    box-shadow: var(--shadow-md);
}

.carousel-btn {
    opacity: 0;
    transform: translateY(-50%) scale(0.85);
    transition:
        opacity var(--motion-normal) var(--ease-out),
        transform var(--motion-normal) var(--ease-spring),
        background var(--motion-fast) var(--ease-out),
        border-color var(--motion-fast) var(--ease-out);
}

.carousel-shell:hover .carousel-btn,
.carousel-shell:focus-within .carousel-btn {
    opacity: 1;
    transform: translateY(-50%) scale(1);
}

.carousel-btn:hover {
    transform: translateY(-50%) scale(1.08);
}

.carousel-caption {
    opacity: 0;
    transform: translateY(10px);
    transition:
        opacity 0.55s var(--ease-out),
        transform 0.55s var(--ease-out);
}

.carousel-slide.is-active .carousel-caption {
    opacity: 1;
    transform: none;
}

.carousel-dot {
    transition:
        background var(--motion-normal) var(--ease-out),
        width var(--motion-normal) var(--ease-spring),
        transform var(--motion-fast) var(--ease-out);
}

.carousel-dot:hover {
    transform: scaleY(1.4);
}

.carousel-dot.is-active {
    transform: scaleY(1.2);
}

/* -------------------------------------------------------------------------- */
/* Hero banner                                                                */
/* -------------------------------------------------------------------------- */

.hero-banner-inner > div {
    animation: motion-hero-text 0.7s var(--ease-out) 0.1s both;
}

.hero-banner-actions {
    animation: motion-hero-text 0.7s var(--ease-out) 0.22s both;
}

.hero-banner .eyebrow {
    animation: motion-hero-text 0.6s var(--ease-out) both;
}

/* -------------------------------------------------------------------------- */
/* Modals                                                                     */
/* -------------------------------------------------------------------------- */

body.modal-open {
    overflow: hidden;
}

.resource-modal {
    opacity: 0;
    visibility: hidden;
    transform: none;
    transition:
        opacity var(--motion-normal) var(--ease-out),
        visibility var(--motion-normal) var(--ease-out);
}

.resource-modal:not([hidden]) {
    visibility: visible;
}

.resource-modal:not([hidden]):not(.is-open):not(.is-closing) {
    pointer-events: none;
}

.resource-modal.is-open {
    opacity: 1;
    pointer-events: auto;
}

.resource-modal-backdrop {
    opacity: 0;
    transition: opacity var(--motion-normal) var(--ease-out);
}

.resource-modal.is-open .resource-modal-backdrop {
    opacity: 1;
}

.resource-modal-panel {
    opacity: 0;
    transform: translateY(16px) scale(0.97);
    transition:
        opacity var(--motion-normal) var(--ease-out),
        transform var(--motion-normal) var(--ease-spring);
}

.resource-modal.is-open .resource-modal-panel {
    opacity: 1;
    transform: none;
}

.resource-modal.is-closing {
    opacity: 0;
}

.resource-modal.is-closing .resource-modal-backdrop {
    opacity: 0;
}

.resource-modal.is-closing .resource-modal-panel {
    opacity: 0;
    transform: translateY(10px) scale(0.98);
}

.resource-modal-close {
    transition:
        color var(--motion-fast) var(--ease-out),
        transform var(--motion-fast) var(--ease-spring);
}

.resource-modal-close:hover {
    color: var(--text);
    transform: rotate(90deg);
}

/* -------------------------------------------------------------------------- */
/* Payment & wallet                                                           */
/* -------------------------------------------------------------------------- */

.pay-method {
    transition:
        transform var(--motion-normal) var(--ease-out),
        border-color var(--motion-normal) var(--ease-out),
        box-shadow var(--motion-normal) var(--ease-out);
}

.pay-method:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-sm);
}

.wallet-hero {
    transition: box-shadow var(--motion-normal) var(--ease-out);
}

.wallet-hero:hover {
    box-shadow: var(--shadow-md);
}

.content-lock-overlay {
    animation: motion-fade-in 0.45s var(--ease-out) both;
}

/* -------------------------------------------------------------------------- */
/* Ads & misc                                                                 */
/* -------------------------------------------------------------------------- */

.ad-slot {
    transition:
        opacity var(--motion-normal) var(--ease-out),
        transform var(--motion-normal) var(--ease-out);
}

.ad-slot-frame img {
    transition: transform 0.5s var(--ease-out), opacity var(--motion-normal) var(--ease-out);
}

html.motion-enabled img[loading="lazy"]:not(.is-loaded) {
    opacity: 0;
}

html.motion-enabled img[loading="lazy"].is-loaded {
    opacity: 1;
    transition: opacity 0.45s var(--ease-out);
}

.ad-image-link:hover img,
.ad-slot:hover .ad-image {
    transform: scale(1.02);
}

.empty-state,
.error-page {
    animation: motion-float 5s ease-in-out infinite;
}

.end-mark {
    animation: motion-fade-in 0.6s var(--ease-out) 0.3s both;
}

/* Focus visible for keyboard users */
:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
}

/* -------------------------------------------------------------------------- */
/* Mobile nav slide                                                           */
/* -------------------------------------------------------------------------- */

@media (max-width: 768px) {
    .nav-strip-inner .main-nav {
        display: flex !important;
        visibility: hidden;
        opacity: 0;
        transform: translateY(-10px) scale(0.98);
        transform-origin: top center;
        pointer-events: none;
        transition:
            opacity var(--motion-normal) var(--ease-out),
            transform var(--motion-normal) var(--ease-out),
            visibility var(--motion-normal) var(--ease-out);
    }

    .nav-strip-inner .main-nav.is-open {
        visibility: visible;
        opacity: 1;
        transform: none;
        pointer-events: auto;
    }

    .nav-strip-inner .main-nav a {
        opacity: 0;
        transform: translateX(-8px);
        transition:
            opacity var(--motion-normal) var(--ease-out),
            transform var(--motion-normal) var(--ease-out),
            background var(--motion-fast) var(--ease-out),
            color var(--motion-fast) var(--ease-out);
    }

    .nav-strip-inner .main-nav.is-open a {
        opacity: 1;
        transform: none;
    }

    .nav-strip-inner .main-nav.is-open a:nth-child(1) { transition-delay: 0.04s; }
    .nav-strip-inner .main-nav.is-open a:nth-child(2) { transition-delay: 0.07s; }
    .nav-strip-inner .main-nav.is-open a:nth-child(3) { transition-delay: 0.1s; }
    .nav-strip-inner .main-nav.is-open a:nth-child(4) { transition-delay: 0.13s; }
    .nav-strip-inner .main-nav.is-open a:nth-child(5) { transition-delay: 0.16s; }
    .nav-strip-inner .main-nav.is-open a:nth-child(6) { transition-delay: 0.19s; }
    .nav-strip-inner .main-nav.is-open a:nth-child(7) { transition-delay: 0.22s; }
}

/* -------------------------------------------------------------------------- */
/* Keyframes                                                                  */
/* -------------------------------------------------------------------------- */

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

@keyframes motion-alert-enter {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: none;
    }
}

@keyframes motion-badge-pulse {
    0%, 100% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(220, 53, 69, 0.45);
    }
    50% {
        transform: scale(1.08);
        box-shadow: 0 0 0 4px rgba(220, 53, 69, 0);
    }
}

@keyframes motion-hero-text {
    from {
        opacity: 0;
        transform: translateY(16px);
    }
    to {
        opacity: 1;
        transform: none;
    }
}

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

@keyframes motion-float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-6px); }
}

/* -------------------------------------------------------------------------- */
/* Reduced motion                                                             */
/* -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
    html.motion-enabled [data-reveal] {
        opacity: 1;
        transform: none;
        transition: none;
    }

    .site-main,
    .hero-banner-inner > div,
    .hero-banner-actions,
    .hero-banner .eyebrow,
    .alert,
    .content-lock-overlay,
    .end-mark,
    .empty-state,
    .error-page {
        animation: none !important;
    }

    .header-message-link .header-message-badge {
        animation: none;
    }

    .resource-modal,
    .resource-modal-backdrop,
    .resource-modal-panel,
    .nav-strip-inner .main-nav,
    .nav-strip-inner .main-nav a {
        transition: none !important;
        transform: none !important;
        opacity: 1 !important;
        visibility: visible !important;
    }

    .carousel-btn {
        opacity: 1;
        transform: translateY(-50%);
    }

    .carousel-caption {
        opacity: 1;
        transform: none;
    }
}