/* Flip card showing the real printed artwork (front and back PNGs).
   Used by templates/includes/card_art.html. CR80 ratio: 1012 x 638 px. */

.card-art {
    display: block;
    width: 100%;
    padding: 0;
    margin: 0;
    border: 0;
    background: none;
    font: inherit;
    cursor: pointer;
    position: relative;
    aspect-ratio: 1012 / 638;
    perspective: 1200px;
    -webkit-tap-highlight-color: transparent;
}

.card-art:focus-visible {
    outline: 3px solid #2563eb;
    outline-offset: 4px;
    border-radius: 3.7% / 5.9%;
}

.card-art__inner {
    display: block;   /* it is a <span>; inline boxes ignore width/height and 3D transforms */
    position: relative;
    width: 100%;
    height: 100%;
    transform-style: preserve-3d;
    transition: transform 0.7s cubic-bezier(0.4, 0, 0.2, 1);
}

.card-art.is-flipped .card-art__inner {
    transform: rotateY(180deg);
}

.card-art__face {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 3.7% / 5.9%;   /* CR80 corner radius */
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    box-shadow: 0 0 0 1px rgba(15, 23, 42, 0.08), 0 18px 36px -12px rgba(15, 23, 42, 0.4);
    user-select: none;
    -webkit-user-drag: none;
}

.card-art__face--back {
    transform: rotateY(180deg);
}

@media (prefers-reduced-motion: reduce) {
    .card-art__inner {
        transition: none;
    }
}