/* Process band — ported from the "AI Design Process" artifact.
   Scoped to .process so nothing leaks into the rest of the page.
   Colors come from the dark tokens in tokens.css. */

.process {
  --bg: var(--dark-bg); --bg-2: var(--dark-bg-2); --ink: var(--dark-ink); --ink-2: var(--dark-ink-2);
  --muted: var(--dark-muted); --line: var(--dark-line); --fill: var(--dark-fill); --fill-2: var(--dark-fill-2);
  --accent: var(--dark-accent); --accent-soft: var(--dark-accent-soft);
  position: relative; isolation: isolate; overflow: hidden;
  background: var(--bg); color: var(--ink); color-scheme: dark;
}
/* Film grain, on the band only */
.process::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 10; opacity: .1; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}
.process .board {
  position: relative; max-width: var(--page-max); margin: 0 auto;
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: 4.5rem; row-gap: 3.5rem;
  padding: 1.75rem 4.4375rem 3.5rem 3.3125rem; /* 28 71 56 53 */
}
.process #track { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; z-index: 2; }
.process .conn { fill: none; stroke: var(--muted); stroke-width: 1; }
.process .arrow { fill: none; stroke: var(--muted); stroke-width: 1.2; stroke-linecap: round; stroke-linejoin: round; opacity: 0; transition: opacity .2s; }
.process .arrow.on { opacity: 1; }
.process .start-dot { fill: var(--bg); stroke: var(--muted); stroke-width: 1; opacity: 0; transition: opacity .3s; }
.process .start-dot.on { opacity: 1; }
.process .ball { fill: var(--accent); }
.process .ball-ring { fill: none; stroke: var(--accent); stroke-opacity: .35; stroke-width: 1; }

/* Build speed: delays and durations inside a step are scaled from the original artifact
   (process.js sets the matching line speed and build time). */
.process { --pr-delay: .4; --pr-dur: .6; }

/* A step is hidden until the ball's line reaches it. */
.process.tour .card:not(.reached) .frame,
.process.tour .card:not(.reached) .head,
.process.tour .card:not(.reached) .desc { opacity: 0; }
.process .card.play .frame { animation: pr-boxIn calc(.5s * var(--pr-dur)) var(--ease) both; }
.process .card.play .head { animation: pr-fade calc(.45s * var(--pr-dur)) var(--ease) calc(1.3s * var(--pr-delay)) both; }
.process .card.play .desc { animation: pr-fade calc(.5s * var(--pr-dur)) var(--ease) calc(1.6s * var(--pr-delay)) both; }

.process .card { position: relative; z-index: 1; display: grid; gap: 0.5rem; align-content: start; }
/* headline on its own top row, then the steps (it used to sit right of step 06: grid-area 2 / 3 / 3 / 5, right-aligned) */
.process .c1 { grid-area: 2 / 1; } .process .c2 { grid-area: 2 / 2; } .process .c3 { grid-area: 2 / 3; } .process .c4 { grid-area: 2 / 4; }
.process .c5 { grid-area: 3 / 1; } .process .c6 { grid-area: 3 / 2; }
.process .frame { background: var(--bg); border: 1px solid var(--line); padding: 0.375rem; transition: border-color .35s; }
.process .card.on .frame { border-color: var(--accent); }
.process .head { display: flex; justify-content: space-between; align-items: baseline; gap: 0.75rem; margin-top: 0.125rem; }
.process .card h3 { margin: 0; font: var(--weight-medium) var(--text-small)/1.3 var(--font-mono); color: var(--ink); }
.process .num { font: var(--weight-medium) var(--text-small)/1 var(--font-mono); color: var(--muted); transition: color .3s; font-variant-numeric: tabular-nums; }
.process .card.reached .num { color: var(--ink); }
.process .desc { margin: 0; font-size: var(--text-caption); line-height: 1.4; color: var(--ink); text-wrap: pretty; }
.process .ill { display: block; width: 100%; height: auto; }

/* Spans columns 2–4 so the 44px headline fits on two lines; it's right-aligned, so it clears step 06. */
/* Headline sits in the open space right of the last step (columns 3–4), a full column gap away.
   Right-aligned text; the block is centered on the whole last step — box, title and description (height set by process.js). */
