/* Replica layer on top of toli.css.
   Rule: bots (Scout, Flip, Echo) are Toli talking to you → UI, psst, footer, scrubber, 404.
         ink creatures (Scrib, Ravel, Hush, Flick, Tumble, Mote) are the stories → hero visitor, steps, character studies. */
.bot{display:block}
.bot svg{width:100%;height:auto;display:block;overflow:visible}

/* ---------- hero: one random story visitor per visit ---------- */
.visitor{position:absolute;right:clamp(16px,6vw,90px);top:14vh;width:clamp(170px,23vw,320px);z-index:1;border:0;background:none;padding:0;cursor:pointer;display:grid;justify-items:center;gap:6px}
.visitor img{width:100%;height:auto;display:block;pointer-events:none}
.visitor .vcap{font:400 20px/1 var(--toli);opacity:0;transition:opacity .4s .2s}
.visitor .vcap span{display:block;font:700 10px var(--m);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-50);margin-top:6px}
.visitor.here .vcap{opacity:1}
.visitor.gone{opacity:0;pointer-events:none;transition:opacity .5s}
.visitor:focus-visible{outline:3px solid var(--red);outline-offset:6px;border-radius:12px}
/* signature moves */
.v-ravel.in img{animation:ravelIn 1.6s cubic-bezier(.3,1.4,.5,1) both}
@keyframes ravelIn{0%{transform:translateX(60vw) scale(.4,1.6) rotate(-30deg)}55%{transform:translateX(-10px) scale(1.25,.8) rotate(8deg)}75%{transform:scale(.9,1.12) rotate(-6deg)}100%{transform:none}}
.v-ravel.poke img{animation:unravel .9s ease-in-out}
@keyframes unravel{30%{transform:scaleX(1.35) rotate(10deg)}60%{transform:scaleX(.75) rotate(-14deg)}}
.v-tumble.in img{animation:tumbleIn 1.8s cubic-bezier(.25,.9,.35,1) both}
@keyframes tumbleIn{0%{transform:translateX(70vw) rotate(900deg) scale(.55)}70%{transform:translateX(0) rotate(0) scale(.55)}82%{transform:scale(1.15) translateY(-30px)}100%{transform:none}}
.v-tumble.poke img{animation:startle .6s cubic-bezier(.3,1.8,.5,1)}
@keyframes startle{30%{transform:translateY(-40px) scale(.9,1.15)}}
.v-flick.in img{animation:flickIn 1.3s cubic-bezier(.5,0,.3,1) both}
@keyframes flickIn{0%{transform:translate(70vw,-30vh) rotate(25deg)}60%{transform:translate(0,-60px) rotate(-10deg)}80%{transform:translate(0,8px) scale(1.1,.88)}100%{transform:none}}
.v-flick.poke img{animation:leap .7s cubic-bezier(.3,1.6,.5,1)}
@keyframes leap{40%{transform:translateY(-90px) rotate(-14deg)}}
.v-hush.in img{animation:hushIn 1.4s cubic-bezier(.3,1.3,.5,1) both}
@keyframes hushIn{0%{transform:translateY(40vh) scale(.6);opacity:0}60%{transform:translateY(-20px)}100%{transform:none;opacity:1}}
.v-hush.poke img{animation:shy .8s ease-in-out}
@keyframes shy{40%{transform:scale(.8) translateY(30px);filter:brightness(.6)}}
.v-scrib.in img{animation:scribIn 1.5s steps(8) both}
@keyframes scribIn{0%{transform:translateX(50vw)}100%{transform:none}}
.v-scrib.poke img{animation:peck .5s ease-in-out 2}
@keyframes peck{50%{transform:rotate(-12deg) translateY(10px)}}
/* Hush licks a line under "Worlds" */
.lick{position:absolute;left:0;bottom:-.06em;height:.09em;width:100%;background:var(--red);transform:scaleX(0) skewX(var(--skew));transform-origin:left;border-radius:99px}
.lick.on{animation:lickIn .7s cubic-bezier(.7,0,.2,1) forwards}
@keyframes lickIn{to{transform:scaleX(1) skewX(var(--skew))}}
/* Scrib drops a note */
.note-drop{position:absolute;right:calc(clamp(16px,6vw,90px) + 40px);top:calc(14vh + 210px);background:#fff;border:2px solid var(--ink);padding:10px 14px;font:400 20px var(--toli);rotate:-8deg;box-shadow:5px 6px 0 var(--red);opacity:0;z-index:2;pointer-events:none}
.note-drop.on{animation:noteFall .9s cubic-bezier(.3,1.5,.5,1) forwards}
@keyframes noteFall{0%{opacity:0;transform:translateY(-80px) rotate(20deg)}100%{opacity:1;transform:none}}
@media(max-width:760px){.visitor{top:auto;bottom:62%;width:120px;right:12px}.visitor .vcap{display:none}.note-drop{display:none}}

/* ---------- scrubber: O! Scout on a skateboard (Skam!) ---------- */
.scrub .rider{width:64px;bottom:2px;transition:left .08s linear}
.scrub .rider .bot{width:52px;margin:0 auto -6px}
.scrub .rider .deck{display:block;width:64px;height:auto}
.scrub .track{height:96px}
.scrub .rider.rolling .deck{animation:deckJit .25s steps(2) infinite}
@keyframes deckJit{50%{transform:translateY(-1px) rotate(-2deg)}}

/* ---------- psst peeks use bots ---------- */
.peek .bot{width:100%}

/* ---------- club card companions ---------- */
.club .pick-help{color:rgb(255 255 255/.75);margin:22px 0 12px;font-size:16px}
.picks{display:flex;flex-wrap:wrap;gap:10px}
.picks button{all:unset;cursor:pointer;display:inline-flex;align-items:center;gap:10px;padding:8px 14px 8px 8px;border:1.5px solid rgb(255 255 255/.25);border-radius:10px;font-weight:800;color:#fff;transition:border-color .15s,background .15s}
.picks button img{width:34px;height:34px;object-fit:contain}
.picks button[aria-pressed=true]{background:#fff;color:var(--ink);border-color:#fff}
.picks button:hover{border-color:var(--red)}
.picks button:focus-visible{outline:3px solid var(--red);outline-offset:3px}
.card .companion{position:absolute;right:3%;top:4%;width:52%;z-index:1;pointer-events:none}
.card .companion img{width:100%;height:auto;display:block}
.card .companion.ink{width:46%;top:2%}
.card .companion.ink img{filter:drop-shadow(0 0 1px rgb(255 255 255/.35)) drop-shadow(0 12px 24px #000a)}
.card .companion.swap{animation:jit .3s steps(2) 1}
.pick-msg{margin-top:12px;color:rgb(255 255 255/.75);font-size:15px}

/* ---------- footer: Echo plays frisbee ---------- */
.yard .bot{width:clamp(220px,28vw,380px);position:relative;z-index:2;transform-origin:bottom center}
.yard .bot.hop{animation:hop .7s cubic-bezier(.3,1.6,.5,1)}
.secrets{display:none}
.secrets.on{display:inline}

/* ---------- character studies tile ---------- */
.studies{display:grid;grid-template-columns:repeat(3,1fr);gap:4px;padding:10px;height:100%;background:#fff}
.studies img{width:100%;height:100%;object-fit:contain}

/* ---------- easter egg: the cast drawer ---------- */
.bang-egg{cursor:pointer}
.cast{border:0;padding:0;margin:auto;width:min(1100px,94vw);max-height:90vh;border-radius:20px;background:var(--bg);color:var(--ink);box-shadow:0 40px 120px #000a}
.cast::backdrop{background:rgb(18 18 18/.75);backdrop-filter:blur(4px)}
.cast[open]{animation:castIn .5s cubic-bezier(.3,1.4,.5,1)}
@keyframes castIn{from{transform:translateY(60px) scale(.94);opacity:0}}
.cast .in{padding:clamp(20px,4vw,48px);display:grid;gap:28px;overflow:auto;max-height:90vh}
.cast header{display:flex;justify-content:space-between;align-items:start;gap:16px}
.cast h2{font-size:clamp(40px,5vw,76px)}
.cast h2 span{color:var(--red)}
.cast .x{all:unset;cursor:pointer;width:44px;height:44px;border-radius:50%;border:2px solid var(--ink);display:grid;place-items:center;font:400 22px var(--toli);flex:none}
.cast .x:hover{background:var(--red);border-color:var(--red);color:#fff}
.cast h3{font-size:clamp(26px,2.6vw,38px);display:flex;gap:12px;align-items:baseline;flex-wrap:wrap}
.cast h3 small{font:700 11px var(--m);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-50)}
.fam-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,200px),1fr));gap:14px}
.who{all:unset;cursor:pointer;display:grid;gap:8px;align-content:start;border:1.5px solid var(--ink-12);border-radius:14px;padding:14px;transition:border-color .2s,transform .2s}
.who:hover{border-color:var(--red);transform:translateY(-3px)}
.who:focus-visible{outline:3px solid var(--red);outline-offset:3px}
.who .art{aspect-ratio:1;display:grid;place-items:center;overflow:hidden}
.who .art img,.who .art .bot{max-width:100%;max-height:100%;width:100%;object-fit:contain}
.who b{font:400 26px/1 var(--toli)}
.who p{font-size:14px;color:var(--ink-75)}
.who.wiggle .art{animation:jit .3s steps(2) 2}
.who .wip{font:700 10px var(--m);letter-spacing:.08em;text-transform:uppercase;color:var(--red)}

/* ---------- Studio replica: ink creatures on the steps ---------- */
.how .row .comp{width:84px;height:84px;object-fit:contain;margin-bottom:4px;transition:transform .3s}
.how .row:hover .comp{transform:rotate(-6deg) scale(1.08)}
.how .row .comp.bot{width:84px}

@media (prefers-reduced-motion:reduce){.visitor img,.note-drop,.lick{animation:none!important}.lick{transform:scaleX(1) skewX(var(--skew))}.note-drop{opacity:1}}
.bang-egg{display:inline-block}

/* visitor stands on the headline, right after "in." */
.hl{position:relative;display:block}
.vslot{display:inline-block!important;position:relative;width:1.7em;height:.8em;vertical-align:baseline}
.vslot .visitor{position:absolute;left:.12em;right:auto;top:auto;bottom:-.04em;width:1.75em;font-size:inherit}
.vslot .visitor .vcap{position:absolute;left:100%;bottom:.2em;width:max-content;text-align:left;font-size:20px;line-height:1.1;margin-left:.5rem;letter-spacing:0}
.hl .note-drop{top:-6%;bottom:auto;right:auto;left:min(70%,calc(5.6em + 4vw))}
@media(max-width:700px){.vslot .visitor .vcap{display:none}.hl .note-drop{display:none}}
/* skater: smooth glide between frames, kickflip spin, idle wiggle */
#rider{transition:left .12s linear!important;will-change:left}
#rider.kickflip{animation:kickflip .7s cubic-bezier(.3,.1,.3,1)}
@keyframes kickflip{0%{rotate:0deg;translate:0 0}35%{translate:0 -22px}60%{rotate:-360deg;translate:0 -14px}100%{rotate:-360deg;translate:0 0}}
#rider[data-o-state=idle]:not(.kickflip){animation:idleWiggle 2.4s ease-in-out infinite;transform-origin:50% 95%}
@keyframes idleWiggle{0%,100%{rotate:0deg}25%{rotate:-3deg;translate:0 -1px}50%{rotate:0deg}75%{rotate:2.5deg}}
footer .contact{font-family:var(--toli);font-weight:400;font-size:clamp(24px,2.4vw,34px)}
@media (prefers-reduced-motion:reduce){#rider{animation:none!important;transition:none!important}}

/* keep the mute dot from covering the scrubber arrows */
.scrub .nb{position:relative;z-index:41}

/* Scrib's note sits by Scrib on the headline */
.vslot .note-drop{position:absolute;left:calc(-1 * clamp(36px,4.5vw,72px));top:calc(-1 * clamp(14px,1.8vw,30px));rotate:-6deg;right:auto;bottom:auto;font-size:20px;line-height:1.1;white-space:nowrap;z-index:3}
@media(max-width:700px){.vslot .note-drop{display:block;font-size:14px;left:auto;right:-4px;top:-2.4em}}
/* Club form with email */
.club-form{display:grid;grid-template-columns:1fr 1fr auto;gap:10px;max-width:640px;align-items:end}
.club-form .fld{display:grid;gap:6px;min-width:0}
.club-form .fld .m{color:rgb(255 255 255/.6)}
.club-form input{width:100%;height:48px;padding:0 16px;font:inherit;border:2px solid rgb(255 255 255/.85);border-radius:12px;background:transparent;color:#fff}
.club-form input:focus{outline:none;border-color:var(--red)}
.club-form button{height:48px;padding:0 22px;font:700 12px var(--m);text-transform:uppercase;border:0;border-radius:12px;background:var(--red);color:#fff;cursor:pointer;white-space:nowrap}
.club-form button:disabled{opacity:.6;cursor:progress}
.club-form .form-note{grid-column:1/-1;font-size:13px;color:rgb(255 255 255/.55);margin:0}
.club-msg{margin-top:10px;font-weight:700}
.club-msg:empty{display:none}
.club .pick-help{margin-top:16px}
/* error glitch: same language as the hero logo + the psst bubbles.
   Heading and message split into red/cyan with a small jump (like "psst"); the card jitters with the logo's RGB split. Background and form stay still. */
.club.club-glitch h2,.club.club-glitch .club-msg{animation:clubTxt .36s steps(1) 1}
@keyframes clubTxt{0%{text-shadow:-5px 0 var(--cyan),5px 0 var(--red);transform:translate(-6px,1px) skewX(-10deg)}
25%{text-shadow:5px 0 var(--cyan),-5px 0 var(--red);transform:translate(5px,-2px);clip-path:inset(0 0 45% 0)}
50%{text-shadow:none;transform:translate(-2px,0) skewX(6deg);clip-path:inset(40% 0 0 0)}
75%{text-shadow:-3px 0 var(--red),3px 0 var(--cyan);transform:translate(4px,0);clip-path:none}
100%{text-shadow:none;transform:none}}
.club.club-glitch .card{animation:cardJit .28s steps(2) 1;filter:drop-shadow(-8px 0 var(--cyan)) drop-shadow(8px 0 rgb(255 0 0/.8))}
.club.club-glitch .picks button img{animation:pickG .3s steps(1) 1;filter:drop-shadow(-4px 0 var(--cyan)) drop-shadow(4px 0 rgb(255 0 0/.85))}
.club.club-glitch .picks button:nth-child(2n) img{animation-delay:.05s}
@keyframes pickG{0%{translate:-4px 0}33%{translate:3px -1px}66%{translate:-1px 0}100%{translate:0 0}}
.club .c-bar{z-index:4;pointer-events:none}
@media (prefers-reduced-motion:reduce){.club.club-glitch h2,.club.club-glitch .club-msg,.club.club-glitch .card,.club.club-glitch .picks button img{animation:none;filter:none}.club .c-bar{display:none}}
.club-msg.is-ok{color:#fff}.club-msg.is-ok::before{content:"↯ ";color:var(--red)}
.club-msg.is-err{color:#ff8a80}
@media(max-width:620px){.club-form{grid-template-columns:1fr}}
@keyframes cardJit{25%{translate:-8px 2px}50%{translate:6px -2px}75%{translate:-3px 0}}