/* -----------------------------------------------------------
   Sheezys Auto Inventory – Main Stylesheet
   ----------------------------------------------------------- */
/* Inventory Grid */
.sheezys-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 20px;
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
}
/* Vehicle Card */
.sheezys-card {
    background: #fff;
    border-radius: 6px;
    overflow: hidden;
    border: 4px solid #6A0DAD; /* Purple border */
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    /* Hover Animation */
    transition: 
        transform 0.25s ease,
        box-shadow 0.25s ease,
        border-color 0.25s ease;
}
.sheezys-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 10px 25px rgba(106, 13, 173, 0.35);
    border-color: #9b30ff; /* Brighter purple on hover */
}
/* Card Image */
.sheezys-card-img {
    padding-top: 60%;
    background-size: cover;
    background-position: center;
    position: relative;
}
/* Status Ribbon */
.sheezys-ribbon {
    position: absolute;
    top: 10px;
    left: -10px;
    padding: 5px 15px;
    color: #fff;
    font-weight: 700;
    transform: rotate(-5deg);
}
.sheezys-ribbon.sold {
    background: #444;
}
.sheezys-ribbon.pending {
    background: #ff9800;
}
/* Card Body */
.sheezys-card-body {
    padding: 15px;
    font-family: Montserrat, sans-serif;
}
.sheezys-card-body h3 {
    margin: 0 0 10px;
    font-size: 18px;
    font-weight: 700;
}
/* Price */
.price {
    font-size: 20px;
    font-weight: 800;
    color: #e53935;
}
/* Payments */
.payments {
    font-size: 13px;
    font-weight: 600;
    margin: 5px 0;
}
/* Mileage */
.mileage {
    font-size: 12px;
    margin-bottom: 10px;
}
/* Gold Button */
.sheezys-btn {
    display: inline-block;
    background: #D4AF37; /* Gold */
    color: #000;
    padding: 10px 15px;
    text-decoration: none;
    font-weight: 700;
    border-radius: 4px;
    transition: background 0.2s ease, box-shadow 0.2s ease;
}
/* Gold Hover */
.sheezys-btn:hover {
    background: #FFD700; /* Brighter gold */
    box-shadow: 0 0 12px rgba(255, 215, 0, 0.6);
}

/* -----------------------------------------------------------
   Click-to-view tornado spin + debris effect
   (needed by scripts.js -- adds .spin-explode to the card and
   creates .wall-debris shards when VIEW DETAILS is clicked)
   ----------------------------------------------------------- */
.spin-explode {
    animation: cardSpinOut 0.55s ease-in forwards;
}

@keyframes cardSpinOut {
    0% {
        transform: scale(1) rotate(0deg);
        opacity: 1;
    }
    100% {
        transform: scale(0.2) rotate(720deg);
        opacity: 0;
    }
}

.wall-debris {
    position: fixed;
    background-color: #888;
    border: 1px solid #444;
    pointer-events: none;
    z-index: 9999;
    transform: translate(-50%, -50%) rotateX(0) rotateY(0) rotateZ(0);
    animation: debrisFly 0.6s ease-out forwards;
}

@keyframes debrisFly {
    0% {
        transform: translate(-50%, -50%) rotateX(0) rotateY(0) rotateZ(0);
        opacity: 1;
    }
    100% {
        transform: translate(calc(-50% + var(--dest-x)), calc(-50% + var(--dest-y)))
                   rotateX(var(--rot-x)) rotateY(var(--rot-y)) rotateZ(var(--rot-z));
        opacity: 0;
    }
}