/* ============================================================================
   S7b · Services — Scatter-Gather — css/scenes/services.css
   Paper, ink, the Signal dot. One sticky stage: a trunk hairline from the gutter to a fork, eight rails fanning
   out to eight stations (dot + word + subline), the two pills under the trunk's left end.
   CSS default = the key pose (the still edition and the no-JS page): trunk drawn to the fork, every rail drawn,
   dots parked at the stations, words at full width with sublines, the 2× dot at the trunk's left end with the
   pills under it, serif 2 bottom-left (serif 1 hidden), SCATTER/GATHER hidden. js/scenes/services.js moves
   everything away from this pose with gsap.set and the scrub brings it back.
   Geometry: each station is placed by --x/--y (px, written by the JS) falling back to --sx/--sy (%, in the
   section file, matching the no-JS paths in the 1000×1000 viewBox stretched over the stage).
   The stage has NO background: the body shows through, so golden hour's paper → cream warm-up in the seam
   changes only the colour under the end pose. Every class is services__ / services--.
   ========================================================================== */

.scene--services {
  --fg: var(--ink);
  --fg-2: color-mix(in srgb, var(--ink) 68%, transparent);
  --fg-3: color-mix(in srgb, var(--ink) 61%, transparent);
  --line: color-mix(in srgb, var(--ink) 16%, transparent);
  --plate-bg: var(--paper);
  --focus: var(--ink);
  /* the station word: 3.2–3.8vw, held under 6vh so eight fit the fan at 1366×640; the JS fitter may shrink one */
  --ws: min(3.8vw, 6svh);
  --fx: 30%; /* the fork (JS writes px) */
  --fy: 50%;
  color: var(--ink);
}
.scene--services .scene__stage {
  color: var(--ink);
  perspective: 600px;
  perspective-origin: 50% 50%;
}

/* ---------- corners ---------- */
.services__h {
  margin: 0;
}
.services__serif {
  z-index: 2;
  max-width: 22ch;
}
/* key pose: serif 2 (the response) shows, serif 1 (the request) does not */
.services__serif--1 {
  opacity: 0;
  visibility: hidden;
}
.services__stamp {
  z-index: 2;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

/* ---------- the lines ---------- */
.services__svg {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}
.services__svg--col {
  display: none;
}
.services__trunk,
.services__rail {
  fill: none;
  stroke: var(--ink);
  stroke-opacity: 0.9;
  stroke-width: 1px;
  stroke-linecap: butt;
  vector-effect: non-scaling-stroke;
}

/* ---------- SCATTER / GATHER at the fork (motion only) ---------- */
.services__verb {
  position: absolute;
  z-index: 2;
  left: var(--fx);
  top: var(--fy);
  display: grid;
  margin: 0;
  font-size: var(--mono-m);
  letter-spacing: 0.1em;
  color: var(--ink);
  /* above the trunk, ending just left of the fork: never over the rails */
  transform: translate(calc(-100% - 8px), calc(-100% - 8px));
  transform-style: preserve-3d;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}
.services__verb span {
  grid-area: 1 / 1;
  backface-visibility: hidden;
  transform-origin: 50% 50%;
}
.services__verb-b {
  transform: rotateX(90deg);
}

/* ---------- dots ---------- */
.services__trunk-dot,
.services__dot {
  position: absolute;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  pointer-events: none;
}
.services__trunk-dot::after,
.services__dot::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: var(--signal);
}
/* the returned order: 2× at the trunk's left end, the bullet of the first pill (key pose) */
.services__trunk-dot {
  z-index: 3;
  left: var(--gutter);
  top: 50%;
  margin: -4px 0 0 -4px;
  transform: scale(2);
  will-change: transform;
}
.services__dot {
  left: -4px;
  top: -4px;
  will-change: transform;
}
/* the hold: the eight breathe (a CSS animation on the painted disc, so the JS transform on the dot is untouched) */
html.motion .services--hold .services__dot::after {
  animation: services-breath 2.4s ease-in-out infinite;
}
@keyframes services-breath {
  0%,
  100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.1);
  }
}

