.interaction_container{
    position: relative;
}

/* Card Animation Section */
/* Taken from https://www.w3schools.com/howto/howto_css_flip_card.asp */

.LETTER_container{
    z-index: 0;
    width: 226px;
    height: 325px;
    padding: 20px 20px; /* Exactly 20/96 inch (5mm). Probably enough. */
    
    /* The part below is sealed but prepared for PRINTING PURPOSES ONLY.
    0.5cm because I remember that's the number for MTG cards. 
    DO NOT GO LOWER THAN 5mm! That's the limit for die cutting and cutter plates. 
    If you're planning to laser cut, the limit is probably 0.5 - 3mm due to edge burns. */
    /* padding: 0.5cm */
    
    &.TEST_CONTAINER{
        background-color: blue;
    }
}

.LETTER{
    aspect-ratio: 226 / 325;
    transition: transform 0.5s;
    /* This flag is necessary for backface-visibility. */
    transform-style: preserve-3d; 
    
    /* CSS nesting */
    &.TEST_LETTER{
        background-color: #e028c5; /* This is some shade of pink, need refining. */
    }
    
    /* Still unsure about flavor text, but I'm leaving this here. */
    &.text_frontside{
    }
    
    /* Backside, the main letter. This may end up useless if people uploads .png files with texts.*/
    &.text_backside{
        font-size: min(16px, 9px);
    }
    
    .LETTER_content{
    
        z-index: 10;
        width: 100%;
        height: 100%;
        
        /* This will hide the backside of the class object, 
        so we can easily just use CSS Transform instead of hide/unhide. */
        -webkit-backface-visibility: hidden; /* Safari */
        backface-visibility: hidden;
        
        /* Card Layer, Frontside. */
        &.layer_5_card_front{
            z-index: 10;
            object-fit: contain;
        }
        
        /* Card Layer, Backside. */
        &.layer_5_card_back{
            z-index: 10;
            transform: rotateX(180deg);
        }
        
    }

}

#rotational_element:hover > .LETTER{
    transform: rotateX(180deg) translateY(-100%); /* Rotate along the X-axis (vertical) */
}

/* Card Display */

#pulled_card_full_display{
    position: absolute;
    left: 10%;
    top: 5%;
    width: 80%;
    height: 90%;
    text-align: center;
    background-color: rgb(16,36,52);
    margin: 0;
    display: inline;
}

@keyframes opacity_reveal_enlarge {
    from {
        opacity: 0;
        transform: scale(40%);
    }
    to {
        opacity: 1;
        transform: scale(100%);
    }
}

.reveal_opacity{
    animation: opacity_reveal_enlarge 2s;
    animation-fill-mode: forwards;
}

#card_back_button{
    position: absolute;
    right: 10%;
    top: 5%;
    background-image: url("../assets/button/back_50px.png");
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    width: 50px;
    height: 50px;
}

/* If you want to make this mobile-responsive you'll have to change the priority
from height to width when it crossed the square screen treshhold (orientation: portrait) */
#rotational_element {
    position: absolute;
    left: 30%;
    top: 2%;
    /* width: 40%; */
    height: 200%;
}

#card_main_display {
    height: 40%;
}

#cardcaptor_caption {
    position: absolute;
    left: calc(5% - 12px);
    top: 80%;
    width: 90%;
    height: 10%;
    padding-top: 30px;
    color: black;
    font-size: 14pt;
/*     border: solid grey 12px;
    border-radius: 5px; */
    background-image: url("../assets/menu/game_card_text_box_cut.png");
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-position: center;
    background-color: transparent;
}

/* Animation chain, credits to : https://ccscoder.medium.com/chaining-css-animations-using-javascript-1b171708360e */

:root{
    --animation-duration: 1s;
}

/* We specify the start and result of the animation for the first one..  */

@keyframes move_down{
    to {
        transform: translateY(256px);
    }
}

/* and only specify the result for the next animation  */

@keyframes flip_and_return{
    from {
        transform: translateY(256px);
    }
    to{
        transform: rotateX(180deg);
    }
}

.move_down{
    animation: move_down var(--animation-duration) forwards ease-in;
}

.flip_and_return{
    animation: flip_and_return var(--animation-duration) forwards ease-out;
}




@media (orientation: landscape) {

    /* If landscape, album opens up like a butterfly / two-side binder */
    .layer_album{
        z-index: 10;
        display: hidden;
        /* There may be different image for landscape and portrait. */
        background-image: url("../media/album_default_landscape_fallback.jpg"); 
        min-height: 650 px;
        min-width: 452 px;
    }
}

@media (orientation: portrait) {
    
    /* Card Dispenser Layer. Portrait one must be top center, 
    around 2/3 of the screen with minimal of 50 px from the edge.*/
    .pulled_card_full_display{
        z-index: 0;
        margin: auto;       /* TODO: NEED TESTING */
    }

    /* If landscape, album opens up like a butterfly / two-side binder */
    .layer_album{
        z-index: 10;
        /* There may be different image for landscape and portrait. */
        background-image: url("../media/album_default_landscape_fallback.jpg");  
        min-height: 650 px;
        min-width: 452 px;
    }

    #rotational_element{
        left: 15%;
    }
}


