@view-transition {
    navigation: auto;
}
/* 全局背景渐变 */
body {
    min-height: 100vh;
    margin: 0;
}

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


.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);
    }
}