/* ── RacerCard — candy-colored tactile toy card ─────
 * Used by the homepage featured rail and the collection grid.
 * Backgrounds rotate through the redesign palette so a row of cards
 * reads like a row of toys, not a uniform list.
 */
.RacerCard_card__ytqnq {
  position: relative;
  display: flex;
  flex-direction: column;
  border-radius: var(--radius-2xl);
  padding: 18px 18px 20px;
  text-decoration: none;
  color: var(--rv-deep-space);
  border: 1px solid rgba(20, 14, 24, 0.18);
  box-shadow: 0 18px 36px rgba(20, 14, 24, 0.36),
              inset 0 1px 0 rgba(255, 255, 255, 0.42);
  overflow: hidden;
  isolation: isolate;
  /* 3D tilt — `--rv-tilt-x` / `--rv-tilt-y` are written by the
   * useCardTilt hook on pointermove. Default to 0 so cards are flat
   * unless hovered. perspective lets the rotateX/Y read as depth.
   * transform-style: preserve-3d keeps any future child-3D effects
   * working. */
  perspective: 900px;
  transform: rotateX(var(--rv-tilt-x, 0deg)) rotateY(var(--rv-tilt-y, 0deg));
  transform-style: preserve-3d;
  will-change: transform;
  transition: transform var(--motion-base) var(--easing-standard),
              box-shadow var(--motion-base) var(--easing-standard),
              border-color var(--motion-base) var(--easing-standard);
}

@media (prefers-reduced-motion: reduce) {
  .RacerCard_card__ytqnq { perspective: none; transform: none !important; }
}

.RacerCard_card__ytqnq::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle at 30% 20%, rgba(255, 255, 255, 0.32), transparent 60%),
                    radial-gradient(circle at 80% 90%, rgba(20, 14, 24, 0.18), transparent 60%);
  pointer-events: none;
  z-index: 0;
}

.RacerCard_card__ytqnq:hover,
.RacerCard_card__ytqnq:focus-visible {
  /* Compose lift translateY with the cursor-tracking rotateX/Y from
   * the base rule. CSS transforms aren't additive — declaring
   * `transform: translateY(-4px)` here would erase the tilt. The
   * order matters: translate first (in screen space), then tilt
   * around the card's own axis. */
  transform: translateY(-4px) rotateX(var(--rv-tilt-x, 0deg)) rotateY(var(--rv-tilt-y, 0deg));
  border-color: rgba(20, 14, 24, 0.32);
  /* Layered hover shadow: a tight contact-shadow under the card +
   * a wider warm racer-pink glow to suggest the card lifting off the
   * dark cosmic floor. The inset highlight makes the top edge feel
   * lit. Reads better than a single drop-shadow against the dark
   * page background. */
  box-shadow:
    0 8px 16px rgba(20, 14, 24, 0.32),
    0 28px 56px rgba(255, 111, 163, 0.22),
    0 0 0 1px rgba(255, 111, 163, 0.16),
    inset 0 1px 0 rgba(255, 255, 255, 0.5);
  outline: none;
}

.RacerCard_card__ytqnq:focus-visible {
  outline: 3px solid var(--rv-cream-2026);
  outline-offset: 4px;
}

/* ── Variants ───────────────────────────────────────── */
.RacerCard_variant_featured__vT6v_ {
  min-height: 240px;
  aspect-ratio: 3 / 4;
}

.RacerCard_variant_compact__gxkf2 {
  min-height: 220px;
  padding: 14px 14px 14px;
  border-radius: var(--radius-xl);
  aspect-ratio: 3 / 4;
}

.RacerCard_variant_large__0F6og {
  min-height: 320px;
  padding: 24px;
  border-radius: var(--radius-2xl);
  aspect-ratio: 3 / 4;
}

/* ── Image container — fills the card body, plate label sits at the
       bottom in the footer. Racer hero alphas are square with a lot
       of transparent margin, so we let them grow into the available
       space without forcing a 1:1 box. */
