/* /work/clipwell/: the bar on its own desktop, the same thing written twice,
   the product site, then what never reaches the history. Tokens and shared
   frames (.stage, .win, .plate) come from site.css; everything here is
   specific to this case. */

/* ------------------------------------------------------------ the bar, on its desktop
   The stage is the sage desktop the bar was recorded over. The bar sits on
   its bottom edge, as it does on screen, and the chord above it brings it up. */
.cwc-stage {
  padding: 0;
  box-shadow: 0 36px 70px -56px oklch(0.3 0.04 140 / 0.55);
}
.cwc-chord {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(6px, 0.6vw, 10px);
  height: clamp(92px, 8.4vw, 132px);
  padding-top: 4px;
  -webkit-tap-highlight-color: transparent;
}
.cwc-chord kbd {
  display: grid;
  place-items: center;
  width: clamp(40px, 3.4vw, 52px);
  aspect-ratio: 1;
  border-radius: clamp(10px, 0.9vw, 13px);
  font: 500 clamp(1rem, 0.78rem + 0.5vw, 1.3125rem)/1 var(--f-sans);
  color: oklch(0.3 0.02 140);
  background: linear-gradient(oklch(1 0 0 / 0.78), oklch(1 0 0 / 0.56));
  -webkit-backdrop-filter: blur(10px) saturate(1.4);
  backdrop-filter: blur(10px) saturate(1.4);
  box-shadow:
    inset 0 0 0 0.5px oklch(1 0 0 / 0.9),
    0 1px 0 oklch(0.36 0.03 140 / 0.12),
    0 3px 0 oklch(0.42 0.03 140 / 0.14),
    0 12px 22px -12px oklch(0.3 0.04 140 / 0.5);
  transition: transform 220ms var(--eo), box-shadow 220ms var(--eo), background-color 220ms ease;
}
.cwc-chord[role="button"] { cursor: pointer; }
.cwc-chord[role="button"]:focus-visible { outline: 0; }
.cwc-chord[role="button"]:focus-visible kbd { box-shadow: inset 0 0 0 0.5px oklch(1 0 0 / 0.9), 0 0 0 2px var(--ink), 0 12px 22px -12px oklch(0.3 0.04 140 / 0.5); }
@media (hover: hover) and (pointer: fine) {
  .cwc-chord[role="button"]:hover kbd { transform: translateY(-1px); }
}

.cwc-bar { overflow: hidden; }
.cwc-bar:focus-visible { outline: 2px solid var(--ink); outline-offset: -4px; border-radius: 0 0 var(--r-stage) var(--r-stage); }
.cwc-v {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1600 / 286;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 8%);
  mask-image: linear-gradient(to bottom, transparent 0, #000 8%);
}

/* the chord is pressed, and the bar comes up from the bottom edge */
html.js .cwc-stage[data-armed] .cwc-v { transform: translateY(104%); transition: transform 360ms cubic-bezier(0.55, 0, 1, 0.45); }
html.js .cwc-stage[data-armed].is-up .cwc-v { transform: none; transition: transform 1150ms var(--eo); }
html.js .cwc-stage.is-press .cwc-chord kbd { animation: cwc-press 820ms var(--eo) calc(var(--k) * 90ms) both; }
@keyframes cwc-press {
  0% { transform: none; }
  16%, 58% {
    transform: translateY(2.5px);
    background-color: oklch(1 0 0 / 0.3);
    box-shadow:
      inset 0 0 0 0.5px oklch(1 0 0 / 0.9),
      0 0.5px 0 oklch(0.36 0.03 140 / 0.12),
      0 0.5px 0 oklch(0.42 0.03 140 / 0.14),
      0 4px 10px -8px oklch(0.3 0.04 140 / 0.5);
  }
  100% { transform: none; }
}

.cwc-cap { max-width: 78ch; }

.cwc-facts { margin-top: clamp(40px, 4.2vw, 68px); }