.process .lede { grid-area: 1 / 1 / 2 / -1; position: relative; z-index: 1; display: grid; justify-items: start; gap: 1.125rem; text-align: left; pointer-events: none; padding-top: 1.75rem; }
.process .lede .ctl { pointer-events: auto; }
.process .lede h2 {
  margin: 0; color: var(--ink); white-space: pre-line;
  font: var(--weight-regular) var(--text-display)/var(--text-display-lh) var(--font-serif); letter-spacing: var(--text-display-tr);
}
.process .ctl { display: flex; align-items: center; gap: 0.875rem; flex-wrap: wrap; justify-content: flex-end; }
.process .now { margin: 0; font: 400 var(--text-caption)/1.3 var(--font-mono); color: var(--ink-2); }
.process .now span { color: var(--muted); margin-right: 0.5rem; letter-spacing: .1em; }
.process .toggle { font: 400 var(--text-caption)/1 var(--font-mono); color: var(--ink); background: transparent; border: 1px solid var(--line); padding: 7px 12px; cursor: pointer; }
.process .toggle:hover { border-color: var(--ink-2); }

/* Illustration parts */
.process .ill * { vector-effect: non-scaling-stroke; }
.process .ill .a-draw { vector-effect: none; }
.process .box { fill: var(--bg-2); stroke: var(--line); }
.process .box.hi { stroke: var(--accent); }
.process .bar { fill: var(--fill); }
.process .bar2 { fill: var(--fill-2); }
.process .inkf { fill: var(--ink-2); }
.process .accf, .process .accbar, .process .btn { fill: var(--accent); }
.process .rule { stroke: var(--fill-2); }
.process .gridl { stroke: var(--fill); }
.process .dots { stroke: var(--accent); stroke-dasharray: 2 3; }
.process .trend { fill: none; stroke: var(--ink-2); stroke-width: 1.5; stroke-linejoin: round; }
.process .pen { fill: none; stroke: var(--ink-2); stroke-width: 1.2; stroke-linecap: round; }
.process .ring { fill: none; stroke: var(--accent); stroke-width: 1.5; stroke-dasharray: 3 2; }
.process .slot { fill: none; stroke: var(--fill-2); stroke-dasharray: 3 3; }
.process .ripple { fill: none; stroke: var(--accent); stroke-width: 1.2; opacity: 0; }
.process .sel { fill: none; stroke: var(--accent); stroke-width: 1.5; }
.process .check { fill: none; stroke: var(--accent); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.process .check.on-acc { stroke: var(--bg); }
.process .tag, .process .pill-acc { fill: var(--accent-soft); }
.process .scan { fill: var(--accent); opacity: 0; }
.process .t { font-family: var(--font-sans); font-size: 11px; fill: var(--muted); }
.process .t.sm { font-size: 9.5px; }
.process .t.ink { fill: var(--ink); font-weight: 500; }
.process .t.acc { fill: var(--accent); }
.process .t.big { font-size: 22px; font-weight: 500; }
.process .m { font-family: var(--font-mono); font-size: 8.5px; letter-spacing: .08em; fill: var(--muted); }
.process .m.acc { fill: var(--accent); }
.process .pt { font-family: var(--font-mono); font-size: 8px; font-weight: 600; letter-spacing: .08em; text-anchor: middle; fill: var(--accent); }
.process .pt.dark { fill: var(--bg); }
.process .cursor-p { fill: var(--ink); stroke: var(--bg); stroke-width: 1; }
.process .a-fade, .process .a-pop, .process .a-gx, .process .a-gy, .process .a-drop, .process .a-rise, .process .ripple, .process .slide, .process .cur { transform-box: fill-box; }
.process .a-pop, .process .ripple { transform-origin: center; }
.process .a-gx { transform-origin: left center; }
.process .a-gy { transform-origin: center bottom; }
.process .cur { transform-origin: 0 0; }
.process .card.play .a-fade { animation: pr-fade calc(.55s * var(--pr-dur)) var(--ease) calc((var(--d, 0s) + .35s) * var(--pr-delay)) both; }
.process .card.play .a-pop { animation: pr-pop calc(.6s * var(--pr-dur)) var(--ease) calc((var(--d, 0s) + .35s) * var(--pr-delay)) both; }
.process .card.play .a-gx { animation: pr-gx calc(.65s * var(--pr-dur)) var(--ease) calc((var(--d, 0s) + .35s) * var(--pr-delay)) both; }
.process .card.play .a-drop { animation: pr-drop calc(.6s * var(--pr-dur)) var(--ease) calc((var(--d, 0s) + .35s) * var(--pr-delay)) both; }
.process .card.play .a-rise { animation: pr-rise calc(.5s * var(--pr-dur)) var(--ease) calc((var(--d, 0s) + .35s) * var(--pr-delay)) both; }
.process .card.play .a-draw { animation: pr-draw calc(.8s * var(--pr-dur)) var(--ease) calc((var(--d, 0s) + .35s) * var(--pr-delay)) both; }
.process .card.play .a-hi { animation: pr-hi calc(.4s * var(--pr-dur)) ease-out calc((var(--d, 0s) + .35s) * var(--pr-delay)) both; }
.process .card.play .a-play { animation: pr-gx calc(2.4s * var(--pr-dur)) linear calc(.55s * var(--pr-delay)) both; }
.process .card.play .ripple { animation: pr-ripple calc(.7s * var(--pr-dur)) ease-out calc((var(--d, 0s) + .35s) * var(--pr-delay)) both; }
.process .card.play .scan { animation: pr-scan calc(1.3s * var(--pr-dur)) cubic-bezier(.45, 0, .55, 1) calc(.85s * var(--pr-delay)) both; }
.process .card.play .cur { animation: pr-cur calc(1.1s * var(--pr-dur)) var(--ease) calc((var(--d, 0s) + .35s) * var(--pr-delay)) both; }
.process .card.play .a-btn { animation: pr-btn calc(.3s * var(--pr-dur)) ease-out calc((var(--d, 0s) + .35s) * var(--pr-delay)) both; }
.process .card.play .slide { animation: pr-slide calc(1.7s * var(--pr-dur)) var(--ease) calc((var(--d, 0s) + .35s) * var(--pr-delay)) both; }
@keyframes pr-boxIn { from { opacity: 0; transform: scale(.985); } }
@keyframes pr-fade { from { opacity: 0; transform: translateY(5px); } }
@keyframes pr-pop { from { opacity: 0; transform: scale(.7); } }
@keyframes pr-gx { from { transform: scaleX(0); } }
@keyframes pr-drop { from { opacity: 0; transform: translateY(-10px); } }
@keyframes pr-rise { from { opacity: 0; transform: translateY(12px); } }
@keyframes pr-draw { 0% { stroke-dasharray: 1 1; stroke-dashoffset: 1; } 99% { stroke-dasharray: 1 1; stroke-dashoffset: 0; } 100% { stroke-dasharray: none; stroke-dashoffset: 0; } }
@keyframes pr-hi { from { stroke: var(--line); } }
@keyframes pr-btn { from { fill: var(--fill-2); } }
@keyframes pr-ripple { 0% { opacity: .9; transform: scale(.4); } 100% { opacity: 0; transform: scale(1.5); } }
@keyframes pr-scan { 0% { opacity: 0; transform: translateX(0); } 8% { opacity: 1; } 92% { opacity: 1; transform: translateX(156px); } 100% { opacity: 0; transform: translateX(156px); } }
@keyframes pr-cur { 0% { opacity: 0; transform: translate(48px, 30px); } 15% { opacity: 1; transform: translate(48px, 30px); } 65% { transform: translate(0, 0) scale(1); } 76% { transform: translate(0, 0) scale(.8); } 88%, 100% { opacity: 1; transform: translate(0, 0) scale(1); } }
@keyframes pr-slide { 0% { opacity: 0; transform: translate(88px, -72px); } 18%, 38% { opacity: 1; transform: translate(88px, -72px); } 100% { opacity: 1; transform: translate(0, 0); } }

@media (prefers-reduced-motion: reduce) {
  .process .card.play *, .process .card.play .frame, .process .card.play .head, .process .card.play .desc { animation: none !important; }
  .process .frame, .process .num { transition: none; }
}
@media (max-width: 1100px) {
  .process .board { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 48px; padding: 40px var(--page-gutter); }
  .process .card { grid-area: auto !important; }
  .process .lede { grid-area: auto; grid-column: 1 / -1; order: -1; padding-top: 0; }
  .process .ctl { justify-content: flex-start; }
}
@media (max-width: 640px) {
  .process .board { grid-template-columns: minmax(0, 1fr); row-gap: 52px; padding: 44px var(--page-gutter) 40px; }
}