/* Coin Section */


/* Taken from https://www.w3schools.com/howto/howto_css_flip_card.asp */

.coin_container{
    z-index: 0;
    width: 50px;
    height: 50px;
    
    
    
    /* The part below is sealed but prepared for PRINTING PURPOSES ONLY.
    0.5cm because I remember that's the number for MTG cards. 
    DO NOT GO LOWER THAN 5mm! That's the limit for die cutting and cutter plates. 
    If you're planning to laser cut, the limit is probably 0.5 - 3mm due to edge burns. */
    /* padding: 0.5cm */
    
    &.TEST_CONTAINER{
        background-color: blue;
    }
}

.sukonbu_coin{
    
    position: relative;
    width: 100%;
    height: 100%;
    transition: transform 0.5s;
    /* This flag is necessary for backface-visibility. */
    transform-style: preserve-3d; 
    
    /* CSS nesting */
    &.TEST_LETTER{
        background-color: #e028c5; /* This is some shade of pink, need refining. */
    }
    
    .coin{
    
        z-index: 0;
        position: absolute;
        width: 100%;
        height: 100%;
        
        /* This will hide the backside of the class object, 
        so we can easily just use CSS Transform instead of hide/unhide. */
        -webkit-backface-visibility: hidden; /* Safari */
        backface-visibility: hidden;
        
        /* Card Layer, Frontside. */
        &.coin_front{
            z-index: 0;
            background-image: url("../assets/machine_assets/coin.png");
            background-size: 50px;
        }
        
        /* Card Layer, Backside. */
        &.coin_back{
            background-image: url("../assets/coin back.jpg");
            background-size: 50px;
            transform: rotateY(180deg);
        }
        &.coin_side{
            width: 10px;
            height: 50px;
            transform: rotateY(90deg);
        }
    }

}

/* For testing purposes! */
.coin_container:hover .sukonbu_coin{
    transform: rotateY(90deg); /* Rotate along the Y-axis (vertical) */
}

/* For testing purposes! */
.coin_container:hover .coin_side{
    transform: rotateY(-90deg); /* Rotate along the Y-axis (vertical) */
}

/* For testing purposes! */
.coin_container:hover{
    transform: translateY(180px) 1s; /* Rotate along the Y-axis (vertical) */
}


/* For testing purposes! */
/* @keyframes coinTranslationChain{
    to{
        transform: translateY(180px);
    }
}

.animation{
    animation: coinTranslationChain 1s forwards ease-out; 
} */

/* Animation chain, credits to : https://ccscoder.medium.com/chaining-css-animations-using-javascript-1b171708360e 
Timing sheets refering to this sketch by Kinoko and the immediate comments
https://discord.com/channels/902764187753783346/1024329830034055178/1227218190426312834
Actual timing calculation taken from: https://matthewlein.com/tools/ceaser
with these settings: easeInOutSine (exp felt a bit too fast) 500ms
transition: all 500ms cubic-bezier(0.445, 0.050, 0.550, 0.950); easeInOutSine
transition-timing-function: cubic-bezier(0.445, 0.050, 0.550, 0.950); easeInOutSine

Animation plan, based on the CARDDASS process:
1. Pick up the coin.
2. Insert the coin.
3. Turn the knob.
4. Wait for the card to come out.
5. Enjoy reading the card!
The whole process takes up 5s at least, 7 seconds at most.
I want it skippable, so I might implement a skip button with another magical transform.
...problem is, how to stop a still-running animation? ...can't I just hide everything?

*/

:root{
    --std-animation-duration: 1s;
    --coin-insert-animation-duration: 1s;
    --knob-turning-animation-duration: 1s;
    
    --card-dispenser-animation-duration: 1s;
    --card-dispenser-animation-duration-alt-bezier: 1s;
    
    --card-display-animation-duration: 1s;
}

/* We specify the start and result of the animation for the first one..  */

@keyframes move_down{
    to {
        transform: translateY(256px);
    }
}

/* and only specify the result for the next animation  */

@keyframes flip_and_return{
    from {
        transform: translateY(256px);
    }
    to{
        transform: rotateX(180deg);
    }
}

.move_down{
    animation: move_down var(--animation-duration) forwards ease-in;
}

.flip_and_return{
    animation: flip_and_return var(--animation-duration) forwards ease-out;
}


@media (orientation: landscape) {

    /* If landscape, album opens up like a butterfly / two-side binder */
    .layer_album{
        z-index: 10;
        display: hidden;
        /* There may be different image for landscape and portrait. */
        background-image: url("../media/album_default_landscape_fallback.jpg"); 
        min-height: 650 px;
        min-width: 452 px;
    }
}

@media (orientation: portrait) {
    
    /* Card Dispenser Layer. Portrait one must be top center, 
    around 2/3 of the screen with minimal of 50 px from the edge.*/
    .pulled_card_full_display{
        z-index: 0;
        margin: auto;       /* TODO: NEED TESTING */
    }

    /* If landscape, album opens up like a butterfly / two-side binder */
    .layer_album{
        z-index: 10;
        /* There may be different image for landscape and portrait. */
        background-image: url("../media/album_default_landscape_fallback.jpg");  
        min-height: 650 px;
        min-width: 452 px;
    }
}