:root {
    --motion-ease: cubic-bezier(.2, .78, .2, 1);
    --motion-fast: 220ms;
}

/* Le contenu reste visible sans JavaScript : seule la classe racine active les révélations. */
.motion-enabled .motion-reveal {
    opacity: 0;
    translate: 0 26px;
    filter: blur(4px) saturate(.9);
    transition:
        opacity .72s var(--motion-ease) var(--motion-delay, 0ms),
        translate .72s var(--motion-ease) var(--motion-delay, 0ms),
        filter .72s var(--motion-ease) var(--motion-delay, 0ms);
    will-change: opacity, translate, filter;
}

.motion-enabled .motion-reveal.is-motion-visible {
    opacity: 1;
    translate: 0 0;
    filter: none;
    will-change: auto;
}

/* Verre vivant : dérive autonome et halo local sous le pointeur. */
.site-header::before,
.bp-sitebar::before,
.wiki-sitebar::before {
    background:
        radial-gradient(circle at var(--glass-x, 24%) var(--glass-y, -35%), rgba(255,255,255,.2), transparent 20%),
        linear-gradient(108deg, transparent 4%, rgba(255,255,255,.08) 26%, transparent 48%);
    background-size: 155% 100%, 230% 100%;
    animation: motion-glass-drift 10s ease-in-out infinite alternate;
}

.site-header::after {
    background-size: 230% 100%;
    animation: motion-glass-line 7s linear infinite;
}

.site-header,
.bp-sitebar,
.wiki-sitebar {
    animation: motion-nav-arrive .65s var(--motion-ease) both;
}

.brand strong span,
.bp-sitebar-brand strong span,
.wiki-sitebar-brand strong span {
    animation: motion-brand-glow 4.8s ease-in-out infinite;
}

.main-nav a,
.bp-sitebar-nav a,
.wiki-sitebar-nav a {
    transition:
        color var(--motion-fast) ease,
        background var(--motion-fast) ease,
        border-color var(--motion-fast) ease,
        transform var(--motion-fast) var(--motion-ease),
        filter var(--motion-fast) ease;
}

.main-nav a:hover,
.bp-sitebar-nav a:hover,
.wiki-sitebar-nav a:hover {
    filter: brightness(1.16);
}

/* Reflet rapide sur les actions principales. */
.button,
.bp-discord-login,
.bp-account,
.wiki-discord-login,
.wiki-sitebar-account {
    position: relative;
    overflow: hidden;
    isolation: isolate;
}

.button::after,
.bp-discord-login::after,
.bp-account::after,
.wiki-discord-login::after,
.wiki-sitebar-account::after {
    content: "";
    position: absolute;
    inset: -45% auto -45% -48%;
    z-index: 2;
    width: 38%;
    pointer-events: none;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.28), transparent);
    transform: skewX(-18deg) translateX(0);
    transition: transform .65s var(--motion-ease);
}

.button:hover::after,
.bp-discord-login:hover::after,
.bp-account:hover::after,
.wiki-discord-login:hover::after,
.wiki-sitebar-account:hover::after {
    transform: skewX(-18deg) translateX(520%);
}

/* Cartes tactiles et lumineuses, sans modifier leur position au repos. */
:is(
    .feature-card,
    .news-card,
    .creator-card,
    .info-card,
    .pack-card,
    .panel,
    .article-card,
    .category-card,
    .item-catalog-card,
    .item-mini-card,
    .featured-card,
    .result-card,
    .loot-source-card,
    .attachment-card,
    .bp-pass-chip,
    .bp-reward-cell,
    .bp-quest-card
) {
    transition:
        transform .3s var(--motion-ease),
        border-color .3s ease,
        box-shadow .3s ease,
        filter .3s ease;
}

