/* Case */
.case {
    position: absolute;
    width: 100%;
    /* Half the container width */
    height: 100%;
    left: 50%;
    transform-style: preserve-3d;
    transform-origin: left center;
    /* Pivot from the left edge */
    transition: transform 0.8s ease-in-out;
}

/* Front of Case */
.front-of-case {
    width: 91%;
    top:0.5%;
    left: 59%;
    transform-origin: -5% 50%;
    z-index: 2;
    /* Start on top */
}

.front-of-case .front-face,
.front-of-case .back-face,
.back-of-case-and-cd .front-face,
.back-of-case-and-cd .back-face {
    position: absolute;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
}

.front-of-case .front-face {
    background: url('../images/exterior-front-temporary.png') no-repeat center;
    background-size: cover;
}

.front-of-case .back-face {
    background: url('../images/interior-front-temporary.png') no-repeat center;
    background-size: cover;
    transform: rotateY(180deg);
    /* Pre-rotated for back */
}

/* Back of Case and CD */
.back-of-case-and-cd {
    z-index: 1;
    /* Starts below the front of case */
}

.back-of-case-and-cd .cd {
    position: absolute;
    top: 2.75%;
    /* Centered vertically */
    left: 4.75%;
    /* Centered horizontally */
    width: 96%;
    height: 96%;
    background: url('../images/cd.png') no-repeat center;
    background-size: contain;
    border-radius: 50%;
    transform-origin: center center;
    /* Pivot from the center of the CD */
    transition: transform 1s ease, opacity 1s ease;
    /* For smooth state changes */
}

/* Animations */
@keyframes removeCD {
    0% {
        transform: translateZ(0px) translateY(0px) translateX(0px) rotateX(0deg) scale(1);
        opacity: 1;
    }

    30% {
        transform: translateZ(200px) translateY(0px) translateX(40px) rotateX(10deg) scale(1.2);
        /* Pick up */
        opacity: 1;
    }

    100% {
        transform: translateZ(400px) translateY(400px) translateX(-400px) rotateX(90deg) scale(1);
        /* Move farther away */
        opacity: 0.0;
    }
}

@keyframes returnCD {
    0% {
        transform: translateZ(400px) translateY(400px) translateX(-400px) rotateX(90deg) scale(1);
        /* Move farther away */
        opacity: 0.0;
    }

    65% {
        transform: translateZ(200px) translateY(0px) translateX(40px) rotateX(10deg) scale(1.2);
        /* Pick up */
        opacity: 1;
    }

    100% {
        transform: translateZ(0px) translateY(0px) translateX(0px) rotateX(0deg) scale(1);
        opacity: 1;
    }
}

.back-of-case-and-cd .front-face {
    background: url('../images/interior-back-temporary.png') no-repeat center;
    background-size: cover;
}

.back-of-case-and-cd .back-face {
    background: url('../images/exterior-back-temporary.png') no-repeat center;
    background-size: cover;
    transform: rotateY(180deg);
    /* Pre-rotated for back */
}



/* General Styles for Hitboxes */
.interaction-box {
    position: absolute;
    background-color: rgba(0, 0, 0, 0);
    /* Semi-transparent dark overlay */
    color: rgba(255, 255, 255, 0);
    font-family: Arial, sans-serif;
    font-size: 20px;
    text-align: center;
    display: flex;

    padding: 20px;
    text-align: center;
    white-space: normal;

    justify-content: center;
    align-items: center;
    pointer-events: none;
    /* Initially, hitboxes don’t intercept clicks */
    opacity: 0;
    /* Invisible until activated */
    transition: opacity 0.8s ease, transform 0.8s ease;
    z-index: 4;
    transition: background-color 0.8s ease, color 0.8s ease;
    /* Smooth transition for hover effects */
}

/* Hover Styles */
.interaction-box:hover {
    background-color: rgba(0, 0, 0, 0.25); /* 25% dark background */
    color: rgba(255, 255, 255, 1); /* Fully visible text */
    cursor: pointer;
}

/* Left Hitbox */
.left-hitbox {
    width: 20%;
    height: 100%;
    left: -41.0%;
    top: 0;
}

/* Right Hitbox */
.right-hitbox {
    width: 20%;
    height: 100%;
    right: -50%;
    top: 0;
}

/* CD Hitbox */
.cd-hitbox {
    position: absolute;
    width: 48%;
    height: 50%;
    top: 25%;
    left: 78.75%;
    pointer-events: none;
    opacity: 0;
}

/* Booklet Hitbox */
.booklet-hitbox {
    position: absolute;
    width: 48%;
    height: 50%;
    top: 25%;
    left: -18%;
    pointer-events: none;
    opacity: 0;
}

/* Active State for Hitboxes */
.interaction-box.active {
    pointer-events: auto;
    /* Activate clickability */
    opacity: 1;
    /* Make visible */
}

/* Hover Guidance */
.interaction-box:hover {
    background-color: rgba(0, 0, 0, 0.4);
    /* Darker overlay */
}

/* Guidance Text */
.interaction-box span {
    display: none;
    /* Hide guidance text by default */
}

.interaction-box.active span {
    display: block;
    /* Show guidance text only when active */
}