/* Automate with Bibo · links page v2 (faceless)
   Idea: the page IS a workflow. A dotted automation canvas, paper "sticker" nodes on one live wire,
   a data pulse that runs through every link, and the little bot that watches it all. */
@font-face{font-family:"Serif";font-style:normal;font-weight:400;font-display:swap;src:url(fonts/serif-400.woff2) format("woff2")}
@font-face{font-family:"Serif";font-style:italic;font-weight:400;font-display:swap;src:url(fonts/serif-400i.woff2) format("woff2")}
@font-face{font-family:"Geist";font-weight:400;font-display:swap;src:url(fonts/geist-400.woff2) format("woff2")}
@font-face{font-family:"Geist";font-weight:500;font-display:swap;src:url(fonts/geist-500.woff2) format("woff2")}
@font-face{font-family:"Geist";font-weight:600;font-display:swap;src:url(fonts/geist-600.woff2) format("woff2")}
@font-face{font-family:"Mono";font-weight:400;font-display:swap;src:url(fonts/mono-400.woff2) format("woff2")}
@font-face{font-family:"Mono";font-weight:500;font-display:swap;src:url(fonts/mono-500.woff2) format("woff2")}

:root{
  --canvas:#f3f1ea;   /* the board */
  --paper:#fffdf7;    /* sticker paper */
  --kraft:#e7dfcc;    /* tape */
  --ink:#141413;
  --ink2:#3a3934;
  --muted:#6b675e;
  --line:rgba(20,20,19,.14);
  --green:#1fbf5c;
  --green-ink:#0f7a38;
  --serif:"Serif",Georgia,"Times New Roman",serif;
  --sans:"Geist",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --mono:"Mono",ui-monospace,Menlo,Consolas,monospace;
  --g:clamp(16px,5vw,64px);
  --spring:cubic-bezier(.34,1.56,.64,1);
  --expo:cubic-bezier(.16,1,.3,1);
  --wire-x:27px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;overflow-x:clip}
body{
  min-height:100vh;min-height:100dvh;color:var(--ink);font:400 1rem/1.55 var(--sans);
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
  background-color:var(--canvas);
  /* automation-canvas dot grid */
  background-image:radial-gradient(circle at 1px 1px,rgba(20,20,19,.16) 1.1px,transparent 1.6px);
  background-size:22px 22px;
}
a{color:inherit;text-decoration:none}
ul{list-style:none}
svg{display:block}
.defs{position:absolute}
:focus-visible{outline:3px solid var(--green-ink);outline-offset:3px;border-radius:14px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:-999px;top:8px;background:var(--ink);color:var(--paper);padding:10px 16px;border-radius:10px;z-index:99}
.skip:focus{left:10px}

/* top bar */
.top{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:max(16px,env(safe-area-inset-top)) var(--g) 0;max-width:1180px;margin:0 auto}
.brand{display:inline-flex;align-items:center;gap:8px;min-height:44px;font-weight:600;letter-spacing:-.01em;white-space:nowrap}
.brand__mark{width:30px;height:30px;transition:transform .6s var(--spring)}
.brand:hover .brand__mark{transform:rotate(-12deg) translateY(-2px)}
.status{display:flex;align-items:center;gap:8px;font:500 .8rem/1 var(--mono);color:var(--ink2);padding:9px 12px;border-radius:999px;background:var(--paper);border:1px solid var(--line);white-space:nowrap}
.status__dot{width:8px;height:8px;border-radius:50%;background:var(--green);animation:ping 2.2s infinite}
@keyframes ping{0%{box-shadow:0 0 0 0 rgba(31,191,92,.55)}70%,100%{box-shadow:0 0 0 8px rgba(31,191,92,0)}}

/* layout */
.shell{max-width:1180px;margin:0 auto;padding:clamp(20px,4vw,56px) var(--g) clamp(28px,5vw,64px);display:grid;gap:clamp(18px,4vw,40px)}
.hero{text-align:center;min-width:0}
.flow{position:relative;width:100%;max-width:560px;margin:0 auto;min-width:0;padding-left:calc(var(--wire-x) + 22px)}

