/* ==========================================================================
   Service explorer, scroll-driven (desktop). js/services.js pins the explorer
   and sets, from the eased scroll position:
   - on .svc__pill:  --py, --ph, --pk   (the dark pill that glides down the list)
   - on each tab:    --k                (1 when it is the current one, fading to 0)
   - on each panel:  --i, --r, --c, --d, --oy
       --r  how far the panel has grown out of its tab (0 to 1)
       --c  how visible its text is (0 to 1)
       --d  its distance from the current position, for the layered drift
   Without the pinned mode the older hover / click behaviour is used.
   ========================================================================== */

.svc__pill {
  display: none;
}

.svc-runway--pin {
  height: 430vh;
}

.svc--pin {
  position: sticky;
  top: calc(var(--header-h) + 1.25rem);
}

/* ---- The list: one pill glides between the names ------------------------------ */
.svc--pin .svc__list {
  position: relative;
}

.svc--pin .svc__pill {
  display: block;
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  z-index: 0;
  height: var(--ph, 3.5rem);
  translate: calc(var(--pk, 1) * 12px) var(--py, 0px);
  border-radius: var(--radius-md);
  background: var(--gg-ink);
  pointer-events: none;
}

.svc--pin .svc-tab,
.svc--pin .svc-tab[aria-selected="true"] {
  position: relative;
  z-index: 1;
  translate: calc(var(--k, 0) * 12px) 0;
  transform: none;
  background: transparent;
  transition: none;
  color: var(--gg-ink);
  color: color-mix(in srgb, #fff calc(var(--k, 0) * 100%), var(--gg-ink));
}

.svc--pin .svc-tab:hover:not([aria-selected="true"]) {
  background: rgba(255, 255, 255, 0.7);
}

.svc--pin .svc-tab__no,
.svc--pin .svc-tab[aria-selected="true"] .svc-tab__no {
  opacity: calc(0.5 + 0.5 * var(--k, 0));
  color: var(--gg-ink);
  color: color-mix(in srgb, var(--gg-green) calc(var(--k, 0) * 100%), var(--gg-ink));
}

.svc--pin .svc-tab__arrow,
.svc--pin .svc-tab[aria-selected="true"] .svc-tab__arrow {
  opacity: var(--k, 0);
  transform: translateX(calc((1 - var(--k, 0)) * -8px));
  transition: none;
  color: var(--gg-green);
}

/* ---- The panels: all stacked, each grows out of its own tab ------------------- */
.svc.svc--pin .svc-panel {
  visibility: visible;
  pointer-events: auto;
  z-index: calc(var(--i, 0) + 1);
  clip-path: circle(calc(var(--r, 1) * 150%) at 0% var(--oy, 50%));
  animation: none !important;
}

.svc.svc--pin .svc-panel[inert] {
  pointer-events: none;
}

/* text rises into place as the panel opens, then drifts at different speeds (parallax) */
.svc--pin .svc-panel > :not(.svc-panel__art) {
  opacity: var(--c, 1);
  translate: 0 calc((1 - var(--c, 1)) * 28px + var(--d, 0) * var(--sp, -20px));
  animation: none !important;
}

.svc--pin .svc-panel > .svc-panel__no { --sp: -8px; }
.svc--pin .svc-panel > h3 { --sp: -18px; }
.svc--pin .svc-panel > .svc-panel__text { --sp: -30px; }
.svc--pin .svc-panel > .svc-panel__chips { --sp: -42px; }
.svc--pin .svc-panel > .btn { --sp: -54px; }

.svc--pin .svc-panel__art {
  scale: calc(0.65 + 0.35 * var(--c, 1));
  rotate: calc((1 - var(--c, 1)) * -16deg + var(--d, 0) * 14deg);
  translate: calc(var(--mx) * -22px) calc(-50% + var(--my) * -22px + var(--d, 0) * -48px);
  opacity: calc(0.3 + 0.7 * var(--c, 1));
  animation: none !important;
  transition: none;
}