/* WP Motion Design — Card Flip CSS
   Door flip: each face rotates independently.
   Front:  0deg → +90deg (disappears at edge)
   Back:  -90deg → 0deg  (appears from edge)
   Swap happens at the 90deg midpoint via JS timeout. */

.wpmd-card-flip {
    position: relative;
    display: block;
    cursor: pointer;
    isolation: isolate;
}

.wpmd-card-flip .wpmd-cf-inner {
    position: relative;
    width: 100%;
    height: 100%;
    min-height: inherit;
}

.wpmd-card-flip .wpmd-cf-front,
.wpmd-card-flip .wpmd-cf-back {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    -webkit-transform-origin: center center;
    transform-origin: center center;
    overflow: hidden;
}

/* Front: visible at 0deg */
.wpmd-card-flip .wpmd-cf-front {
    z-index: 2;
    opacity: 1;
    -webkit-transform: perspective(800px) rotateY(0deg);
    transform: perspective(800px) rotateY(0deg);
}

/* Back: hidden at -90deg (waiting behind the edge) */
.wpmd-card-flip .wpmd-cf-back {
    z-index: 1;
    opacity: 0;
    pointer-events: none;
    -webkit-transform: perspective(800px) rotateY(-90deg);
    transform: perspective(800px) rotateY(-90deg);
}

/* Vertical variants */
.wpmd-card-flip.is-flip-vertical .wpmd-cf-back {
    -webkit-transform: perspective(800px) rotateX(-90deg);
    transform: perspective(800px) rotateX(-90deg);
}