@view-transition {
    navigation: auto;
}

::view-transition {
    animation-duration: 0.1s !important;
}

::view-transition-old(root),
::view-transition-new(root) {
    animation-duration: 0.1s !important;
}

/* 全局背景渐变 */
body {
    background: linear-gradient(to bottom, #143333 0%, #142933 450px, #111319 750px, #111319 100%);
    min-height: 100vh;
    margin: 0;
}

.content-max-width {
    max-width: 1810px;
    margin-left: auto;
    margin-right: auto;
}

.content-max-width2 {
    max-width: 1960px;
    margin-left: auto;
    margin-right: auto;
}

/* 轮播 */
.custom-carousel {
    position: relative;
    overflow: hidden;
    border-radius: 12px;
    /* box-shadow: 0 20px 35px -12px rgba(0, 0, 0, 0.5); */
}

.carousel-track {
    display: flex;
    transition: transform 0.4s cubic-bezier(0.2, 0.9, 0.4, 1.1);
    will-change: transform;
}

.carousel-slide {
    flex: 0 0 100%;
    position: relative;
}

.carousel-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    mask-image: linear-gradient(to left, transparent 5%, black 25%),
        linear-gradient(to right, transparent 5%, black 25%),
        linear-gradient(to bottom, transparent 2%, black 25%);
    -webkit-mask-image: linear-gradient(to left, transparent 5%, black 25%),
        linear-gradient(to right, transparent 5%, black 25%),
        linear-gradient(to bottom, transparent 2%, black 25%);
    mask-composite: intersect;
    -webkit-mask-composite: intersect;
}

.iq-hero .custom-carousel{
    border-radius:14px;
    box-shadow:0 18px 40px rgba(0,0,0,.35);
}
.iq-hero-nav{
    opacity:.85;
    transition:opacity .2s,background .2s,transform .2s;
}
.iq-hero-nav:hover{opacity:1;transform:translateY(-50%) scale(1.05)}
.iq-notice-bar{
    backdrop-filter:blur(8px);
}
.iq-notice-item .fa-bell{
    font-size:12px;
}
.dot-indicator.is-active,
.dot-indicator.bg-orange-400,
.dot-indicator.\!bg-orange-400{
    background:#fb923c!important;
}

.imgloading-spinner {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 32px;
    height: 32px;
    border: 3px solid rgba(0, 0, 0, 0.1);
    border-top-color: #ee4368;
    border-radius: 50%;
    animation: imgspin 0.8s linear infinite;
    z-index: 10; /* 比图片高，但图片加载后会移除该元素，无需担心 */
    pointer-events: none; /* 让图标不干扰点击 */
}

@keyframes imgspin {
    to {
        transform: translate(-50%, -50%) rotate(360deg);
    }
}