/* ============================================================================
 * BuckUp Interactive Demos — Styles
 * Council v3 / Wave 3 / Task #24
 * Loaded once via <link rel="stylesheet" href="/assets/demos/buckup-demos.css">
 *
 * Brand tokens (--iron-deep, --bone, --dust, etc.) inherited from index.html
 * :root. This file ONLY contains demo-specific rules; no global resets.
 *
 * Performance contract:
 *   - Only `transform` and `opacity` animate (no layout/paint thrash)
 *   - All hover states GPU-promoted via `transform: translateZ(0)` where needed
 *   - prefers-reduced-motion strips every transition + animation
 * ========================================================================== */

/* ───── DEMO 1 ─── Scroll-tied altimeter gauge ──────────────────────────────*/

.bu-gauge {
  position: relative;
  width: 280px;
  height: 280px;
  display: inline-block;
}
.bu-gauge__canvas {
  display: block;
  width: 100%;
  height: 100%;
}
.bu-gauge__readout {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0;
  font-family: var(--f-stencil, "Big Shoulders Stencil Display", sans-serif);
  font-weight: 800;
  font-size: clamp(20px, 3.5vw, 32px);
  color: var(--bone, #E6E3DC);
  letter-spacing: 0.04em;
  pointer-events: none;
}
.bu-gauge__sep,
.bu-gauge__target,
.bu-gauge__unit {
  color: var(--steel, #6B7077);
  font-weight: 700;
}
.bu-gauge__current {
  color: var(--dust, #E8A33D);
  font-variant-numeric: tabular-nums;
  min-width: 4.2ch;
  text-align: right;
}
.bu-gauge__unit {
  font-family: var(--f-mono, "Share Tech Mono", monospace);
  font-size: 0.5em;
  letter-spacing: 0.2em;
  margin-left: 0.4em;
  align-self: center;
}


/* ───── DEMO 3 ─── Patch shimmer + rarity glow ──────────────────────────────*/

.patch-card {
  position: relative;
  overflow: hidden;
  cursor: pointer;
  transform: translateZ(0); /* GPU layer */
  /* Enter is 220ms; exit (box-shadow fade) is 400ms per spec. */
  transition: transform var(--motion-base, 220ms) var(--motion-easing, cubic-bezier(0.22, 1, 0.36, 1)),
              box-shadow 400ms var(--motion-easing, cubic-bezier(0.22, 1, 0.36, 1));
  outline: none;
}
.patch-card:focus-visible {
  outline: 2px solid var(--dust, #E8A33D);
  outline-offset: 4px;
}

/* Shimmer sweep — single pass on hover/focus.
   45° gradient slips across the card; pure transform+opacity (no layout). */
.patch-card::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    115deg,
    transparent 0%,
    transparent 40%,
    rgba(230, 227, 220, 0.18) 50%,
    transparent 60%,
    transparent 100%
  );
  transform: translateX(-100%);
  opacity: 0;
  pointer-events: none;
  transition: opacity 200ms ease-out;
}
.patch-card:hover::after,
.patch-card:focus-visible::after {
  opacity: 1;
  animation: bu-shimmer 600ms ease-out forwards;
}
@keyframes bu-shimmer {
  from { transform: translateX(-100%); }
  to   { transform: translateX(100%); }
}

/* Rarity glow rings (box-shadow only — composited, no layout). */
.patch-card[data-rarity="common"]:hover,
.patch-card[data-rarity="common"]:focus-visible {
  box-shadow: 0 0 24px 4px rgba(107, 112, 119, 0.5);
}
.patch-card[data-rarity="rare"]:hover,
.patch-card[data-rarity="rare"]:focus-visible {
  box-shadow: 0 0 28px 6px rgba(59, 123, 191, 0.55);
}
.patch-card[data-rarity="epic"]:hover,
.patch-card[data-rarity="epic"]:focus-visible {
  box-shadow: 0 0 32px 8px rgba(147, 95, 188, 0.55);
}
.patch-card[data-rarity="legendary"]:hover,
.patch-card[data-rarity="legendary"]:focus-visible {
  box-shadow: 0 0 36px 10px rgba(232, 163, 61, 0.7),
              0 0 64px 22px rgba(232, 163, 61, 0.3);
}

/* ───── DEMO 4 ─── Topo card 3D tilt ────────────────────────────────────────*/

/* Apply perspective on the GRID/CONTAINER for correct 3D rendering.
   If the author wraps tilt cards in a grid, add this class to that grid. */
.topo-tilt-grid {
  perspective: 1200px;
}

.topo-card-tilt {
  position: relative;
  transform-style: preserve-3d;
  transition: transform 300ms var(--motion-easing, cubic-bezier(0.22, 1, 0.36, 1));
  will-change: transform;
}
.topo-card-tilt > img,
.topo-card-tilt .topo-card-tilt__image {
  display: block;
  width: 100%;
  height: auto;
  transition: transform 300ms var(--motion-easing, cubic-bezier(0.22, 1, 0.36, 1));
  will-change: transform;
}

/* Touch fallback — simple press feedback (JS suppresses tilt on no-hover). */
.no-hover .topo-card-tilt:active {
  transform: scale(0.98);
}


/* ───── DEMO 5 ─── Comparison toggle ────────────────────────────────────────*/

.bu-compare {
  display: flex;
  flex-direction: column;
  gap: 24px;
  width: 100%;
  max-width: 720px;
  margin: 0 auto;
}

.bu-compare__tabs {
  display: flex;
  gap: 0;
  border: 1px solid var(--steel-dim, rgba(107,112,119,0.45));
  border-radius: 4px;
  overflow: hidden;
  align-self: stretch;
}
.bu-compare__tab {
  flex: 1;
  padding: 14px 20px;
  background: transparent;
  color: var(--steel, #6B7077);
  font-family: var(--f-display, "Big Shoulders Display", sans-serif);
  font-weight: 800;
  font-size: 15px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  border: none;
  border-right: 1px solid var(--steel-dim, rgba(107,112,119,0.45));
  cursor: pointer;
  transition: color var(--motion-fast, 120ms) var(--motion-easing, cubic-bezier(0.22, 1, 0.36, 1)),
              background-color var(--motion-fast, 120ms) var(--motion-easing, cubic-bezier(0.22, 1, 0.36, 1));
}
.bu-compare__tab:last-child { border-right: none; }
.bu-compare__tab:hover { color: var(--bone, #E6E3DC); }
.bu-compare__tab[aria-selected="true"] {
  background: var(--dust, #E8A33D);
  color: var(--iron-deep, #0A0C0E);
}
.bu-compare__tab:focus-visible {
  outline: 2px solid var(--dust, #E8A33D);
  outline-offset: 2px;
}

.bu-compare__panels {
  position: relative;
  min-height: 220px;
}
.bu-compare__panel {
  position: absolute;
  inset: 0;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 220ms var(--motion-easing, cubic-bezier(0.22, 1, 0.36, 1)),
              transform 220ms var(--motion-easing, cubic-bezier(0.22, 1, 0.36, 1));
  padding: 24px;
  background: var(--iron-mid, #212121);
  border: 1px solid var(--steel-dim, rgba(107,112,119,0.45));
  border-radius: 6px;
}
.bu-compare__panel.is-active {
  opacity: 1;
  transform: translateY(0);
  position: relative; /* lift out of absolute stack when active so panels-min-height isn't required */
}
.bu-compare__panel[data-accent="dust"] {
  border-left: 3px solid var(--dust, #E8A33D);
}
.bu-compare__panel[data-accent="steel"] {
  border-left: 3px solid var(--steel, #6B7077);
}
.bu-compare__price {
  font-family: var(--f-stencil, "Big Shoulders Stencil Display", sans-serif);
  font-weight: 900;
  font-size: clamp(32px, 6vw, 56px);
  letter-spacing: 0.04em;
  color: var(--bone, #E6E3DC);
  line-height: 1;
  margin-bottom: 6px;
}
.bu-compare__pitch {
  font-family: var(--f-mono, "Share Tech Mono", monospace);
  color: var(--steel, #6B7077);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  margin-bottom: 18px;
}
.bu-compare__detail {
  display: grid;
  grid-template-columns: 110px 1fr;
  gap: 8px 18px;
  margin: 0;
}
.bu-compare__detail dt {
  font-family: var(--f-mono, "Share Tech Mono", monospace);
  font-size: 10px;
  letter-spacing: 0.2em;
  color: var(--dust, #E8A33D);
  padding-top: 3px;
}
.bu-compare__detail dd {
  margin: 0;
  font-family: var(--f-body, "Inter", sans-serif);
  font-size: 14px;
  line-height: 1.5;
  color: var(--bone, #E6E3DC);
}

@media (max-width: 540px) {
  .bu-compare__tab { font-size: 12px; padding: 12px 10px; letter-spacing: 0.12em; }
  .bu-compare__detail { grid-template-columns: 1fr; gap: 4px 0; }
  .bu-compare__detail dt { padding-top: 12px; }
}


/* ───── DEMO 6 ─── Elevation → Bucks slider ────────────────────────────────*/

.bu-slider {
  width: 100%;
  max-width: 520px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 28px;
  padding: 24px;
  background: var(--iron-mid, #212121);
  border: 1px solid var(--steel-dim, rgba(107,112,119,0.45));
  border-radius: 6px;
}
.bu-slider__readout {
  font-family: var(--f-stencil, "Big Shoulders Stencil Display", sans-serif);
  font-weight: 800;
  font-size: clamp(24px, 4vw, 36px);
  color: var(--bone, #E6E3DC);
  letter-spacing: 0.04em;
  text-align: center;
  font-variant-numeric: tabular-nums;
}
.bu-slider__feet { color: var(--bone, #E6E3DC); }
.bu-slider__sep  { color: var(--steel, #6B7077); }
.bu-slider__bucks { color: var(--dust, #E8A33D); }
.bu-slider__bucks-label {
  font-family: var(--f-mono, "Share Tech Mono", monospace);
  font-size: 0.5em;
  letter-spacing: 0.2em;
  color: var(--steel, #6B7077);
  margin-left: 0.3em;
}

.bu-slider__track-wrap {
  position: relative;
  padding: 0 4px 28px;
}

.bu-slider__input {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 6px;
  background: linear-gradient(
    to right,
    var(--steel-dim, rgba(107,112,119,0.45)) 0%,
    var(--steel-dim, rgba(107,112,119,0.45)) 100%
  );
  border-radius: 3px;
  outline: none;
  cursor: pointer;
  margin: 0;
}
.bu-slider__input::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--dust, #E8A33D);
  border: 2px solid var(--iron-deep, #0A0C0E);
  cursor: grab;
  transition: transform var(--motion-fast, 120ms) var(--motion-easing, cubic-bezier(0.22, 1, 0.36, 1)),
              box-shadow var(--motion-fast, 120ms) var(--motion-easing, cubic-bezier(0.22, 1, 0.36, 1));
}
.bu-slider__input::-webkit-slider-thumb:hover {
  transform: scale(1.1);
  box-shadow: 0 0 16px 2px rgba(232, 163, 61, 0.5);
}
.bu-slider__input::-webkit-slider-thumb:active { cursor: grabbing; }
.bu-slider__input::-moz-range-thumb {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--dust, #E8A33D);
  border: 2px solid var(--iron-deep, #0A0C0E);
  cursor: grab;
  transition: transform var(--motion-fast, 120ms) var(--motion-easing, cubic-bezier(0.22, 1, 0.36, 1));
}
.bu-slider__input:focus-visible::-webkit-slider-thumb {
  outline: 2px solid var(--bone, #E6E3DC);
  outline-offset: 2px;
}
.bu-slider__input:focus-visible::-moz-range-thumb {
  outline: 2px solid var(--bone, #E6E3DC);
  outline-offset: 2px;
}

.bu-slider__pips {
  position: absolute;
  inset: 6px 4px auto 4px;
  height: 0;
  pointer-events: none;
}
.bu-slider__pip {
  position: absolute;
  top: 8px;
  width: 1px;
  height: 8px;
  background: var(--steel, #6B7077);
  transform: translateX(-50%);
}
.bu-slider__pip > span {
  position: absolute;
  top: 12px;
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--f-mono, "Share Tech Mono", monospace);
  font-size: 9px;
  letter-spacing: 0.2em;
  color: var(--steel, #6B7077);
  white-space: nowrap;
}


/* ═══ REDUCED-MOTION BRANCH ════════════════════════════════════════════════ */

@media (prefers-reduced-motion: reduce) {
  /* Demo 3 — replace shimmer with simple outline color shift */
  .patch-card::after { animation: none !important; opacity: 0 !important; }
  .patch-card { transition: outline-color var(--motion-fast, 120ms) !important; }
  .patch-card:hover,
  .patch-card:focus-visible {
    transform: none !important;
    box-shadow: none !important;
    outline: 2px solid var(--dust, #E8A33D);
    outline-offset: 4px;
  }
  /* Demo 4 — disable tilt entirely */
  .topo-card-tilt,
  .topo-card-tilt > img,
  .topo-card-tilt .topo-card-tilt__image {
    transform: none !important;
    transition: none !important;
  }
  /* Demo 5 — instant panel swap */
  .bu-compare__panel { transition: none !important; transform: none !important; }
  .bu-compare__panel.is-active { opacity: 1; }
  /* Demo 6 — no thumb scale on hover */
  .bu-slider__input::-webkit-slider-thumb,
  .bu-slider__input::-moz-range-thumb { transition: none !important; }
}

/* ═══ TOUCH (no-hover) BRANCH ══════════════════════════════════════════════ */

@media (hover: none) {
  /* Patch shimmer disabled on touch — let :active provide subtle feedback */
  .patch-card::after { display: none; }
}