/* ==========================================================================
   "Not every job needs to be booked the same way": the three option cards are
   ticket-style cards threaded on one line, and on desktop the section pins to
   the screen so scrolling walks you through the options (js/booking.js sets
   --t, --sub, --abs on .bpick and --i, --k, --fill on each card).
   Everything here is decoration: the content works without it.
   ========================================================================== */

.bpick-runway {
  position: relative;
}

/* ---- Cards ------------------------------------------------------------------ */
.bpick__tabs {
  position: relative;
}

.bpick__item {
  z-index: 1;
  border: 2px solid var(--gg-line);
  box-shadow: none;
  transform-origin: 0 50%;
  transition: background-color 0.35s ease, color 0.35s ease, border-color 0.35s ease, box-shadow 0.35s ease, transform 0.3s ease, scale 0.4s ease, opacity 0.4s ease;
}

.bpick--pin .bpick__item {
  transition: background-color 0.35s ease, color 0.35s ease, border-color 0.35s ease, box-shadow 0.35s ease, transform 0.3s ease;
}

.bpick__item.is-active {
  border-color: transparent;
  box-shadow: 0 18px 40px rgba(24, 37, 27, 0.12);
}

.bpick__tab {
  position: relative;
  z-index: 1;
  gap: var(--space-4);
}

.bpick__head {
  flex: 1;
  display: grid;
  gap: 0.15rem;
}

.bpick__head .bpick__label {
  flex: none;
}

/* Icon tile that plugs into the thread */
.bpick__icon {
  position: relative;
  flex: none;
  display: grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  background: var(--gg-tint);
  color: var(--gg-green-deep);
  transition: background-color 0.35s ease, color 0.35s ease, rotate 0.5s cubic-bezier(0.2, 0.9, 0.3, 1.4);
}

.bpick__icon .icon {
  width: 1.5rem;
  height: 1.5rem;
}

.bpick__item.is-active .bpick__icon {
  background: var(--gg-ink);
  color: var(--gg-white);
}

.bpick__item[data-theme="dark"].is-active .bpick__icon,
.bpick__item[data-theme="navy"].is-active .bpick__icon {
  background: var(--gg-green);
  color: var(--gg-ink);
}

.bpick__item.is-active .bpick__icon .icon {
  animation: bp-icon 0.7s cubic-bezier(0.2, 0.9, 0.3, 1.3) both;
}

.bpick__item.is-active .bpick__icon::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 2px solid currentColor;
  animation: bp-ring 2.2s ease-out infinite;
}

@keyframes bp-icon {
  from { transform: scale(0.4) rotate(-40deg); opacity: 0; }
  to { transform: none; opacity: 1; }
}

@keyframes bp-ring {
  from { transform: scale(1); opacity: 0.45; }
  to { transform: scale(1.7); opacity: 0; }
}

/* Big outlined number behind the card text */
.bpick__ghost {
  position: absolute;
  right: var(--space-4);
  bottom: -0.2em;
  z-index: 0;
  font-size: 6.5rem;
  font-weight: var(--fw-heavy);
  line-height: 1;
  letter-spacing: -0.04em;
  -webkit-text-fill-color: transparent;
  -webkit-text-stroke: 2px currentColor;
  opacity: 0.16;
  pointer-events: none;
  transition: opacity 0.4s ease, translate 0.5s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.bpick__item.is-active .bpick__ghost {
  opacity: 0.3;
}

/* The chevron is replaced by the ghost number */
.bpick__tab::after {
  display: none;
}

.bpick__body,
.bpick__bar {
  position: relative;
  z-index: 1;
}

.bpick__bar {
  position: absolute;
}

.bpick__body p,
.bpick__body .btn {
  margin-left: calc(var(--space-5) + 3rem + var(--space-4));
}

.bpick__body p {
  padding-left: 0;
}

.bpick__body .btn {
  margin-top: var(--space-4);
}

/* ---- The thread that links the three cards ----------------------------------- */
.bpick__thread {
  position: absolute;
  left: calc(var(--space-5) + 2px + 1.5rem - 2px);
  top: var(--r0, 2.5rem);
  height: var(--rh, calc(100% - 5rem));
  width: 4px;
  border-radius: 4px;
  background: var(--gg-line);
}

.bpick__thread i {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: var(--gg-green);
  transform: scaleY(var(--rf, 0));
  transform-origin: 50% 0;
}

/* ---- Live (JS) state ---------------------------------------------------------- */
.bpick--live .bpick__item {
  scale: calc(0.95 + 0.05 * var(--k, 0));
}

.bpick--live .bpick__ghost {
  translate: calc((var(--i, 0) - var(--t, 0)) * 22px) calc((var(--t, 0) - var(--i, 0)) * -6px);
}

/* Desktop: pinned and driven by the scroll */
.bpick-runway--pin {
  height: 260vh;
}

.bpick--pin {
  position: sticky;
  top: calc(var(--header-h) + 1.25rem);
  margin-top: var(--space-5);
}

.bpick--pin .bpick__bar {
  opacity: 0.3;
  animation: none !important;
  transform: scaleX(var(--fill, 0));
}

.bpick--pin .bpick__panel {
  translate: 0 calc(var(--sub, 0) * -44px);
  scale: calc(1 - var(--fade, 0) * 0.06 - var(--abs, 0) * 0.02);
  opacity: calc(1 - var(--fade, 0) * 0.95);
}

/* layered parallax inside the stage: each card drifts at its own speed */
.bpick--pin .mock-profile:nth-child(1),
.bpick--pin .mock-quote:nth-of-type(1),
.bpick--pin .mock-slots,
.bpick--pin .mock-brief { translate: 0 calc(var(--sub, 0) * -26px); }
.bpick--pin .mock-profile:nth-child(2),
.bpick--pin .mock-quote:nth-of-type(2),
.bpick--pin .mock-live { translate: 0 calc(var(--sub, 0) * -58px); }
.bpick--pin .mock-profile:nth-child(3),
.bpick--pin .mock-quote:nth-of-type(3),
.bpick--pin .mock-confirm { translate: 0 calc(var(--sub, 0) * -92px); }

.bpick--pin .bpick__stage::before {
  translate: calc(var(--t, 0) * -4rem) calc(var(--t, 0) * 3rem);
  rotate: calc(var(--t, 0) * 40deg);
}

.bpick--pin .bpick__stage::after {
  translate: calc(var(--t, 0) * 3rem) calc(var(--t, 0) * -2.5rem);
  rotate: calc(var(--t, 0) * -50deg);
}

@media (prefers-reduced-motion: reduce) {
  .bpick__item.is-active .bpick__icon .icon,
  .bpick__item.is-active .bpick__icon::after {
    animation: none !important;
  }
  .bpick--live .bpick__item,
  .bpick--live .bpick__ghost {
    scale: none;
    translate: none;
  }
}

@media (max-width: 899.98px) {
  .bpick__ghost {
    font-size: 5rem;
  }
}