/* Visual pass (2026-10-18, stacy-claude-visual-refinement-handoff.md). Loaded last.
   Signal green #c8ff7c = energy that is permitted / active / live. Metals stay champagne → bronze (SR Brand Guidelines). */

/* ================= Asymmetry: one example at a time explains the routing ================= */
.has-motion .scene-asym .asym-art.is-routing .asym-lanes .lane { transform: none; max-width: none; padding-bottom: 8px; transition: opacity var(--beat) var(--ease); }
.has-motion .scene-asym .asym-art.is-routing .asym-lanes .lane b { transition: color var(--beat) var(--ease); }
.has-motion .scene-asym .asym-art.is-routing .asym-lanes .lane:not(.is-arrived) b { color: rgba(4, 0, 30, .62); }
.has-motion .scene-asym .lane[data-lane="0"].is-arrived b::before { box-shadow: 0 0 0 1.5px var(--ink), 0 0 0 6px rgba(200, 255, 124, .5); }
.has-motion .scene-asym .gate { bottom: 0; }
.has-motion .scene-asym .gate i { transition: background var(--half) var(--ease); }
.has-motion .scene-asym .gate.is-processing i { background: var(--champagne); box-shadow: 0 0 0 1px rgba(227, 199, 122, .35); }
.has-motion .scene-asym .asym-checks > div { transition: background var(--half) var(--ease), border-color var(--half) var(--ease); }

