/* ==================================================
   TEKSTEN IN DE BESTAANDE DIVI-MODULES
================================================== */

#tarotIntro {
    opacity: 1;
    transform: translateY(0);
    transition:
        opacity 450ms ease,
        transform 450ms ease;
}

#tarotIntro.tarot-hide {
    opacity: 0;
    transform: translateY(-8px);
    pointer-events: none;
}

#tarotResult {
    display: none;
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition:
        opacity 700ms ease,
        transform 700ms ease,
        visibility 0s linear 700ms;
}

#tarotResult.tarot-visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    transition:
        opacity 700ms ease,
        transform 700ms ease,
        visibility 0s;
}

/* ==================================================
   TAROT SHUFFLER
================================================== */

.tarot-shuffler {
    text-align: center;
    padding: 20px 20px 0 20px;
}

.tarot-stack {
    position: relative;
    width: 260px;
    height: 449px;
    margin: 0 auto 35px;
    perspective: 1200px;
    overflow: visible;
}

/* ==================================================
   KAARTEN IN DE STAPEL
================================================== */

.tarot-card {
    position: absolute;
    left: 0;
    top: 0;
    width: 260px;
    height: auto;
    transform-origin: center center;
    will-change: transform;
}

/* ==================================================
   BEDIENINGSKNOP
================================================== */

#stopTarot {
    border: 0;
    padding: 13px 24px;
    cursor: pointer;
    border-radius: 30px;
    font-size: 16px;
}

#stopTarot:disabled {
    cursor: default;
    opacity: 0.65;
}

#stopTarot[hidden] {
    display: none !important;
}

/* ==================================================
   GETROKKEN KAART
================================================== */

.tarot-drawn-card {
    position: absolute;
    left: 0;
    top: 0;
    width: 260px;
    z-index: 9999;
    transform-origin: center center;
    perspective: 1200px;
    transition:
        transform 650ms cubic-bezier(.22,.75,.25,1);
}

/* ==================================================
   KAART OMDRAAIEN
================================================== */

.tarot-flip-inner {
    position: relative;
    width: 100%;
    aspect-ratio: 600 / 1036;
    transform: rotateY(0deg);
    transform-style: preserve-3d;
    -webkit-transform-style: preserve-3d;
    transition:
        transform 900ms cubic-bezier(.4,.05,.2,1);
}

.tarot-flip-inner.is-flipped {
    transform: rotateY(180deg);
}

.tarot-face {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}

.tarot-face-back {
    transform: rotateY(0deg);
}

.tarot-face-front {
    transform: rotateY(180deg);
}