/* ============================================================
   ui-anima-hiw.css — "How it works" step micro-visuals (CSS-only).
   Four flat step cards (01–04), each led by a ~64px looping
   micro-visual on a cream stage — a sibling of ui-anima-caps.css.
   Scoped under .ua-hiw-* (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" (white, blue headline); the
   UI-Anima panel / generated design surfaces are warm cream.
   Amber --ua-inert (defined in ui-anima.css) is used only for the
   honest "inert" semantics in step 04.
   ============================================================ */

/* ---- grid + cards (house .card look, own class names) ------ */
.ua-hiw-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-md, 20px); }
.ua-hiw-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(18px, 2vw, 24px);
  transition: border-color .2s ease;
}
.ua-hiw-card:not(.ua-hiw-card--featured):hover { border-color: var(--color-text, #1a1a17); }

/* featured 4th step — mirrors the house .card--featured treatment
   (gradient hairline border + 3px top bar) without using .card */
.ua-hiw-card--featured {
  position: relative; overflow: hidden;
  border: 1px solid transparent;
  background:
    linear-gradient(var(--color-surface, #eae7dd), var(--color-surface, #eae7dd)) padding-box,
    var(--grad-accent, linear-gradient(118deg, #2a2820 0%, #1a1a17 100%)) border-box;
}
.ua-hiw-card--featured::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: var(--grad-accent, linear-gradient(118deg, #2a2820 0%, #1a1a17 100%));
}

.ua-hiw-step {
  margin: 0 0 12px;
  font-family: var(--font-mono, monospace); font-size: .75rem; font-weight: 600;
  letter-spacing: .14em; color: var(--accent, #d9542b);
}
.ua-hiw-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-hiw-d { margin: 0; color: var(--color-muted, #6c6b61); font-size: var(--font-size-base, .95rem); line-height: 1.6; }

/* ---- shared viz stage -------------------------------------- */
.ua-hiw-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-hiw-scene { position: absolute; left: 50%; top: 50%; width: 180px; height: 48px; margin: -24px 0 0 -90px; }
.ua-hiw-scene span, .ua-hiw-scene i { position: absolute; display: block; }
.ua-hiw-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-hiw-lab--left { right: auto; left: 8px; }

/* ============================================================
   01 · OPEN A SUPPORTED SITE — a tiny page outline; the UI-Anima
   panel pops in at its corner (scale+fade), accent-soft ring on
   landing. Base state: panel present.
   ============================================================ */
.ua-hiw-o-page { left: 36px; top: 0; width: 74px; height: 42px; background: #fff; border: 1px solid rgba(26,26,23,.18); border-radius: 4px; }
.ua-hiw-o-page::before { content: ""; position: absolute; left: 6px; top: 5px; width: 30px; height: 5px; background: #3b64c8; border-radius: 1px; }
.ua-hiw-o-page::after  { content: ""; position: absolute; left: 6px; top: 15px; width: 56px; height: 3px; background: rgba(32,33,36,.22); border-radius: 1px;
  box-shadow: 0 6px 0 rgba(32,33,36,.18), 0 12px 0 rgba(32,33,36,.18), 0 18px 0 rgba(32,33,36,.1); }
.ua-hiw-o-panel {
  left: 92px; top: 21px; width: 54px; height: 22px;
  background: #f6f1e3; border: 1px solid rgba(26,26,23,.3); border-radius: 5px;
  box-shadow: 0 4px 10px -4px rgba(26,26,23,.35);
  transform-origin: 4px 4px;
  animation: ua-hiw-o-pop 5.6s cubic-bezier(.5,.1,.2,1) infinite,
             ua-hiw-o-ring 5.6s ease infinite;
}
.ua-hiw-o-panel::before { content: ""; position: absolute; left: 7px; top: 9px; width: 26px; height: 3px; background: rgba(26,26,23,.45); border-radius: 1px; }
.ua-hiw-o-panel::after  { content: ""; position: absolute; right: 6px; top: 7px; width: 8px; height: 8px; border-radius: 50%; background: var(--accent, #d9542b); }
@keyframes ua-hiw-o-pop {
  0%, 8%   { transform: scale(.4); opacity: 0; }
  15%      { transform: scale(1.06); opacity: 1; }
  21%      { transform: none; }
  88%      { transform: none; opacity: 1; }
  95%,100% { transform: scale(.9); opacity: 0; }
}
@keyframes ua-hiw-o-ring {
  0%, 18%  { box-shadow: 0 4px 10px -4px rgba(26,26,23,.35), 0 0 0 0 rgba(217,84,43,0); }
  26%      { box-shadow: 0 4px 10px -4px rgba(26,26,23,.35), 0 0 0 5px var(--accent-soft, rgba(217,84,43,.1)); }
  38%,100% { box-shadow: 0 4px 10px -4px rgba(26,26,23,.35), 0 0 0 0 rgba(217,84,43,0); }
}

/* ============================================================
   02 · SAY WHAT YOU WANT — a prompt line types itself with
   steps(); the accent send-arrow lights when the ask is complete.
   Base state: prompt fully typed, arrow lit.
   ============================================================ */
.ua-hiw-p-box { left: 10px; top: 11px; width: 160px; height: 26px; background: #f6f1e3; border: 1px solid rgba(26,26,23,.28); border-radius: 6px; }
.ua-hiw-p-txt {
  left: 9px; top: 5px; height: 14px; width: 17ch; overflow: hidden; white-space: nowrap;
  font-family: var(--font-mono, monospace); font-size: 12px; line-height: 13px; font-weight: 500;
  color: var(--color-text, #1a1a17);
  border-right: 1.5px solid rgba(26,26,23,.75);
  animation: ua-hiw-p-type 7.2s infinite, ua-hiw-p-caret .9s step-end infinite;
}
.ua-hiw-p-go { right: 8px; top: 7px; font: 600 12px/13px var(--font-mono, monospace); color: var(--accent, #d9542b);
  animation: ua-hiw-p-go 7.2s ease infinite; }
@keyframes ua-hiw-p-type {
  0%, 8%   { width: 0ch; animation-timing-function: steps(17, end); }
  50%,100% { width: 17ch; }
}
@keyframes ua-hiw-p-caret {
  0%, 100% { border-color: rgba(26,26,23,.75); }
  50%      { border-color: transparent; }
}
@keyframes ua-hiw-p-go {
  0%, 52%  { opacity: .2; }
  60%, 90% { opacity: 1; }
  97%,100% { opacity: .2; }
}

/* ============================================================
   03 · THE DESIGN ENGINE BUILDS IT — the request chip feeds a
   frame; four blocks fly in and assemble into a tidy layout,
   accent-soft ring when done. Base state: layout assembled.
   ============================================================ */
.ua-hiw-e-chip { left: 4px; top: 14px; width: 40px; height: 20px; background: #f6f1e3; border: 1px solid rgba(26,26,23,.25); border-radius: 5px;
  font: 500 12px/18px var(--font-mono, monospace); text-align: center; letter-spacing: .04em; color: rgba(26,26,23,.65); }
.ua-hiw-e-arr { left: 50px; top: 23px; width: 40px; height: 0; border-top: 1.5px dashed rgba(26,26,23,.35); opacity: .45;
  animation: ua-hiw-e-arr 6s ease infinite; }
.ua-hiw-e-arr::after { content: ""; position: absolute; right: -1px; top: -4.5px; width: 0; height: 0;
  border-left: 5px solid rgba(26,26,23,.4); border-top: 3.5px solid transparent; border-bottom: 3.5px solid transparent; }
.ua-hiw-e-frame { left: 100px; top: 2px; width: 64px; height: 44px; background: #f6f1e3; border: 1px solid rgba(26,26,23,.25); border-radius: 4px;
  animation: ua-hiw-e-ring 6s ease infinite; }
.ua-hiw-e-b1 { left: 6px; top: 5px;  width: 52px; height: 8px;  background: #241f14;            border-radius: 1.5px; animation: ua-hiw-e-b1 6s cubic-bezier(.5,.1,.2,1) infinite; }
.ua-hiw-e-b2 { left: 6px; top: 17px; width: 24px; height: 16px; background: rgba(36,31,20,.3);  border-radius: 1.5px; animation: ua-hiw-e-b2 6s cubic-bezier(.5,.1,.2,1) infinite; }
.ua-hiw-e-b3 { left: 34px; top: 17px; width: 24px; height: 16px; background: rgba(36,31,20,.18); border-radius: 1.5px; animation: ua-hiw-e-b3 6s cubic-bezier(.5,.1,.2,1) infinite; }
.ua-hiw-e-b4 { left: 6px; top: 37px; width: 52px; height: 3px;  background: rgba(36,31,20,.4);  border-radius: 1px;   animation: ua-hiw-e-b4 6s cubic-bezier(.5,.1,.2,1) infinite; }
@keyframes ua-hiw-e-b1 {
  0%, 8%   { transform: translate(-58px,-8px) scale(.55); opacity: 0; }
  12%      { opacity: 1; }
  22%      { transform: none; }
  86%      { transform: none; opacity: 1; }
  94%,100% { transform: none; opacity: 0; }
}
@keyframes ua-hiw-e-b2 {
  0%, 14%  { transform: translate(-64px,0) scale(.55); opacity: 0; }
  18%      { opacity: 1; }
  28%      { transform: none; }
  86%      { transform: none; opacity: 1; }
  94%,100% { transform: none; opacity: 0; }
}
@keyframes ua-hiw-e-b3 {
  0%, 20%  { transform: translate(-72px,8px) scale(.55); opacity: 0; }
  24%      { opacity: 1; }
  34%      { transform: none; }
  86%      { transform: none; opacity: 1; }
  94%,100% { transform: none; opacity: 0; }
}
@keyframes ua-hiw-e-b4 {
  0%, 26%  { transform: translate(-56px,6px) scale(.55); opacity: 0; }
  30%      { opacity: 1; }
  40%      { transform: none; }
  86%      { transform: none; opacity: 1; }
  94%,100% { transform: none; opacity: 0; }
}
@keyframes ua-hiw-e-ring {
  0%, 40%  { box-shadow: 0 0 0 0 rgba(217,84,43,0); }
  48%      { box-shadow: 0 0 0 5px var(--accent-soft, rgba(217,84,43,.1)); }
  60%,100% { box-shadow: 0 0 0 0 rgba(217,84,43,0); }
}
@keyframes ua-hiw-e-arr {
  0%, 38%  { opacity: .9; }
  52%,100% { opacity: .45; }
}

/* ============================================================
   04 · EVERY ELEMENT IS REBOUND (featured) — hairline tethers
   draw from the new design to the original page (scaleX), an
   accent ✓ lands on the original; one unbound element gets the
   amber "inert" dot. Base state: tethers drawn, ✓ + dot shown.
   ============================================================ */
.ua-hiw-r-new  { left: 2px;   top: 0; width: 60px; height: 44px; background: #f6f1e3; border: 1px solid rgba(26,26,23,.25); border-radius: 4px; }
.ua-hiw-r-a1 { left: 6px; top: 6px;  width: 40px; height: 6px; background: #241f14;           border-radius: 1px; }
.ua-hiw-r-a2 { left: 6px; top: 18px; width: 46px; height: 5px; background: rgba(36,31,20,.3); border-radius: 1px; }
.ua-hiw-r-a3 { left: 6px; top: 30px; width: 34px; height: 5px; background: rgba(36,31,20,.2); border-radius: 1px; }
.ua-hiw-r-orig { left: 118px; top: 0; width: 60px; height: 44px; background: #fff; border: 1px solid rgba(26,26,23,.18); border-radius: 4px; }
.ua-hiw-r-b1 { left: 6px; top: 6px;  width: 30px; height: 6px; background: rgba(59,100,200,.5); border-radius: 1px; }
.ua-hiw-r-b2 { left: 6px; top: 18px; width: 40px; height: 5px; background: rgba(32,33,36,.24); border-radius: 1px; }
.ua-hiw-r-b3 { left: 6px; top: 30px; width: 30px; height: 5px; background: rgba(32,33,36,.18); border-radius: 1px; }
.ua-hiw-r-t { left: 63px; width: 54px; height: 1.5px; background: rgba(26,26,23,.4); transform-origin: left center; }
.ua-hiw-r-t--1 { top: 8.5px; animation: ua-hiw-r-t1 6.4s cubic-bezier(.5,.1,.2,1) infinite; }
.ua-hiw-r-t--2 { top: 20px;  animation: ua-hiw-r-t2 6.4s cubic-bezier(.5,.1,.2,1) infinite; }
.ua-hiw-r-tick { left: 157px; top: 3px; font: 600 12px/1 var(--font-mono, monospace); color: var(--accent, #d9542b);
  animation: ua-hiw-r-tick 6.4s ease infinite; }
.ua-hiw-r-inert { left: 45px; top: 29px; width: 7px; height: 7px; border-radius: 50%;
  background: rgba(168,123,28,.15); border: 1.5px solid var(--ua-inert, #a87b1c);
  animation: ua-hiw-r-inert 6.4s ease infinite; }
@keyframes ua-hiw-r-t1 {
  0%, 10%  { transform: scaleX(0); opacity: 1; }
  26%      { transform: none; }
  88%      { transform: none; opacity: 1; }
  96%,100% { transform: none; opacity: 0; }
}
@keyframes ua-hiw-r-t2 {
  0%, 18%  { transform: scaleX(0); opacity: 1; }
  34%      { transform: none; }
  88%      { transform: none; opacity: 1; }
  96%,100% { transform: none; opacity: 0; }
}
@keyframes ua-hiw-r-tick {
  0%, 38%  { opacity: 0; transform: scale(.5); }
  46%      { opacity: 1; transform: scale(1.08); }
  52%      { transform: none; }
  88%      { opacity: 1; }
  96%,100% { opacity: 0; }
}
@keyframes ua-hiw-r-inert {
  0%, 50%  { opacity: 0; transform: scale(.5); }
  58%      { opacity: 1; transform: scale(1.06); }
  64%      { transform: none; }
  88%      { opacity: 1; }
  96%,100% { opacity: 0; }
}

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

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