/* ---------- the bot ---------- */
.stage{position:relative;width:min(52vw,230px);margin:30px auto 6px}
.bot{width:100%;height:auto;overflow:visible}
.bot__shadow{fill:rgba(20,20,19,.12);transform-origin:110px 206px;animation:shadow 3.6s ease-in-out infinite}
.bot__body{animation:float 3.6s ease-in-out infinite;transform-origin:110px 190px}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
@keyframes shadow{0%,100%{transform:scaleX(1)}50%{transform:scaleX(.82)}}
.bot__bulb{fill:var(--green);transition:fill .2s}
.bot.is-busy .bot__bulb{animation:bulb .5s steps(2) 3}
@keyframes bulb{50%{fill:#fffdf7}}
.bot__eyes{transition:transform .25s var(--expo)}
.bot__eye{transform-box:fill-box;transform-origin:center;animation:blink 5s infinite}
@keyframes blink{0%,93%,100%{transform:scaleY(1)}95.5%{transform:scaleY(.1)}}
.bot__arm--wave{transform-origin:186px 112px;animation:wave 1.4s var(--expo) .6s 2}
.bot.is-waving .bot__arm--wave{animation:wave 1.1s var(--expo) 1}
@keyframes wave{0%,100%{transform:rotate(0)}25%{transform:rotate(-16deg)}55%{transform:rotate(12deg)}80%{transform:rotate(-6deg)}}
.bot__mouth{transition:d .3s}
.bot.is-happy .bot__mouth{d:path("M98 130q12 14 24 0")}

/* speech bubble */
.bubble{position:absolute;left:58%;right:auto;top:-30px;transform-origin:0 100%;
  font:500 .8rem/1.25 var(--mono);background:var(--paper);border:1.5px solid var(--ink);border-radius:14px 14px 14px 3px;
  padding:8px 11px;width:max-content;max-width:min(176px,calc(50vw - 26px));text-align:left;box-shadow:3px 3px 0 var(--ink);
  animation:pop .5s var(--spring) 1.1s both}
.bubble.is-new{animation:pop .45s var(--spring) both}
@keyframes pop{from{opacity:0;transform:scale(.6) rotate(-6deg)}to{opacity:1;transform:none}}

/* ---------- title ---------- */
.title{font:400 clamp(3.1rem,15vw,6.4rem)/.86 var(--serif);letter-spacing:-.025em;margin-top:6px}
.title span,.title em{display:inline-block}
.title__b{font-style:italic;color:var(--green-ink);margin:0 .02em}
.title > *{animation:rise .9s var(--expo) both}
.title__a{animation-delay:.05s}.title__b{animation-delay:.13s}.title__c{animation-delay:.21s}
@keyframes rise{from{opacity:0;transform:translateY(.35em) rotate(2deg)}to{opacity:1;transform:none}}
.tag{font:400 italic clamp(1.15rem,4.6vw,1.45rem)/1.25 var(--serif);color:var(--ink2);margin-top:16px}
.bio{max-width:36ch;text-wrap:balance;margin:12px auto 0;color:var(--muted);font-size:.98rem}
.tag,.bio{animation:fade .8s ease .35s both}
@keyframes fade{from{opacity:0}}

/* ---------- the wire + pulse ---------- */
.wire{position:absolute;left:var(--wire-x);top:30px;bottom:40px;width:2px;
  background:repeating-linear-gradient(to bottom,rgba(20,20,19,.38) 0 6px,transparent 6px 11px)}
.pulse{position:absolute;left:50%;top:0;width:12px;height:12px;margin:-6px 0 0 -6px;border-radius:50%;
  background:var(--green);box-shadow:0 0 0 4px rgba(31,191,92,.22),0 0 18px 4px rgba(31,191,92,.45);opacity:0;will-change:transform}
.pulse.is-on{opacity:1}

/* group labels sit on the wire like notes */
.group{font:500 .78rem/1 var(--mono);color:var(--muted);margin:26px 0 10px 2px}

/* ---------- nodes ---------- */
.node{position:relative;display:grid;grid-template-columns:auto 1fr auto;grid-template-areas:"ic t go" "ic h go";align-items:center;column-gap:14px;
  min-height:68px;padding:12px 14px 12px 12px;background:var(--paper);border:1.5px solid var(--ink);border-radius:16px;
  box-shadow:0 2px 0 var(--ink);transition:transform .35s var(--spring),box-shadow .35s var(--spring),background-color .3s}
.nodes{display:grid;gap:12px}
.node__port{position:absolute;left:calc(-22px - 2px);top:50%;width:22px;height:2px;background:rgba(20,20,19,.38)}
.node__port::before{content:"";position:absolute;right:-6px;top:-5px;width:12px;height:12px;border-radius:50%;background:var(--paper);border:1.5px solid var(--ink);transition:background-color .25s,transform .35s var(--spring)}
.node__port::after{content:"";position:absolute;left:-5px;top:-4px;width:10px;height:10px;border-radius:50%;background:var(--canvas);border:1.5px solid rgba(20,20,19,.45)}
.node__ic{grid-area:ic;width:44px;height:44px;display:grid;place-items:center;border-radius:12px;background:var(--ink);color:var(--paper);transition:transform .45s var(--spring),background-color .3s}
.node__ic svg{width:21px;height:21px;fill:currentColor}
.node__t{grid-area:t;font-weight:600;font-size:1.04rem;letter-spacing:-.01em;line-height:1.2}
.node__h{grid-area:h;font:400 .8rem/1.3 var(--mono);color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.node__go,.main__go{grid-area:go;position:relative;width:38px;height:38px;border-radius:50%;border:1.5px solid var(--ink);display:grid;place-items:center;overflow:hidden;transition:background-color .3s,color .3s,transform .4s var(--spring)}
.node__go svg,.main__go svg{grid-area:1/1;width:18px;height:18px;transition:transform .45s var(--expo),opacity .2s}
.ok{opacity:0;transform:scale(.3)}

/* lit = the pulse is passing through this node */
.node.is-lit .node__port::before{background:var(--green);transform:scale(1.25)}
.node.is-lit .node__ic{background:var(--green-ink)}

/* hover / press (pointer devices get the lift; everyone gets the press) */
@media (hover:hover){
  .node:hover{transform:translate(-2px,-3px) rotate(-.4deg);box-shadow:3px 5px 0 var(--ink)}
  .node:hover .node__ic{transform:rotate(-8deg) scale(1.06)}
  .node:hover .node__go{background:var(--ink);color:var(--paper)}
  .node:hover .go{transform:translate(2px,-2px)}
}
.node:active{transform:translate(0,1px);box-shadow:0 1px 0 var(--ink)}

/* ran = this link was just opened: the node "executes" with a green tick */
.node.is-ran .node__go,.node.is-ran .main__go{background:var(--green);border-color:var(--green-ink);color:var(--ink)}
.node.is-ran .go{opacity:0;transform:translate(10px,-10px)}
.node.is-ran .ok{opacity:1;transform:none}

/* featured website node: the big dark sticker with tape */
.node--main{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:12px;grid-template-areas:"ic ic" "t go" "u go";row-gap:4px;
  background:var(--ink);color:var(--paper);border-color:var(--ink);padding:18px 18px 18px 20px;min-height:0;
  transform:rotate(-1.2deg);box-shadow:4px 5px 0 var(--green)}
.node--main .node__port{top:44px}
.tape{position:absolute;top:-11px;right:26px;width:74px;height:22px;background:var(--kraft);opacity:.92;transform:rotate(6deg);
  clip-path:polygon(3% 0,97% 4%,100% 50%,96% 100%,2% 96%,0 48%)}
.main__ic{grid-area:ic;width:40px;height:40px;border-radius:12px;background:var(--green);color:var(--ink);display:grid;place-items:center;margin-bottom:10px}
.main__ic svg{width:22px;height:22px}
.main__t{grid-area:t;font:400 clamp(2rem,9vw,2.6rem)/.95 var(--serif);letter-spacing:-.01em}
.main__u{grid-area:u;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font:400 .8rem/1.3 var(--mono);color:#b9b5aa}
.main__go{border-color:var(--paper);width:52px;height:52px;align-self:end}
.main__go svg{width:22px;height:22px}
@media (hover:hover){
  .node--main:hover{transform:rotate(0) translate(-2px,-3px);box-shadow:7px 9px 0 var(--green)}
  .node--main:hover .main__go{background:var(--green);color:var(--ink);border-color:var(--green)}
  .node--main:hover .go{transform:translate(3px,-3px)}
}
.node--main:active{transform:rotate(-1.2deg) translate(0,2px);box-shadow:2px 2px 0 var(--green)}
.node--main.is-lit .main__ic{transform:scale(1.08)}
.main__ic{transition:transform .4s var(--spring)}

/* WhatsApp node gets the brand green stripe so the main action stands out */
.node--wa{background:#eaf8ef}
.node--wa .node__ic{background:var(--green-ink)}

/* end of the workflow */
.done{position:relative;display:flex;align-items:center;gap:10px;margin:22px 0 0;font:500 .8rem/1 var(--mono);color:var(--green-ink)}
.done__dot{position:absolute;left:-30px;width:14px;height:14px;border-radius:50%;background:var(--green);border:2px solid var(--ink)}

/* footer */
.foot{max-width:1180px;margin:0 auto;padding:18px var(--g) max(24px,env(safe-area-inset-bottom));display:flex;justify-content:space-between;flex-wrap:wrap;gap:6px 16px;font:400 .78rem/1.4 var(--mono);color:var(--muted)}

/* ---------- wide screens: hero left (sticky), workflow right ---------- */
@media (min-width:900px){
  .shell{grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);align-items:start;gap:56px;padding-top:48px}
  .hero{position:sticky;top:40px;text-align:left}
  .stage{margin:0 0 4px 0;width:250px}
  .bio{margin-left:0}
  .title{font-size:clamp(5rem,8.2vw,7.4rem)}
  .flow{margin-top:24px}
}

/* phones */
@media (max-width:420px){
  .status{font-size:.7rem;padding:8px 10px;gap:6px}
  .brand{font-size:.95rem}
  .brand__mark{width:26px;height:26px}
  .main__go{width:44px;height:44px}
}
/* small phones */
@media (max-width:360px){
  :root{--wire-x:18px}
  .flow{padding-left:calc(var(--wire-x) + 18px)}
  .node__port{left:-20px;width:18px}
  .done__dot{left:-26px}
  .node{column-gap:11px;padding:10px 10px 10px 10px}
  .node__ic{width:40px;height:40px}
  .node__go{width:34px;height:34px}
  .status{display:none}
  .main__t{font-size:1.85rem}
  .main__u{font-size:.72rem}
  .node--main{padding:16px 14px 16px 16px}
}

/* respect reduced motion: everything still works, nothing moves */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
  .pulse{display:none}
}