/* Feature cards for the wall (features.js). Every card rests on its END frame,
   so the dimmed wall still reads; the animations only run while the card is
   lifted or flying, via the P selector below. Square corners, no circles. */
.feat { position:relative; }
.fbar { height:28px; flex:0 0 28px; display:flex; align-items:center; gap:8px; padding:0 12px; border-bottom:1px solid var(--hair); font:600 11.5px/1 var(--sans); color:var(--ink-soft); white-space:nowrap; overflow:hidden; }
.fbar i { width:8px; height:8px; flex:0 0 8px; background:var(--wood); }
.fb { position:relative; flex:1; overflow:hidden; background:var(--paper) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14'%3E%3Crect x='6' y='6' width='2' height='2' fill='%23C4CABD'/%3E%3C/svg%3E"); }
.feat.dark { background:var(--floor); border-color:#2E332C; }
.feat.dark .fbar { color:var(--chalk); border-color:#2E332C; }
.feat.dark .fb { background:var(--floor); }
.fb > *, .fb .said > *, .fb .pan > * { position:absolute; }
.fb svg { left:0; top:0; width:262px; height:186px; overflow:visible; }
.fb svg path { fill:none; stroke:#34362F; stroke-width:2.6; stroke-linecap:round; stroke-linejoin:round; stroke-dasharray:320; stroke-dashoffset:0; }
.dark .fb svg path { stroke:var(--wood); }
.fb .sk { height:8px; border-radius:0; background:var(--sage-pale); }
.dark .fb .sk { background:#4A5446; }
.dark .fb .sk.mo:first-child { background:var(--lichen); }
.fb .sk.bad { background:#9C6B4E; }
.fb .sk.hd { height:13px; background:var(--chalk); }
.mn { background:var(--marble); border:1px solid var(--hair); box-shadow:0 6px 12px -8px rgba(35,36,31,.4); }
.mn.dk { background:var(--floor); border-color:#2E332C; }

/* Cards that are playing */
:is(.dm-c.is-lift, .dm-flyer) .feat .draw { animation:fxDraw 1.3s .35s cubic-bezier(.4,0,.2,1) both; }
:is(.dm-c.is-lift, .dm-flyer) .feat .draw.d2 { animation-delay:1.4s; animation-duration:.5s; }
:is(.dm-c.is-lift, .dm-flyer) .feat .draw.late { animation-delay:1.7s; }
@keyframes fxDraw { from { stroke-dashoffset:320; } }

/* agents read the board: a scan band sweeps, notes light up as it passes */
.scan { left:0; top:0; width:3px; height:186px; background:var(--lichen); box-shadow:0 0 18px 8px rgba(127,169,140,.35); opacity:0; }
.lamp { right:12px; top:12px; width:10px; height:10px; background:var(--wood); box-shadow:0 0 10px var(--wood); }
.fb .mn { transition:none; }
.feat:has(.scan) .mn { outline:2px solid rgba(176,130,91,.7); outline-offset:2px; }
:is(.dm-c.is-lift, .dm-flyer) .scan { animation:fxScan 2.6s .2s linear both; }
:is(.dm-c.is-lift, .dm-flyer) .feat:has(.scan) .mn { animation:fxLit .3s both; }
:is(.dm-c.is-lift, .dm-flyer) .feat:has(.scan) .mn:nth-child(1) { animation-delay:.75s; }
:is(.dm-c.is-lift, .dm-flyer) .feat:has(.scan) .mn:nth-child(2) { animation-delay:1.35s; }
:is(.dm-c.is-lift, .dm-flyer) .feat:has(.scan) .mn:nth-child(3) { animation-delay:1.05s; }
:is(.dm-c.is-lift, .dm-flyer) .feat:has(.scan) .mn:nth-child(4) { animation-delay:1.8s; }
:is(.dm-c.is-lift, .dm-flyer) .lamp { animation:fxBlink .5s 5 alternate; }
@keyframes fxScan { 0% { transform:translateX(-10px); opacity:1; } 92% { opacity:1; } 100% { transform:translateX(262px); opacity:0; } }
@keyframes fxLit { from { outline-color:transparent; } }
@keyframes fxBlink { to { opacity:.25; } }

/* pickers become buttons: the second option presses and goes wood */
.opt { left:16px; width:190px; height:24px; border:1px solid #4A5446; }
.opt::after { content:''; position:absolute; left:10px; top:8px; width:90px; height:7px; background:#4A5446; }
.opt.b2 { background:var(--wood); border-color:var(--wood); }
.opt.b2::after { background:var(--floor); }
:is(.dm-c.is-lift, .dm-flyer) .opt.b2 { animation:fxPress 1.6s both; }
@keyframes fxPress { 0%, 60% { background:transparent; border-color:#4A5446; transform:none; } 70% { transform:scale(.95); } 72% { background:var(--wood); border-color:var(--wood); } 100% { transform:none; } }

/* the conversation, rendered natively */
.bub { right:16px; height:34px; background:#2A3028; }
.bub::after { content:''; position:absolute; left:12px; top:13px; right:12px; height:8px; background:#5B6657; }
.said .sk { background:var(--chalk) !important; opacity:.8; }
:is(.dm-c.is-lift, .dm-flyer) .bub, :is(.dm-c.is-lift, .dm-flyer) .said { animation:fxIn .45s both; }
:is(.dm-c.is-lift, .dm-flyer) .said.s1 { animation-delay:.6s; }
:is(.dm-c.is-lift, .dm-flyer) .bub.m2 { animation-delay:1.3s; }
:is(.dm-c.is-lift, .dm-flyer) .said.s2 { animation-delay:1.9s; }
@keyframes fxIn { from { opacity:0; transform:translateY(10px); } }
.said { left:0; top:0; width:262px; height:186px; }

/* summary face: the lamp works, the sentence writes itself */
.lamp.big { left:16px; top:28px; right:auto; width:16px; height:16px; background:var(--lichen); box-shadow:0 0 12px var(--lichen); }
:is(.dm-c.is-lift, .dm-flyer) .lamp.big { animation:fxBlink .45s 6 alternate; }
.fb .sk.hd { transform-origin:0 50%; }
:is(.dm-c.is-lift, .dm-flyer) .sk.hd { animation:fxGrow .9s .3s cubic-bezier(.4,0,.2,1) both; }
:is(.dm-c.is-lift, .dm-flyer) .sk.hd.h2 { animation-delay:1.1s; }
@keyframes fxGrow { from { transform:scaleX(0); } }

/* state at a glance: square dots in the five-status colors */
.dot { width:9px; height:9px; }
.dot.t0 { background:var(--lichen); } .dot.t1 { background:var(--wood); } .dot.t2 { background:var(--sage); } .dot.t3 { background:var(--lichen); }
:is(.dm-c.is-lift, .dm-flyer) .dot.t0 { animation:fxBlink .4s 8 alternate; }
:is(.dm-c.is-lift, .dm-flyer) .dot.t2 { animation:fxState 3s both; }
@keyframes fxState { 0%, 45% { background:var(--wood); } 50%, 100% { background:var(--sage); } }

/* zoom stays crisp: real text, scaled, never blurred */
.crisp { left:16px; top:16px; margin:0; font:400 12px/1.8 'JetBrains Mono',ui-monospace,Menlo,monospace; color:var(--chalk); transform-origin:14px 40px; transform:scale(1.35); }
:is(.dm-c.is-lift, .dm-flyer) .crisp { animation:fxZoom 3s cubic-bezier(.6,0,.2,1) both; }
@keyframes fxZoom { 0% { transform:scale(1); } 40% { transform:scale(1); } 100% { transform:scale(1.35); } }

/* infinite canvas: the whole board pans under a fixed card */
.pan { left:0; top:0; width:340px; height:186px; }
:is(.dm-c.is-lift, .dm-flyer) .pan { animation:fxPan 3.4s ease-in-out both; }
:is(.dm-c.is-lift, .dm-flyer) .feat:has(.pan) .fb { animation:fxPanBg 3.4s ease-in-out both; }
@keyframes fxPan { 50% { transform:translate(-70px,-26px); } }
@keyframes fxPanBg { 50% { background-position:-70px -26px; } }

/* snap: the loose rectangle slides home and a guide flashes */
.geo { width:80px; height:56px; border:2px solid var(--forest); background:rgba(62,107,79,.08); }
.geo.g1 { left:36px; top:34px; }
.geo.g2 { left:36px; top:110px; }
.guide { left:35px; top:12px; width:1px; height:164px; background:var(--wood); opacity:0; }
:is(.dm-c.is-lift, .dm-flyer) .geo.g2 { animation:fxSnap 1.8s cubic-bezier(.3,1.4,.5,1) both; }
:is(.dm-c.is-lift, .dm-flyer) .guide { animation:fxGuide 1.8s both; }
@keyframes fxSnap { 0%, 30% { transform:translate(96px,10px) rotate(4deg); } 80%, 100% { transform:none; } }
@keyframes fxGuide { 0%, 60% { opacity:0; } 70% { opacity:1; } 100% { opacity:0; } }

/* images: a pixel image drops onto the board, then gets marked up */
.img { left:22px; top:18px; width:170px; height:112px; background:var(--marble); padding:5px; box-shadow:0 8px 16px -8px rgba(35,36,31,.45); transform:rotate(-2deg); }
.img img { display:block; width:100%; height:100%; image-rendering:pixelated; }
:is(.dm-c.is-lift, .dm-flyer) .img { animation:fxDrop .6s .2s cubic-bezier(.3,1.5,.5,1) both; }
@keyframes fxDrop { from { opacity:0; transform:translateY(-24px) rotate(-6deg) scale(1.08); } }

/* same board on both devices: a stroke on the Mac, then on the iPad */
.dev { border:2px solid var(--olive); background:var(--marble); }
.dev.mac { left:16px; top:26px; width:124px; height:84px; }
.dev.mac::after { content:''; position:absolute; left:40px; right:40px; bottom:-14px; height:10px; background:var(--olive); }
.dev.pad { left:156px; top:50px; width:90px; height:66px; border-width:5px; border-color:#3B3E35; }

/* attach: an existing session slides out of the list and onto the board */
.row { left:16px; width:190px; height:30px; border:1px solid #3A4037; }
.row i { position:absolute; left:10px; top:11px; width:8px; height:8px; background:var(--lichen); }
.row::after { content:''; position:absolute; left:28px; top:12px; width:100px; height:6px; background:#4A5446; }
.landed { left:60px; top:130px; width:190px; height:44px; border:1px solid var(--wood); background:#252A23; }
.landed::after { content:''; position:absolute; left:12px; top:12px; width:120px; height:7px; background:var(--lichen); box-shadow:0 12px 0 -1px #4A5446; }
:is(.dm-c.is-lift, .dm-flyer) .landed { animation:fxAttach 1.6s .4s cubic-bezier(.6,0,.2,1) both; }
@keyframes fxAttach { from { transform:translate(-44px,-72px); width:190px; height:30px; } }

/* command bar: a command types into the card */
.cbar { left:12px; right:12px; bottom:12px; height:34px; border:1px solid #3A4037; background:#232822; font:400 12px/34px 'JetBrains Mono',ui-monospace,Menlo,monospace; color:var(--chalk); padding-left:10px; white-space:nowrap; overflow:hidden; display:flex; align-items:center; }
.typed { display:inline-block; overflow:hidden; }
.cur { display:inline-block; width:7px; height:14px; background:var(--lichen); margin-left:2px; }
:is(.dm-c.is-lift, .dm-flyer) .typed { animation:fxType 1.6s .3s steps(17) both; }
:is(.dm-c.is-lift, .dm-flyer) .cur { animation:fxBlink .4s 8 alternate; }
@keyframes fxType { from { width:0; } to { width:17ch; } }

/* deep link: the chip appears and the view frames the exact spot */
.spot { left:90px; top:44px; width:84px; height:60px; border:2px solid var(--wood); }
.chip { left:14px; bottom:12px; padding:5px 8px; background:var(--ink); color:var(--chalk); font:400 10.5px/1.2 'JetBrains Mono',ui-monospace,Menlo,monospace; white-space:nowrap; }
:is(.dm-c.is-lift, .dm-flyer) .chip { animation:fxIn .4s .2s both; }
:is(.dm-c.is-lift, .dm-flyer) .spot { animation:fxSpot 1.4s .7s cubic-bezier(.6,0,.2,1) both; }
@keyframes fxSpot { from { transform:scale(3.2); opacity:0; } 30% { opacity:1; } }

/* A lifted card comes further forward than the kit's default, so its feature reads */
.dm-c.is-lift { transform:translateZ(150px) scale(1.22); }

/* Abstract art cards between the features: dithered pixel pieces, a second one fades up and a
   pencil mark draws over it while lifted. The transition (not an animation) eases both ways. */
.art { position:relative; }
.art img { position:absolute; inset:0; width:100%; height:100%; image-rendering:pixelated; }
.art .a2 { opacity:0; transition:opacity 1.4s ease; }
.dm-c.is-lift .art .a2 { opacity:1; }
.art svg { position:absolute; inset:0; width:100%; height:100%; overflow:visible; }
.art svg path { fill:none; stroke:var(--marble); stroke-width:3.4; stroke-linecap:round; stroke-linejoin:round; stroke-dasharray:320; stroke-dashoffset:320; }
:is(.dm-c.is-lift, .dm-flyer) .art .draw { animation:fxInk 1.3s .6s cubic-bezier(.4,0,.2,1) forwards; }
@keyframes fxInk { from { stroke-dashoffset:320; } to { stroke-dashoffset:0; } }

/* a browser on the board: the page loads in blocks, then gets an ink arrow */
.url { left:12px; right:12px; top:10px; height:24px; background:var(--marble); border:1px solid var(--hair); font:400 11px/22px 'JetBrains Mono',ui-monospace,monospace; color:var(--ink-soft); padding-left:26px; }
.url i { position:absolute; left:9px; top:8px; width:7px; height:7px; background:var(--lichen); }
.page { left:12px; right:12px; top:40px; bottom:12px; background:var(--marble); border:1px solid var(--hair); }
.pg { position:absolute; background:var(--sage-pale); }
.pg.top { left:10px; right:10px; top:10px; height:44px; background:linear-gradient(90deg, var(--forest-deep), var(--forest)); }
.pg.c1 { left:10px; top:64px; width:66px; height:60px; } .pg.c2 { left:84px; top:64px; width:66px; height:60px; } .pg.c3 { left:158px; top:64px; width:66px; height:60px; }
:is(.dm-c.is-lift, .dm-flyer) .pg { animation:fxIn .4s both; }
:is(.dm-c.is-lift, .dm-flyer) .pg.c1 { animation-delay:.3s; } :is(.dm-c.is-lift, .dm-flyer) .pg.c2 { animation-delay:.45s; } :is(.dm-c.is-lift, .dm-flyer) .pg.c3 { animation-delay:.6s; }

.fb .sk.ink { height:4px; background:#5E6056; opacity:.55; }