@charset "utf-8";
body {
    /* font-family: "Lato", sans-serif; */
    /* font-family: "Source Sans 3", sans-serif; */
    /* font-family: "Alan Sans", sans-serif; */
    font-family: "IBM Plex Sans", sans-serif;
    font-weight: 400;
    padding-top: 5.0rem;
}

:root {
    --motion-fast: 180ms;
    --motion-base: 280ms;
    --motion-slow: 480ms;
    --motion-ease: cubic-bezier(0.22, 1, 0.36, 1);

    /* Publication list: hover cover preview size (read by assets/js/common.js) */
    --pub-cover-preview-max-rem:30;
    --pub-cover-preview-min-px: 80;
    --pub-cover-preview-margin-px: 24;
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
    font-weight: 700;
}

.text-em {
    color: #800020;
    font-weight: 500;
}

.text-hl {
    /* background-color: #fffcab; */
    font-weight: 500;
    /* padding: 0.1em 0.2em; */
    /* border-radius: 4px; */

    background-color: transparent;
    border-radius: 0;
    text-decoration: underline;
    text-decoration-thickness: 2px;
    /* text-underline-offset: -2px; */
    text-decoration-color: #ffd500;
    text-decoration-skip-ink: none;
    white-space: nowrap;
}

.card {
    border-radius: 0.8rem!important;
}

.card-img-overlay {
    border-radius: 0.8rem!important;
}

.rounded-xl {
    border-radius: 0.8rem!important;
}

.rounded-xl-bottom {
    border-bottom-right-radius: 0.8rem !important;
    border-bottom-left-radius: 0.8rem !important;
}

.rounded-xl-top {
    border-top-left-radius: 0.8rem !important;
    border-top-right-radius: 0.8rem !important;
}

/* Research publication list: avoid clipping last rows / shadows (was overflow:hidden) */
.year-block .bg-white.shadow-sm.rounded-xl {
    overflow: visible;
    position: relative;
}

.research-page-content {
    padding-bottom: 2.5rem;
}


.text-profile-position {
    font-weight: 400;
}

.text-profile-bio {
    /* font-family: "Raleway"; */
    font-weight: 400;
}

.navbar {
    opacity: 1.00;
}

.navbar .nav-link {
    transition: color var(--motion-fast) var(--motion-ease), transform var(--motion-fast) var(--motion-ease);
}

.navbar .nav-link:hover {
    transform: translateY(-1px);
}

.inline-badge {
    height: 16px;
    vertical-align: -10%;
    margin-right: 2px;
    line-break: unset;
}

.no-break {
    white-space: nowrap;
}

.news-item-row {
    display: flex;
    align-items: stretch;
    gap: 0.5rem;
}

.news-item-title {
    flex: 1 1 auto;
    min-width: 0;
}

/* Keep desktop news text starts aligned after different icons */
.news-item-title i.fas {
    display: inline-block;
    width: 1.15em;
    text-align: center;
    margin-right: 0.5em !important;
}

.news-item-date {
    margin-left: auto;
    flex: 0 0 auto;
    align-self: flex-end;
}

.cover-image {
    width: 180px;
    max-height: 120px;
}

.abstract-body {
    min-height: 100px;
}

img.lazy {
    background-image: url('images/loading.gif');
    background-repeat: no-repeat;
    background-position: 50% 50%;
    background-size: 50px 50px;
    min-height: 80px;
}

div.lazy {
    background-image: url('images/loading.gif');
    background-repeat: no-repeat;
    background-position: 50% 50%;
    background-size: 50px 50px;
    min-height: 80px;
}

.badge-publication {
    font-size: 100%;
}

.email-text {
    font-family: "Courier Prime", monospace;
}

a {
    transition: color var(--motion-fast) var(--motion-ease), opacity var(--motion-fast) var(--motion-ease);
    font-weight: 500 !important;
}

a:hover {
    font-weight: 500 !important;
    text-shadow: 0 0 0 currentColor, 0.015em 0 0 currentColor;
}

.publication-primary-links a {
    display: inline-block;
    margin-right: 0.35rem;
    margin-bottom: 0.2rem;
    color: #2a4f95;
    font-weight: 400;
}

.publication-item-inner h6,
.publication-item-inner h5 {
    color: #000;
    font-weight: 450;
}

.publication-item-inner .small {
    font-size: 0.80rem;
}

.research-meta-tone {
    color: rgba(0, 0, 0, 0.5) !important;
    font-size: 0.80rem;
}

.research-meta-break {
    display: none;
}

@media (max-width: 576px) {
    .research-meta-break {
        display: inline;
    }

    .research-meta-inline-comma {
        display: none;
    }
}

.publication-authors {
    color: #000000;
}

.publication-venue-line {
    color: rgba(0, 0, 0, 0.75);
}

