/*
 * About page business cards: five separate cards scattered like the old
 * photo, which visitors can pick up and drag around (js/business-cards.js).
 *
 * Each card's starting spot is its center (--x, --y as % of the strip),
 * its tilt (--r) and its stacking order (z-index). Phones use their own
 * layout (--mx, --my, --mr), matching the old mobile image.
 */

.bcards {
    --w: 23.8%; /* card width, as % of the strip */
    position: relative;
    width: 100%;
    aspect-ratio: 2880 / 723;
}

.bcard {
    position: absolute;
    left: var(--x);
    top: var(--y);
    width: var(--w);
    /* Pull back by half the card so --x/--y is its center (cards are 2000 × 1143) */
    margin-left: calc(var(--w) / -2);
    margin-top: calc(var(--w) * -0.2858);
    rotate: var(--r);
    /* --lift raises the card on hover; --tilt is the lean while dragging (set by the JS) */
    transform: translateY(var(--lift, 0px)) rotate(var(--tilt, 0deg));
    max-width: none;
    cursor: grab;
    touch-action: none; /* dragging on a phone moves the card, not the page */
    user-select: none;
    -webkit-user-select: none;
    -webkit-user-drag: none;
    transition: --lift 0.3s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.3s ease, scale 0.25s ease;
}

/* Registered so the lift can animate smoothly */
@property --lift {
    syntax: '<length>';
    inherits: false;
    initial-value: 0px;
}

/* Hover: the card rises a little with a soft shadow, hinting it can be picked up */
@media (hover: hover) {
    .bcard:hover {
        --lift: -6px;
        box-shadow: 0 0.75rem 1.5rem rgba(0, 0, 0, 0.12);
    }
}

.bcard.is-held {
    --lift: -8px;
    cursor: grabbing;
    scale: 1.04;
    box-shadow: 0 1.5rem 3rem rgba(0, 0, 0, 0.18);
}

.bcard.is-movie  { --x: 9.3%;  --y: 49.5%; --r: -10deg;  z-index: 1; }
.bcard.is-bread  { --x: 46.9%; --y: 29.3%; --r: -2.5deg; z-index: 2; }
.bcard.is-coffee { --x: 29.9%; --y: 61.5%; --r: 3deg;    z-index: 3; }
.bcard.is-summer { --x: 87.4%; --y: 48.6%; --r: -6.5deg; z-index: 4; }
.bcard.is-pizza  { --x: 65.7%; --y: 62.3%; --r: 12deg;   z-index: 5; }

@media screen and (max-width: 767px) {
    .bcards {
        --w: 36.7%;
        aspect-ratio: 1881 / 1012;
    }

    .bcard.is-movie  { --x: 20.3%; --y: 26.7%; --r: -12.5deg; z-index: 1; }
    .bcard.is-bread  { --x: 46.1%; --y: 40.5%; --r: -3deg;    z-index: 2; }
    .bcard.is-summer { --x: 79.9%; --y: 28.1%; --r: 11deg;    z-index: 3; }
    .bcard.is-coffee { --x: 22.8%; --y: 67.1%; --r: 3deg;     z-index: 4; }
    .bcard.is-pizza  { --x: 69.7%; --y: 74.2%; --r: -18deg;   z-index: 5; }
}