/* ============================================================
   ui-anima-caps.css — Capability micro-visuals (CSS-only).
   Six flat cards, each led by a ~64px looping micro-visual on a
   cream stage. Scoped under .ua-cap-* (never bare state names).
   All loops are pure CSS keyframes; the un-animated base state
   of every element IS the meaningful final frame, so
   prefers-reduced-motion simply freezes each visual at its
   "done" moment. Mini-pages inside a viz are "someone else's
   website", so they may go white or dark; the frame around them
   stays warm-light. Amber --ua-inert is used only for the
   inert/honesty semantics (defined in ui-anima.css).
   ============================================================ */

/* ---- grid + cards (house .card look, own class names) ------ */
.ua-cap-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-md, 20px); }
.ua-cap-card {
  border: 1px solid var(--bb-line, rgba(26,26,23,.14));
  border-radius: var(--radius-lg, 10px);
  background: var(--color-surface, #eae7dd);
  padding: clamp(20px, 2.4vw, 26px);
  transition: border-color .2s ease;
}
.ua-cap-card:hover { border-color: var(--color-text, #1a1a17); }
.ua-cap-t { margin: 0 0 6px; font-size: var(--font-size-lg, 1.1rem); font-weight: 600; letter-spacing: -.01em; color: var(--color-text, #1a1a17); }
.ua-cap-d { margin: 0; color: var(--color-muted, #6c6b61); font-size: var(--font-size-base, .95rem); line-height: 1.6; }

/* ---- shared viz stage -------------------------------------- */
.ua-cap-viz {
  position: relative; height: 78px; margin: 0 0 16px;
  border: 1px solid var(--color-border, #e0ddd1); border-radius: 8px;
  background: var(--color-bg, #f5f4ef); overflow: hidden;
}
.ua-cap-scene { position: absolute; left: 50%; top: 50%; width: 200px; height: 48px; margin: -24px 0 0 -100px; }
.ua-cap-scene span, .ua-cap-scene i { position: absolute; display: block; }
.ua-cap-lab {
  position: absolute; right: 8px; bottom: 5px;
  font-family: var(--font-mono, monospace); font-size: 12px; font-weight: 500;
  letter-spacing: .07em; text-transform: uppercase; white-space: nowrap;
  color: var(--color-muted, #6c6b61); pointer-events: none;
}
.ua-cap-lab--left { right: auto; left: 8px; }

/* ============================================================
   1 · BRAND-AWARE — swatches slide out of a tiny page into a
   palette row; accent tick when the palette is complete.
   ============================================================ */
.ua-cap-b-page { left: 2px; top: 2px; width: 34px; height: 44px; background: #fff; border: 1px solid rgba(26,26,23,.18); border-radius: 4px; }
.ua-cap-b-page::before { content: ""; position: absolute; left: 5px; top: 6px; width: 24px; height: 5px; background: #3b64c8; border-radius: 1px; }
.ua-cap-b-page::after  { content: ""; position: absolute; left: 5px; top: 32px; width: 12px; height: 4px; background: #1c7a4b; border-radius: 2px; }
.ua-cap-b-l1 { left: 5px; top: 17px; width: 20px; height: 3px; background: #8f5aa8; border-radius: 1px; opacity: .85; }
.ua-cap-b-l2 { left: 5px; top: 24px; width: 16px; height: 3px; background: rgba(26,26,23,.14); border-radius: 1px; }
.ua-cap-b-slot { top: 17px; width: 14px; height: 14px; border: 1px dashed rgba(26,26,23,.32); border-radius: 50%; }
.ua-cap-b-slot--1 { left: 70px; } .ua-cap-b-slot--2 { left: 100px; } .ua-cap-b-slot--3 { left: 130px; }
.ua-cap-b-sw { top: 20px; width: 8px; height: 8px; border-radius: 50%; box-shadow: 0 0 0 1px rgba(26,26,23,.06); }
.ua-cap-b-sw--1 { left: 73px;  background: #3b64c8; animation: ua-cap-b-s1 5.6s cubic-bezier(.5,.1,.2,1) infinite; }
.ua-cap-b-sw--2 { left: 103px; background: #8f5aa8; animation: ua-cap-b-s2 5.6s cubic-bezier(.5,.1,.2,1) infinite; }
.ua-cap-b-sw--3 { left: 133px; background: #1c7a4b; animation: ua-cap-b-s3 5.6s cubic-bezier(.5,.1,.2,1) infinite; }
.ua-cap-b-tick { left: 150px; top: 15px; font: 600 12px/1 var(--font-mono, monospace); color: var(--accent, #d9542b); animation: ua-cap-b-tick 5.6s ease infinite; }
@keyframes ua-cap-b-s1 {
  0%, 4%   { transform: translate(-65px,-15px) scale(.45); opacity: 0; }
  10%      { transform: translate(-65px,-15px) scale(1);   opacity: 1; }
  26%      { transform: none; }
  86%      { transform: none; opacity: 1; }
  94%,100% { transform: translate(-65px,-15px) scale(.45); opacity: 0; }
}
@keyframes ua-cap-b-s2 {
  0%, 8%   { transform: translate(-94px,-5px) scale(.45); opacity: 0; }
  14%      { transform: translate(-94px,-5px) scale(1);   opacity: 1; }
  32%      { transform: none; }
  86%      { transform: none; opacity: 1; }
  94%,100% { transform: translate(-94px,-5px) scale(.45); opacity: 0; }
}
@keyframes ua-cap-b-s3 {
  0%, 12%  { transform: translate(-125px,10px) scale(.45); opacity: 0; }
  18%      { transform: translate(-125px,10px) scale(1);   opacity: 1; }
  38%      { transform: none; }
  86%      { transform: none; opacity: 1; }
  94%,100% { transform: translate(-125px,10px) scale(.45); opacity: 0; }
}
@keyframes ua-cap-b-tick {
  0%, 42%  { opacity: 0; transform: scale(.6); }
  50%      { opacity: 1; transform: scale(1); }
  86%      { opacity: 1; }
  94%,100% { opacity: 0; transform: scale(1); }
}

/* ============================================================
   2 · SAVE & REPLAY — a bookmarked design chip stamps its look
   onto a page outline, twice per loop.
   ============================================================ */
.ua-cap-s-chip { left: 2px; top: 9px; width: 46px; height: 30px; background: #f6f1e3; border: 1px solid rgba(26,26,23,.2); border-radius: 6px; }
.ua-cap-s-chip::before { content: ""; position: absolute; left: 7px; top: 8px; width: 22px; height: 5px; background: #241f14; border-radius: 1px; }
.ua-cap-s-chip::after  { content: ""; position: absolute; right: 6px; top: -1px; width: 8px; height: 11px; background: var(--accent, #d9542b);
  clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 68%, 0 100%); }
.ua-cap-s-chip i { left: 7px; top: 18px; width: 30px; height: 3px; background: rgba(36,31,20,.3); border-radius: 1px; }
.ua-cap-s-ghost { left: 2px; top: 9px; width: 46px; height: 30px; border: 1.5px dashed var(--accent, #d9542b); border-radius: 6px;
  background: var(--accent-soft, rgba(217,84,43,.1)); opacity: 0; animation: ua-cap-s-ghost 6.4s cubic-bezier(.5,.1,.2,1) infinite; }
.ua-cap-s-page { left: 132px; top: 2px; width: 56px; height: 44px; background: #fff; border: 1px solid rgba(26,26,23,.18); border-radius: 4px;
  animation: ua-cap-s-ring 6.4s ease infinite; }
.ua-cap-s-p1 { left: 8px; top: 9px;  width: 40px; height: 3px; background: rgba(32,33,36,.28); border-radius: 1px; }
.ua-cap-s-p2 { left: 8px; top: 17px; width: 32px; height: 3px; background: rgba(32,33,36,.22); border-radius: 1px; }
.ua-cap-s-p3 { left: 8px; top: 25px; width: 36px; height: 3px; background: rgba(32,33,36,.22); border-radius: 1px; }
.ua-cap-s-style { left: 0; top: 0; right: 0; bottom: 0; background: #f6f1e3; border-radius: 3px; z-index: 2;
  animation: ua-cap-s-style 6.4s ease infinite; }
.ua-cap-s-style::before { content: ""; position: absolute; left: 12px; top: 5px; width: 32px; height: 5px; background: #241f14; border-radius: 1px; }
.ua-cap-s-style::after  { content: ""; position: absolute; left: 8px; top: 17px; width: 40px; height: 2px; background: rgba(36,31,20,.4);
  box-shadow: 0 6px 0 rgba(36,31,20,.32), 0 12px 0 rgba(36,31,20,.32), 0 18px 0 rgba(36,31,20,.22); }
@keyframes ua-cap-s-ghost {
  0%, 8%   { transform: none; opacity: 0; }
  12%      { transform: none; opacity: .9; }
  26%      { transform: translateX(130px) scale(.96); opacity: .9; }
  30%      { transform: translateX(130px) scale(.9);  opacity: 0; }
  46%      { transform: none; opacity: 0; }
  50%      { transform: none; opacity: .9; }
  64%      { transform: translateX(130px) scale(.96); opacity: .9; }
  68%,100% { transform: translateX(130px) scale(.9);  opacity: 0; }
}
@keyframes ua-cap-s-style {
  0%, 25%  { opacity: 0; }
  29%, 38% { opacity: 1; }
  44%, 63% { opacity: 0; }
  67%,100% { opacity: 1; }
}
@keyframes ua-cap-s-ring {
  0%, 24%  { box-shadow: 0 0 0 0 rgba(217,84,43,0); }
  28%      { box-shadow: 0 0 0 5px var(--accent-soft, rgba(217,84,43,.1)); }
  36%, 62% { box-shadow: 0 0 0 0 rgba(217,84,43,0); }
  66%      { box-shadow: 0 0 0 5px var(--accent-soft, rgba(217,84,43,.1)); }
  74%,100% { box-shadow: 0 0 0 0 rgba(217,84,43,0); }
}

/* ============================================================
   3 · PRIVATE & LOCAL — key stays inside a pulsing dotted
   boundary; the arrow toward "cloud" fades out crossed.
   ============================================================ */
.ua-cap-l-fence { left: 2px; top: 1px; width: 66px; height: 46px; border: 1.5px dashed rgba(26,26,23,.35); border-radius: 8px;
  animation: ua-cap-l-fence 5.8s ease infinite; }
.ua-cap-l-lap { left: 15px; top: 8px; width: 40px; height: 26px; background: #fff; border: 1.5px solid rgba(26,26,23,.5); border-radius: 4px; }
.ua-cap-l-lap::after { content: ""; position: absolute; left: -6px; bottom: -6px; width: 49px; height: 3px; background: rgba(26,26,23,.5); border-radius: 2px; }
.ua-cap-l-key { left: 26px; top: 16px; width: 9px; height: 9px; border: 2px solid var(--accent, #d9542b); border-radius: 50%;
  animation: ua-cap-l-key 5.8s ease-in-out infinite; }
.ua-cap-l-key::after  { content: ""; position: absolute; left: 8px; top: 3px; width: 11px; height: 2px; background: var(--accent, #d9542b); }
.ua-cap-l-key::before { content: ""; position: absolute; left: 15px; top: 5px; width: 2px; height: 4px; background: var(--accent, #d9542b); }
.ua-cap-l-arr { left: 76px; top: 22px; width: 64px; height: 0; border-top: 2px dashed rgba(26,26,23,.4); opacity: .4;
  animation: ua-cap-l-arr 5.8s ease infinite; }
.ua-cap-l-arr::after { content: ""; position: absolute; right: -2px; top: -5px; width: 0; height: 0;
  border-left: 6px solid rgba(26,26,23,.45); border-top: 4px solid transparent; border-bottom: 4px solid transparent; }
.ua-cap-l-x { left: 100px; top: 13px; font: 700 14px/1 var(--font-sans, sans-serif); color: rgba(26,26,23,.7); opacity: .85;
  animation: ua-cap-l-x 5.8s ease infinite; }
.ua-cap-l-cloud { left: 152px; top: 16px; width: 34px; height: 13px; background: rgba(26,26,23,.16); border-radius: 999px; opacity: .9; }
.ua-cap-l-cloud::before { content: ""; position: absolute; left: 5px;  top: -6px; width: 13px; height: 13px; background: rgba(26,26,23,.16); border-radius: 50%; }
.ua-cap-l-cloud::after  { content: ""; position: absolute; left: 16px; top: -4px; width: 9px;  height: 9px;  background: rgba(26,26,23,.16); border-radius: 50%; }
@keyframes ua-cap-l-fence {
  0%, 10%  { box-shadow: 0 0 0 0 rgba(217,84,43,0); }
  18%      { box-shadow: 0 0 0 5px var(--accent-soft, rgba(217,84,43,.1)); }
  30%, 60% { box-shadow: 0 0 0 0 rgba(217,84,43,0); }
  68%      { box-shadow: 0 0 0 5px var(--accent-soft, rgba(217,84,43,.1)); }
  80%,100% { box-shadow: 0 0 0 0 rgba(217,84,43,0); }
}
@keyframes ua-cap-l-arr {
  0%, 10%  { opacity: 0; }
  22%, 42% { opacity: .55; }
  56%,100% { opacity: 0; }
}
@keyframes ua-cap-l-x {
  0%, 26%  { opacity: 0; transform: scale(.5); }
  34%      { opacity: 1; transform: scale(1); }
  46%      { opacity: 1; }
  58%,100% { opacity: 0; transform: scale(1); }
}
@keyframes ua-cap-l-key {
  0%, 100% { transform: none; }
  50%      { transform: translateY(-1.5px); }
}

/* ============================================================
   4 · KEEPS UP AS YOU SCROLL — rows shift up (a new one lands),
   tethers detach and re-attach with an accent tick.
   ============================================================ */
.ua-cap-w-page { left: 2px; top: 5px; width: 78px; height: 38px; overflow: hidden; }
.ua-cap-w-rows { left: 0; top: 0; width: 78px; animation: ua-cap-w-rows 5s cubic-bezier(.5,.1,.2,1) infinite; }
.ua-cap-w-rows i { position: relative; display: block; width: 74px; height: 10px; margin: 0 0 4px;
  background: #fff; border: 1px solid rgba(26,26,23,.16); border-radius: 3px; }
.ua-cap-w-rows i::after { content: ""; position: absolute; left: 5px; top: 3px; width: 42px; height: 3px; background: rgba(26,26,23,.18); border-radius: 1px; }
.ua-cap-w-t { left: 82px; width: 52px; height: 2px; background: rgba(26,26,23,.25); border-radius: 1px;
  animation: ua-cap-w-t 5s ease infinite; }
.ua-cap-w-t--1 { top: 9px; } .ua-cap-w-t--2 { top: 23px; animation-delay: .12s; } .ua-cap-w-t--3 { top: 37px; animation-delay: .24s; }
.ua-cap-w-dot { left: 136px; width: 7px; height: 7px; border: 1.5px solid rgba(26,26,23,.4); border-radius: 50%; background: var(--color-bg, #f5f4ef); }
.ua-cap-w-dot--1 { top: 7px; } .ua-cap-w-dot--2 { top: 21px; } .ua-cap-w-dot--3 { top: 35px; }
.ua-cap-w-tick { left: 150px; top: 18px; font: 600 12px/1 var(--font-mono, monospace); letter-spacing: .03em; white-space: nowrap;
  color: var(--accent, #d9542b); animation: ua-cap-w-tick 5s ease infinite; }
@keyframes ua-cap-w-rows {
  0%, 30%  { transform: none; }
  44%,100% { transform: translateY(-14px); }
}
@keyframes ua-cap-w-t {
  0%, 28%  { opacity: 1; }
  36%      { opacity: .15; }
  52%,100% { opacity: 1; }
}
@keyframes ua-cap-w-tick {
  0%, 46%  { opacity: 0; }
  56%, 88% { opacity: 1; }
  96%,100% { opacity: 0; }
}

/* ============================================================
   5 · SHOW THE ORIGINAL — a page flips styled ⇄ plain on a slow
   toggle; the base (static) frame is the original.
   ============================================================ */
.ua-cap-o-page { left: 24px; top: 2px; width: 58px; height: 44px; background: #fff; border: 1px solid rgba(26,26,23,.2); border-radius: 4px; overflow: hidden; }
.ua-cap-o-page::before { content: ""; position: absolute; left: 6px; top: 7px; width: 28px; height: 4px; background: #3b64c8; border-radius: 1px; }
.ua-cap-o-page::after  { content: ""; position: absolute; left: 6px; top: 16px; width: 44px; height: 3px; background: rgba(32,33,36,.24); border-radius: 1px;
  box-shadow: 0 7px 0 rgba(32,33,36,.18), 0 14px 0 rgba(32,33,36,.18), 0 21px 0 rgba(32,33,36,.1); }
.ua-cap-o-style { left: 0; top: 0; right: 0; bottom: 0; background: #15171c; z-index: 2; opacity: 0;
  animation: ua-cap-o-style 6s ease infinite; }
.ua-cap-o-style::before { content: ""; position: absolute; left: 6px; top: 6px; width: 18px; height: 3px; background: #7fa8c9; border-radius: 1px; }
.ua-cap-o-style::after  { content: ""; position: absolute; left: 6px; top: 14px; width: 46px; height: 11px; background: #232a33; border-radius: 2px;
  box-shadow: 0 15px 0 #232a33; }
.ua-cap-o-tog { left: 116px; top: 12px; width: 38px; height: 20px; border: 1.5px solid rgba(26,26,23,.35); border-radius: 999px;
  background: var(--color-surface, #eae7dd); animation: ua-cap-o-tog 6s ease infinite; }
.ua-cap-o-knob { left: 3px; top: 2.5px; width: 12px; height: 12px; border-radius: 50%; background: var(--color-text, #1a1a17);
  animation: ua-cap-o-knob 6s ease infinite; }
.ua-cap-o-word { left: 96px; top: 38px; width: 78px; text-align: center; font: 600 12px/1 var(--font-mono, monospace);
  letter-spacing: .08em; text-transform: uppercase; color: var(--color-muted, #6c6b61); }
.ua-cap-o-word--a { opacity: 1; animation: ua-cap-o-wa 6s ease infinite; }
.ua-cap-o-word--b { opacity: 0; color: var(--accent, #d9542b); animation: ua-cap-o-wb 6s ease infinite; }
@keyframes ua-cap-o-style {
  0%, 42%  { opacity: 1; }
  50%, 92% { opacity: 0; }
  100%     { opacity: 1; }
}
@keyframes ua-cap-o-knob {
  0%, 42%  { transform: translateX(18px); }
  50%, 92% { transform: none; }
  100%     { transform: translateX(18px); }
}
@keyframes ua-cap-o-tog {
  0%, 42%  { border-color: var(--accent, #d9542b); background: var(--accent-soft, rgba(217,84,43,.1)); }
  50%, 92% { border-color: rgba(26,26,23,.35); background: var(--color-surface, #eae7dd); }
  100%     { border-color: var(--accent, #d9542b); background: var(--accent-soft, rgba(217,84,43,.1)); }
}
@keyframes ua-cap-o-wa {
  0%, 42%  { opacity: 0; }
  50%, 92% { opacity: 1; }
  100%     { opacity: 0; }
}
@keyframes ua-cap-o-wb {
  0%, 42%  { opacity: 1; }
  50%, 92% { opacity: 0; }
  100%     { opacity: 1; }
}

/* ============================================================
   6 · HONEST BY DESIGN — an amber "inert" tag instead of a
   guessed link; the ✗-guess ghost dissolves.
   ============================================================ */
.ua-cap-h-page { left: 2px; top: 2px; width: 72px; height: 44px; background: #fff; border: 1px solid rgba(26,26,23,.18); border-radius: 4px; }
.ua-cap-h-a { position: absolute; left: 8px; top: 9px;  width: 48px; height: 7px; background: rgba(59,100,200,.3);  border-radius: 2px; }
.ua-cap-h-b { position: absolute; left: 8px; top: 26px; width: 38px; height: 7px; background: rgba(26,26,23,.14); border-radius: 2px;
  outline: 1.5px dashed var(--ua-inert, #a87b1c); outline-offset: 2px; animation: ua-cap-h-b 5.6s ease infinite; }
.ua-cap-h-tag { left: 78px; top: 22px; font: 600 12px/1 var(--font-mono, monospace); letter-spacing: .08em; text-transform: uppercase;
  color: var(--ua-inert, #a87b1c); border: 1px solid rgba(168,123,28,.45); background: rgba(168,123,28,.12);
  border-radius: 999px; padding: 3px 6px; animation: ua-cap-h-tag 5.6s ease infinite; }
.ua-cap-h-ghost { left: 134px; top: 11px; width: 112px; height: 20px; border: 1.5px dashed rgba(26,26,23,.35); border-radius: 3px;
  color: rgba(26,26,23,.55); font: 500 12px/17px var(--font-mono, monospace); text-align: center; letter-spacing: .02em;
  white-space: nowrap; opacity: 0; animation: ua-cap-h-ghost 5.6s ease infinite; }
.ua-cap-h-ghost::after { content: ""; position: absolute; left: 5px; right: 5px; top: 9px; height: 1.5px; background: rgba(26,26,23,.5);
  transform-origin: left center; animation: ua-cap-h-strike 5.6s ease infinite; }
.ua-cap-viz--honest .ua-cap-lab { color: var(--ua-inert, #a87b1c); }
@keyframes ua-cap-h-ghost {
  0%, 8%   { opacity: 0; transform: translateY(3px); }
  16%, 40% { opacity: .85; transform: none; }
  54%,100% { opacity: 0; transform: none; }
}
@keyframes ua-cap-h-strike {
  0%, 18%  { transform: scaleX(0); }
  30%,100% { transform: scaleX(1); }
}
@keyframes ua-cap-h-tag {
  0%, 48%  { opacity: 0; transform: scale(.6); }
  56%      { opacity: 1; transform: scale(1.06); }
  62%      { transform: none; }
  90%      { opacity: 1; }
  97%,100% { opacity: 0; transform: none; }
}
@keyframes ua-cap-h-b {
  0%, 48%  { outline-color: transparent; }
  56%, 90% { outline-color: var(--ua-inert, #a87b1c); }
  97%,100% { outline-color: transparent; }
}

/* ---- reduced motion: freeze on the meaningful base frame --- */
@media (prefers-reduced-motion: reduce) {
  .ua-cap-viz *, .ua-cap-viz *::before, .ua-cap-viz *::after { animation: none !important; transition: none !important; }
}

/* ---- responsive -------------------------------------------- */
@media (max-width: 1024px) and (min-width: 769px) {
  .ua-cap-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px) {
  .ua-cap-grid { grid-template-columns: 1fr; }
}