.gate-card-animation-container {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.gate-card-container {
    display: flex;
    flex-direction: column;
    align-items: center;
}

/****** 流光 *******/

.flowing-light-container {
    display: flex;
    gap: 8px;
}

.flowing-light-line {
    position: relative;
    width: 1.5px; /* 竖线宽度 */
    height: 82px; /* 竖线高度 */
    background-color: #444; /* 暗色竖线 */
    overflow: hidden; /* 隐藏超出部分 */
}

.flowing-light {
    position: absolute;
    bottom: 100%; /* 从顶部开始 */
    left: 50%; /* 居中 */
    width: 1.5px; /* 光束宽度 */
    height: 2px; /* 光束高度 */
    opacity: 1; /* 初始透明度为1 */
    transform: translateX(-50%); /* 居中光束 */
    background: #ffffff; /* 渐变效果 */
}

.flowing-light::before, .flowing-light::after {
    content: '';
    position: absolute;
    left: 50%; /* 居中 */
    width: 2px; /* 尾翼宽度 */
    height: 30px; /* 尾翼高度 */
    transform: translateX(-50%);
}

.flowing-light::before {
    bottom: 100%; /* 尾翼在上方 */
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 100%);

}

.flowing-light::after {
    bottom: -30px; /* 尾翼在下方 */
    background: linear-gradient(to bottom, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0) 100%);

}

@keyframes flow {
    0% {
        transform: translate(-50%, 0); /* 从顶部开始 */
        opacity: 1; /* 变为不透明 */
    }
    100% {
        transform: translate(-50%, calc(77px + 40px)); /* 向下流动到竖线底部并超出 */
        opacity: 1; /* 到达底部时变为透明 */
    }
}

/***** 卡片 ***/

.card-container {
    position: relative;
    z-index: 2;
    padding: 0 80px;
    margin-top: -8px;
}

.card-wrapper {
    transform: rotate(0deg)

}

.card-with-light {
    border-radius: 10px;
    text-align: center;
    position: relative;
    transition: transform 0.1s ease;
}

.card {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.5s ease;
}

.card-bg {
    position: absolute; /* 使卡片在光点之上 */
    z-index: -1; /* 确保卡片在光点上方 */
    box-shadow: 0 0 100px rgba(255, 255, 255, 0.8); /* 仅添加白色光晕效果 */
    overflow: hidden; /* 防止内容溢出 */
    height: calc(100% - 20px);
    width: calc(100% - 20px);
    transition: opacity 0.2s ease; /* 透明度的过渡效果 */
    opacity: 0;
}

.card-image {
    height: auto;
    max-width: 414px;
    width: 100%;
}

.light-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
}

.light {
    position: absolute;
    z-index: 1;
    background-color: rgba(255, 255, 255, 0.8); /* 白色光点 */
    border-radius: 50%; /* 圆形光点 */
    width: 4px; /* 固定大小 */
    height: 4px; /* 固定大小 */
    animation: pulse 1s infinite; /* 默认动画时间 */
    box-shadow: 0 0 10px rgba(255, 255, 255, 0.8), 0 0 20px rgba(255, 255, 255, 0.5); /* 添加光晕效果 */
}

.fade-out {
    transition: opacity 0.5s ease;
}

.fade-in {
    transition: opacity 0.5s ease;
}

@keyframes pulse {
    0%, 100% {
        transform: scale(0); /* 原始大小 */
        opacity: 0.5; /* 起始和结束透明度 */
    }
    50% {
        transform: scale(1); /* 放大到 1.5 倍 */
        opacity: 1; /* 中间透明度 */
    }
}

.hand-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    overflow: hidden;
    width: 100%;
}

.hand-bg {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
}

.hand-bg-img {
    width: 100%; /* 宽度 100% */
    height: auto; /* 高度自适应 */
    min-width: 1920px;
    opacity: 0;
}

.hand {
    max-width: 368px; /* 手的宽度 */
    width: 28vw;
    height: auto;
    z-index: 10; /* 确保手在卡片上方 */
    position: absolute;
    transform: translateY(300px);
}

/*****币种图标爆炸 *****/
.coin-icon-container {
    position: absolute;
    width: 100%;
    overflow: visible;
    z-index: 1;
    height: 516px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.coin-icon {
    transition: transform 0.1s cubic-bezier(0.1, 0, 0.1, 1), opacity 0.5s cubic-bezier(0.1, 0, 0.1, 1);
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(0deg); /* 初始倾斜 */
    width: var(--size);
    height: var(--size);
    opacity: 0; /* 初始透明度为0 */
}

.coin-icon img {
    width: 100%;
    height: 100%;
}

@keyframes move {
    0% {
        transform: translate(-50%, -50%);
        opacity: 0; /* 动画开始时透明 */
    }
    50% {
        opacity: 0.8; /* 动画中间时变为不透明 */
    }
    100% {
        transform: translate(calc(var(--targetX) - 50%), calc(var(--targetY) - 50%));
        opacity: 1; /* 动画结束保持不透明 */
    }
}


/*** 滑动icon动画***/
.circle {
    width: 64px;
    height: 64px;
    transition: opacity 0.2s ease; /* 透明度的过渡效果 */
    opacity: 0.9;
    position: fixed;
    bottom: 48px;
}