/* ------------------------------------------------------------------
 * cards.css — shared product card styles.
 *
 * Loaded by both index.html (featured carousel) and category.html
 * (grid). Keeping the card chrome in its own file means index.html
 * can render category-style cards without pulling in products.css's
 * .hero / html-body / *-reset rules, which collide with the
 * homepage's own hero styling.
 *
 * Selectors covered: .product-card (base + ::before glow), .card-link
 * overlay, .card-stripe-top/bot, .card-pattern, .card-image, .card-body,
 * .card-name, .card-tags / .card-tag / .card-tag-icon, .card-footer,
 * .card-price-label, .card-price-row, .card-price-icon, .card-price-val,
 * .card-add-btn (+ icon, label, hover/active), the data-tossing
 * keyframes, and .product-toss-ghost.
 *
 * NOT covered here: carousel-only rules on .product-card live in
 * styles.css under `.products__track .product-card` (or the bare
 * `.product-card` rule there) — min-width / max-width / scroll-snap.
 * Those properties are absent from the rules below, so the cascade
 * leaves them untouched on the homepage.
 * ------------------------------------------------------------------ */

/* ──────────── PRODUCT CARD ──────────── */
.product-card {
    position: relative;
    border-radius: 12px;
    background: radial-gradient(ellipse 82.97% 82.97% at 50% 50%, rgba(217, 217, 217, 0.15) 0%, rgba(115, 115, 115, 0) 100%);
    overflow: hidden;
    display: flex; flex-direction: column;
    padding: 20px;
    /* Smooth hover constrained to box-shadow + outline — anything
     * that creates a new stacking context (transform, filter,
     * opacity<1, will-change) would scope the inner SVG patterns'
     * `mix-blend-mode: overlay` to the card itself and make them
     * render as opaque grey shapes instead of subtle blends. */
    outline: 1px solid transparent;
    outline-offset: -1px;
    transition:
        box-shadow 0.28s ease,
        outline-color 0.28s ease;
}
.product-card:hover {
    outline-color: rgba(255, 255, 255, 0.10);
    box-shadow:
        0 14px 32px -10px rgba(0, 0, 0, 0.45),
        0 0 0 1px rgba(250, 64, 57, 0.08);
}
/* Invisible overlay link making the entire card clickable. The
 * .card-add-btn below is lifted above this with z-index so the
 * "Add to basket" button keeps its own click handler. */