/* the three examples: readable width while travelling, stamps appear as each check is passed */
.has-motion .asym-slips li[data-route-example] { width: min(186px, 30vw); max-width: none; white-space: normal; transition: box-shadow var(--half) var(--ease), border-color var(--half) var(--ease); }
.has-motion .asym-slips li.is-active { border-color: var(--satin); box-shadow: 0 16px 34px -16px rgba(4, 0, 30, .5); background: #fff; }
.has-motion .asym-slips li.is-permitted { box-shadow: 0 0 0 2px var(--signal), 0 0 0 3px rgba(4, 0, 30, .55), 0 16px 34px -16px rgba(4, 0, 30, .5); }
.slip-stamps { margin: 7px 0 0; padding: 0; display: grid; gap: 3px; font-size: 11.5px; line-height: 1.3; color: #4c412c; }
.slip-stamps span { position: relative; padding-left: 13px; }
.slip-stamps span::before { content: ""; position: absolute; left: 0; top: .42em; width: 6px; height: 6px; border-radius: 50%; background: var(--satin); }
[data-route-example="carry"] .slip-stamps span:nth-child(n+2)::before { background: var(--signal); box-shadow: 0 0 0 1px var(--ink); }
[data-route-example="human"] .slip-stamps span:nth-child(n+2)::before { background: #fff; box-shadow: 0 0 0 1.5px var(--champagne); }
[data-route-example="hold"] .slip-stamps span::before { background: #b9ae9c; }
.has-motion .asym-slips li:not(.is-active) .slip-stamps { display: none; }
.has-motion .slip-stamps span { display: none; }
.has-motion .asym-slips li[data-stage="1"] .slip-stamps span:nth-child(-n+1),
.has-motion .asym-slips li[data-stage="2"] .slip-stamps span:nth-child(-n+2),
.has-motion .asym-slips li[data-stage="3"] .slip-stamps span { display: block; animation: stamp-in var(--half) var(--ease) both; }
@keyframes stamp-in { from { opacity: 0; transform: translateY(4px); } }
.has-motion .asym-slips li[data-stage="0"] .slip-stamps { display: none; }
.has-motion .asym-slips li.is-active .slip-reason { display: none; }
/* arriving: the checks collapse into the destination's reason, revealed as the card lands */
.has-motion .asym-slips li.is-landing .slip-stamps { display: none; }
.has-motion .asym-slips li.is-landing .slip-reason { display: block; animation: stamp-in var(--half) var(--ease) both; }
/* static reading: every example lists its three checks and its destination reason */
.is-static .slip-stamps { margin-bottom: 4px; }

@media (max-width: 600px) {
  .has-motion .scene-asym .asym-person { display: none; }
  .has-motion .scene-asym .asym-art.is-routing .asym-lanes .lane { border-bottom: 1px solid rgba(130, 113, 78, .3); }
  .has-motion .scene-asym .asym-art.is-routing .asym-lanes .lane b { font-size: 13px; margin-bottom: 3px; }
  .has-motion .scene-asym .asym-art.is-routing .asym-lanes .lane small { font-size: 11px; line-height: 1.3; }
  .has-motion .asym-slips li[data-route-example] { width: min(172px, 46vw); font-size: 12px; padding: 7px 9px; }
  .has-motion .slip-stamps { font-size: 10.5px; margin-top: 4px; }
  .has-motion .scene-asym .asym-art figcaption { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .has-motion .slip-stamps span, .has-motion .asym-slips li .slip-reason { animation: none; }
  .has-motion .asym-slips li[data-route-example] { transition: none; }
}
/* short phones: tighter head so the routing frame keeps enough height */
@media (max-width: 600px) and (max-height: 740px) {
  .has-motion .scene-asym .display { font-size: 1.45rem; }
  .has-motion .scene-asym .scene-beats li { font-size: .84rem; line-height: 1.4; }
  .has-motion .scene-asym .scene-beats li b { font-size: 1rem; }
}

/* ================= Operating loop: four phases, one commitment, a real pause at the person ================= */
.has-motion .scene-loop .cta-context { display: none; }
.loop-phase { fill: none; stroke: var(--champagne); stroke-width: 6; stroke-linecap: round; opacity: .22; transition: stroke-dasharray var(--beat) var(--ease); }
.has-motion .loop-node:not(.in-phase) text { fill: rgba(216, 213, 206, .58); }
.has-motion .loop-node.in-phase:not(.is-past):not(.is-on) text { fill: rgba(245, 244, 239, .82); }
.has-motion .loop-node.human .human-label { fill: var(--champagne); }
.loop-signal { fill: var(--signal); transition: fill var(--half) var(--ease), r var(--half) var(--ease); }
.loop-signal-halo { fill: rgba(200, 255, 124, .16); transition: opacity var(--half) var(--ease); }
.is-static .loop-signal, .is-static .loop-signal-halo { display: none; }
/* the authority hold: the system's signal yields (hollow), the person's ring carries the moment */
.loop-art.is-deciding .loop-signal { fill: transparent; stroke: var(--signal); stroke-width: 2; }
.loop-art.is-deciding .loop-signal-halo { opacity: 0; }
.loop-art.is-deciding .loop-node.human ellipse { stroke-width: 3.4; animation: decide-hold 1250ms var(--ease) infinite alternate; }
@keyframes decide-hold { from { stroke-opacity: .55; } to { stroke-opacity: 1; } }
.loop-art.is-decided .loop-node.human ellipse { fill: rgba(227, 199, 122, .16); }
.loop-art.is-closed .loop-path-run { stroke: var(--champagne); }
/* the commitment: fixed at the centre of the loop on desktop; one fact joins per completed phase */
@media (min-width: 961px) { .has-motion .scene-loop .loop-token { left: 50%; top: 52%; width: min(300px, 38%); transform: translate(-50%, -50%) !important; } }
.token-ledger { list-style: none; margin: 0; padding: 0; display: grid; gap: 5px; }
.token-ledger li { position: relative; padding-left: 13px; font-size: .78rem; line-height: 1.4; color: rgba(245, 244, 239, .82); }
.token-ledger li::before { content: ""; position: absolute; left: 0; top: .5em; width: 6px; height: 6px; border-radius: 50%; background: var(--satin); }
.token-ledger li:nth-child(3)::before { background: transparent; box-shadow: 0 0 0 1.5px var(--champagne); }
.loop-art.is-closed .token-ledger li:last-child::before { background: var(--signal); }
.has-motion .token-ledger li:not(.is-in) { display: none; }
.has-motion .token-ledger li.is-in { animation: stamp-in var(--half) var(--ease) both; }
.loop-token.at-human { border-color: var(--champagne); box-shadow: 0 0 0 1px rgba(227, 199, 122, .5), 0 24px 50px -24px rgba(0, 0, 0, .9); }
@media (max-width: 960px) { .has-motion .scene-loop .loop-token { display: grid; } .has-motion .token-ledger li { font-size: .74rem; } }
@media (prefers-reduced-motion: reduce) { .loop-art.is-deciding .loop-node.human ellipse, .has-motion .token-ledger li.is-in { animation: none; } }
@media (max-width: 960px) { .has-motion .loop-token .token-ledger li.is-in { display: block; } }
@media (max-width: 600px) and (max-height: 740px) { .has-motion .loop-token .token-ledger li.is-in:not(.is-newest) { display: none; } .has-motion .scene-loop .loop-token { padding: 8px 12px; gap: 4px; } }
@media (max-width: 600px) { .has-motion .scene-loop .loop-now p { display: none; } .has-motion .scene-loop .loop-now { min-height: 0; } }
@media (max-width: 600px) and (max-height: 740px) {
  .has-motion .scene-loop .build-status { margin-top: 30px; }
  .has-motion .scene-loop .loop-art > svg { max-height: 165px; }
  .has-motion .scene-loop .display { font-size: 1.35rem; }
  .has-motion .scene-loop .loop-now strong { font-size: 1.05rem; }
}

/* ================= Software scene: one request, visibly handed on ================= */
.has-motion .scene-scope .spatial-label { transition: opacity var(--half) var(--ease), border-color var(--half) var(--ease); }
.has-motion .scene-scope .spatial-label:not(.is-current) { opacity: .5; }
.has-motion .scene-scope .spatial-label.is-current { border-color: var(--champagne); opacity: 1; }
.has-motion .scene-scope .spatial-label.is-current b::before { content: ""; display: inline-block; width: 7px; height: 7px; margin-right: 6px; border-radius: 50%; background: var(--signal); vertical-align: 1px; }
.has-motion .scene-scope .scope-system-state { color: var(--bone); font-family: var(--f-display); font-size: clamp(1rem, 1.3vw, 1.2rem); }
/* the step key only belongs to the single-request stage */
.has-motion .scene-scope[data-workflow-step="all"] .scope-system-key { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
/* tiers: the current status leads; the others recede to a status line and a quiet title */
.has-motion .scene-scope .scope-beats li { transition: opacity var(--beat) var(--ease); }
.has-motion .scene-scope .scope-beats li:not(.is-on) { opacity: .42; }
.has-motion .scene-scope .scope-beats li:not(.is-on) b { font-size: .95rem; }
.has-motion .scene-scope .scope-art { position: relative; }
.has-motion .scene-scope .scope-system-state { display: block; position: absolute; left: 0; right: 0; bottom: 34px; z-index: 3; min-height: 0; margin: 0; pointer-events: none; text-shadow: 0 1px 12px rgba(4, 0, 30, .9); }
/* phones: the diagram's lower edge can sit below the fold, so the handoff caption leads at the top instead of the step key */
@media (max-width: 600px) {
  .has-motion .scene-scope .scope-system-state { position: static; grid-row: 1; font-size: .98rem; line-height: 1.35; min-height: 2.7em; }
  .has-motion .scene-scope .scope-system-key { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}
@media (max-width: 600px) and (min-height: 741px) { .has-motion .scene-scope .scope-art { height: 44svh; min-height: 340px; } }

/* ================= Bridges: identity → what Stacy does today → what is being built ================= */
.hero-copy .promise { margin: 16px auto 0; font-family: var(--f-display); font-weight: 350; font-size: clamp(1.25rem, 2vw, 1.75rem); line-height: 1.2; color: var(--ink); letter-spacing: -.01em; }
.hero-copy .promise em { font-style: italic; }
.hero-copy .lede { margin-top: 10px; font-size: clamp(.86rem, 1vw, .98rem); color: rgba(4, 0, 30, .62); }
.has-motion .hero-copy .promise { animation: rise-line var(--beat) var(--ease) 180ms both; }
@media (max-height: 760px) and (min-width: 761px) { .hero-copy .promise { font-size: 1.2rem; margin-top: 10px; } }
@media (max-width: 600px) { .hero-copy .promise { font-size: 1.12rem; margin-top: 10px; } }
.architect-bridge { margin-top: 22px; padding-top: 16px; border-top: 1px solid rgba(130, 113, 78, .35); display: grid; gap: 10px; max-width: 44ch; }
.architect-bridge p { font-size: .95rem; line-height: 1.55; color: rgba(4, 0, 30, .8); margin: 0; }
.architect-bridge b { display: inline-block; min-width: 3.6em; margin-right: 6px; font-size: .7rem; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: #6a5a37; }
.architect-bridge .bridge-next b::before { content: ""; display: inline-block; width: 7px; height: 7px; margin-right: 6px; border-radius: 50%; background: var(--signal); box-shadow: 0 0 0 1.5px var(--ink); vertical-align: 1px; }
.architect-bridge .architect-paths { margin-top: 2px; font-size: .9rem; }
@media (prefers-reduced-motion: reduce) { .has-motion .hero-copy .promise { animation: none; } }

/* ================= Cross-scene handoff: the signal arrives at each scene's input ================= */
.handoff-spark { position: fixed; left: -6px; top: -6px; width: 12px; height: 12px; border-radius: 50%; background: var(--signal); box-shadow: 0 0 0 1.5px rgba(4, 0, 30, .7), 0 0 18px 4px rgba(200, 255, 124, .45); z-index: 40; pointer-events: none; opacity: 0; will-change: transform, opacity; }
.handoff-spark.is-trail { width: 8px; height: 8px; left: -4px; top: -4px; box-shadow: 0 0 10px 2px rgba(200, 255, 124, .35); }
.is-static .handoff-spark { display: none; }
.loop-node.signal-arrived circle { stroke: var(--signal); stroke-width: 2.6; }
.spatial-label.signal-arrived { box-shadow: 0 0 0 1.5px var(--signal), 0 0 16px rgba(200, 255, 124, .25); }
.person-ring.signal-arrived i { box-shadow: 0 0 0 2px rgba(200, 255, 124, .75), 0 0 14px rgba(200, 255, 124, .35); transition: box-shadow var(--beat) var(--ease); }

/* metallic depth in the loop: champagne highlight edge into bronze, from the guideline golds */
.loop-path-run { stroke: url(#loop-metal); stroke-width: 2.6; }
.loop-node.human ellipse { stroke: url(#loop-metal); }
.scene-asym .scene-beats li.signal-arrived::before { background: var(--signal); border-color: var(--ink); box-shadow: 0 0 0 4px rgba(200, 255, 124, .35); transition: background var(--beat) var(--ease), box-shadow var(--beat) var(--ease); }