.publication-secondary-actions {
    margin-top: 0.25rem;
    margin-bottom: 0.25rem;
    opacity: 1.0;
}

.publication-secondary-actions a {
    display: inline-block;
    margin-right: 0.45rem;
    color: rgba(0, 0, 0, 0.5);
    font-weight: 400;
}

.publication-secondary-actions a:hover,
.publication-primary-links a:hover {
    color: #1f3e75;
    font-weight: 400;
}

.publication-item-inner .collapse .text-muted {
    color: rgba(0, 0, 0, 0.5) !important;
}

.publication-item-inner .collapsing .text-muted {
    color: rgba(0, 0, 0, 0.5) !important;
}

.publication-authors {
    margin-bottom: 0.25rem !important;
}

.publication-venue-line {
    margin-bottom: 0.25rem !important;
}

.publication-primary-links {
    margin-bottom: 0 !important;
}

/* Desktop: 1:1 cover thumb + fixed square hover preview (covers planned as square assets) */
.publication-cover-wrap {
    position: relative;
    display: block;
    cursor: pointer;
}

/* Large (poster-style): square crop in the list column. */
.publication-cover-wrap--lg .publication-cover-thumb {
    aspect-ratio: 1 / 1;
    object-fit: cover;
    width: 100%;
    height: auto;
}

/* Small (logo / icon): contain inside a short band, no hover preview. */
.publication-cover-wrap--sm {
    cursor: default;
}

.publication-cover-wrap--sm .publication-cover-thumb {
    aspect-ratio: unset;
    width: auto;
    max-width: 100%;
    max-height: 4.35rem;
    height: auto;
    margin-left: auto;
    margin-right: auto;
    display: block;
    object-fit: contain;
}

/* Preview: monotonic scale + opacity only (no overshoot past 1). */
@keyframes pub-cover-preview-jelly-in {
    0% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(0.88);
    }

    100% {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1);
    }
}

@keyframes pub-cover-preview-jelly-out {
    0% {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1);
    }

    100% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(0.88);
    }
}

@keyframes pub-cover-preview-fade-in {
    from {
        opacity: 0;
        transform: translate(-50%, -50%) scale(1);
    }

    to {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1);
    }
}

@keyframes pub-cover-preview-fade-out {
    from {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1);
    }

    to {
        opacity: 0;
        transform: translate(-50%, -50%) scale(1);
    }
}

.publication-cover-preview {
    position: fixed;
    z-index: 1060;
    left: 50%;
    top: 50%;
    padding: 0;
    box-sizing: border-box;
    background: rgba(0, 0, 0, 1);
    backdrop-filter: blur(14px) saturate(160%);
    -webkit-backdrop-filter: blur(14px) saturate(160%);
    border: none;
    border-radius: 0.75rem;
    box-shadow: 0 1rem 2.5rem rgba(15, 25, 45, 0.14);
    pointer-events: none;
    overflow: hidden;
    opacity: 0;
    visibility: hidden;
    transform: translate(-50%, -50%) scale(0.88);
    animation: none;
    will-change: opacity, transform;
}

.publication-cover-preview.is-open {
    visibility: visible;
    pointer-events: auto;
    animation: pub-cover-preview-jelly-in 0.2s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.publication-cover-preview.is-closing {
    visibility: visible;
    pointer-events: none;
    animation: pub-cover-preview-jelly-out 0.17s cubic-bezier(0.4, 0, 1, 0.45) both;
}

.publication-cover-preview img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 0;
}

@media (prefers-reduced-motion: reduce) {
    .publication-cover-wrap {
        cursor: default;
    }

    .publication-cover-preview {
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
        background: #fff;
        transform: translate(-50%, -50%) scale(1);
    }

    .publication-cover-preview.is-open {
        animation: pub-cover-preview-fade-in 0.1s ease forwards;
    }

    .publication-cover-preview.is-closing {
        animation: pub-cover-preview-fade-out 0.09s ease forwards;
    }
}

.publication-venue-highlight {
    display: inline-block;
    margin-right: 0.35rem;
}

