/**
 * Magic Answers plugin
 *
 * -----------------------------------------------------------------------------
 */
/*.wp-block-magic-answers-magic-answers-block{
    display: inline-block;
}*/

.magic-answers{
	max-width:500px;
	width: 100%;
	height:auto;
	position:relative;
	margin:10px auto;
    cursor: pointer;
}
.magic-answers-wrap *{
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
}
.magic-answers img{
	max-width: 100%;
	height: auto;
}
.ma-ball{
    overflow: hidden;
}
.ma-flex{
    display: flex;
    justify-content: center;
    align-items: center;
    align-content: center;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    z-index: 3;
}
.magic-answers .ma-back{
    position: relative;
    display: block;
}
.magic-answers .ma-front{
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    -webkit-transition: opacity .8s ease-in-out;
    transition: opacity .8s ease-in-out;
    display: block;
}
.magic-answers .ma-response{
    position: absolute;
    opacity: 0;
    z-index: 2;
    text-align: center;
    left: 10%;
    top: 10%;
    right: 10%;
    bottom: 10%;
    container: card / size;
    font-family: 'Georgia', 'Garamond', 'Times New Roman', monospace, serif;
}
.magic-answers .ma-response .ma-flex{
    font-size: min( 10cqw, 1.4rem);
    line-height: 1.2;
    user-select: none;
}

.magic-answers.ma-tarot .ma-response{
    left: 14%;
    top: 14%;
    right: 14%;
    bottom: 14%;
}

.magic-answers.ma-mouth .ma-response{
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
}

.magic-answers.ma-mouth .ma-response .ma-flex{
    position: relative;
    max-width: 60%;
    background-color: #000;
    color: #fff;
    padding: min(0.8rem, calc(0.2rem + 2cqw) ) min(1.2rem, calc(0.3rem + 2cqw) );
    border-radius: 0;
    box-shadow: 0 0.125rem 0.5rem rgba(0, 0, 0, 0.3), 0 0.0625rem 0.125rem rgba(0, 0, 0, 0.2);
    -webkit-transition: transform 1s ease-in-out;
    transition: transform 1s ease-in-out;
    text-align: left;
    justify-content: start;
    align-items: start;
    align-content: start;
    line-height: 1.4;
    font-size: min(5cqw, 1.1rem);
}

.magic-answers.ma-mouth .ma-response .ma-flex:before {
    content: "";
    position: absolute;
    width: 0;
    height: 0;
    top: 100%;
    left: 34%;
    filter: drop-shadow(0 0.0625rem 0.0625rem rgba(0, 0, 0, 0.1));
    border-style: solid;
    border-width: 0 0.75rem 0.75rem 0;
    border-color: transparent #000000 transparent transparent;
}

.magic-answers.ma-mouth.show-answer .ma-response .ma-flex{
    transform: translateY(-2rem);
}

.magic-answers.ma-ball .ma-response{
    padding: 2cqw;
    text-shadow: 0 0 2px #080622;
    left:30%;
    top:30%;
    right: 30%;
    bottom: 30%;
    font-family: 'Verdana', 'Arial', 'Helvetica', monospace, sans-serif;
    -webkit-transition: transform .8s 6s ease-in-out;
    transition: transform .8s 6s ease-in-out;
    border-radius: 50rem;
    overflow: hidden;
    color: #64AED8;
}

.magic-answers.ma-ball .ma-response .ma-flex{
    background: #1a2bde;
    background: linear-gradient(138deg, rgba(50,50,250,0.95) 0%, rgba(20,20,100,0.8) 100%);
    border-radius: 6px;
    width: 56%;
    height: 56%;
    position: absolute;
    left: 22%;
    top: 22%;
    box-shadow: 0 0 6px 1px #1a2bde;
    -webkit-transition: -webkit-transform 3s ease-in-out;
    padding: 6cqw;
    overflow: hidden;
    font-size: min(15cqw, 1rem);
}

.magic-answers.ma-ball .ma-response:after{
    position: absolute;
    left: 2%;
    top: 2%;
    width: 96%;
    height: 96%;
    content: "";
    background: #fff;
    z-index: 99;
    border-radius: 50rem;
    background: rgb(255,255,255);
    background: linear-gradient(138deg, rgba(255,255,255,0.2) 0%, rgba(255,255,255,0) 50%); 
}
.magic-answers.ma-sphere .ma-response{
    font-size: 1.3em;
    color: #180E20;
    text-shadow: 0 0 4px #FDF7FF, 0 0 6px #FDF7FF, 0 0 12px #FDF7FF, 0 0 18px #FDF7FF, 0 0 20px #FDF7FF, 0 0 24px #FDF7FF, 0 0 30px #FDF7FF, 0 0 36px #FDF7FF;
    left:20%;
    width: 60%;
    top:10%;
    height: 60%;
    right: 30%;
}

