/* 🔄 塔罗卡片翻转系统 - 完全重写，彻底解决位置偏移问题 */

/* 1. 外层容器 - 固定定位，提供3D透视 */
.tarot-wish-card {
    /* 尺寸和定位 */
    width: 380px;
    height: 600px;
    position: relative;
    margin: 20px auto;
    
    /* 3D透视设置 */
    perspective: 1200px;
    perspective-origin: 50% 50%;
    
    /* 基础样式 */
    cursor: pointer;
    filter: drop-shadow(0 20px 40px rgba(0, 0, 0, 0.3));
    
    /* 关键：禁用所有可能导致位移的transform */
    transform: none !important;
    transition: filter 0.3s ease;
    
    /* 确保内容不溢出 */
    overflow: hidden;
}

/* 2. 悬浮效果 - 只改变阴影，不改变位置 */
.tarot-wish-card:hover {
    filter: drop-shadow(0 25px 50px rgba(0, 0, 0, 0.4));
    /* 移除所有transform，避免位置偏移 */
}

/* 3. 翻转容器 - 绝对定位，完全填充父容器 */
.tarot-card-inner {
    /* 绝对定位，完全填充 */
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    
    /* 3D变换设置 */
    transform-style: preserve-3d;
    -webkit-transform-style: preserve-3d;
    
    /* 翻转轴心在几何中心 */
    transform-origin: 50% 50%;
    -webkit-transform-origin: 50% 50%;
    
    /* 平滑过渡 */
    transition: transform 0.6s ease-in-out;
    -webkit-transition: -webkit-transform 0.6s ease-in-out;
    
    /* 性能优化 */
    will-change: transform;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}

/* 4. 翻转状态 - 只绕Y轴旋转180度 */
.tarot-wish-card.flipped .tarot-card-inner {
    transform: rotateY(180deg);
    -webkit-transform: rotateY(180deg);
}

/* 5. 卡片正反面 - 绝对定位，隐藏背面 */
.tarot-card-face {
    /* 绝对定位，完全填充 */
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    
    /* 隐藏背面 */
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    
    /* 3D变换 */
    transform-style: preserve-3d;
    -webkit-transform-style: preserve-3d;
    
    /* 基础样式 */
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.3), 0 5px 15px rgba(0, 0, 0, 0.2);
}

/* 6. 正面 - 默认朝向 */
.tarot-card-front {
    transform: rotateY(0deg);
    -webkit-transform: rotateY(0deg);
    z-index: 2;
}

/* 7. 背面 - 预先旋转180度 */
.tarot-card-back {
    transform: rotateY(180deg);
    -webkit-transform: rotateY(180deg);
    z-index: 1;
}

/* 8. 调试模式 - 显示边界 */
.tarot-wish-card.debug {
    border: 2px dashed #ff0000;
}

.tarot-wish-card.debug .tarot-card-inner {
    border: 1px solid #00ff00;
}

.tarot-wish-card.debug .tarot-card-face {
    border: 1px solid #0000ff;
}

/* 9. 防止翻转期间的意外交互 */
.tarot-wish-card.flipping {
    pointer-events: none;
}

.tarot-wish-card.flipping .tarot-card-inner {
    pointer-events: none;
}

/* 10. 确保内容正确显示 */
.tarot-card-face > * {
    position: relative;
    z-index: 10;
}

/* 11. 移除可能冲突的样式 */
.tarot-wish-card * {
    box-sizing: border-box;
}

/* 12. 确保翻转动画的流畅性 */
@media (prefers-reduced-motion: no-preference) {
    .tarot-card-inner {
        transition: transform 0.6s cubic-bezier(0.4, 0.0, 0.2, 1);
        -webkit-transition: -webkit-transform 0.6s cubic-bezier(0.4, 0.0, 0.2, 1);
    }
}

@media (prefers-reduced-motion: reduce) {
    .tarot-card-inner {
        transition: transform 0.2s ease;
        -webkit-transition: -webkit-transform 0.2s ease;
    }
}