:is(
    .feature-card,
    .news-card,
    .creator-card,
    .info-card,
    .pack-card,
    .panel,
    .article-card,
    .category-card,
    .item-catalog-card,
    .item-mini-card,
    .featured-card,
    .result-card,
    .loot-source-card,
    .attachment-card
):hover {
    transform: translateY(-7px) scale(1.008);
    filter: brightness(1.06) saturate(1.05);
    box-shadow: 0 24px 60px rgba(0,0,0,.34), 0 0 32px rgba(249,115,22,.08);
}

.pack-card.featured:hover { transform: translateY(-7px) scale(1.038); }
.bp-pass-chip:hover { transform: translateY(-3px) scale(1.012); }
.bp-reward-cell:hover,
.bp-quest-card:hover { transform: translateY(-5px) scale(1.008); }

.feature-icon,
.download-orb,
.category-card-icon,
.featured-symbol,
.bp-pass-emblem {
    animation: motion-icon-float 5s ease-in-out infinite;
}

.feature-card:nth-child(2n) .feature-icon,
.category-card:nth-child(2n) .category-card-icon,
.bp-pass-chip:nth-child(2n) .bp-pass-emblem { animation-delay: -2.5s; }

.hero-art { animation: motion-hero-breathe 18s ease-in-out infinite alternate; }

.online-pill i,
.status-orb i,
.status-dot,
.bp-server-state i,
.wiki-server-state i {
    animation: motion-status-pulse 2.4s ease-in-out infinite;
}

@keyframes motion-glass-drift {
    0% { background-position: 0 0, 120% 0; opacity: .72; }
    50% { opacity: 1; }
    100% { background-position: 100% 0, -80% 0; opacity: .82; }
}

@keyframes motion-glass-line {
    from { background-position: 120% 0; }
    to { background-position: -110% 0; }
}

@keyframes motion-nav-arrive {
    from { opacity: 0; translate: 0 -18px; }
    to { opacity: 1; translate: 0 0; }
}

@keyframes motion-brand-glow {
    0%, 100% { filter: brightness(1); text-shadow: 0 0 12px rgba(249,115,22,.24); }
    50% { filter: brightness(1.2); text-shadow: 0 0 24px rgba(249,115,22,.58); }
}

@keyframes motion-icon-float {
    0%, 100% { translate: 0 0; rotate: 0deg; }
    50% { translate: 0 -7px; rotate: 1.5deg; }
}

@keyframes motion-hero-breathe {
    from { transform: scale(1.02); filter: saturate(.94) brightness(.92); }
    to { transform: scale(1.085); filter: saturate(1.08) brightness(1.02); }
}

@keyframes motion-status-pulse {
    0%, 100% { opacity: .68; transform: scale(.86); }
    50% { opacity: 1; transform: scale(1.18); }
}

@media (prefers-reduced-motion: reduce) {
    .motion-enabled .motion-reveal,
    .motion-enabled .motion-reveal.is-motion-visible {
        opacity: 1 !important;
        translate: none !important;
        filter: none !important;
        transition: none !important;
    }

    .site-header,
    .site-header::before,
    .site-header::after,
    .bp-sitebar,
    .bp-sitebar::before,
    .wiki-sitebar,
    .wiki-sitebar::before,
    .brand strong span,
    .bp-sitebar-brand strong span,
    .wiki-sitebar-brand strong span,
    .feature-icon,
    .download-orb,
    .category-card-icon,
    .featured-symbol,
    .bp-pass-emblem,
    .hero-art,
    .online-pill i,
    .status-orb i,
    .status-dot,
    .bp-server-state i,
    .wiki-server-state i {
        animation: none !important;
    }

    :is(
        .feature-card,
        .news-card,
        .creator-card,
        .info-card,
        .pack-card,
        .panel,
        .article-card,
        .category-card,
        .item-catalog-card,
        .item-mini-card,
        .featured-card,
        .result-card,
        .loot-source-card,
        .attachment-card,
        .bp-pass-chip,
        .bp-reward-cell,
        .bp-quest-card
    ):hover {
        transform: none !important;
    }
}