/* Veld site — the work tiles.
 *
 * No photographs of past projects. Each tile is a small, live drawing of a kind of
 * work the studio does, made from the system's own parts: Ink and Coal surfaces,
 * hairlines, Vermilion for the one thing that matters, stacked segments for any
 * quantity. They animate because the work they stand for moves — a guideline is
 * long, a motion study loops, an A/B test resolves.
 *
 * Every tile fills a .media box (position:absolute; inset:0) and is drawn at a
 * fixed 480 x 360 canvas, then scaled to its box with a transform. That keeps the
 * proportions identical in a 4/3 card, a 16/10 bento cell and a 4/3 panel. */

.viz{ position:absolute; inset:0; overflow:hidden; background:#161616;
  font-family:Figtree,system-ui,sans-serif; color:#fff }
.viz .cv{ position:absolute; left:50%; top:50%; width:480px; height:360px; transform:translate(-50%,-50%) scale(var(--vs,1));
  transform-origin:center }
.viz .mono{ font-family:ui-monospace,Menlo,monospace; font-size:9px; letter-spacing:.04em; color:rgba(255,255,255,.45) }
.viz .lbl{ position:absolute; font-size:9px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:rgba(255,255,255,.4) }
.viz .o{ color:var(--orange) }
/* dot grid — the drafting ground under every tile that is about layout */
.viz.grid-bg{ background-image:radial-gradient(rgba(255,255,255,.09) 1px, transparent 1px); background-size:16px 16px;
  background-position:8px 8px }

/* ── wireframe primitives ────────────────────────────────────────────────── */
.wf{ position:absolute; border:1px solid rgba(255,255,255,.26); border-radius:4px; background:rgba(22,22,22,.85) }
.wf.f{ background:rgba(255,255,255,.06); border-color:rgba(255,255,255,.14) }
.wf.x::before,.wf.x::after{ content:""; position:absolute; inset:0; background:linear-gradient(to top right, transparent calc(50% - .5px), rgba(255,255,255,.18) 50%, transparent calc(50% + .5px)) }
.wf.x::after{ transform:scaleX(-1) }
.ln{ position:absolute; height:3px; border-radius:2px; background:rgba(255,255,255,.22) }
.ln.h{ height:5px; background:rgba(255,255,255,.5) }
.guide{ position:absolute; background:var(--orange); opacity:.7 }
.guide.v{ width:1px; top:0; bottom:0 } .guide.hz{ height:1px; left:0; right:0 }
.guide.dash{ background:repeating-linear-gradient(to bottom, var(--orange) 0 4px, transparent 4px 8px) }

/* entrance for wire parts */
.viz .in{ opacity:0; transform:scale(.97); animation:vin .7s cubic-bezier(.22,.61,.36,1) forwards; animation-delay:var(--d,0s) }
@keyframes vin{ to{ opacity:1; transform:none } }

/* ── 1 · wireframe system ─────────────────────────────────────────────────── */
.viz.wire .desk{ left:34px; top:44px; width:290px; height:236px; border-radius:6px }
.viz.wire .phone{ left:352px; top:74px; width:96px; height:206px; border-radius:12px }
.viz.wire .bar{ position:absolute; left:0; right:0; top:0; height:18px; border-bottom:1px solid rgba(255,255,255,.18) }
.viz.wire .bar i{ position:absolute; top:6px; width:5px; height:5px; border-radius:50%; background:rgba(255,255,255,.28) }

/* ── 2 · guideline — a long document, scrolling. Class is .gl: .guide is already
   the vermilion guide-line primitive above, and the two collided — the whole tile
   came out vermilion. ── */
.viz.gl .rail{ position:absolute; left:26px; top:26px; bottom:26px; width:104px; border-right:1px solid rgba(255,255,255,.1) }
.viz.gl .rail div{ font-size:9.5px; color:rgba(255,255,255,.45); padding:5px 0; letter-spacing:.02em }
.viz.gl .rail div.on{ color:#fff; font-weight:600 }
.viz.gl .rail div.on::before{ content:""; display:inline-block; width:3px; height:8px; background:var(--orange); margin-right:8px; transform:skewX(17deg) }
.viz.gl .doc{ position:absolute; left:154px; right:26px; top:26px; bottom:26px; overflow:hidden;
  -webkit-mask-image:linear-gradient(transparent, #000 8%, #000 92%, transparent); mask-image:linear-gradient(transparent, #000 8%, #000 92%, transparent) }
.viz.gl .pages{ animation:docscroll 26s linear infinite }
@keyframes docscroll{ to{ transform:translateY(-50%) } }
.viz.gl .pg{ padding:10px 0 22px; border-bottom:1px solid rgba(255,255,255,.08) }
.viz.gl .pg .t{ font-size:13px; font-weight:600; letter-spacing:-.02em; margin-bottom:8px }
.viz.gl .pg .t small{ font-family:ui-monospace,Menlo,monospace; font-size:8.5px; color:var(--orange); margin-left:8px; font-weight:400 }
.viz.gl .chips{ display:flex; gap:6px }
.viz.gl .chips i{ flex:1; height:22px; border-radius:4px }
.viz.gl .ts div{ display:flex; align-items:baseline; gap:10px; padding:3px 0 }
.viz.gl .ts .mono{ width:54px; flex:none }
.viz.gl .sp{ display:flex; gap:4px; align-items:flex-end; height:26px }
.viz.gl .sp i{ background:rgba(255,42,0,.35); border-top:1px solid var(--orange); width:calc(var(--n) * 4px); height:14px }
.viz.gl .cmp{ display:grid; grid-template-columns:1fr 1fr; gap:6px }
.viz.gl .cmp .wf{ position:relative; height:34px }

/* ── 3 · motion studies ───────────────────────────────────────────────────── */
.viz.motion .cell{ position:absolute; width:214px; height:150px; border-radius:8px; background:#1c1c1c; border:1px solid rgba(255,255,255,.08);
  display:grid; place-items:center }
.viz.motion .cell .lbl{ left:10px; top:8px }
/* a — switch, spring */
.sw{ width:64px; height:36px; border-radius:18px; background:rgba(255,255,255,.14); position:relative }
.sw i{ position:absolute; top:3px; left:3px; width:30px; height:30px; border-radius:50%; background:#fff; animation:sw 2.6s cubic-bezier(.34,1.3,.64,1) infinite }
.sw::before{ content:""; position:absolute; inset:0; border-radius:18px; background:var(--orange); animation:swbg 2.6s ease infinite }
@keyframes sw{ 0%,40%{ transform:translateX(0) } 50%,90%{ transform:translateX(28px) } 100%{ transform:translateX(0) } }
@keyframes swbg{ 0%,40%{ opacity:0 } 50%,90%{ opacity:1 } 100%{ opacity:0 } }
/* b — segmented control, sliding pill */
.sg{ display:flex; width:180px; height:34px; border-radius:8px; background:rgba(255,255,255,.08); padding:3px; position:relative }
.sg span{ flex:1; display:grid; place-items:center; font-size:10.5px; font-weight:600; color:rgba(255,255,255,.55); position:relative; z-index:1 }
.sg i{ position:absolute; top:3px; bottom:3px; left:3px; width:calc((100% - 6px) / 3); border-radius:6px; background:#fff;
  animation:sg 4.2s cubic-bezier(.22,.61,.36,1) infinite }
@keyframes sg{ 0%,28%{ transform:translateX(0) } 33%,61%{ transform:translateX(100%) } 66%,94%{ transform:translateX(200%) } 100%{ transform:translateX(0) } }
/* c — sheet, rising with momentum */
.sh{ width:140px; height:110px; position:relative; overflow:hidden; border-radius:8px; background:rgba(255,255,255,.05) }
.sh i{ position:absolute; left:8px; right:8px; bottom:0; height:76px; border-radius:10px 10px 0 0; background:#2a2a2a; border:1px solid rgba(255,255,255,.14);
  animation:sheet 3.4s cubic-bezier(.34,1.2,.64,1) infinite }
.sh i::before{ content:""; position:absolute; left:50%; top:6px; width:28px; height:3px; border-radius:2px; background:rgba(255,255,255,.3); transform:translateX(-50%) }
@keyframes sheet{ 0%,20%{ transform:translateY(76px) } 35%,75%{ transform:translateY(0) } 90%,100%{ transform:translateY(76px) } }
/* d — stacked segments loading (the system's own bar) */
.ld{ display:flex; gap:4px; align-items:flex-end; height:60px }
.ld i{ width:18px; background:repeating-linear-gradient(to top, var(--orange) 0 7px, transparent 7px 10px); transform:skewX(17deg); transform-origin:bottom;
  height:var(--h); animation:ld 2.4s cubic-bezier(.22,.61,.36,1) infinite; animation-delay:var(--d) }
@keyframes ld{ 0%{ height:0 } 40%,70%{ height:var(--h) } 100%{ height:0 } }

/* ── 4 · A/B ──────────────────────────────────────────────────────────────── */
.viz.ab .col{ position:absolute; top:34px; width:200px; height:190px; border-radius:8px; border:1px solid rgba(255,255,255,.1); background:#1c1c1c; padding:16px }
.viz.ab .col .lbl{ left:16px; top:12px }
.viz.ab .col.b{ border-color:rgba(255,42,0,.6) }
.viz.ab .card{ margin-top:22px; border-radius:6px; background:#242424; padding:12px; border:1px solid rgba(255,255,255,.08) }
.viz.ab .card .ln{ position:relative; display:block; margin-bottom:6px }
.viz.ab .btn{ display:inline-flex; align-items:center; height:26px; padding:0 12px; border-radius:999px; font-size:10px; font-weight:600; margin-top:6px }
.viz.ab .btn.g{ border:1px solid rgba(255,255,255,.25) } .viz.ab .btn.p{ background:var(--orange) }
.viz.ab .res{ position:absolute; left:34px; right:34px; bottom:30px; height:54px }
.viz.ab .res .row{ display:grid; grid-template-columns:14px 1fr 44px; gap:10px; align-items:center; margin-top:8px; font-size:10px; font-weight:600 }
.viz.ab .res .bar{ height:8px; border-radius:4px; background:rgba(255,255,255,.08); overflow:hidden }
.viz.ab .res .bar i{ display:block; height:100%; background:rgba(255,255,255,.4); width:0; animation:abfill 1.6s cubic-bezier(.22,.61,.36,1) .6s forwards }
.viz.ab .res .row.w .bar i{ background:var(--orange) }
@keyframes abfill{ to{ width:var(--w) } }
.viz.ab .win{ position:absolute; right:34px; top:12px; font-size:9px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:#fff; background:var(--orange);
  padding:4px 8px; border-radius:999px; opacity:0; animation:vin .5s 2s forwards }

/* ── 5 · tokens ───────────────────────────────────────────────────────────── */
.viz.tokens .list{ position:absolute; left:30px; top:30px; width:210px }
.viz.tokens .row{ display:grid; grid-template-columns:16px 1fr auto; gap:10px; align-items:center; padding:7px 0; border-bottom:1px solid rgba(255,255,255,.07); font-size:10.5px }
.viz.tokens .row i{ width:16px; height:16px; border-radius:4px; border:1px solid rgba(255,255,255,.12) }
.viz.tokens .row b{ font-weight:600; font-family:ui-monospace,Menlo,monospace; font-size:9.5px }
.viz.tokens .code{ position:absolute; left:268px; top:30px; right:30px; bottom:30px; border-radius:8px; background:#101010; border:1px solid rgba(255,255,255,.08); padding:14px }
.viz.tokens .code div{ font-family:ui-monospace,Menlo,monospace; font-size:9.5px; line-height:17px; color:rgba(255,255,255,.55); white-space:nowrap }
.viz.tokens .code .k{ color:#fff } .viz.tokens .code .v{ color:var(--orange) }
.viz.tokens .code .cur{ display:inline-block; width:6px; height:11px; background:#fff; vertical-align:-2px; animation:blink 1s steps(2) infinite }
@keyframes blink{ to{ opacity:0 } }

/* ── 6 · flow ─────────────────────────────────────────────────────────────── */
.viz.flow .node{ position:absolute; width:96px; height:34px; border-radius:6px; background:#1f1f1f; border:1px solid rgba(255,255,255,.16); display:grid; place-items:center;
  font-size:10px; font-weight:600 }
.viz.flow .node.o{ border-color:var(--orange); color:#fff }
.viz.flow .node small{ position:absolute; left:8px; top:-14px; font-family:ui-monospace,Menlo,monospace; font-size:8px; color:rgba(255,255,255,.4) }
.viz.flow .edge{ position:absolute; background:repeating-linear-gradient(to right, rgba(255,255,255,.35) 0 6px, transparent 6px 10px); height:1px;
  animation:dash 1.2s linear infinite }
.viz.flow .edge.v{ width:1px; height:auto; background:repeating-linear-gradient(to bottom, rgba(255,255,255,.35) 0 6px, transparent 6px 10px); animation-name:dashv }
@keyframes dash{ to{ background-position:10px 0 } } @keyframes dashv{ to{ background-position:0 10px } }
.viz.flow .dot{ position:absolute; width:6px; height:6px; border-radius:50%; background:var(--orange); box-shadow:0 0 0 3px rgba(255,42,0,.25);
  animation:travel 5s linear infinite }
@keyframes travel{ 0%{ left:110px; top:76px } 24%{ left:222px; top:76px } 26%{ left:222px; top:76px } 50%{ left:222px; top:176px }
  52%{ left:222px; top:176px } 76%{ left:336px; top:176px } 78%{ left:336px; top:176px } 100%{ left:336px; top:276px } }

/* ── 7 · component spec — redlines ────────────────────────────────────────── */
.viz.spec .comp{ position:absolute; left:110px; top:96px; width:260px; height:150px; border-radius:10px; background:#1f1f1f; border:1px solid rgba(255,255,255,.14); padding:16px }
.viz.spec .comp .ava{ width:28px; height:28px; border-radius:50%; background:rgba(255,255,255,.14); margin-bottom:12px }
.viz.spec .comp .btn{ position:absolute; left:16px; bottom:16px; height:32px; padding:0 14px; border-radius:999px; background:var(--orange); display:grid; place-items:center; font-size:10px; font-weight:600 }
.red{ position:absolute; background:var(--orange) }
.red.h{ height:1px } .red.v{ width:1px }
.red.h::before,.red.h::after{ content:""; position:absolute; top:-3px; width:1px; height:7px; background:var(--orange) } .red.h::before{ left:0 } .red.h::after{ right:0 }
.red.v::before,.red.v::after{ content:""; position:absolute; left:-3px; height:1px; width:7px; background:var(--orange) } .red.v::before{ top:0 } .red.v::after{ bottom:0 }
.num{ position:absolute; font-family:ui-monospace,Menlo,monospace; font-size:9px; color:var(--orange); background:#161616; padding:0 3px }

/* ── 8 · dashboard ────────────────────────────────────────────────────────── */
.viz.dash .kpi{ position:absolute; top:28px; width:130px; height:64px; border-radius:6px; background:#1c1c1c; border:1px solid rgba(255,255,255,.08); padding:10px 12px }
.viz.dash .kpi .lbl{ position:static; display:block; margin-bottom:6px }
.viz.dash .kpi b{ font-size:18px; font-weight:600; letter-spacing:-.03em }
.viz.dash .kpi b small{ font-size:10px; color:var(--orange); margin-left:2px }
.viz.dash .chart{ position:absolute; left:28px; right:28px; top:112px; bottom:28px; border-radius:6px; background:#1c1c1c; border:1px solid rgba(255,255,255,.08); padding:14px 16px 12px }
.viz.dash .bars{ position:absolute; left:16px; right:16px; bottom:22px; top:36px; display:flex; align-items:flex-end; gap:6px; padding-left:36px }
.viz.dash .bars i{ flex:1; background:repeating-linear-gradient(to top, rgba(255,255,255,.55) 0 6px, transparent 6px 9px); transform:skewX(17deg); transform-origin:bottom;
  height:var(--h); animation:grow 1.4s cubic-bezier(.22,.61,.36,1) both; animation-delay:var(--d) }
.viz.dash .bars i.o{ background:repeating-linear-gradient(to top, var(--orange) 0 6px, transparent 6px 9px) }
@keyframes grow{ from{ height:0 } }
.viz.dash .axis{ position:absolute; left:16px; right:16px; bottom:10px; display:flex; justify-content:space-between }