.product-card .card-link {
    position: absolute;
    inset: 0;
    z-index: 2;
    border-radius: inherit;
    text-indent: -9999px;
    overflow: hidden;
    background: transparent;
}
.product-card .card-link:focus-visible {
    outline: 2px solid rgb(250, 64, 57);
    outline-offset: -4px;
}
/* Red glow in the bottom-left corner. */
.product-card::before {
    content: "";
    position: absolute;
    bottom: -40px; left: -40px;
    width: 120px; height: 120px;
    background: #fa3f3980;
    border-radius: 50%;
    filter: blur(50px);
    opacity: 0.6;
    pointer-events: none;
    z-index: 1;
}
.card-stripe-top {
    position: absolute; top: 0; left: calc(50% - 50px);
    width: 101px; height: 5px; pointer-events: none; z-index: 1;
}
.card-stripe-bot {
    position: absolute; bottom: 0; left: calc(50% - 50px);
    width: 101px; height: 5px; pointer-events: none; z-index: 1;
    transform: rotate(180deg);
}
.card-pattern {
    position: absolute; left: -141px; top: -89px;
    width: 704px; height: 675px;
    overflow: hidden; pointer-events: none;
}
.card-image {
    width: 100%;
    /* Match the source artwork's 1920x1080 ratio so thumbnails
     * stay in correct proportions at every viewport — a fixed
     * 200px height was distorting them on narrow screens. */
    aspect-ratio: 16 / 9;
    border-radius: 10px;
    background-image: var(--card-img);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    flex-shrink: 0; position: relative; z-index: 1;
}
.card-body {
    position: relative; z-index: 1; flex: 0 0 auto;
    display: flex; flex-direction: column; gap: 12px;
    margin-top: 12px;
}
.card-name {
    font-family: "GTA Art Deco", sans-serif; font-weight: 500; font-size: 24px;
    color: #fff; line-height: 1.17; margin: 0;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.card-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 0; min-height: 34px; }
.card-tag {
    display: inline-flex; align-items: center; gap: 12px;
    padding: 6px 12px; border-radius: 4px;
    background: rgba(198, 212, 255, 0.15);
    outline: 1px solid rgba(198, 212, 255, 0.15); outline-offset: -1px;
    border: none;
    font-family: "GTA Art Deco", sans-serif; font-weight: 500; font-size: 16px; color: #fff;
}
.card-tag .card-tag-icon {
    width: 22px; height: 22px;
    object-fit: contain;
    flex-shrink: 0;
}
/* z-index MUST be higher than the .card-link overlay's z-index: 2,
 * not lower. The footer also has position: relative, so this pair
 * creates a stacking context — every descendant (including the
 * Add-to-basket button and its z-index: 3) is then trapped inside
 * THIS local context, so the button can never out-stack the link
 * at the .product-card level no matter what z-index we give it.
 *
 * Lifting the footer's stacking context to 3 puts the whole footer
 * (price label, price row, button) ABOVE the card-link overlay, so
 * the button finally receives :hover and click events. The image
 * and body areas above the footer stay below the link (z-index 2),
 * so clicking them still navigates to the product detail page —
 * the original intent. */
.card-footer {
    position: relative; z-index: 3; margin-top: auto;
    display: flex; flex-direction: column; gap: 10px;
    padding-top: 24px;
}
.card-price-label {
    font-family: "GTA Art Deco", sans-serif; font-weight: 400; font-size: 16px;
    color: rgba(255, 255, 255, 0.55); line-height: 1; margin-bottom: 0;
}
.card-price-row {
    display: flex; align-items: center; gap: 10px; margin-bottom: 0;
    color: #fa4039;
}
.card-price-row svg,
.card-price-row .card-price-icon {
    width: 20px; height: 20px; flex-shrink: 0;
    object-fit: contain; display: block;
}
.card-price-val {
    font-family: "GTA Art Deco", sans-serif; font-weight: 500; font-size: 32px;
    color: #fa4039; line-height: 1;
}

/* ──────────── ADD-TO-CART BUTTON (CARD) ──────────── */
/* Same liquid-glass language as the product detail page's
 * `.product-info__add-btn`: standalone translate/scale, bouncy
 * cubic-bezier easing, top-bright / bottom-shadow inset rim,
 * plus a red glow that intensifies on hover. Icon does a small
 * scale + rotate micro-bounce.
 *
 * The icon and label both use `translate` (standalone, NOT the
 * `transform` shorthand) for their layout offsets so the hover
 * scale/rotate compose cleanly without fighting the positioning
 * for control of `transform`. */
.card-add-btn {
    position: relative;
    width: 100%; height: 52px; padding: 12px 16px; border-radius: 12px;
    background: radial-gradient(ellipse 77.46% 320.85% at 50% 50%, #fa4039 0%, #942622 100%);
    box-shadow:
        0 6px 40px 0 rgba(250, 64, 57, 0.57),
        inset 0 1px 0 rgba(255, 255, 255, 0.30),
        inset 0 -1px 0 rgba(0, 0, 0, 0.18);
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    font-family: "GTA Art Deco", sans-serif; font-weight: 500; font-size: 18px;
    line-height: 1; white-space: nowrap;
    color: #fff; cursor: pointer; border: 0;
    text-decoration: none;
    /* Standalone properties so hover lift, press squish, and the
     * toss-flash keyframe compose without fighting `transform`. */
    translate: 0 0;
    scale: 1;
    transition:
        translate 0.35s cubic-bezier(0.34, 1.56, 0.64, 1),
        scale 0.15s ease,
        filter 0.2s ease,
        box-shadow 0.3s ease;
    /* Sits above the .card-link overlay so the click hits this
     * button instead of navigating to the detail page. */
    z-index: 3;
}
.card-add-btn .card-add-btn-icon {
    --icon-size: 22px;
    --icon-x: 5px;
    --icon-y: 2px;
    width: var(--icon-size); height: var(--icon-size);
    flex-shrink: 0; display: block;
    object-fit: contain;
    translate: var(--icon-x) var(--icon-y);
    scale: 1;
    rotate: 0deg;
    transition:
        scale 0.3s cubic-bezier(0.34, 1.56, 0.64, 1),
        rotate 0.35s ease;
}
.card-add-btn .card-add-btn-label {
    --label-size: 18px;
    --label-x: 0px;
    --label-y: 0px;
    margin: 0; padding: 0;
    font-family: "GTA Art Deco", sans-serif; font-weight: 600;
    font-size: var(--label-size);
    line-height: 1; color: #fff;
    translate: var(--label-x) var(--label-y);
}
.card-add-btn:visited {
    color: #fff;
    text-decoration: none;
}
.card-add-btn:hover {
    translate: 0 -3px;
    filter: brightness(1.10) saturate(115%);
    box-shadow:
        0 14px 52px 0 rgba(250, 64, 57, 0.85),
        inset 0 1px 0 rgba(255, 255, 255, 0.35),
        inset 0 -1px 0 rgba(0, 0, 0, 0.20);
}
.card-add-btn:hover .card-add-btn-icon {
    scale: 1.15;
    rotate: -8deg;
}
.card-add-btn:active {
    translate: 0 0;
    scale: 0.97;
    filter: brightness(0.95);
    box-shadow:
        0 4px 24px 0 rgba(250, 64, 57, 0.5),
        inset 0 1px 0 rgba(255, 255, 255, 0.20),
        inset 0 -1px 0 rgba(0, 0, 0, 0.18);
    transition: translate 0.05s ease, scale 0.05s ease;
}

/* During the toss-to-cart animation the button briefly flashes
 * brighter and more saturated, like a recoil spark. */
.card-add-btn[data-tossing="true"] {
    animation: cardAddBtnFlash 0.42s ease;
}
@keyframes cardAddBtnFlash {
    0%   { filter: brightness(1)   saturate(100%); }
    30%  { filter: brightness(1.4) saturate(140%); }
    100% { filter: brightness(1)   saturate(100%); }
}

/* Card-image "kick" — squash-and-stretch played at the moment the
 * toss ghost is launched, so the card feels like it's physically
 * flinging the item into the air. Same gooey easing as the navbar
 * hover lens. */
@keyframes cardImageKick {
    0%   { scale: 1    1;    }
    20%  { scale: 1.04 0.94; }
    50%  { scale: 0.97 1.04; }
    100% { scale: 1    1;    }
}
.card-image[data-tossing="true"] {
    animation: cardImageKick 0.42s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* The flying ghost — a fixed-positioned thumbnail clone of the
 * clicked card's image that travels along an arc to the cart pill.
 * JS positions it via getBoundingClientRect and animates it with
 * the Web Animations API. Higher z-index than the navbar (1000)
 * so the arc stays visible as the ghost passes over the bar. */
.product-toss-ghost {
    position: fixed;
    background-size: cover;
    background-position: center;
    box-shadow:
        0 10px 40px rgba(0, 0, 0, 0.4),
        0 0 60px rgba(250, 64, 57, 0.5),
        inset 0 0 0 2px rgba(255, 255, 255, 0.4);
    pointer-events: none;
    z-index: 2000;
    will-change: transform, opacity, border-radius;
}