/* ---------- stations ---------- */
.services__stations {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}
.services__item {
  position: absolute;
  left: var(--x, var(--sx));
  top: var(--y, var(--sy));
  font-size: var(--ws);
  pointer-events: auto;
}
.services__station {
  position: relative;
  display: block;
  padding-left: 1.2em;
  font-size: inherit;
  text-align: left;
  white-space: nowrap;
  -webkit-tap-highlight-color: transparent;
}
.services__word {
  display: block;
  font-size: 1em;
  font-variation-settings: "wght" 900, "wdth" 110;
  font-stretch: 110%;
  line-height: 0.86;
  letter-spacing: 0.01em;
  margin-top: -0.43em; /* the caps centre on the dot */
  color: var(--ink);
}
.services__sub {
  display: block;
  margin-top: 6px;
  max-width: var(--subw, none);
  white-space: normal;
  color: var(--fg-2);
  transition: color 0.12s;
}
.services__station:hover .services__sub {
  color: var(--ink);
}
.services__station:hover .services__dot::after {
  animation-play-state: paused;
  transform: scale(1.25);
}
.services__card {
  left: 1.2em;
  top: calc(100% + 10px);
}
/* a card that would run off the stage's bottom opens above its station instead (services.js decides) */
.services__card--up {
  top: auto;
  bottom: calc(100% + 10px);
}
.services__card p {
  margin: 0;
}

/* ---------- the response ---------- */
.services__pills {
  position: absolute;
  z-index: 2;
  top: calc(50% + 48px);
  left: var(--gutter);
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}
.services__pills .pill {
  min-height: 44px;
  padding: 0 18px;
}

/* ---------- phones (portrait, < 768): the route turns vertical ---------- */
@media (max-width: 767px) and (min-height: 501px) {
  .scene--services {
    --serif-l: 20px;
    --ws: 6vw;
    --fx: var(--gutter);
    --fy: 22svh;
    --pill-y: 74svh; /* the first pill's top (JS writes px) */
  }
  .services__serif {
    top: calc(var(--header-h) + 34px);
    bottom: auto;
    right: var(--gutter);
    max-width: none;
  }
  .services__serif--2 {
    top: var(--s2-y, 66svh);
    left: calc(var(--gutter) + 28px); /* clear of the trunk, aligned with the pills */
  }
  .services__stamp {
    top: calc(var(--header-h) + 8px);
    bottom: auto;
  }
  .services__stamp-c {
    display: none;
  }
  .services__svg--fan {
    display: none;
  }
  .services__svg--col {
    display: block;
  }
  .services__verb {
    left: calc(var(--gutter) + 12px);
    transform: translate(0, calc(-100% - 8px));
  }
  .services__item {
    --x: 20vw;
    --y: calc(28svh + var(--k, 0) * 6svh);
  }
  .services__station {
    min-height: 48px;
    padding-left: 14px;
    padding-right: 4px;
  }
  .services__word {
    font-variation-settings: "wght" 900, "wdth" 105;
    font-stretch: 105%;
  }
  .services__sub {
    margin-top: 4px;
    font-size: 11px;
    max-width: calc(80vw - var(--gutter) - 18px);
  }
  .services__card {
    left: 14px;
    width: min(360px, calc(80vw - var(--gutter) - 14px));
  }
  .services__trunk-dot {
    top: calc(var(--pill-y) + 24px);
  }
  .services__pills {
    top: var(--pill-y);
    left: calc(var(--gutter) + 28px);
    right: var(--gutter);
    flex-direction: column;
    gap: max(10px, calc(8svh - 48px));
  }
  .services__pills .pill {
    min-height: 48px;
    justify-content: center;
  }
  /* WhatsApp first and solid on phones: it opens the conversation with the text typed */
  .services__pill--wa {
    order: -1;
    background: var(--fg);
    color: var(--plate-bg);
    border-color: var(--fg);
  }
  .services__pill--wa:hover {
    background: var(--signal);
    border-color: var(--signal);
    color: var(--night);
  }
  .services__pill--quote {
    background: none;
    color: var(--fg);
    border-color: var(--line);
  }
  .services__pill--quote:hover {
    background: none;
    border-color: var(--fg);
    color: var(--fg);
  }
}

/* ---------- landscape phones: the fan, smaller words, sublines kept to the card and the aria-label ---------- */
@media (max-height: 500px) and (orientation: landscape) {
  .scene--services {
    --ws: 2.6vw;
    --serif-l: 18px;
  }
  .services__sub {
    display: none;
  }
  .services__pills {
    top: calc(50% + 32px);
  }
  .services__pills .pill {
    min-height: 40px;
  }
}