/* ============================================================
   Pulze Picks — Simulated Analysis Reel (mobile-first 3D)
   Touch-swipe card carousels with tilt, raised depth.
   Mobile-first: base styles are for small screens, then boost.
   ============================================================ */

.demo-reel {
  padding: 36px 0;
  position: relative;
  z-index: 1;
}

.demo-head h2 { margin: 0 0 4px; font-size: 1.6rem; }
.demo-head p { margin: 0; }
.demo-head em { color: var(--muted); font-style: normal; font-size: .82rem; }

/* ---- Sport selector chips (horizontally swipeable on mobile) ---- */
.demo-chip-row {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  padding: 18px 2px 6px;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.demo-chip-row::-webkit-scrollbar { display: none; }
.demo-chip {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 9px 15px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: linear-gradient(180deg, rgba(28, 28, 28, 0.92), rgba(18, 18, 18, 0.96));
  color: var(--muted);
  font-weight: 700;
  font-size: .9rem;
  cursor: pointer;
  transition: transform .15s ease, box-shadow .15s ease, color .15s ease, border-color .15s ease;
  box-shadow: 0 1px 0 rgba(255,255,255,0.05) inset, 0 8px 20px -14px rgba(0,0,0,0.8);
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
.demo-chip-emoji { font-size: 1.05rem; filter: drop-shadow(0 2px 3px rgba(0,0,0,0.5)); }
.demo-chip:active { transform: translateY(0) scale(0.96); }
.demo-chip.is-active {
  color: #0a0a0a;
  border-color: transparent;
  background: var(--grad-heat);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.5) inset, 0 12px 28px -12px rgba(255, 212, 0, 0.8);
}
.demo-chip.is-active .demo-chip-emoji { filter: drop-shadow(0 2px 3px rgba(0,0,0,0.4)); }
.demo-chip:hover { border-color: var(--primary); color: var(--text); }

/* ---- Carousel ---- */
.reel { overflow: hidden; }
.reel.is-hidden { display: none; }
.reel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 2px 10px;
}
.reel-sport { font-weight: 800; font-size: 1rem; }
.reel-edge {
  font-size: .8rem;
  font-weight: 800;
  color: var(--accent, var(--primary));
  border: 1px solid;
  border-color: color-mix(in srgb, var(--accent, var(--primary)) 45%, transparent);
  background: color-mix(in srgb, var(--accent, var(--primary)) 10%, transparent);
  padding: 5px 12px;
  border-radius: 999px;
  letter-spacing: .02em;
}

/* Horizontal snap-scroll track = native mobile swipe */
.demo-track {
  display: flex;
  gap: 16px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding: 6px 2px 18px;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.demo-track::-webkit-scrollbar { display: none; }
.demo-track > * { scroll-snap-align: start; }

/* ---- 3D analysis card (mobile-first: near full width) ---- */
.demo-card {
  flex: 0 0 min(88vw, 300px);
  position: relative;
  background: linear-gradient(180deg, rgba(30, 30, 30, 0.97), rgba(18, 18, 18, 0.97));
  border: 1px solid color-mix(in srgb, var(--accent, var(--primary)) 30%, var(--border));
  border-radius: 20px;
  padding: 18px;
  box-shadow:
    0 1px 0 rgba(255,255,255,0.06) inset,
    0 24px 48px -28px rgba(0,0,0,0.95),
    0 0 0 1px rgba(0,0,0,0.3);
  transform-style: preserve-3d;
  will-change: transform;
  overflow: hidden;
}
/* soft accent glow bleeding from the top edge */
.demo-card::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(120% 55% at 50% 0%, color-mix(in srgb, var(--accent, var(--primary)) 14%, transparent), transparent 70%);
  pointer-events: none;
}

.demo-card-top { display: flex; align-items: center; justify-content: space-between; }
.demo-badge {
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .06em;
  color: var(--muted);
}
.demo-badge .sim-badge {
  color: var(--yellow);
  border: 1px solid color-mix(in srgb, var(--yellow) 40%, transparent);
  background: var(--yellow-soft);
  padding: 2px 7px;
  border-radius: 6px;
  margin-left: 6px;
  font-size: .62rem;
}
.demo-conf {
  font-weight: 800;
  font-size: 1.1rem;
  color: var(--accent, var(--primary));
  filter: drop-shadow(0 0 10px color-mix(in srgb, var(--accent, var(--primary)) 60%, transparent));
}

.demo-matchup { margin: 14px 0 2px; font-size: 1.05rem; line-height: 1.25; }
.demo-pick { margin: 0 0 12px; color: var(--muted); font-size: .92rem; }
.demo-pick strong { color: var(--text); }
.demo-odds {
  color: var(--green);
  font-weight: 800;
  font-size: .9rem;
  margin-left: 4px;
}
.demo-reason { margin: 0 0 16px; color: var(--muted); font-size: .88rem; line-height: 1.5; }

/* ---- Analysis score bars (3 instances = model keys) ---- */
.demo-bars { display: flex; flex-direction: column; gap: 9px; }
.demo-bar-row { display: flex; align-items: center; gap: 9px; }
.demo-bar-label {
  flex: 0 0 16px;
  font-size: .72rem;
  color: var(--muted);
  font-weight: 700;
  text-align: right;
}
.demo-bar-track {
  flex: 1;
  height: 9px;
  border-radius: 999px;
  background: rgba(8, 8, 8, 0.9);
  border: 1px solid rgba(140, 125, 0, 0.35);
  overflow: hidden;
}
.demo-bar-fill {
  display: block;
  height: 100%;
  width: var(--w, 0%);
  border-radius: inherit;
  background: linear-gradient(90deg, var(--accent, var(--primary)), #fff 220%);
  box-shadow: 0 0 12px color-mix(in srgb, var(--accent, var(--primary)) 55%, transparent);
  animation: growBar 1.1s cubic-bezier(0.22,1,0.36,1) both;
  transform-origin: left;
}
@keyframes growBar { from { transform: scaleX(0); } to { transform: scaleX(1); } }
[dir="rtl"] .demo-bar-fill { transform-origin: right; }
[dir="rtl"] .demo-bar-label { text-align: left; }
.demo-bar-num { flex: 0 0 38px; font-size: .74rem; font-weight: 800; color: var(--accent, var(--primary)); }

/* ---- Dots ---- */
.demo-dots { display: flex; gap: 8px; justify-content: center; padding: 4px 0 2px; }
.dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--border);
  transition: background .2s ease, transform .2s ease;
}
.dot.is-active { background: var(--primary); transform: scale(1.35); }

.demo-cta { text-align: center; padding: 22px 0 6px; }

/* ---- Richer spacing/scale on larger screens (still mobile-first) ---- */
@media (min-width: 640px) {
  .demo-reel { padding: 48px 0; }
  .demo-head h2 { font-size: 2rem; }
  .demo-card { flex-basis: 280px; padding: 22px; }
}
@media (min-width: 1024px) {
  .demo-card:hover {
    transform: translateY(-6px);
    box-shadow:
      0 1px 0 rgba(255,255,255,0.08) inset,
      0 36px 60px -30px rgba(0,0,0,0.98),
      0 0 30px -10px color-mix(in srgb, var(--accent, var(--primary)) 45%, transparent);
  }
}

/* Tilt applied via JS as inline transform */
.demo-card[data-tilt] { transition: box-shadow .2s ease; }

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  .demo-track { scroll-behavior: auto; }
  .demo-bar-fill { animation: none; }
  .demo-card { transition: none; }
}