/* Basta — the lander's AuctionCard carousel + the interactive demo previews,
   recreated in Basta's own palette (cream paper / ink / ochre) on the PP ground. */
.pshowcase.basta {
  padding: 0 var(--pad) clamp(2.5rem, 7vh, 4.5rem);
  --bs-paper: #fafaf7;
  --bs-ink: #0a0a0a;
  --bs-mist: #8a8a85;
  --bs-line: #e3dfd7;
  --bs-ochre: #8b6914;
  --bs-ochre-soft: #b08b3e;
  --bs-sans: "ABC Diatype", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
}

/* ---- Animated 3D carousel ---- */
.basta .bs-carousel {
  position: relative;
  width: 100%;
  max-width: 46rem;
  margin: 0 auto;
  overflow: hidden;
  --cw: clamp(210px, 27vw, 290px);
  --ch: calc(var(--cw) * 1.34);
}
.basta .bs-stage {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  perspective: 1700px;
  height: calc(var(--ch) + 3rem);
}
.basta .bs-deck { position: relative; width: var(--cw); height: var(--ch); transform-style: preserve-3d; }
.basta .bs-card3d {
  position: absolute;
  top: 50%;
  left: 50%;
  width: var(--cw);
  height: var(--ch);
  transform-style: preserve-3d;
  transition: transform 0.62s cubic-bezier(0.19, 1, 0.22, 1), opacity 0.62s ease, filter 0.62s ease;
  will-change: transform, opacity;
}
.basta .bs-flip { position: relative; width: 100%; height: 100%; transform-style: preserve-3d; transition: transform 0.65s cubic-bezier(0.19, 1, 0.22, 1); }
.basta .bs-face {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--bs-paper);
  border: 1px solid var(--bs-line);
  border-radius: 16px;
  box-shadow: 0 40px 90px -34px rgba(10, 10, 10, 0.5);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

