/* 使用Inter字体作为基础字体 */
body {
    font-family: 'Inter', sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* 隐藏原生 radio input */
.custom-radio input {
    display: none;
}

/* 自定义 radio 按钮样式 */
.custom-radio label {
    transition: all 0.2s ease-in-out;
}

/* 选中状态下的样式 */
.custom-radio input:checked + label {
    background-color: #111827; /* dark gray */
    color: #ffffff;
    border-color: #111827;
}

/* 循环旋转动画 */
@keyframes scroll-left {
    from { transform: translateX(0); }
    to { transform: translateX(-50%); } /* 滚动一半距离，因为内容复制了一份 */
}

@keyframes scroll-right {
    from { transform: translateX(-50%); }
    to { transform: translateX(0); }
}

.carousel-container {
    overflow: hidden;
    -webkit-mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
    mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
}

.carousel-track {
    display: flex;
    width: fit-content; /* 适应内容宽度 */
}

.animate-scroll-left {
    animation: scroll-left 15s linear infinite;
}

.animate-scroll-right {
    animation: scroll-right 15s linear infinite;
}

.carousel-container:hover .animate-scroll-left,
.carousel-container:hover .animate-scroll-right {
    animation-play-state: paused;
}

/* 抽中图片的出现动画 */
@keyframes fadeIn {
    from { opacity: 0; transform: scale(0.95); }
    to { opacity: 1; transform: scale(1); }
}

.drawn-image {
    animation: fadeIn 0.5s ease-out forwards;
}

/* FAQ <details> 标签的箭头动画 */
details summary::-webkit-details-marker {
    display: none;
}

details summary {
    list-style: none;
}

details summary::after {
    content: '+';
    font-size: 1.5rem;
    transition: transform 0.2s ease-in-out;
    transform: rotate(0deg);
    float: right;
}

details[open] summary::after {
    transform: rotate(45deg);
}