/* The buyback instrument.
   A machine that spends fees on a timer, drawn as a faceplate rather than a row of cards.
   Two quantities carry the whole idea: how charged the chamber is, and how long until the
   next window. Everything else on the section stays quiet.
   3D is CSS transforms only. No library, which also keeps the page inside script-src 'self'. */

#buyback .bb-stage {
  perspective: 1500px;
  perspective-origin: 50% 38%;
  margin: 26px 0 24px;
}

#buyback .bb-panel {
  --rx: 5.5deg;
  --ry: -7deg;
  --fill: 0%;
  position: relative;
  transform-style: preserve-3d;
  transform: rotateX(var(--rx)) rotateY(var(--ry));
  transition: transform .5s cubic-bezier(.2, .7, .3, 1), box-shadow .5s;
  display: grid;
  grid-template-columns: 108px 1fr;
  gap: 26px;
  padding: 26px 28px;
  border-radius: 20px;
  border: 1px solid var(--edge);
  background:
    radial-gradient(120% 90% at 12% 0%, rgba(249, 115, 22, .10), transparent 60%),
    radial-gradient(100% 80% at 100% 100%, rgba(0, 82, 255, .10), transparent 62%),
    linear-gradient(180deg, rgba(255, 255, 255, .055), rgba(255, 255, 255, .018));
  box-shadow:
    0 34px 70px -34px rgba(249, 115, 22, .34),
    inset 0 1px 0 rgba(255, 255, 255, .07);
  animation: bbIn .8s cubic-bezier(.22, .7, .3, 1) backwards;
}

@keyframes bbIn {
  from { opacity: 0; transform: rotateX(13deg) rotateY(-13deg) translateY(20px) scale(.97); }
  to   { opacity: 1; transform: rotateX(var(--rx)) rotateY(var(--ry)); }
}

/* A recessed backplate, set behind the face, so the panel reads as having depth rather than
   as a flat card with a shadow. */
#buyback .bb-panel::before {
  content: "";
  position: absolute;
  inset: 12px;
  border-radius: 14px;
  transform: translateZ(-26px);
  background:
    repeating-linear-gradient(90deg, rgba(0, 82, 255, .16) 0 1px, transparent 1px 34px),
    repeating-linear-gradient(0deg, rgba(0, 82, 255, .10) 0 1px, transparent 1px 34px);
  opacity: .5;
  pointer-events: none;
}

/* ---- the charge chamber ---- */

#buyback .bb-well {
  position: relative;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, .13);
  background: linear-gradient(180deg, rgba(0, 0, 0, .5), rgba(0, 0, 0, .3));
  box-shadow: inset 0 3px 12px rgba(0, 0, 0, .65);
  overflow: hidden;
  transform: translateZ(8px);
  min-height: 190px;
}

#buyback .bb-fill {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: var(--fill);
  min-height: 3px;
  background: linear-gradient(180deg, #FFB067, var(--ember) 45%, #C2540A);
  box-shadow: 0 -10px 26px rgba(249, 115, 22, .55);
  transition: height 1.1s cubic-bezier(.2, .7, .3, 1);
}

/* The charge is accumulating, so the surface of it moves. Slow, and it stops for anyone who
   has asked for less motion. */
#buyback .bb-fill::after {
  content: "";
  position: absolute;
  left: 0; right: 0; top: -2px;
  height: 3px;
  background: rgba(255, 226, 199, .95);
  filter: blur(1px);
  animation: bbBreathe 3.6s ease-in-out infinite;
}

@keyframes bbBreathe {
  0%, 100% { opacity: .45; }
  50%      { opacity: 1; }
}

/* Graduations, in the structural blue rather than the charge orange. */
#buyback .bb-well::after {
  content: "";
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(0deg, rgba(255, 255, 255, .14) 0 1px, transparent 1px 19px);
  pointer-events: none;
}

#buyback .bb-pct {
  position: absolute;
  left: 0; right: 0; top: 50%;
  transform: translateY(-50%) translateZ(14px);
  text-align: center;
  font-family: var(--mono);
  font-size: 15px;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
  text-shadow: 0 2px 10px rgba(0, 0, 0, .95);
  letter-spacing: .02em;
}

/* ---- the readout ---- */

#buyback .bb-read { transform: translateZ(22px); }

#buyback .bb-label {
  font-size: 12.5px;
  letter-spacing: .1em;
  color: var(--ash);
  margin: 0 0 6px;
}

#buyback .bb-clock {
  display: flex;
  align-items: baseline;
  gap: 10px;
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  margin-bottom: 4px;
}

#buyback .bb-seg { display: flex; align-items: baseline; gap: 5px; }

#buyback .bb-seg b {
  font-size: clamp(34px, 7vw, 52px);
  line-height: 1;
  font-weight: 600;
  color: var(--ink);
  transform: translateZ(16px);
  display: inline-block;
}

#buyback .bb-seg i {
  font-style: normal;
  font-size: 12.5px;
  color: var(--ash);
}

#buyback .bb-sep {
  font-size: clamp(26px, 5vw, 38px);
  color: rgba(255, 255, 255, .34);
  line-height: 1;
}

/* The seconds place is the only thing that moves on its own, and only when it changes. */
#buyback .bb-seg.tick b { animation: bbTick .5s cubic-bezier(.2, .7, .3, 1); }

@keyframes bbTick {
  0%   { transform: translateZ(16px) translateY(0); color: var(--ink); }
  30%  { transform: translateZ(30px) translateY(-2px); color: var(--ember); }
  100% { transform: translateZ(16px) translateY(0); color: var(--ink); }
}

/* When there is nothing to count down to, the clock is replaced by a plain state word. */
#buyback .bb-state {
  font-family: var(--mono);
  font-size: clamp(24px, 4.6vw, 34px);
  color: var(--ember);
  line-height: 1.1;
}

#buyback .bb-figs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px 24px;
  margin-top: 20px;
  padding-top: 17px;
  border-top: 1px solid var(--edge);
}

#buyback .bb-fig b {
  display: block;
  font-family: var(--mono);
  font-size: 21px;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
}

#buyback .bb-fig span { font-size: 12.5px; color: var(--ash); }

#buyback .bb-foot { color: var(--ash); font-size: 14.5px; margin: 0; }

#buyback .bb-warn {
  margin: 12px 0 0;
  color: #FFB067;
  font-size: 14.5px;
}

#buyback .bb-links { margin-top: 14px; display: flex; gap: 18px; flex-wrap: wrap; }

/* ---- responsive and reduced motion ---- */

@media (max-width: 700px) {
  #buyback .bb-figs { gap: 14px 10px; }
  #buyback .bb-fig b { font-size: 18px; }
  #buyback .bb-fig span { font-size: 11.5px; }
  #buyback .bb-stage { perspective: none; }
  #buyback .bb-panel {
    grid-template-columns: 1fr;
    gap: 20px;
    padding: 22px;
    transform: none;
    animation: none;
  }
  #buyback .bb-panel::before { display: none; }
  #buyback .bb-well { min-height: 92px; }
  #buyback .bb-read, #buyback .bb-seg b { transform: none; }
  #buyback .bb-pct { transform: translateY(-50%); }
}

@media (prefers-reduced-motion: reduce) {
  #buyback .bb-panel { animation: none; transition: none; transform: rotateX(3deg); }
  #buyback .bb-fill { transition: none; }
  #buyback .bb-fill::after { animation: none; opacity: .8; }
  #buyback .bb-seg.tick b { animation: none; }
}

#buyback a:focus-visible,
#buyback .bb-panel:focus-visible {
  outline: 2px solid var(--ember);
  outline-offset: 3px;
}