/* 设置全局字体和背景，模拟原图的深色渐变背景 */
/* -------------------------------------
3D 卡片翻转核心 CSS
------------------------------------- */
/* 1. 设置 3D 视距 (Perspective) */
.card-perspective {
    perspective: 1000px;
    width: 220px; /* 匹配卡片宽度 */
    height: 220px; /* 匹配卡片高度 */
    
    border-radius: 15px;
    margin: 0 auto 30px;
    z-index: 2;
}
.card-perspective:hover {
    transform: scale(1.02);
}
@media (max-width: 500px) {
    .card-perspective {
        width: 160px;
        height: 160px;
        margin-bottom: 20px;
    }
}

/* 2. 容器：应用 3D 旋转和保留 3D 结构 */
.flip-card-container {
    width: 100%;
    height: 100%;
    position: relative;
    transform-style: preserve-3d;
    transform-origin: center center; 
    /* 惯性模式下不需要 CSS transition */
    transition: none; 
}

/* 3. 卡片的正反面公共样式 */
.card-face {
    position: absolute;
    top: 0;   
    left: 0;  
    width: 100%;
    height: 100%;
    border-radius: 1.5rem; /* 大圆角 */
    backface-visibility: hidden; /* 隐藏背面的反面 */
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    overflow: hidden;
    touch-action: pan-y; /* 允许垂直滚动，但我们主要关注水平拖拽 */
    cursor: grab; /* 拖拽指针 */
}

/* 4. 正面样式 */
.card-front {
    /* 模拟原图的浅紫色背景 */
    transform: rotateY(0deg);
    background-size: cover;
    background-position: center;
    position: relative; /* 用于放置文本和播放按钮 */
}
.card-front:hover .fa-play-circle, .card-front:hover .fa-pause-circle {
    scale: 1.05;
    color: #a458ef;
    transition: all 0.3s ease;
}

/* 5. 背面样式 */
.card-back {
    background: linear-gradient(180deg, #374151, #111827); /* 深灰色渐变 */
    transform: rotateY(180deg);
    justify-content: flex-start;
    text-align: left;
}

/* -------------------------------------
辅助 UI 提示
------------------------------------- */

.drag-indicator {
    position: absolute;
    bottom: -50px;
    font-size: 0.8rem;
    color: #9ca3af;
    animation: pulse-arrow 2s infinite;
}
@keyframes pulse-arrow {
    0%, 100% { transform: translateY(0); opacity: 1; }
    50% { transform: translateY(-5px); opacity: 0.5; }
}