.RacerCard_imageWrap__bJZWT {
  position: relative;
  z-index: 1;
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  width: 100%;
  min-height: 0;
}

.RacerCard_image__E_x_Z {
  width: 100%;
  max-width: 100%;
  height: 100%;
  max-height: 100%;
  object-fit: contain;
  transform: scale(1.18);
  /* Single soft drop-shadow at low opacity. Earlier I split this
   * across two passes (22px ambient + 6px contact) to hide the
   * rectangular halo on dark backgrounds, but at small card sizes
   * the two offsets read as two distinct horizontal stripes under
   * the racer's flat silhouette edge. The candy card gradient
   * already hides the rectangle issue, so one pass is enough. */
  filter: drop-shadow(0 16px 22px rgba(20, 14, 24, 0.28));
  /* Feather the outer ~6% so the rectangular bounds blend out. The
   * racer fills the center, so the mask never touches the subject. */
  -webkit-mask-image: radial-gradient(ellipse 94% 96% at 50% 50%, #000 88%, transparent 100%);
          mask-image: radial-gradient(ellipse 94% 96% at 50% 50%, #000 88%, transparent 100%);
  transition: transform var(--motion-base) var(--easing-standard),
              opacity 220ms var(--easing-standard);
  /* Fade-in once the browser reports the hero image is decoded so
     newly-rendered cards in collection grids and rails don't pop in. */
  opacity: 0;
  animation: RacerCard_rvCardImageIn__2BYd3 320ms ease-out 0ms forwards;
}

@keyframes RacerCard_rvCardImageIn__2BYd3 {
  to { opacity: 1; }
}

/* Fallback shown when the racer's hero alpha fails to load (CDN
   miss, racer not yet pre-rendered, etc.). Renders the plate prefix
   in big display type on top of the candy gradient so the card still
   reads as a real racer card, not a broken image icon. */
.RacerCard_imagePlaceholder__76hI7 {
  font-family: var(--font-display);
  font-size: clamp(2.4rem, 5vw, 4rem);
  letter-spacing: var(--tracking-wide);
  color: rgba(20, 14, 24, 0.42);
  line-height: 1;
  text-shadow: 0 2px 6px rgba(255, 255, 255, 0.3);
  user-select: none;
}

.RacerCard_card__ytqnq:hover .RacerCard_image__E_x_Z,
.RacerCard_card__ytqnq:focus-visible .RacerCard_image__E_x_Z {
  transform: scale(1.24);
}

/* ── Footer (plate + secondary line) ────────────────── */
.RacerCard_footer__rXi8k {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
  align-items: flex-start;
}

.RacerCard_plate__QeLYz {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--rv-deep-space);
  line-height: 1.05;
}

.RacerCard_variant_compact__gxkf2 .RacerCard_plate__QeLYz {
  font-size: var(--text-base);
}

.RacerCard_variant_large__0F6og .RacerCard_plate__QeLYz {
  font-size: var(--text-2xl);
}

.RacerCard_secondary__9fZmU {
  font-family: var(--font-ui);
  font-size: var(--text-xs);
  line-height: 1.2;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: rgba(20, 14, 24, 0.78);
  font-weight: var(--weight-bold);
  /* Don't try to fit "Lunar Rover · Queen Bee" on one line of a
   * narrow card — let it wrap across two lines so it stays
   * readable instead of getting truncated. */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ── Heart action button — top-right ───────────────── */
.RacerCard_heart__FMV6n {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.94);
  color: var(--rv-racer-pink);
  box-shadow: 0 4px 10px rgba(20, 14, 24, 0.22);
  cursor: pointer;
  transition: transform 200ms var(--easing-standard), background 200ms ease;
}

.RacerCard_heart__FMV6n:hover,
.RacerCard_heart__FMV6n:focus-visible {
  transform: scale(1.08);
  background: var(--rv-cream-2026);
  outline: none;
}

.RacerCard_heart__FMV6n:active {
  transform: scale(0.94);
}

.RacerCard_heartActive__6MayT {
  background: var(--rv-racer-pink);
  color: var(--rv-cream-2026);
}

.RacerCard_heartActive__6MayT:hover,
.RacerCard_heartActive__6MayT:focus-visible {
  background: var(--rv-racer-pink);
}

/* ── Favorite confirmation chip ──────────────────────
 * Tiny ephemeral toast that floats next to the heart for ~1.5s
 * after a click. Tells the user the toggle landed without forcing
 * them to look at the icon state. Pointer-events: none so it
 * never intercepts clicks even if it overlaps the card.
 */
.RacerCard_favToast__FbI9_ {
  position: absolute;
  top: 14px;
  right: 52px;
  z-index: 4;
  padding: 5px 10px;
  border-radius: 999px;
  background: rgba(20, 14, 24, 0.92);
  color: var(--rv-cream-2026);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  white-space: nowrap;
  pointer-events: none;
  box-shadow: 0 4px 14px rgba(20, 14, 24, 0.32);
  animation: RacerCard_rvFavToast__VsoRA 1.5s ease forwards;
}

@keyframes RacerCard_rvFavToast__VsoRA {
  0%   { opacity: 0; transform: translateY(-4px) scale(0.92); }
  15%  { opacity: 1; transform: translateY(0) scale(1); }
  85%  { opacity: 1; transform: translateY(0) scale(1); }
  100% { opacity: 0; transform: translateY(-2px) scale(0.96); }
}

@media (prefers-reduced-motion: reduce) {
  .RacerCard_favToast__FbI9_ { animation-duration: 0.1s; }
}

/* ── Tone variants ──────────────────────────────────── */
.RacerCard_tone_leaf___xcmQ {
  background: linear-gradient(150deg, var(--rv-card-leaf) 0%, var(--rv-card-clover) 100%);
}

.RacerCard_tone_pink___3HGv {
  background: linear-gradient(150deg, var(--rv-card-pink) 0%, var(--rv-racer-pink) 100%);
}

.RacerCard_tone_poppy__Te_kR {
  background: linear-gradient(150deg, var(--rv-card-poppy) 0%, var(--rv-poppy) 100%);
}

.RacerCard_tone_lilac__EjCBz {
  background: linear-gradient(150deg, var(--rv-card-lilac) 0%, var(--rv-lilac-purple) 100%);
}

.RacerCard_tone_teal__h1rHJ {
  background: linear-gradient(150deg, var(--rv-card-teal) 0%, var(--rv-turbo-teal) 100%);
}

.RacerCard_tone_sunset__Tf_CI {
  background: linear-gradient(150deg, var(--rv-card-sunset) 0%, var(--rv-sunset) 100%);
}

.RacerCard_tone_clover__iQ8PO {
  background: linear-gradient(150deg, var(--rv-card-clover) 0%, var(--rv-leaf) 100%);
}

/* ── Racer detail page — chrome only ────────────────────────
 * Page-level wrapper, back link, and "More racers" rail.
 *
 * The actual inspect block (hero / info / traits) lives in
 * src/components/rv/RacerInspect.module.css and is shared with the
 * collection modal. Most rules that used to live here moved over
 * when the merge happened.
 */

.RacerDetail_page__gcioo {
  min-height: 100dvh;
  min-height: 100dvh;
  padding: 96px 24px 56px;
  background: var(--gradient-racer-page);
}

.RacerDetail_shell__LVR2i {
  max-width: 1280px;
  margin: 0 auto;
}

.RacerDetail_backLink__cB80A {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  margin-bottom: 24px;
  border-radius: var(--radius-pill, 999px);
  background: rgba(33, 25, 50, 0.6);
  border: 1px solid var(--rv-glass-border-mauve);
  color: var(--rv-cream-2026);
  font-family: var(--font-ui);
  font-size: var(--text-sm, 0.875rem);
  font-weight: var(--weight-bold, 700);
  letter-spacing: var(--tracking-wide, 0.04em);
  text-transform: uppercase;
  text-decoration: none;
  min-height: 44px;
  transition: background 200ms ease, border-color 200ms ease, transform 200ms ease;
}

.RacerDetail_backLink__cB80A:hover,
.RacerDetail_backLink__cB80A:focus-visible {
  background: rgba(167, 139, 250, 0.12);
  border-color: var(--rv-racer-pink);
  transform: translateX(-2px);
  outline: none;
}

@media (max-width: 768px) {
  .RacerDetail_page__gcioo {
    padding: 80px 16px 48px;
  }
}

/* ── Related racers rail ─────────────────────────────────
 * Sits below the inspect block so /racer/<plate> doesn't end in
 * a void of dark space. Keeps the visit going — most users opening
 * a single racer want to flip through more.
 */
.RacerDetail_related__6TZKz {
  margin-top: 56px;
  padding-top: 32px;
  border-top: 1px solid var(--rv-glass-border-mauve);
}

.RacerDetail_relatedHeader__atBEp {
  display: flex;
  align-items: baseline;
  gap: 16px;
  margin-bottom: 20px;
}

.RacerDetail_relatedEyebrow__ooryH {
  margin: 0;
  font-family: var(--font-ui);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--rv-racer-pink);
  font-weight: var(--weight-bold);
}

