/* ============================================================
   Perch preview — shared by the homepage Perch band and tools/perch/.
   One copy on purpose: the two previews had drifted apart (2026-09-18).
   Colours are fixed (it always sits on a dark stage); the tokens below
   give it the board's values on pages whose stylesheet lacks them.
   ============================================================ */
.perch-stage, .perch-showcase { --accent-lift: #8b95ee; --board-ink: #f2f4f8; --board-ink-soft: #949eae; }

.perch-preview { position: relative; display: flex; gap: .7rem; align-items: stretch; }
.perch-card { flex: 1; background: #1d212b; border: 1px solid rgba(255,255,255,.08); border-radius: 12px 0 0 12px; padding: 1rem; box-shadow: 0 18px 50px rgba(0,0,0,.35); font-size: .82rem; }
.perch-strip { width: 34px; flex: none; align-self: center; display: flex; flex-direction: column; align-items: center; gap: .55rem; padding: .8rem 0; background: #1d212b; border: 1px solid rgba(255,255,255,.08); border-radius: 9px 0 0 9px; }
.perch-dot { width: 8px; height: 8px; border-radius: 2px; background: #a7a5b3; }
.perch-dot.working { width: 10px; height: 10px; background: #f2c14e; box-shadow: 0 0 9px rgba(242,193,78,.8); }
.perch-dot.needs { width: 10px; height: 10px; background: #b57bff; box-shadow: 0 0 9px rgba(181,123,255,.8); }
.perch-dot.done { background: #70c99a; }
.perch-dot.limit { background: #ff5a64; }
.perch-head { display: flex; justify-content: space-between; align-items: center; color: #fff; font-weight: 600; margin-bottom: .7rem; }
.perch-label { font-size: .68rem; letter-spacing: .08em; text-transform: uppercase; color: var(--accent-lift); font-weight: 700; margin: .8rem 0 .45rem; }
.perch-row { display: flex; justify-content: space-between; align-items: center; gap: .6rem; padding: .45rem .55rem; margin-bottom: .35rem; border-radius: 7px; background: #262b37; color: var(--board-ink); }
.perch-row span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.perch-chip { flex: none; font-size: .66rem; font-weight: 700; letter-spacing: .03em; padding: .12rem .45rem; border-radius: 5px; border: 1px solid; }
.perch-chip.working { color: #f2c14e; border-color: rgba(242,193,78,.55); background: rgba(242,193,78,.12); }
.perch-chip.needs { color: #c9a2ff; border-color: rgba(181,123,255,.6); background: rgba(181,123,255,.14); }
.perch-chip.done { color: #8fd6a8; border-color: rgba(143,214,168,.45); background: rgba(143,214,168,.1); }
.perch-chip.limit { color: #ff8a92; border-color: rgba(255,90,100,.55); background: rgba(255,90,100,.12); }
.perch-bar { display: grid; grid-template-columns: 2.6rem 1fr auto; gap: .55rem; align-items: center; color: var(--board-ink-soft); margin-bottom: .2rem; }
.perch-track { height: 6px; border-radius: 3px; background: rgba(255,255,255,.12); overflow: hidden; }
.perch-track i { display: block; height: 100%; border-radius: 3px; background: #70c99a; }
.perch-timer { margin: 0 0 .5rem 3.15rem; font-size: .74rem; color: var(--board-ink); }
.perch-caption { margin-top: .8rem; font-size: .78rem; color: var(--board-ink-soft); }

/* Perch preview, round 2: agent marks, a shelf, and a looping drag-out of a screenshot. */
.perch-mark { width: 13px; height: 13px; flex: none; fill: none; stroke-width: 2.2; stroke-linecap: round; }
.perch-mark.claude { stroke: #d97757; }
.perch-mark.codex { stroke: #ededf2; }
.perch-row .perch-title { display: flex; align-items: center; gap: .45rem; min-width: 0; }
.perch-row .perch-title span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.perch-strip { gap: .5rem; }
.perch-slot { display: flex; flex-direction: column; align-items: center; gap: .3rem; }
.perch-slot .perch-mark { width: 10px; height: 10px; }
.perch-shelf { display: grid; grid-template-columns: 1fr 1fr; gap: .8rem; margin-top: .2rem; }
.perch-pile { position: relative; height: 62px; display: flex; justify-content: center; align-items: center; }
.perch-shot { position: absolute; width: 70px; height: 44px; border-radius: 5px; background: #34343f; padding: 2px; box-shadow: 0 3px 10px rgba(0,0,0,.45); }
.perch-shot i { display: block; width: 100%; height: 100%; border-radius: 3px;
  background: linear-gradient(#262b37 0 22%, transparent 22%), repeating-linear-gradient(#3b4252 0 3px, transparent 3px 8px) 8px 14px / 60% 60% no-repeat, #1b1f28; }
.perch-shot.back { transform: rotate(-8deg) translate(-7px, 2px); opacity: .85; }
.perch-shot.mid { transform: rotate(6deg) translate(6px, 0); opacity: .92; }
.perch-shot.front { z-index: 2; }
.perch-page { position: absolute; width: 40px; height: 52px; background: #f7f5fb; clip-path: polygon(0 0, 76% 0, 100% 18%, 100% 100%, 0 100%); box-shadow: 0 3px 10px rgba(0,0,0,.4); }
.perch-page.back { transform: rotate(-12deg) translate(-8px, 2px); opacity: .8; }
.perch-page b { position: absolute; left: 50%; bottom: 7px; transform: translateX(-50%); font: 700 7px/1 system-ui, sans-serif; color: #fff; background: #6d5dfb; border-radius: 2px; padding: 2px 3px; }
.perch-pill { display: block; text-align: center; margin-top: .25rem; font-size: .68rem; color: var(--board-ink-soft); }
.perch-cursor { position: absolute; z-index: 3; width: 14px; height: 14px; left: 50%; top: 50%; opacity: 0; pointer-events: none; }
.perch-cursor svg { width: 100%; height: 100%; fill: #fff; stroke: #15181e; stroke-width: 1.2; }
@media (prefers-reduced-motion: no-preference) {
  .perch-shot.front { animation: perch-drag 5.5s ease-in-out infinite; }
  .perch-cursor { animation: perch-cursor 5.5s ease-in-out infinite; }
}
@keyframes perch-drag {
  0%, 22% { transform: none; box-shadow: 0 3px 10px rgba(0,0,0,.45); }
  32% { transform: scale(1.15); box-shadow: 0 0 0 2px #a99bff, 0 10px 24px rgba(0,0,0,.5); }
  58% { transform: translate(-150px, -40px) rotate(-4deg) scale(1.08); box-shadow: 0 0 0 2px #a99bff, 0 14px 30px rgba(0,0,0,.55); opacity: 1; }
  66% { transform: translate(-150px, -40px) rotate(-4deg) scale(1.08); opacity: 0; }
  76% { transform: none; opacity: 0; }
  86%, 100% { transform: none; opacity: 1; }
}
@keyframes perch-cursor {
  0%, 18% { opacity: 0; transform: translate(10px, 12px); }
  26%, 32% { opacity: 1; transform: translate(4px, 6px); }
  58% { opacity: 1; transform: translate(-146px, -34px); }
  66%, 100% { opacity: 0; transform: translate(-146px, -34px); }
}

/* Perch preview, round 3: matte frosted glass (reference: owner-picked Webflow "Matt Glass" study).
   Blurred colour orbs sit behind; the panel and strip are frosted layers with an inner top highlight
   and an inner shadow for thickness. The preview tilts slightly toward the pointer (JS, reduced-motion aware). */
.perch-stage { position: relative; padding: 2.2rem 1.2rem; perspective: 900px; }
.perch-stage::before, .perch-stage::after, .perch-orb { content: ""; position: absolute; border-radius: 50%; filter: blur(42px); opacity: .55; pointer-events: none; }
.perch-stage::before { width: 190px; height: 190px; left: -10px; top: 8%; background: #7b5cff; }
.perch-stage::after { width: 160px; height: 160px; right: 0; bottom: 4%; background: #d97757; opacity: .45; }
.perch-orb { width: 120px; height: 120px; right: 22%; top: 38%; background: #3fbf8a; opacity: .35; }
/* One glow is enough; three blurred layers kept the compositor busy while scrolling. */
.perch-stage::after, .perch-orb { display: none; }
.perch-stage .perch-preview { transform-style: preserve-3d; transition: transform .25s ease-out; will-change: transform; }
.perch-stage .perch-card,
.perch-stage .perch-strip {
  background: rgba(255,255,255,.055);
  -webkit-backdrop-filter: blur(22px) saturate(150%); backdrop-filter: blur(22px) saturate(150%);
  border: 1px solid rgba(255,255,255,.13);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.22), inset 0 -18px 40px rgba(0,0,0,.28), 0 24px 60px rgba(0,0,0,.45);
}
.perch-stage .perch-row { background: rgba(255,255,255,.06); box-shadow: inset 0 1px 0 rgba(255,255,255,.07); }
.perch-stage .perch-shot { background: rgba(255,255,255,.14); }
.perch-stage .perch-caption { position: relative; }

/* Perch preview, round 4.
   Strip: like the app on a side edge - square then mark side by side, each square in a fixed 10px slot so
   every mark lines up in one column.
   Shelf: hovering a pile fans its cards into a row (the app's spread), and pauses the drag loop. */
.perch-stage .perch-strip { width: 40px; padding: .75rem 0; gap: .55rem; }
.perch-slot { flex-direction: row; gap: 4px; align-items: center; }
.perch-slot .perch-dotbox { width: 10px; height: 10px; display: flex; align-items: center; justify-content: center; flex: none; }
.perch-slot .perch-dot { width: 6px; height: 6px; }
.perch-slot .perch-dot.working, .perch-slot .perch-dot.needs { width: 10px; height: 10px; }
.perch-slot .perch-dot.done, .perch-slot .perch-dot.limit { width: 7px; height: 7px; }
.perch-slot .perch-mark { width: 10px; height: 10px; }

.perch-pile { cursor: grab; }
.perch-shot, .perch-page { transition: transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .25s ease; }
.perch-pile:hover .perch-shot.front { animation: none; }
.perch-pile:hover .perch-cursor { animation: none; opacity: 0; }
.perch-pile:hover .perch-shot.back { transform: translateX(-58px) rotate(0deg); opacity: 1; }
.perch-pile:hover .perch-shot.mid { transform: translateX(0) rotate(0deg); opacity: 1; }
.perch-pile:hover .perch-shot.front { transform: translateX(58px); }
.perch-pile:hover .perch-page.back { transform: translateX(-24px) rotate(0deg); opacity: 1; }
.perch-pile:hover .perch-page:not(.back) { transform: translateX(24px); }
.perch-pile .perch-shot:hover, .perch-pile .perch-page:hover { z-index: 5; box-shadow: 0 0 0 2px #a99bff, 0 10px 24px rgba(0,0,0,.5); }
.perch-pile:hover .perch-shot:hover { transform: var(--spread, none) scale(1.14); }
.perch-pile:hover .perch-shot.back:hover { transform: translateX(-58px) scale(1.14); }
.perch-pile:hover .perch-shot.mid:hover { transform: scale(1.14); }
.perch-pile:hover .perch-shot.front:hover { transform: translateX(58px) scale(1.14); }
.perch-pile:hover .perch-page.back:hover { transform: translateX(-24px) scale(1.12); }
.perch-pile:hover .perch-page:not(.back):hover { transform: translateX(24px) scale(1.12); }

/* tools/perch/: the homepage band gives the preview its dark stage; here the showcase panel does. */
.perch-showcase {
  margin-top: clamp(2.5rem, 5vw, 3.5rem); padding: clamp(1rem, 4vw, 2.5rem);
  background: #15181e; border-radius: 16px; overflow: hidden;
  box-shadow: 0 24px 60px rgba(16, 20, 28, .18);
}
.perch-showcase .perch-stage { max-width: 560px; margin-inline: auto; }
.perch-showcase p { max-width: none; }
.perch-showcase .perch-preview { text-align: left; } /* this hero centres its text; the card must not inherit it */