.magic-answers.ma-sphere .ma-response .ma-flex{
/*    transition: transform 0.4s ease-in-out;*/
    opacity: 0.8;
}

.magic-answers.ma-sphere.show-answer .ma-response .ma-flex{
    transform: translatey(0px);
    animation: mafloat 8s ease-in-out infinite;
}

@keyframes mafloat {
    0% {
        transform: translatey(0px);
        opacity: 0.85;
    }
    29% {
        filter: blur(0px);
        margin-left: 0;
    }
    30% {
        filter: blur(10px);
        margin-left: 2rem;
    }
    31% {
        margin-left: 0;
    }
    40% {
        filter: blur(0px);
    }
    50% {
        transform: translatey(-0.5rem);
        opacity: 0.6;
    }
    90% {
        filter: blur(0px);
    }
    95% {
        filter: blur(2px);
    }
    100% {
        transform: translatey(0px);
        filter: blur(0px);
    }
}

.magicanswer-hidden{
    z-index: 1;
    opacity: 0;
}
.ma-animate{
    -webkit-transition: opacity .8s ease-in-out;
    transition: opacity .8s ease-in-out;
}
.magic-answers.show-answer .ma-front{
    opacity: 0;
}
.magic-answers.show-answer .ma-response{
    opacity: 1;
    -webkit-transition: opacity .8s ease-in-out;
    transition: opacity .8s ease-in-out;
}
.magic-answers.ma-tarot.show-answer .ma-response{
    opacity: 1;
    -webkit-transition: opacity .8s .2s ease-in-out;
    transition: opacity .8s .2s ease-in-out;
}
.magic-answers.ma-sphere.show-answer .ma-response{
    -webkit-transition: opacity 6.2s .2s ease-in-out, filter 3s ease-in-out;
    transition: opacity 6.2s .2s ease-in-out, filter 3s ease-in-out;
}
.magic-answers.ma-ball.show-answer .ma-response{
    opacity: 1;
    -webkit-transition: opacity .8s .4s ease-in-out;
    transition: opacity .8s .4s ease-in-out;
}
/**
 * Tarot
 * -----------------------------------------------------------------------------
 */
.magic-answers.ma-tarot {
    max-width: 300px;
    width: 90%;
    margin: 0 auto;
    position: relative;
    -webkit-perspective: 800px;
    -moz-perspective: 800px;
    perspective: 800px;
}
.magic-answers.ma-tarot .ma-front > img{
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.magic-answers.ma-tarot .ma-front,
.magic-answers.ma-tarot .ma-back {
    -webkit-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    transform-style: preserve-3d;
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    backface-visibility: hidden;
    -webkit-transition: all .4s ease-in-out;
    transition: all .4s ease-in-out;
    overflow: hidden;
    box-shadow: 0 2px 4px rgba(0,0,0,0.4);
    -webkit-box-shadow: 0 2px 4px rgba(0,0,0,0.4);
    -webkit-border-radius: 8px;
    border-radius: 8px;
}
.magic-answers.ma-tarot .ma-front {
    z-index: 4;
    -webkit-transform: rotateX(0deg) rotateY(0deg);
    -moz-transform: rotateX(0deg) rotateY(0deg);
    transform: rotateX(0deg) rotateY(0deg);
}
.magic-answers.ma-tarot.show-answer .ma-front {
    z-index: 2;
    background: #333;
    -webkit-transform: rotateY(179deg);
    -moz-transform: rotateY(179deg);
    transform: rotateY(179deg);
}

.magic-answers.ma-tarot .ma-back {
    z-index: 1;
    background: #333;
    -webkit-transform: rotateY(-179deg);
    -moz-transform: rotateY(-179deg);
    transform: rotateY(-179deg);
}

.magic-answers.ma-tarot.show-answer .ma-back{
    z-index: 2;
    background: #fff;
    -webkit-transform: rotateX(0deg) rotateY(0deg);
    -moz-transform: rotateX(0deg) rotateY(0deg);
    transform: rotateX(0deg) rotateY(0deg);
}
.magic-answers-wrap .ma-cta{
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 1rem;
    cursor: pointer;
}
.magic-answers-wrap .ma-cta .ma-cta-btn:hover{
    opacity: 0.9;
}

.magic-answers-wrap .ma-cta .ma-cta-btn{
    background: #000;
    color: #fff;
    padding: 1rem 2rem;
    border-radius: 5rem;
}