/* ------------------------------------------------------------ written twice
   One figure on a tile: macOS on the left, Windows on the right, one line
   between them. Each station is written out on both sides at once. */
.tw {
  margin-top: clamp(36px, 3.6vw, 56px);
  padding: clamp(32px, 3.6vw, 60px) clamp(16px, 3vw, 48px) clamp(22px, 2.4vw, 36px);
  background: var(--tile);
  border-radius: var(--r-stage);
}
.tw-plot { position: relative; padding-bottom: 8px; }
.tw-heads, .tw-row { display: grid; grid-template-columns: 1fr 1fr; column-gap: clamp(40px, 7vw, 128px); }
.tw-h { font-family: var(--f-sans); font-weight: 600; font-size: clamp(1.5rem, 0.95rem + 1.3vw, 2.375rem); line-height: 1; letter-spacing: -0.045em; text-align: center; }
.tw-h span { display: inline-block; padding: 0 12px 6px; }
.tw-h.is-mac, .tw-d.is-mac { grid-column: 1; }
.tw-h.is-win, .tw-d.is-win { grid-column: 2; }
.tw-row { position: relative; padding: 70px 0 22px; align-items: center; }
.tw-st {
  position: absolute;
  top: 36px;
  left: 50%;
  z-index: 2;
  transform: translate(-50%, -50%);
  padding: 5px 14px 6px;
  background: var(--tile);
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.02em;
  white-space: nowrap;
}
.tw-st span { font-weight: 400; color: var(--ink-3); }
.tw-d { position: relative; justify-self: center; width: min(100%, 440px); }
.tw-svg { width: 100%; height: auto; overflow: visible; font-family: var(--f-sans); }
.tw-svg.v-n { display: none; }

/* the parts: white cards on the tile, each header in its kind's colour from
   the app (the recording above shows the same four), the site's ink for what
   is selected */
