/* =============================================
   swipe-hero.css - Interactive "Swipe Cars" hero deck
   Used on: home.html
   Self-contained; all classes prefixed `sh-` to avoid collisions.

   Deal colors use the site-wide --deal-* tokens (defined in styles.css)
   with fallbacks, so this file renders correctly even before that token
   set lands, and never drifts from the palette every other deal surface
   (Swipe, Car Search, Garage, FAQ) uses.
   ============================================= */

.sh-stage {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 18px;
    width: 100%;
    margin: 0 auto;
}

/* Swipe counter: "1 / 4", progress through the demo */
.sh-counter {
    position: relative;
    z-index: 2;
    font-size: 0.85rem;
    color: var(--text-muted);
    font-weight: 600;
}
.sh-counter b { color: var(--accent); }

/* The deck */
.sh-deck {
    position: relative;
    width: min(360px, 82vw);
    aspect-ratio: 3 / 4;
    z-index: 1;
}

/* A card */
.sh-card {
    position: absolute;
    inset: 0;
    border-radius: 22px;
    overflow: hidden;
    background: var(--panel);
    /* A tight dark drop shadow plus a hairline edge, never a colored halo */
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.45), 0 0 0 1px var(--border-subtle);
    transform-origin: center bottom;
    /* Default = the "incoming card settles" eased glide */
    transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.4s ease;
    will-change: transform;
    user-select: none;
    -webkit-user-select: none;
}
.sh-card.is-top { touch-action: pan-y; cursor: grab; }
.sh-card.is-top:active { cursor: grabbing; }
.sh-card.dragging { transition: none; }

/* The <picture> only picks the file format; the photo lays out as before */
.sh-card-pic {
    display: contents;
}

.sh-card-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    pointer-events: none;
    -webkit-user-drag: none;
}

.sh-card-scrim {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg,
        rgba(11, 15, 25, 0) 36%,
        rgba(11, 15, 25, 0.55) 62%,
        rgba(11, 15, 25, 0.93) 100%);
    pointer-events: none;
}

/* Commit color wash */
.sh-wash {
    position: absolute;
    inset: 0;
    z-index: 2;
    opacity: 0;
    transition: opacity 0.25s ease;
    pointer-events: none;
}
.sh-card.flash-like .sh-wash { background: radial-gradient(circle at 70% 40%, rgba(16, 185, 129, 0.38), transparent 72%); opacity: 1; }
.sh-card.flash-nope .sh-wash { background: radial-gradient(circle at 30% 40%, rgba(239, 68, 68, 0.38), transparent 72%); opacity: 1; }

/* Deal badge: the credibility cue on every card. Filled chip with dark text
   for a scored tier ("Great deal 34"); the check-price tier is an outline
   with no score, since it isn't ranked against the others. */
