/* --- 기본 레이아웃 및 배경 --- */
body { 
    background: url('images/back-image.png') no-repeat center center fixed; 
    background-size: cover;
    color: white; 
    margin: 0; 
    font-family: 'Pretendard', sans-serif; 
    padding-bottom: 80px; 
    overflow: hidden; 
}

/* --- 중앙 메인 콘텐츠 영역 --- */
.main-content {
    display: flex;
    justify-content: center;
    align-items: center;
    height: calc(100vh - 140px);
    perspective: 1500px;
}

/* --- 타로 카드 등장 + 둥둥 떠 있는 효과 --- */
.tarot-main-img {
    width: 75%;
    max-width: 380px;
    filter: drop-shadow(0 0 50px rgba(212,175,55,0.8));
    opacity: 0;
    animation: 
        mysticEntrance 4s cubic-bezier(0.25, 1, 0.5, 1) forwards,
        floating 3s ease-in-out 4s infinite;
}

/* [애니메이션 A] 3바퀴 회전하며 멀리서 다가오기 */
@keyframes mysticEntrance {
    0% {
        opacity: 0;
        transform: translateZ(-1000px) rotateY(-1080deg) scale(0.1);
    }
    70% {
        opacity: 0.8;
        transform: translateZ(-100px) rotateY(-180deg) scale(0.8);
    }
    100% {
        opacity: 1;
        transform: translateZ(0) rotateY(0deg) scale(1);
    }
}

/* [애니메이션 B] 은은하게 위아래로 움직이는 효과 */
@keyframes floating {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-20px);
    }
}