/* ═══════════════════════════════════════════════════════════════════════════
   rzv.studio — chips.css  (#chips — GIANT service chips, five marquee rows)

   Haseeb: "under the portfolio - try a new section. GIANT chips of all my
   services, rows in alternating marquee scroll of chips, about 5 rows.
   interactable hover shifts them. scroll speed and direction effects
   marquees' speeds and directions."

   OWNS resting layout only. chips.js owns every transform: the rows' travel
   (one translate3d per row per frame) and the hover push on individual chips
   (GSAP quickTo, TRAP 2 — nothing here sets transform on .chip or .chips-track).
   Nothing shipped in the HTML is pre-hidden: with JS off the rows simply wrap
   as flex rows and read as a wall of chips, which is a fine static version.
   ═══════════════════════════════════════════════════════════════════════════ */

#chips{padding-block:clamp(48px,8vh,120px);overflow:hidden}
#chips .chips-rows{display:flex;flex-direction:column;gap:clamp(10px,1.4vw,22px)}

/* A row is a clipping window; the track inside it is what moves. The track
   holds the chip set TWICE so the loop is seamless — chips.js wraps the
   translate at half the track's width. Until chips.js has doubled it, the
   single set wraps as ordinary flex, which is the JS-off composition. */
.chips-row{position:relative;width:100%;overflow:hidden;
  /* Fade the two edges so chips arrive out of and leave into nothing rather
     than being sliced by the viewport. Mask, not pseudo-elements: it costs no
     stacking and cannot sit above a hovered chip. */
  -webkit-mask:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
  mask:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.chips-track{display:flex;gap:clamp(10px,1.2vw,20px);width:max-content;will-change:transform}
html.rzv-no-motion .chips-track,.chips-row.is-static .chips-track{width:auto;flex-wrap:wrap;will-change:auto}

/* THE CHIP. Giant on purpose — the section is typographic, the chips are the
   type. Weight 300 so a 100px pill stays airy; the hairline border is the
   house .glass edge without the panel. Padding in em so it scales with the
   clamp. white-space:nowrap because a chip is a name, not a sentence. */
.chip{
  display:inline-flex;align-items:center;flex:none;
  font-family:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;
  font-weight:400;letter-spacing:-0.02em;line-height:1;
  font-size:var(--chip-s,clamp(28px,5.6vw,96px));   /* --chip-s: the three steps below; unset = the wall */
  text-transform:none;                                 /* a chip inside h1.page-title (mono uppercase) keeps its own case */
  padding:0.42em 0.72em;border-radius:999px;
  color:var(--text);border:1px solid var(--border);
  white-space:nowrap;user-select:none;
  will-change:transform;
  transition:border-color .35s var(--ease),color .35s var(--ease);
}
a.chip{text-decoration:none;color:var(--text)}
.chip:hover{border-color:var(--border-hi,var(--text))}
/* All the same — "don't make some services larger or bolder than others."
   One size, one weight (regular), one icon style, for every chip. */
/* THE ICON. Font Awesome Pro 6.4.0 SHARP LIGHT (the geometry the comparison
   lab matched path-for-path), inlined per chip from the desktop package on
   Haseeb's machine — one style for every chip, on the line with its label
   (the chip is inline-flex, align-items:center). Inline SVG rather than the
   icon font: 24 glyphs do not justify a 2MB font file. Sized in em so it
   scales with the chip; currentColor so it follows the chip's colour, hover
   included. */
.chip-ico{width:.78em;height:.78em;flex:none;fill:currentColor;margin-right:.34em;
  opacity:.82;transition:opacity .35s var(--ease)}

/* ═══ THE CHIP EVERYWHERE ELSE (8 Sep 2026, Haseeb: "The service chip. Aka the
   icon and label. As per homepage marquee. That's the source of truth for how
   a service label is ever rendered. Even on service pages and the service
   modals … Even the page title - it's the chip.") Same element, same material,
   same em geometry; only --chip-s changes. Markup is emitted by
   _tools/chips.mjs FROM the wall above — never hand-copied. Three steps: ═══ */
.chip--title{--chip-s:clamp(22px,2.6vw,40px)}   /* the largest named step; nothing sits here since 8 Sep (the page name moved to medium) */
.chip--medium{--chip-s:clamp(18px,1.7vw,26px)}  /* the page's name, where h1.page-title sits — 8 Sep, Haseeb: "smaller - more medium size"; ~30px at 1440, 20px on a phone */
.chip--item{--chip-s:clamp(18px,1.7vw,26px)}    /* rows: hub Specialisms, sub-page Related, the hub tiles' names */
.chip--pill{--chip-s:13px}                      /* the hub tiles' pills and the modal's list — rests on FA Regular, below */
/* A STATIC chip — a <span>: the page's own name, or a pill inside a <button> —
   is not a link and must not read as one. (The tile lifts its own set together
   on hover: services.css.) */
span.chip{cursor:default}
span.chip:hover{border-color:var(--border)}

/* ═══ FROST (8 Sep 2026. Duotone first — Haseeb: "the duotone variation of the
   icons for service chips … As a title. hovered. Active." — then: "I just saw
   duotone frost. That seems perfect! But maybe make the other bit have some
   gradient action." and "As pill 13px should use fa regular.")
   The icon lab's Frost recipe (rzv-temp/glass-icons.html .t-frost) on the
   chip. FIVE paths per chip-ico (markup from _tools/chips.mjs, applied by
   _tools/duotone.mjs then _tools/regular.mjs), filled from the page's ONE
   <svg class="chip-defs"> (chips.mjs DEFS, right after <body>):
     .ci-line  Sharp Light — the rest state at title and item size
     .ci-reg   Regular — the rest state at pill size (13px: Light goes to dust)
     .ci-s     duotone secondary  #chip-frost-s radial white .66 centre → .10 edge (his spec, 8 Sep)
     .ci-p     duotone primary    #chip-frost    white .90→.55, axis rotate(−20°),
               plus the hairline: rgba(255,255,255,.6) at .75px, non-scaling
     .ci-r     the primary again  #chip-rim      radial white .95→0 by .58, at .5
   The two gradients run on opposite axes, so where the primary is brightest
   the body behind it is darkest.
   STATES (8 Sep, later — Haseeb: "show as duotone apart from when 13px small.
   otherwise always. only other time is when its part of a chip to be selected;
   unselected - regular, selected - duotone."):
     · every chip rests on the frost — the wall, the page name, Related /
       Specialisms rows, legacy sibling rows — at every step EXCEPT
     · .chip--pill (13px): Regular. The frost has nothing to say that small.
     · .chip--opt — one of a SET to choose from (the /services/ hub tiles'
       names): unselected = the line (Sharp Light; Regular if it is also a
       pill), selected (.is-active — the open tile, and its modal clone) =
       frost. The only state that ever switches, so the only one the 180ms
       crossfade is for.
   Hover and focus do NOT touch the icon; the chip's border still answers. ═══ */
.chip-defs{position:absolute;width:0;height:0;overflow:hidden}
.chip-ico .ci-line,.chip-ico .ci-reg{fill:currentColor}
.chip-ico .ci-p{fill:url(#chip-frost);stroke:rgba(255,255,255,.6);stroke-width:.75}
.chip-ico .ci-s{fill:url(#chip-frost-s)}
.chip-ico .ci-r{fill:url(#chip-rim)}
.chip-ico .ci-line,.chip-ico .ci-reg,.chip-ico .ci-p,.chip-ico .ci-s,.chip-ico .ci-r{transition:opacity .18s var(--ease)}
/* REST = the frost. The gradients carry their own alpha, so the icon box sits at 1, not .82. */
.chip-ico .ci-line,.chip-ico .ci-reg{opacity:0}
.chip-ico .ci-p,.chip-ico .ci-s{opacity:1}
.chip-ico .ci-r{opacity:.5}
.chip-ico{opacity:1}
/* 13px: Regular, at the line's .82 (all (0,2,0), after the rest rules — order wins) */
.chip--pill .ci-p,.chip--pill .ci-s,.chip--pill .ci-r{opacity:0}
.chip--pill .ci-reg{opacity:1}
.chip--pill .chip-ico{opacity:.82}
/* one of a set: the line until chosen */
.chip--opt .ci-p,.chip--opt .ci-s,.chip--opt .ci-r{opacity:0}
.chip--opt .ci-line{opacity:1}
.chip--opt .chip-ico{opacity:.82;transition:opacity .18s var(--ease)}
.chip--opt.chip--pill .ci-line{opacity:0}
.chip--opt.chip--pill .ci-reg{opacity:1}
.chip--opt.is-active .ci-line,.chip--opt.is-active .ci-reg{opacity:0}
.chip--opt.is-active .ci-p,.chip--opt.is-active .ci-s{opacity:1}
.chip--opt.is-active .ci-r{opacity:.5}
.chip--opt.is-active .chip-ico{opacity:1}
html.rzv-no-motion .chip-ico .ci-line,html.rzv-no-motion .chip-ico .ci-reg,html.rzv-no-motion .chip-ico .ci-p,html.rzv-no-motion .chip-ico .ci-s,html.rzv-no-motion .chip-ico .ci-r{transition:none}
@media(prefers-reduced-motion:reduce){.chip-ico .ci-line,.chip-ico .ci-reg,.chip-ico .ci-p,.chip-ico .ci-s,.chip-ico .ci-r{transition:none}}

@media(max-width:760px){
  #chips .chips-rows{gap:10px}
  .chip{font-size:var(--chip-s,clamp(22px,7.2vw,40px));padding:0.5em 0.8em}
  /* the page-name chip may wrap its label on a phone rather than leave the wrap */
  .chip--title,.chip--medium{white-space:normal;line-height:1.1}
}

/* ═══ 8 Sep 2026, Haseeb: "Icon top / Title bottom / With line height 2 / Left aligned.
   Do this for both the card and the page. This will make the seamless morph nicer too."
   The tile's name chip and the page's title chip (and its clone inside the service
   modal) share one stacked form: icon above, label below at line-height 2, left
   aligned, no pill border — the same shape at both ends of the Flip. ═══ */
.svc-name .chip,.page-head .chip--medium,.wm-ghost.chip{
  display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-start;
  border:0;padding:0;background:none;border-radius:0;
  line-height:2;white-space:normal;text-align:left;
}
.svc-name .chip .chip-ico,.page-head .chip--medium .chip-ico,.wm-ghost.chip .chip-ico{margin:0;width:1.1em;height:1.1em}
.svc-name .chip .chip-label,.page-head .chip--medium .chip-label,.wm-ghost.chip .chip-label{display:block;line-height:2}
/* 8 Sep: the modal ghost is the SAME stacked element in flight — no pill in between ("The morph does a weird step of trying to become the pill and then resets") */