/* v6: interaction layer over v4 + v5 (index-v6.html). Ideas inspired by Rare UI (rareui.com), code written for this site. */
:root{--pill:rgba(255,255,255,.78);--pill-b:rgba(0,0,0,.08);--shadow:0 1px 2px rgba(0,0,0,.04),0 8px 28px rgba(0,0,0,.07);--spring:cubic-bezier(.34,1.56,.64,1)}
html[data-theme="dark"]{--pill:rgba(28,28,31,.78);--pill-b:rgba(255,255,255,.09);--shadow:0 1px 2px rgba(0,0,0,.3),0 10px 30px rgba(0,0,0,.35)}

/* ---------- floating pill nav ---------- */
body{padding-top:84px}
.pnav{position:fixed;inset:14px 0 auto;z-index:50;display:flex;justify-content:center;gap:8px;padding-inline:16px;pointer-events:none}
.pnav .pill{pointer-events:auto;display:flex;align-items:center;height:46px;border-radius:999px;background:var(--pill);border:1px solid var(--pill-b);box-shadow:var(--shadow);backdrop-filter:blur(14px) saturate(1.4);-webkit-backdrop-filter:blur(14px) saturate(1.4)}
.pnav .brand{gap:9px;padding:0 16px 0 6px;font-size:14.5px;font-weight:600;color:var(--ink);text-decoration:none;letter-spacing:-.01em;white-space:nowrap}
.pnav .brand img{width:34px;height:34px;border-radius:50%;object-fit:cover;object-position:50% 22%}
.pnav .links{position:relative;padding:4px;gap:0}
.pnav .links a{position:relative;z-index:1;padding:0 15px;height:36px;display:grid;place-items:center;border-radius:999px;font-size:14px;font-weight:500;color:var(--muted);text-decoration:none;white-space:nowrap;transition:color .25s}
.pnav .links a:hover{color:var(--ink)}
.pnav .links a.on{color:#fff}
.pnav .links a+a::before{content:"";position:absolute;left:0;top:11px;bottom:11px;width:1px;background:var(--rule);transition:opacity .2s}
.pnav .links a.on::before,.pnav .links a.on+a::before{opacity:0}
.pnav .blob{position:absolute;z-index:0;top:4px;height:36px;left:0;width:0;border-radius:999px;background:var(--accent);opacity:0;box-shadow:0 4px 14px color-mix(in srgb,var(--accent) 40%,transparent);transition:left .55s var(--spring),width .55s var(--spring),opacity .2s,transform .55s var(--spring)}
.pnav .blob.show{opacity:1}
.pnav .blob.squish{transform:scaleY(.82)}
.pnav .tools{position:relative;padding:0 4px;gap:2px}
.pnav .tools button{width:38px;height:38px;border:0;border-radius:50%;background:none;color:var(--muted);cursor:pointer;display:grid;place-items:center;position:relative;transition:background .15s,color .15s}
.pnav .tools button:hover{background:var(--soft);color:var(--ink)}
.pnav .tools svg{width:18px;height:18px}
@media (max-width:860px){.pnav .links a.opt{display:none}}
@media (max-width:600px){
  body{padding-top:74px}
  .pnav{gap:6px;padding-inline:10px;inset-block-start:10px}
  .pnav .brand{padding:0 6px}.pnav .brand span{display:none}
  .pnav .links a{padding:0 11px;font-size:13.5px}
}

/* ---------- proximity minimap (left rail) ---------- */
.rail{position:fixed;left:22px;top:50%;translate:0 -50%;z-index:40;display:flex;flex-direction:column;gap:7px;padding:14px 26px 14px 0}
.rail button{all:unset;cursor:pointer;display:block;height:2px;width:var(--w,10px);border-radius:2px;background:var(--muted);opacity:.35;transform-origin:left center;transform:scaleX(var(--s,1));transition:transform .18s ease-out,opacity .2s,background .2s;position:relative}
.rail button.maj{--w:22px;opacity:.6;height:2.5px}
.rail button.on{background:var(--accent);opacity:1}
.rail button.pulse{animation:dpulse .8s ease}
@keyframes dpulse{40%{transform:scaleX(calc(var(--s,1) * 1.8))}}
.rail button::after{content:attr(data-l);position:absolute;left:calc(100% + 10px);top:50%;translate:0 -50%;font:500 12px/1 var(--font);color:var(--ink);white-space:nowrap;opacity:0;transition:opacity .15s;transform:scaleX(calc(1 / var(--s,1)));transform-origin:left}
.rail button.maj:hover::after,.rail button.maj:focus-visible::after{opacity:1}
@media (max-width:1279px),(pointer:coarse){.rail{display:none}}


/* ---------- emoji react ---------- */
.post-actions{position:relative}
.post-actions .react{display:inline-flex;align-items:center;gap:7px;padding:9px 10px;border:0;border-radius:10px;background:none;font:500 13.5px var(--font);color:var(--muted);cursor:pointer;transition:background .15s,color .15s}
.post-actions .react:hover,.post-actions .react[aria-expanded="true"]{background:var(--soft);color:var(--ink)}
.post-actions .react svg{width:17px;height:17px}
.post-actions .react.did svg{display:none}
.post-actions .react .em{font-size:16px;line-height:1}
.post-actions .react .ct{font-variant-numeric:tabular-nums}
.emo{position:absolute;bottom:calc(100% + 4px);right:0;display:flex;gap:2px;padding:6px;background:var(--bg);border:1px solid var(--rule);border-radius:999px;box-shadow:0 12px 36px rgba(0,0,0,.14);z-index:5;transform-origin:85% 100%;animation:pop .3s var(--spring)}
.emo button{all:unset;cursor:pointer;width:40px;height:40px;display:grid;place-items:center;font-size:24px;border-radius:50%;opacity:0;animation:rise .35s var(--spring) forwards;transition:transform .2s var(--spring)}
.emo button:hover,.emo button:focus-visible{transform:scale(1.35) translateY(-4px)}
@keyframes pop{from{opacity:0;transform:translateY(-6px) scale(.94)}}
@keyframes rise{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.fly{position:fixed;z-index:80;pointer-events:none;font-size:var(--fs,28px);line-height:1;left:0;top:0;will-change:transform,opacity}

/* ---------- folders over the work grid ---------- */
.folders{display:flex;gap:30px;margin:6px 0 40px;padding:44px 4px 6px;overflow-x:auto;scrollbar-width:none}
.folders::-webkit-scrollbar{display:none}
.fold{all:unset;cursor:pointer;flex:0 0 auto;display:flex;flex-direction:column;align-items:center;gap:12px;--fc:var(--c-blue);--fd:color-mix(in srgb,var(--fc) 82%,#000 18%)}
.fold:focus-visible .f-box{outline:2px solid var(--accent);outline-offset:6px;border-radius:14px}
.f-box{position:relative;width:132px;height:96px;perspective:500px}
.f-back{position:absolute;inset:0;border-radius:6px 12px 12px 12px;background:var(--fd)}
.f-back::before{content:"";position:absolute;left:0;top:-11px;width:52px;height:14px;border-radius:7px 9px 0 0;background:var(--fd)}
.f-cards{position:absolute;inset:8px 14px 0}
.f-cards img{position:absolute;left:50%;bottom:14px;width:58px;height:75px;margin-left:-29px;object-fit:cover;object-position:top;background:#fff;border-radius:3px;box-shadow:0 2px 8px rgba(0,0,0,.18);transition:transform .5s var(--spring)}
.f-cards img:nth-child(1){transform:translate(-14px,4px) rotate(-6deg)}
.f-cards img:nth-child(2){transform:translate(14px,4px) rotate(5deg)}
.f-cards img:nth-child(3){transform:translate(0,0)}
.f-front{position:absolute;left:0;right:0;bottom:0;height:72%;border-radius:8px 8px 12px 12px;background:color-mix(in srgb,var(--fc) 72%,transparent);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);border:1px solid color-mix(in srgb,var(--fd) 60%,transparent);border-top-color:rgba(255,255,255,.55);transform-origin:50% 100%;transition:transform .5s var(--spring);box-shadow:inset 0 1px 0 rgba(255,255,255,.4)}
.f-front i{position:absolute;right:10px;bottom:8px;font:700 22px/1 var(--font);font-style:normal;color:color-mix(in srgb,var(--fd) 55%,var(--ink));letter-spacing:-.03em}
.f-lab{font-size:13.5px;font-weight:500;color:var(--muted);transition:color .2s}
.fold:hover .f-front,.fold.on .f-front{transform:rotateX(-28deg)}
.fold:hover .f-cards img:nth-child(1),.fold.on .f-cards img:nth-child(1){transform:translate(-34px,-22px) rotate(-16deg)}
.fold:hover .f-cards img:nth-child(2),.fold.on .f-cards img:nth-child(2){transform:translate(34px,-22px) rotate(15deg)}
.fold:hover .f-cards img:nth-child(3),.fold.on .f-cards img:nth-child(3){transform:translate(0,-34px)}
.fold.on .f-lab{color:var(--ink);font-weight:600}
.fold.on .f-lab::after{content:"";display:block;height:2px;margin-top:4px;border-radius:2px;background:var(--accent)}
.grid .tile.gone{display:none}
@media (max-width:600px){.folders{gap:18px;margin-inline:-16px;padding-inline:16px}.f-box{width:110px;height:80px}.f-cards img{width:48px;height:62px;margin-left:-24px}}


@media (prefers-reduced-motion:reduce){
  .pnav .blob,.f-front,.f-cards img{transition:none}
  .emo,.emo button{animation:none;opacity:1}
}