.cw-panel { fill: var(--tile-2); stroke: oklch(0.2 0.02 262 / 0.08); stroke-width: 1; }
.cw-pill { fill: var(--bg); stroke: oklch(0.2 0.02 262 / 0.1); stroke-width: 1; }
.cw-cb { fill: var(--bg); }
.cw-ch { fill: #70757F; }
/* link and file sit a step darker than the app's own red and blue (same hue
   and chroma) so their white labels reach 4.5:1 */
.cw-ch.k-link { fill: #DA352D; }
.cw-ch.k-image { fill: #815CD3; }
.cw-ch.k-file { fill: #2B6FE6; }
.cw-ch.k-concealed { fill: var(--ink-2); }
.cw-co { fill: none; stroke: oklch(0.2 0.02 262 / 0.13); stroke-width: 1; vector-effect: non-scaling-stroke; }
.cw-ck { fill: #fff; font-family: var(--f-sans); font-size: 12.5px; font-weight: 600; letter-spacing: -0.005em; }
.cw-gl { fill: none; stroke: var(--ink-3); stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.cw-gl.is-thin { stroke-width: 1; }
.cw-gl.is-page { fill: var(--bg); }
.cw-gf { fill: oklch(0.72 0.008 262); }
.cw-cf { stroke: var(--line-2); stroke-width: 1; stroke-linecap: round; }
.cw-dot { fill: var(--ink); }
.cw-sel { fill: none; stroke: var(--ink); stroke-width: 2; vector-effect: non-scaling-stroke; }
.cw-page { fill: var(--bg); stroke: oklch(0.2 0.02 262 / 0.13); stroke-width: 1; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.cw-fold { fill: var(--tile-2); stroke: oklch(0.2 0.02 262 / 0.13); stroke-width: 1; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.cw-hl { fill: var(--ink); fill-opacity: 0.055; }
.cw-hlb { fill: var(--ink); }
.cw-hi { fill: var(--ink-3); font-size: 12.5px; font-weight: 500; }
.cw-hk { fill: var(--ink); font-size: 14px; font-weight: 600; letter-spacing: -0.01em; }
.cw-hc { stroke: oklch(0.8 0.008 262); stroke-width: 1.6; stroke-linecap: round; vector-effect: non-scaling-stroke; }

/* one index moves the selection on both sides: the bar's ring and the history's row */
.tw-sel { transform: translateX(calc(var(--s, 0) * 65px)); transition: transform 460ms var(--eo); }
.tw-hl { transform: translateY(calc(var(--s, 0) * var(--rh) * 1px)); transition: transform 460ms var(--eo); }

.tw-keys { display: flex; justify-content: center; gap: 12px; padding: 2px 0 6px; }
.tw-key {
  display: grid;
  place-items: center;
  width: 62px;
  height: 48px;
  color: var(--ink);
  background: var(--bg);
  border: 0;
  border-radius: 11px;
  box-shadow:
    0 0 0 1px oklch(0.2 0.02 262 / 0.09),
    0 2px 0 oklch(0.2 0.02 262 / 0.09),
    0 8px 16px -10px oklch(0.2 0.02 262 / 0.35);
  transition: transform 90ms ease, box-shadow 90ms ease, background-color 160ms ease;
  user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
}
.tw-key svg { width: 19px; height: 13px; overflow: visible; }
.tw-key path { fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.tw-key[role="button"], .tw-key[data-live] { cursor: pointer; }
.tw-key.is-down {
  transform: translateY(2px);
  background: oklch(0.975 0.003 255);
  box-shadow: 0 0 0 1px oklch(0.2 0.02 262 / 0.11), 0 0 0 oklch(0.2 0.02 262 / 0.09), 0 3px 6px -5px oklch(0.2 0.02 262 / 0.3);
}
.tw-key:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; border-radius: 11px; }
@media (hover: hover) and (pointer: fine) {
  .tw-key[data-live]:hover { box-shadow: 0 0 0 1px oklch(0.2 0.02 262 / 0.16), 0 2px 0 oklch(0.2 0.02 262 / 0.1), 0 10px 18px -10px oklch(0.2 0.02 262 / 0.4); }
}

.tw-cap { margin-top: 22px; font-size: var(--fs-fine); color: var(--ink-3); text-align: center; text-wrap: pretty; }

/* the line between the two columns grows down station by station, and two
   pens draw the same thing on either side */
.tw-heads { position: relative; padding-bottom: 6px; }
.tw-heads::after, .tw-row::after { content: ""; position: absolute; top: 0; bottom: 0; left: 50%; width: 1px; margin-left: -0.5px; background: var(--line-2); transform-origin: top; }
.tw-d::after { content: ""; position: absolute; top: -8px; bottom: -8px; left: 0; width: 2px; margin-left: -2px; border-radius: 1px; background: var(--ink); opacity: 0; pointer-events: none; }

html.js .tw[data-armed] .tw-h span { opacity: 0; transform: translateY(10px); transition: opacity 700ms var(--eo), transform 900ms var(--eo); }
html.js .tw[data-armed] .tw-heads.in .tw-h span { opacity: 1; transform: none; }
html.js .tw[data-armed] .tw-heads::after, html.js .tw[data-armed] .tw-row::after { transform: scaleY(0); transition: transform 760ms cubic-bezier(0.3, 0.1, 0.35, 1); }
html.js .tw[data-armed] .tw-heads.in::after, html.js .tw[data-armed] .tw-row.in::after { transform: none; }
html.js .tw[data-armed] .tw-st { transition: opacity 500ms ease 120ms, transform 700ms var(--eo) 120ms; }
html.js .tw[data-armed] .tw-row:not(.in) .tw-st { opacity: 0; transform: translate(-50%, -30%); }
html.js .tw[data-armed] .tw-row:not(.in) .tw-d { clip-path: inset(-10px 100% -10px 0); }
html.js .tw[data-armed] .tw-row.in .tw-d { animation: tw-wipe 950ms var(--eio) 260ms both; }
html.js .tw[data-armed] .tw-row.in .tw-d::after { animation: tw-pen 950ms var(--eio) 260ms both; }
@keyframes tw-wipe { from { clip-path: inset(-10px 100% -10px 0); } to { clip-path: inset(-10px -10px -10px 0); } }
@keyframes tw-pen { 0% { left: 0; opacity: 1; } 86% { opacity: 1; } 100% { left: 100%; opacity: 0; } }

/* ------------------------------------------------------------ install */
.cwc-inst { margin-top: clamp(64px, 6.4vw, 112px); }
.cwc-inst-b { grid-column: 3 / 6; padding-right: 0; }
.cwc-inst-b > p:first-child { max-width: 58ch; font-size: var(--fs-lead); line-height: 1.42; letter-spacing: -0.014em; color: var(--ink-2); text-wrap: pretty; }
.cwc-cmd { margin-top: 24px; max-width: 620px; }
.cwc-cmd code { font-size: 0.9375rem; padding: 12px 14px; }
.cwc-cmd .key { padding: 0 20px; font-size: 0.875rem; }
.cwc-go { margin-top: 20px; }

/* ------------------------------------------------------------ the product site
   A browser window on a wash of the site's own colours: the peach and lilac
   of its hero, over a trace of its teal. */
.cwc-site { margin-top: clamp(40px, 4vw, 64px); }
.cwc-site-stage {
  padding: clamp(18px, 4.6vw, 80px) clamp(14px, 6vw, 112px) clamp(22px, 5vw, 88px);
  background:
    radial-gradient(70% 80% at 0% 0%, oklch(0.95 0.045 68 / 0.95), transparent 64%),
    radial-gradient(70% 90% at 100% 100%, oklch(0.88 0.075 305 / 0.8), transparent 66%),
    radial-gradient(60% 60% at 90% 0%, oklch(0.93 0.05 15 / 0.7), transparent 70%),
    linear-gradient(135deg, oklch(0.955 0.03 55), oklch(0.925 0.045 330));
}
/* the address sits in the middle of the title bar, as a browser sets it */
.cwc-site .win-bar { display: grid; grid-template-columns: 1fr minmax(0, 360px) 1fr; }
.cwc-site .win-dots + .win-url { width: 100%; max-width: none; margin: 0; }
.cwc-site .win { max-width: 1060px; margin-inline: auto; box-shadow: 0 0 0 1px oklch(0.3 0.04 330 / 0.12), 0 2px 4px oklch(0.3 0.04 330 / 0.06), 0 40px 70px -34px oklch(0.3 0.08 330 / 0.5); }
.cwc-site .win > video { aspect-ratio: 2880 / 1800; background: var(--bg); }

/* ------------------------------------------------------------ passwords stay out */
.pw { margin-top: clamp(28px, 3vw, 44px); padding: clamp(24px, 2.6vw, 40px) clamp(16px, 2.2vw, 32px) 18px; }
.pw-svg { width: 100%; height: auto; overflow: visible; font-family: var(--f-sans); }
.pw-w .pw-svg { max-width: 820px; }
.pw-n { display: none; }
.pw-n .pw-svg { max-width: 470px; }
.pw-cap { margin-top: 16px; font-size: var(--fs-fine); color: var(--ink-3); text-wrap: pretty; }
.pw-board { fill: var(--bg); stroke: var(--ink-3); stroke-width: 1.2; vector-effect: non-scaling-stroke; }
.pw-bclip { fill: var(--ink-2); }
.pw-bl { stroke: var(--ink-3); stroke-width: 1.2; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.pw-track, .pw-branch { fill: none; stroke: oklch(0.72 0.008 262); stroke-width: 1.5; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.pw-chev { fill: none; stroke: var(--ink-3); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.pw-stop { stroke: var(--ink); stroke-width: 3; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.pw-page { fill: var(--bg); stroke: oklch(0.2 0.02 262 / 0.14); stroke-width: 1; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.pw-fold { fill: var(--tile-2); stroke: oklch(0.2 0.02 262 / 0.14); stroke-width: 1; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.pw-rk { fill: var(--ink); font-size: 13.5px; font-weight: 600; letter-spacing: -0.01em; }
.pw-rl { stroke: oklch(0.8 0.008 262); stroke-width: 1.6; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.pw-rl.is-empty { stroke: var(--line-2); stroke-dasharray: 2 4; }
.pw-lab { font-size: 13px; fill: var(--ink-2); letter-spacing: -0.005em; }
.pw-lab.is-mid { text-anchor: middle; }
.pw-lab.is-end, .pw-say.is-end { text-anchor: end; }
.pw-say { font-size: 16px; font-weight: 600; letter-spacing: -0.02em; fill: var(--ink); }
.pw .cw-cb.is-ghost { fill: var(--bg); fill-opacity: 0.6; }
.pw .cw-co.is-ghost { stroke: var(--ink-3); stroke-dasharray: 3 3; vector-effect: non-scaling-stroke; }
.pw-ghost .cw-dot { fill: var(--ink-3); }
.pw-mv { display: none; }
.pw-mv .cw-cb { fill: var(--bg); }
.pw-mv .cw-co { stroke: oklch(0.2 0.02 262 / 0.22); }

/* four copies, in turn: three turn down into the history, one runs past it */
html.js .pw[data-armed] .pw-mv { display: inline; opacity: 0; transform-box: fill-box; transform-origin: 50% 50%; }
html.js .pw.in .pw-mv { animation: pw-in 1700ms var(--eio) var(--t) both; }
html.js .pw.in .pw-mv.is-by { animation: pw-by 2300ms var(--eio) var(--t) both; }
@keyframes pw-in {
  0% { opacity: 0; transform: translate(0, 0); }
  8% { opacity: 1; transform: translate(0, 0); }
  56% { opacity: 1; transform: translate(var(--dx), 0); }
  88% { opacity: 1; transform: translate(var(--dx), var(--dy)) scale(0.62); }
  100% { opacity: 0; transform: translate(var(--dx), var(--dy)) scale(0.5); }
}
@keyframes pw-by {
  0% { opacity: 0; transform: translate(0, 0); }
  7% { opacity: 1; transform: translate(0, 0); }
  82% { opacity: 1; transform: translate(var(--dx), 0); }
  100% { opacity: 0; transform: translate(var(--dx), 0); }
}
html.js .pw[data-armed]:not(.in) .pw-rec, html.js .pw[data-armed]:not(.in) .pw-ghost, html.js .pw[data-armed]:not(.in) .pw-end { opacity: 0; }
html.js .pw.in .pw-rec { animation: pw-show 500ms ease var(--t) both; }
html.js .pw.in .pw-ghost { animation: pw-show 600ms ease 3480ms both; }
html.js .pw.in .pw-end { animation: pw-show 700ms ease 3700ms both; }
@keyframes pw-show { from { opacity: 0; } to { opacity: 1; } }

/* ------------------------------------------------------------ widths */
@media (max-width: 1180px) {
  .pw-w { display: none; }
  .pw-n { display: block; }
}
@media (max-width: 1100px) {
  .tw-svg.v-w { display: none; }
  .tw-svg.v-n { display: block; max-width: 232px; margin-inline: auto; }
}
@media (max-width: 760px) {
  /* the bar keeps its height and scrolls sideways, as the real one does */
  .cwc-chord { height: 84px; }
  .cwc-bar { overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain; scrollbar-width: none; }
  .cwc-bar::-webkit-scrollbar { display: none; }
  .cwc-v { width: auto; max-width: none; height: 180px; }
  .cwc-facts { margin-top: 36px; }

  .tw { margin-top: 28px; padding: 26px 12px 18px; }
  .tw-heads, .tw-row { column-gap: 22px; }
  .tw-h { font-size: 1.5rem; }
  .tw-h span { padding: 0 6px 4px; }
  .tw-row { padding: 62px 0 24px; }
  .tw-st { top: 30px; font-size: 0.9375rem; padding: 4px 10px 5px; }
  .tw-d { width: 100%; }
  .tw-svg.v-n { max-width: none; }
  .tw-svg.is-hist .cw-hi { font-size: 14px; }
  .tw-svg.v-n .cw-ck { font-size: 15px; }
  .tw-keys { gap: 8px; }
  .tw-key { width: 52px; height: 44px; border-radius: 10px; }
  .tw-cap { text-align: left; }

  .cwc-inst { margin-top: 56px; }
  .cwc-cmd code { font-size: 0.8125rem; padding: 10px 10px; }
  .cwc-cmd .key { padding: 0 14px; }
  .cwc-site { margin-top: 32px; }
  .cwc-site-stage { padding: 16px 12px 18px; }
  .cwc-site .win-bar { height: 26px; padding: 0 10px; gap: 8px; grid-template-columns: auto 1fr; }
  .cwc-site .win-dots { gap: 4px; }
  .cwc-site .win-dots i { width: 7px; height: 7px; }
  .cwc-site .win-dots + .win-url { margin-right: 0; }
  .cwc-site .win-url { height: 18px; line-height: 18px; font-size: 0.6875rem; }
  .pw { padding: 18px 12px 14px; }
}

/* ------------------------------------------------------------ motion off: final states */
@media (prefers-reduced-motion: reduce) {
  html.js .cwc-stage[data-armed] .cwc-v { transform: none; transition: none; }
  html.js .cwc-stage.is-press .cwc-chord kbd { animation: none; }
  .cwc-chord kbd { transition: none; }
  html.js .tw[data-armed] .tw-h span { opacity: 1; transform: none; transition: none; }
  html.js .tw[data-armed] .tw-st, html.js .tw[data-armed] .tw-row:not(.in) .tw-st { opacity: 1; transform: translate(-50%, -50%); transition: none; }
  html.js .tw[data-armed] .tw-heads::after, html.js .tw[data-armed] .tw-row::after { transform: none; transition: none; }
  html.js .tw[data-armed] .tw-row .tw-d, html.js .tw[data-armed] .tw-row.in .tw-d { clip-path: none; animation: none; }
  html.js .tw[data-armed] .tw-row.in .tw-d::after { animation: none; opacity: 0; }
  .tw-sel, .tw-hl, .tw-key { transition: none; }
  html.js .pw[data-armed] .pw-mv { display: none; }
  html.js .pw[data-armed]:not(.in) .pw-rec, html.js .pw[data-armed]:not(.in) .pw-ghost, html.js .pw[data-armed]:not(.in) .pw-end { opacity: 1; }
  html.js .pw.in .pw-rec, html.js .pw.in .pw-ghost, html.js .pw.in .pw-end { animation: none; }
}

/* ------------------------------------------------------------ print: the recordings as their posters, every figure drawn */
@media print {
  .cwc-stage, .cwc-site-stage { background: none !important; box-shadow: none !important; padding: 0 !important; }
  .cwc-chord { display: none; }
  .cwc-bar { background: #ADBBA9 url("../img/work/clipwell-strip.webp") left center / cover no-repeat; aspect-ratio: 1600 / 286; }
  .cwc-v { transform: none !important; }
  .tw-d { clip-path: none !important; animation: none !important; }
  .tw-d::after, .pw-mv { display: none !important; }
  .tw-row::after, .tw-heads::after, .tw-h span, .tw-st { opacity: 1 !important; }
  .tw-row::after, .tw-heads::after, .tw-h span { transform: none !important; }
  .tw-st { transform: translate(-50%, -50%) !important; }
  .pw-rec, .pw-ghost, .pw-end { opacity: 1 !important; animation: none !important; }
  .tw, .pw, .cwc-site { break-inside: avoid; }
}