.publication-venue-highlight .text-em {
    display: inline-block;
    padding: 0.03rem 0.38rem;
    border: 1.5px solid transparent;
    border-radius: 999px;
    color: #111;
    font-weight: 600;
    font-size: 0.88em;
    background:
        linear-gradient(#fff, #fff) padding-box,
        linear-gradient(
            120deg,
            #ff3b7a,
            #ff8a00,
            #ffd400,
            #57e389,
            #3aa0ff,
            #8b5cf6,
            #ff3b7a
        ) border-box;
    background-size: 100% 100%, 250% 250%;
    animation: siri-glow-shift 8s linear infinite;
}

.shadow-sm.rounded-xl,
.card.shadow-sm,
.filter-item {
    transition: transform var(--motion-base) var(--motion-ease), box-shadow var(--motion-base) var(--motion-ease);
    position: relative;
    z-index: 0;
}

/* Only the row lifts: if the outer .shadow-sm.rounded-xl also translated, parent+child both match
   :hover and transforms stack (~-4px), expanding scrollable overflow at page bottom. */
.shadow-sm.rounded-xl:hover,
.card.shadow-sm:hover {
    transform: translateY(-2px);
    box-shadow:
        0 0.5rem 1.25rem rgba(20, 30, 50, 0.10),
        0 -0.35rem 0.95rem rgba(20, 30, 50, 0.06) !important;
    z-index: 10;
}

/* No translateY: row lift moved the cover hitbox away from a stationary cursor (esp. page bottom),
   firing mouseleave → cover preview open/close flicker. */
.filter-item:hover {
    box-shadow:
        0 0.5rem 1.25rem rgba(20, 30, 50, 0.10),
        0 -0.35rem 0.95rem rgba(20, 30, 50, 0.06) !important;
    z-index: 10;
    border-top-color: transparent !important;
}

/* Publication list: avoid border "crossing" between adjacent items on hover */
.filter-item {
    background: #fff;
}

.filter-item:hover .row.border-bottom {
    border-bottom-color: transparent !important;
}

/* Prevent adjacent item top border from crossing hovered item edge */
.filter-item:hover + .filter-item {
    border-top-color: transparent !important;
}

/* Narrow layout: solid white when no cover bg; cover-as-bg row ignores clicks (content re-enables) */
.publication-item-inner > .row.d-md-none > .w-100:not(.publication-mobile-cover-bg) {
    background-color: #fff !important;
}

.publication-item-inner > .row.d-md-none > .publication-mobile-cover-bg {
    pointer-events: none;
    position: relative;
    overflow: hidden;
}

.publication-item-inner > .row.d-md-none > .publication-mobile-cover-bg--sm {
    background: #fff;
}

/* Small mobile: top strip (logos), not full-bleed wallpaper. */
.publication-mobile-cover-strip {
    position: relative;
    z-index: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0.4rem 1rem 0.35rem;
    background: linear-gradient(180deg, #f1f3f5 0%, #fff 92%);
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
    pointer-events: none;
}

.publication-mobile-cover-strip__img {
    display: block;
    max-height: 4.25rem;
    width: auto;
    max-width: 100%;
    height: auto;
    object-fit: contain;
}

/* Real <img> layer: Safari often fails to paint GIFs in CSS background-image; desktop already uses <img>. */
/* Bootstrap's global `img { max-width: 100% }` breaks "cover" for wide/short assets: width can
   never exceed the row, so tall containers never get vertical fill. Override + intrinsic cover. */
.publication-mobile-cover-bg__image {
    position: absolute;
    top: 50%;
    left: 50%;
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 100%;
    transform: translate(-50%, -50%);
    z-index: 0;
    pointer-events: none;
}

.publication-mobile-cover-bg:not(.publication-mobile-cover-bg--sm) .publication-mobile-cover-bg__image {
    min-width: 100%;
    min-height: 100%;
}

.publication-mobile-cover-bg__scrim {
    position: absolute;
    inset: 0;
    z-index: 1;
    background: rgba(255, 255, 255, 0.85);
    pointer-events: none;
}

.publication-item-inner > .row.d-md-none > .publication-mobile-cover-bg > .d-flex {
    position: relative;
    z-index: 2;
    pointer-events: auto;
}

.tag-badge,
.award-badge {
    transition: transform var(--motion-fast) var(--motion-ease), background-color var(--motion-fast) var(--motion-ease);
}

.tag-badge:hover,
.award-badge:hover {
    transform: translateY(-1px);
}

.highlight-card {
    animation: card-fade-in var(--motion-slow) var(--motion-ease) both;
}

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

.icon-row a {
    color: #444;             /* 默认低调 */
    text-decoration: none !important;
}

.profile-card-links a {
    margin-right: 0.75rem !important;
}

.icon-row a:hover {
    color: #1a4fb3;          /* hover 才用 CVPR 蓝 */
}

/* Profile: <lg + portrait = centered block [avatar | text+links]; lg+ = stacked centered */
.profile-card-layout-outer {
    width: 100%;
}

.profile-card-layout {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-areas:
        "portrait"
        "main";
    gap: 0.75rem;
    width: 100%;
}

.profile-card-layout--no-portrait {
    grid-template-areas: "main";
}

.profile-card-portrait {
    grid-area: portrait;
}

.profile-card-main {
    grid-area: main;
    min-width: 0;
    width: 100%;
    text-align: center;
}

.profile-card-name {
    justify-content: center;
    text-align: center;
}

.profile-card-position {
    text-align: center;
}

.profile-card-links {
    min-width: 0;
    justify-content: center;
}

.profile-card-layout .profile-portrait-img {
    height: 112px;
    width: auto;
    max-width: 112px;
    object-fit: cover;
}

@media (max-width: 991.98px) {
    .publication-item-inner .d-md-none h6 {
        font-size: 0.82rem;
        line-height: 1.3;
    }

    .publication-item-inner .d-md-none .small {
        font-size: 0.74rem;
    }

    .research-meta-tone {
        font-size: 0.74rem;
    }

    .profile-card-layout-outer--split-sm .profile-card-layout {
        grid-template-columns: auto minmax(0, 1fr);
        grid-template-areas: "portrait main";
        gap: 0.75rem 1rem;
        align-items: start;
        width: min(100%, 26rem);
        margin-left: auto;
        margin-right: auto;
    }

    .profile-card-layout-outer--split-sm .profile-card-portrait {
        justify-self: center;
        width: auto;
    }

    .profile-card-layout-outer--split-sm .profile-card-main {
        text-align: left;
    }

    .profile-card-layout-outer--split-sm .profile-card-name {
        justify-content: flex-start;
        text-align: left;
    }

    .profile-card-layout-outer--split-sm .profile-card-position {
        text-align: left;
    }

    .profile-card-layout-outer--split-sm .profile-card-links {
        justify-content: flex-start;
    }

    .profile-card-layout .profile-card-name .h2 {
        font-size: 1.2rem;
        line-height: 1.25;
    }

    .profile-card-layout .profile-card-position {
        font-size: 0.875rem;
        line-height: 1.35;
        min-width: 0;
        max-width: 100%;
        white-space: normal;
        overflow-wrap: break-word;
        word-wrap: break-word;
    }
}

/* News: stack title + date only on true phone layout (< md), not 768–991 “narrow desktop” */
@media (max-width: 767.98px) {
    .news-item-row {
        display: block;
        margin-top: 0.3rem !important;
        margin-bottom: 0.3rem !important;
        padding-top: 0.12rem !important;
        padding-bottom: 0.12rem !important;
    }

    .news-item-title {
        font-size: 0.86rem;
        line-height: 1.3;
    }

    .news-item-title-mobile {
        position: relative;
        padding-right: 4.4rem;
    }

    .news-item-title-mobile .news-item-inline-date {
        position: absolute;
        right: 0;
        bottom: 0;
        color: rgba(0, 0, 0, 0.55);
    }

    .news-item-date {
        font-size: 0.76rem;
        margin-left: 0;
        margin-top: 0.15rem;
        display: block;
        text-align: left;
    }
}

@media (min-width: 992px) {
    .profile-card-layout {
        gap: 0;
        margin-left: 0;
        margin-right: 0;
        width: 100%;
        max-width: none;
    }

    .profile-card-portrait {
        justify-self: center;
        width: 100%;
        text-align: center;
    }

    .profile-card-layout .profile-portrait-img {
        height: 200px;
        max-width: none;
    }
}

.highlight-card {
    position: relative;
    border: 1px solid transparent;
    background: #fff;
    overflow: hidden;
    isolation: isolate;
    transition: transform var(--motion-base) var(--motion-ease), box-shadow var(--motion-base) var(--motion-ease);
}

.highlight-card:hover {
    transform: translateY(-2px);
    box-shadow:
        0 0.5rem 1.25rem rgba(20, 30, 50, 0.10),
        0 -0.35rem 0.95rem rgba(20, 30, 50, 0.06) !important;
}

.highlight-card::before {
    content: "";
    position: absolute;
    inset: -1px;
    border-radius: inherit;
    padding: 3px;
    background: linear-gradient(
        120deg,
        #ff3b7a,
        #ff8a00,
        #ffd400,
        #57e389,
        #3aa0ff,
        #8b5cf6,
        #ff3b7a
    );
    background-size: 250% 250%;
    animation: siri-glow-shift 12s linear infinite;
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
    z-index: -1;
}

.highlight-card::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    box-shadow: 0 0 24px rgba(83, 170, 255, 0.22), 0 0 30px rgba(255, 80, 176, 0.12);
    pointer-events: none;
    z-index: -2;
}

@keyframes siri-glow-shift {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}

@media (prefers-reduced-motion: reduce) {
    .navbar .nav-link,
    a,
    .shadow-sm.rounded-xl,
    .card.shadow-sm,
    .filter-item,
    .tag-badge,
    .award-badge,
    .highlight-card {
        transition: none;
    }

    .shadow-sm.rounded-xl:hover,
    .card.shadow-sm:hover,
    .filter-item:hover,
    .tag-badge:hover,
    .award-badge:hover,
    .highlight-card:hover,
    .navbar .nav-link:hover {
        transform: none;
    }

    .highlight-card {
        animation: none;
    }

    .highlight-card::before {
        animation: none;
    }
}