/* ═══════════════════════════════════════════════════════════════════════
   SIGNATURE 2 — Company morph
   A project switcher that re-themes a whole panel into the client's own
   palette, the way their case-study pages already are. Colours interpolate
   because they are registered custom properties — without @property a colour
   custom property is an unanimatable token string.

   The panel stays dark and takes its tint from the client's own core
   colour, so it reads as part of the page rather than a white card punched
   into it. The client's key colour does the accenting.
   ═══════════════════════════════════════════════════════════════════════ */

@property --client-core  { syntax: '<color>'; inherits: true; initial-value: #24152f; }
@property --client-key   { syntax: '<color>'; inherits: true; initial-value: #9161c5; }
@property --client-alt   { syntax: '<color>'; inherits: true; initial-value: #9de4cc; }
@property --client-paper { syntax: '<color>'; inherits: true; initial-value: #f6f4ed; }

.morph {
  --swap: 760ms;
  display: grid;
  gap: 1rem;
  --client-core: #24152f; --client-key: #9161c5;
  --client-alt: #9de4cc;  --client-paper: #f6f4ed;
  transition:
    --client-core  var(--swap) var(--ease),
    --client-key   var(--swap) var(--ease),
    --client-alt   var(--swap) var(--ease),
    --client-paper var(--swap) var(--ease);
}

/* ── Client tabs ─────────────────────────────────────────────────────── */
.morph-tabs {
  display: flex; flex-wrap: wrap; gap: .4rem;
}
.morph-tabs button {
  position: relative;
  display: inline-flex; align-items: center; gap: .5rem;
  border: 1px solid var(--line-2); background: var(--bg-2); color: var(--mute);
  padding: .5rem .8rem; border-radius: 999px;
  font: 600 var(--fs--1)/1 var(--font-sans);
  transition: color .3s var(--ease), border-color .3s var(--ease), background-color .3s var(--ease);
}
.morph-tabs button i {
  width: .55rem; height: .55rem; border-radius: 999px; background: var(--k);
  transition: scale .3s var(--spring);
}
.morph-tabs button:hover { color: var(--ink); border-color: var(--mute); }
.morph-tabs button[aria-selected="true"] {
  color: var(--client-core);
  background: var(--client-key);
  border-color: var(--client-key);
}
.morph-tabs button[aria-selected="true"] i { scale: 1.5; }

/* ── The panel: light register, client-themed ────────────────────────── */
.morph-panel {
  --ink: var(--client-paper);
  position: relative;
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid color-mix(in oklab, var(--client-key) 26%, transparent);
  background: color-mix(in oklab, var(--client-core) 62%, var(--bg));
  color: color-mix(in oklab, var(--client-paper) 64%, var(--client-core));
  display: grid;
  gap: 0;
  container-type: inline-size;
  container-name: morphpanel;
}
@container morphpanel (min-width: 42rem) {
  .morph-panel { grid-template-columns: 1.05fr .95fr; }
}

.morph-copy { padding: clamp(1.25rem, .9rem + 1.8vw, 2.25rem); display: grid; align-content: start; gap: .7rem; }
.morph-logo {
  height: clamp(1.4rem, 2.6cqi, 1.9rem);
  margin-bottom: .25rem;
  font: 700 1.15rem/1 var(--font-sans); letter-spacing: -.02em;
  color: var(--client-paper);
  display: flex; align-items: center;
  transition: color var(--swap) var(--ease), background-color var(--swap) var(--ease);
}
/* With a mark: the SVG becomes a silhouette filled with the client's paper
   colour, so whatever palette the source file ships in is irrelevant. */
.morph-logo[data-mark] {
  width: min(13rem, 46%);
  background: var(--client-paper);
  -webkit-mask: var(--logo) no-repeat left center / contain;
  mask: var(--logo) no-repeat left center / contain;
}

.morph-copy .tagline {
  font: 600 var(--fs--2)/1 var(--font-mono); letter-spacing: .16em; text-transform: uppercase;
  color: var(--client-key);
  transition: color var(--swap) var(--ease);
}
.morph-copy h3 {
  font-size: clamp(1.375rem, 1.1rem + 1.2vw, 2rem);
  font-weight: 660; letter-spacing: -.028em; line-height: 1.1;
  color: var(--client-paper);
}
.morph-copy p { font-size: var(--fs--1); line-height: 1.65; text-wrap: pretty; max-width: 44ch; }
.morph-tags { display: flex; flex-wrap: wrap; gap: .35rem; margin-top: .2rem; }
.morph-tags li {
  font: 500 var(--fs--2)/1 var(--font-mono);
  padding: .4em .6em; border-radius: 999px;
  color: color-mix(in oklab, var(--client-key) 72%, var(--client-paper));
  background: color-mix(in oklab, var(--client-key) 16%, transparent);
  border: 1px solid color-mix(in oklab, var(--client-key) 24%, transparent);
  transition: background-color var(--swap) var(--ease), color var(--swap) var(--ease);
}
.morph-copy .go {
  justify-self: start; margin-top: .4rem;
  display: inline-flex; align-items: center; gap: .45rem;
  text-decoration: none; font: 620 var(--fs--1)/1 var(--font-sans);
  padding: .65rem .9rem; border-radius: 8px;
  background: var(--client-key); color: var(--client-core);
  transition: translate .2s var(--ease), background-color var(--swap) var(--ease);
}
.morph-copy .go:hover { translate: 0 -2px; }
.morph-copy .go span { transition: translate .2s var(--ease); }
.morph-copy .go:hover span { translate: .25rem 0; }

/* ── The chart that morphs with the client ───────────────────────────── */
.morph-viz {
  position: relative;
  padding: clamp(1.25rem, .9rem + 1.8vw, 2rem);
  background:
    radial-gradient(90% 70% at 90% 0%, color-mix(in oklab, var(--client-key) 26%, transparent), transparent 65%),
    radial-gradient(70% 60% at 0% 100%, color-mix(in oklab, var(--client-alt) 22%, transparent), transparent 60%),
    color-mix(in oklab, var(--client-core) 84%, var(--bg));
  border-top: 1px solid color-mix(in oklab, var(--client-key) 18%, transparent);
  transition: background var(--swap) var(--ease);
  display: grid; align-content: space-between; gap: 1rem;
  min-height: 17rem;
}

.morph-stat { display: flex; align-items: baseline; gap: .5rem; }
.morph-stat .v {
  font: 700 clamp(2rem, 1.4rem + 2.6vw, 3.25rem)/1 var(--font-sans);
  letter-spacing: -.04em; color: var(--client-paper);
  font-variant-numeric: tabular-nums;
}
.morph-stat .u { font: 600 var(--fs--1)/1 var(--font-mono); color: var(--client-key); }
.morph-stat .l {
  margin-left: auto; text-align: right; max-width: 14ch;
  font: 500 var(--fs--2)/1.4 var(--font-mono); letter-spacing: .08em;
  text-transform: uppercase; opacity: .75;
}

/* The chart shape is invented, so it says so under itself rather than
   letting a plausible curve pass for a measured result. */
.morph-chart::after {
  content: "Illustrative — chart shape is not client data";
  position: absolute; inset: auto 0 -1.4rem 0;
  font: 500 var(--fs--2)/1 var(--font-mono); letter-spacing: .06em;
  color: color-mix(in oklab, var(--client-paper) 42%, var(--client-core));
  transition: color var(--swap) var(--ease);
}
.morph-chart { position: relative; height: 8.5rem; margin-bottom: 1.4rem; }
.morph-bars {
  position: absolute; inset: 0;
  display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: clamp(3px, .6vw, 7px);
  align-items: end;
}
.morph-bars i {
  display: block; height: 100%; border-radius: 3px 3px 1px 1px;
  background: color-mix(in oklab, var(--client-paper) 16%, transparent);
  transform-origin: bottom;
  transform: scaleY(var(--v, .5));
  transition: transform 700ms var(--spring) calc(var(--i) * 32ms),
              background-color var(--swap) var(--ease);
}
.morph-bars i:nth-last-child(-n+3) { background: var(--client-key); }
.morph-line {
  position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible;
}
.morph-line polyline {
  fill: none; stroke: var(--client-paper); stroke-width: 2.5;
  stroke-linecap: round; stroke-linejoin: round;
  transition: stroke var(--swap) var(--ease);
}
.morph-line circle { fill: var(--client-paper); transition: fill var(--swap) var(--ease); }

/* ── Motion off ──────────────────────────────────────────────────────
   Driven by the switch, not by the media query directly: an inline
   <head> script seeds data-motion from the saved choice or the system
   preference before first paint, and shared/motion.js owns it after.
   That is what lets a visitor opt back INTO the animation.
   ------------------------------------------------------------------- */
html[data-motion="reduced"] .morph-bars i { transition: none; }