.sh-badge {
    position: absolute;
    top: 14px;
    left: 14px;
    z-index: 3;
    padding: 6px 12px;
    border-radius: 999px;
    font-size: 0.74rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    line-height: 1.2;
    border: 1.5px solid transparent;
    white-space: nowrap;
}
.sh-badge.key-screaming  { background: var(--deal-screaming, #22C55E);  color: var(--deal-on, #0B0F19); }
.sh-badge.key-great      { background: var(--deal-great, #16A34A);      color: var(--deal-on, #0B0F19); }
.sh-badge.key-good       { background: var(--deal-good, #86EFAC);       color: var(--deal-on, #0B0F19); }
.sh-badge.key-fair       { background: var(--deal-fair, #9CA3AF);       color: var(--deal-on, #0B0F19); }
.sh-badge.key-overpriced { background: var(--deal-overpriced, #F28B82); color: var(--deal-on, #0B0F19); }
.sh-badge.key-check {
    background: transparent;
    border-color: var(--deal-check, #D1D5DB);
    color: var(--deal-check, #D1D5DB);
}

/* LIKE / NOPE stamps */
.sh-stamp {
    position: absolute;
    top: 26px;
    z-index: 4;
    font-size: 1.5rem;
    font-weight: 900;
    letter-spacing: 0.08em;
    padding: 4px 16px;
    border-radius: 10px;
    border: 3px solid;
    opacity: 0;
    pointer-events: none;
    text-transform: uppercase;
}
.sh-stamp.like { right: 18px; transform: rotate(14deg);  color: var(--success); border-color: var(--success); }
.sh-stamp.nope { left: 18px;  transform: rotate(-14deg); color: var(--error);   border-color: var(--error); }

/* Card info overlay (Just Salad anatomy) */
.sh-info {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 3;
    padding: 18px 18px 20px;
}
.sh-price { font-family: var(--font-display); font-size: 2.4rem; font-weight: 800; letter-spacing: 0; color: #fff; line-height: 1; }
.sh-name  { margin-top: 6px; font-size: 1.02rem; font-weight: 600; color: #F9FAFB; }
.sh-meta  { margin-top: 8px; display: flex; gap: 14px; flex-wrap: wrap; font-size: 0.82rem; color: #C7CBD3; }

.sh-profit { margin-top: 12px; }
.sh-profit-head { display: flex; justify-content: space-between; align-items: baseline; font-size: 0.78rem; gap: 8px; }
.sh-profit-label { color: #9CA3AF; }
.sh-profit-amt { font-weight: 800; font-size: 0.95rem; white-space: nowrap; }
/* Signed amount, colored by MMDeal's tone so a negative (overpriced) demo
   car would never read as a win: same three tokens the FAQ table uses. */
.sh-profit-amt.tone-positive { color: var(--deal-positive-text, #86EFAC); }
.sh-profit-amt.tone-neutral  { color: var(--deal-neutral-text, #D1D5DB); }
.sh-profit-amt.tone-negative { color: var(--deal-negative-text, #F28B82); }
.sh-bar { margin-top: 6px; height: 6px; border-radius: 3px; background: rgba(255, 255, 255, 0.1); overflow: hidden; }
.sh-bar-fill { height: 100%; border-radius: 3px; }
.sh-bar-fill.tone-positive { background: var(--deal-positive-text, #86EFAC); }
.sh-bar-fill.tone-neutral  { background: var(--deal-neutral-text, #D1D5DB); }
.sh-bar-fill.tone-negative { background: var(--deal-negative-text, #F28B82); }

/* Action buttons: round icon buttons (Pass / Like). Hover tints the fill
   and border; no lift, no blur. */
.sh-actions { position: relative; z-index: 2; display: flex; gap: 18px; }
.sh-btn {
    width: 58px;
    height: 58px;
    border-radius: 50%;
    border: 1px solid var(--border-strong);
    background: rgba(255, 255, 255, 0.04);
    color: #fff;
    font-size: 1.35rem;
    cursor: pointer;
    display: grid;
    place-items: center;
    transition: background-color var(--dur-short) var(--ease-out), border-color var(--dur-short) var(--ease-out), color var(--dur-short) var(--ease-out);
}
.sh-btn.nope { color: #FCA5A5; }
.sh-btn.like { color: #6EE7B7; }
.sh-btn.nope:hover { border-color: var(--error);   background: rgba(239, 68, 68, 0.15); }
.sh-btn.like:hover { border-color: var(--success); background: rgba(16, 185, 129, 0.15); }
.sh-btn:disabled { opacity: 0.4; cursor: not-allowed; }

/* Gesture hint */
.sh-hint {
    position: relative;
    z-index: 2;
    font-size: 0.8rem;
    color: var(--text-muted);
    transition: opacity 0.4s ease;
}
.sh-hint.hidden { opacity: 0; }

/* The soft-gate card (slides into the stack, not a modal) */
.sh-gate {
    position: absolute;
    inset: 0;
    /* Must sit above the demo cards: they get inline z-index up to 100 */
    z-index: 200;
    border-radius: 22px;
    /* A flat panel with a hairline, like the cards it replaces */
    background: var(--panel);
    border: 1px solid var(--border-subtle);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.45);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 30px 26px;
    gap: 12px;
    opacity: 0;
    transform: scale(0.96) translateY(10px);
    transition: opacity 0.45s ease, transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}
.sh-gate.show { opacity: 1; transform: none; }
.sh-gate-emoji { font-size: 2.4rem; }
.sh-gate h2 { margin: 0; font-size: 1.5rem; font-weight: 800; color: var(--text); letter-spacing: -0.02em; }
.sh-gate p { margin: 0; color: var(--text-muted); font-size: 0.95rem; line-height: 1.5; }
.sh-gate-likes { color: var(--accent); font-weight: 700; }
/* The flat primary button */
.sh-gate-cta {
    margin-top: 6px;
    width: 100%;
    padding: 14px 22px;
    border: none;
    border-radius: var(--radius-btn);
    cursor: pointer;
    background: var(--accent-strong);
    color: var(--text);
    font-weight: 700;
    font-size: 1rem;
    transition: background-color var(--dur-short) var(--ease-out), border-color var(--dur-short) var(--ease-out), color var(--dur-short) var(--ease-out);
}
.sh-gate-cta:hover { background: var(--accent-strong-hover); }
.sh-gate-replay {
    background: none;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    font-size: 0.85rem;
    text-decoration: underline;
    min-height: 44px;
    padding: 0 12px;
}
.sh-gate-replay:hover { color: var(--text); }

/* One-time gesture hint nudge on the first card */
@keyframes sh-nudge {
    0%, 100% { transform: translate3d(0, 0, 0) rotate(0deg); }
    28%      { transform: translate3d(30px, 0, 0) rotate(3deg); }
    56%      { transform: translate3d(-16px, 0, 0) rotate(-1.6deg); }
    78%      { transform: translate3d(6px, 0, 0) rotate(0.6deg); }
}
.sh-card.is-top.sh-nudge { animation: sh-nudge 1.15s ease-in-out 0.6s 1; }

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
    .sh-card { transition: opacity 0.2s ease; }
    .sh-card.is-top.sh-nudge { animation: none; }
}

/* Keep the deck comfortably centered when the hero stacks on tablet/mobile */
@media (max-width: 1024px) {
    .sh-stage { max-width: 420px; }
}

/* Inline SVG icons (replacing emoji) */
.sh-meta span { display: inline-flex; align-items: center; gap: 5px; }
.sh-meta-ic { width: 14px; height: 14px; flex: none; opacity: 0.85; }
.sh-btn svg { width: 24px; height: 24px; }