/* Front face */
.basta .bs-card-img { position: relative; flex: 1; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.basta .bs-item { width: 100%; height: 100%; object-fit: contain; display: block; }
.basta .bs-cover { object-fit: cover; }
.basta .bs-house { position: absolute; top: 15px; right: 17px; width: auto; object-fit: contain; }
.basta .bs-invert { filter: brightness(0) invert(1); }
.basta .bs-card-info { padding: 0.8rem 0.95rem 0.95rem; border-top: 1px solid var(--bs-line); background: var(--bs-paper); }
.basta .bs-card-title {
  margin: 0; font-family: var(--bs-sans); font-size: 0.82rem; font-weight: 400;
  line-height: 1.25; letter-spacing: -0.01em; color: var(--bs-ink);
  min-height: 2.5em; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.basta .bs-card-meta { display: flex; align-items: flex-end; justify-content: space-between; gap: 0.5rem; margin-top: 0.65rem; padding-top: 0.55rem; border-top: 1px solid var(--bs-line); }
.basta .bs-lbl { display: block; font-size: 7.5px; letter-spacing: 0.26em; text-transform: uppercase; color: var(--bs-mist); }
.basta .bs-bid { display: block; margin-top: 0.35rem; font-family: var(--bs-sans); font-size: 1.3rem; font-weight: 600; letter-spacing: -0.025em; line-height: 1; color: var(--bs-ink); font-variant-numeric: tabular-nums; }
.basta .bs-meta-sold { text-align: right; }
.basta .bs-date { display: block; margin-top: 0.3rem; font-size: 0.58rem; color: var(--bs-ink); font-variant-numeric: tabular-nums; }

/* Back face — press quote */
.basta .bs-back { transform: rotateY(180deg); justify-content: space-between; padding: 1.7rem 1.4rem 1.5rem; }
.basta .bs-quote { position: relative; margin: 0; font-family: var(--bs-sans); font-size: clamp(0.95rem, 2.4vw, 1.12rem); font-weight: 300; line-height: 1.3; letter-spacing: -0.015em; color: var(--bs-ink); }
.basta .bs-quote-mark { position: absolute; left: -0.1rem; top: -1.5rem; font-family: Georgia, "Times New Roman", serif; font-size: 3.4rem; line-height: 1; color: var(--bs-ochre-soft); }
.basta .bs-quote em { font-style: normal; font-weight: 500; }
.basta .bs-quote b { font-weight: 500; color: var(--bs-ochre); }
.basta .bs-press { width: auto; max-width: 72%; object-fit: contain; opacity: 0.9; }

/* Chips */
.basta .bs-chips { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0.45rem; margin-top: 1.4rem; }
.basta .bs-chip { display: inline-flex; align-items: center; gap: 0.45rem; border: 1px solid var(--bs-line); border-radius: 999px; padding: 0.4em 0.85em; background: transparent; color: var(--bs-mist); font-family: var(--bs-sans); font-size: 0.7rem; font-weight: 500; cursor: pointer; transition: color 0.4s, border-color 0.4s, background 0.4s, box-shadow 0.4s; }
.basta .bs-chip:hover { color: var(--bs-ink); border-color: rgba(10, 10, 10, 0.18); }
.basta .bs-chip.on { background: var(--bs-paper); color: var(--bs-ink); border-color: rgba(10, 10, 10, 0.2); box-shadow: 0 4px 14px -6px rgba(10, 10, 10, 0.2); }
.basta .bs-chip-mark { display: inline-flex; width: 15px; height: 15px; align-items: center; justify-content: center; overflow: hidden; }
.basta .bs-chip-mark img { width: 100%; height: 100%; object-fit: contain; }
.basta .bs-chip:not(.on) .bs-chip-mark { filter: grayscale(1); opacity: 0.6; }

/* ---- Interactive demo previews ---- */
.basta .bs-demos { display: flex; flex-direction: column; align-items: center; gap: clamp(2.6rem, 6vw, 4.2rem); }
.basta .bs-demo { width: 100%; }

/* Desktop demos — browser window, auto-scrolling capture (not clickable) */
.basta .bs-demo-desk { max-width: 60rem; margin: 0 auto; --win-h: clamp(300px, 40vw, 480px); }
.basta .bs-win { border: 1px solid var(--blue-faint); border-radius: 12px; overflow: hidden; background: #fff; box-shadow: 0 40px 80px -42px rgba(10, 10, 10, 0.5); }
.basta .bs-win-bar { display: flex; align-items: center; gap: 7px; height: 36px; padding: 0 15px; background: #f5f4f1; border-bottom: 1px solid var(--blue-faint); }
.basta .bs-win-dot { width: 10px; height: 10px; border-radius: 50%; background: rgba(0, 8, 254, 0.16); }
.basta .bs-win-url { margin-left: 12px; font-size: 0.62rem; letter-spacing: 0.05em; color: var(--blue-dim); }
.basta .bs-win-body { position: relative; height: var(--win-h); overflow: hidden; background: #fff; }
.basta .bs-win-shot { position: absolute; top: 0; left: 0; width: 100%; display: block; will-change: transform; animation: bsScroll 24s ease-in-out infinite alternate; }
.basta .bs-win-shot-slow { animation-duration: 34s; }
@keyframes bsScroll { from { transform: translateY(0); } to { transform: translateY(calc(-100% + var(--win-h))); } }

/* TikTok — phone, cross-fading feed */
.basta .bs-demo-phone { display: flex; flex-direction: column; align-items: center; }
.basta .bs-phone { width: clamp(250px, 62vw, 304px); padding: 10px; border-radius: 40px; background: #0a0a0a; box-shadow: 0 40px 80px -38px rgba(10, 10, 10, 0.6); }
.basta .bs-phone-screen { position: relative; aspect-ratio: 390 / 844; border-radius: 30px; overflow: hidden; background: #000; }
.basta .bs-phone-shot { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; animation: bsFade 12s infinite; }
.basta .bs-phone-shot:nth-child(1) { animation-delay: 0s; }
.basta .bs-phone-shot:nth-child(2) { animation-delay: 4s; }
.basta .bs-phone-shot:nth-child(3) { animation-delay: 8s; }
@keyframes bsFade { 0% { opacity: 0; } 3% { opacity: 1; } 30% { opacity: 1; } 34% { opacity: 0; } 100% { opacity: 0; } }

/* Captions */
.basta .bs-demo-cap { display: flex; flex-direction: column; gap: 0.2rem; margin-top: 0.95rem; }
.basta .bs-demo-cap-center { align-items: center; text-align: center; }
.basta .bs-demo-client { font-family: var(--bs-sans); font-size: 1.05rem; font-weight: 500; color: var(--ink); letter-spacing: -0.01em; }
.basta .bs-demo-tag { font-size: 0.62rem; letter-spacing: 0.12em; color: var(--blue-dim); }

@media (prefers-reduced-motion: reduce) {
  .basta .bs-win-shot, .basta .bs-phone-shot { animation: none; }
  .basta .bs-phone-shot:nth-child(1) { opacity: 1; }
}

/* Shared note */
.basta .bs-note { margin: clamp(1.1rem, 2.5vw, 1.7rem) auto 0; max-width: 46rem; color: var(--blue-dim); font-size: 0.72rem; letter-spacing: 0.03em; text-align: center; }
.basta .bs-demos + .bs-note { max-width: 52rem; }