.RacerDetail_relatedHeading__wU2pO {
  margin: 0;
  flex: 1;
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 2.4vw, 2.2rem);
  letter-spacing: var(--tracking-wide);
  line-height: 1.1;
  text-transform: uppercase;
  color: var(--rv-cream-2026);
}

.RacerDetail_relatedSeeAll__355XH {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  border-radius: var(--radius-pill);
  background: rgba(56, 50, 75, 0.5);
  border: 1px solid var(--rv-glass-border-mauve);
  color: var(--rv-cream-2026);
  font-family: var(--font-ui);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  font-weight: var(--weight-bold);
  text-decoration: none;
  transition: background 200ms ease, border-color 200ms ease;
}

.RacerDetail_relatedSeeAll__355XH:hover,
.RacerDetail_relatedSeeAll__355XH:focus-visible {
  background: rgba(167, 139, 250, 0.18);
  border-color: var(--rv-racer-pink);
  outline: none;
}

.RacerDetail_relatedRail__fF6gz {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 16px;
}

@media (max-width: 1023px) {
  .RacerDetail_relatedRail__fF6gz {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  .RacerDetail_related__6TZKz {
    margin-top: 36px;
    padding-top: 24px;
  }
  .RacerDetail_relatedHeader__atBEp {
    gap: 12px;
    flex-wrap: wrap;
  }
  /* Horizontal scroll on small screens — feels right for a "more
     to browse" rail and keeps the cards big enough to actually read. */
  .RacerDetail_relatedRail__fF6gz {
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: 60vw;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding-bottom: 8px;
    -webkit-overflow-scrolling: touch;
  }
  .RacerDetail_relatedRail__fF6gz > * {
    scroll-snap-align: start;
  }
}

/* ── Print stylesheet — local rules only ─────
 * CSS Modules requires every selector to contain at least one local
 * class — a top-level `:global(body)` fails the build with "not pure".
 * The page-chrome :global rules (body, nav, footer, [data-print-hide])
 * live in `src/styles/globals.css` under @media print, where global
 * scope is normal. Local-class rules stay here.
 */
@media print {
  .RacerDetail_page__gcioo { background: #fff !important; padding: 24px !important; }
  .RacerDetail_backLink__cB80A { display: none !important; }
  .RacerDetail_related__6TZKz, .RacerDetail_relatedRail__fF6gz { display: none !important; }
}