/* Bepa Books: the crew (goofy 90s stick figures) and the tabs. Shared by every page. */
/* ---------- the crew: goofy 90s stick figures, all the way down the page ---------- */
/* Movement only, never opacity, same rule as the rest of the page. */
.crew{--cl:#F3EDE2;--cf:#0A1424;--cm:#7BF5B8}
.light .crew,.tint .crew{--cl:#15202D;--cf:#F5EFE4;--cm:#1FA56C}
.tint .crew{--cf:#EFE5D3}
.crew svg,svg.crew{overflow:visible}
.crew .ln{fill:none;stroke:var(--cl);stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.crew .thin{stroke-width:2}
.crew .hd{fill:var(--cf);stroke:var(--cl);stroke-width:3}
.crew .gold{fill:#D4AF37}
.crew .mint{fill:var(--cm)}
.crew .paper{fill:var(--cl)}
.crew .lbl{fill:#F3EDE2}
.crew .box{fill:#17263D;stroke:var(--cl);stroke-width:3;stroke-linejoin:round}
.crew .nt{fill:none;stroke-width:2;stroke-linecap:round}
.crew .s-mint{stroke:var(--cm)}
.crew .s-gold{stroke:#D4AF37}
.crew .band-m{fill:none;stroke:var(--cm);stroke-width:4;stroke-linecap:round}
.crew g{transform-box:view-box}
.cast{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.crew-host{position:relative}

/* boombox kid */
.kid{position:absolute;z-index:3;pointer-events:auto}
.kid .head{transform-origin:60px 45px;animation:groove 1.3s ease-in-out infinite alternate}
.kid .boom{animation:thump .65s ease-in-out infinite}
.kid .spk{transform-box:fill-box;transform-origin:center;animation:pulse .65s ease-in-out infinite}
.kid .note{transform-box:fill-box;transform-origin:center;animation:float 2.6s ease-out infinite}
.kid .note.n2{animation-delay:1.3s}
@keyframes groove{from{transform:rotate(-7deg)}to{transform:rotate(7deg) translateY(1px)}}
@keyframes thump{0%,100%{transform:translateY(0)}50%{transform:translateY(-2px)}}
@keyframes pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.18)}}
@keyframes float{0%{transform:translate(0,8px) scale(0)}20%{transform:translate(-2px,0) scale(1)}80%{transform:translate(6px,-22px) scale(1)}100%{transform:translate(8px,-28px) scale(0)}}

/* hanger, legs kicking */
.hanger{position:absolute;z-index:3;pointer-events:auto}
.hanger .body{transform-origin:44px 6px;animation:sway 2.2s ease-in-out infinite alternate}
.hanger .legA{transform-origin:44px 88px;animation:kick 1.1s ease-in-out infinite alternate}
.hanger .legB{transform-origin:44px 88px;animation:kick 1.1s ease-in-out infinite alternate-reverse}
.hanger:hover .legA,.hanger:hover .legB{animation-duration:.28s}
@keyframes sway{from{transform:rotate(-5deg)}to{transform:rotate(5deg)}}
@keyframes kick{from{transform:rotate(-16deg)}to{transform:rotate(16deg)}}

/* floppy disk flyer */
.flyer{position:absolute;pointer-events:auto}
.flyer .ride{animation:hover 3.4s ease-in-out infinite alternate}
.flyer .wave{transform-origin:75px 48px;animation:wave .9s ease-in-out infinite alternate}
.flyer .bubble{transform-origin:46px 22px;transform:scale(0);transition:transform .25s cubic-bezier(.3,1.6,.5,1)}
.flyer:hover .bubble{transform:scale(1)}
.flyer:hover .wave{animation-duration:.25s}
@keyframes hover{from{transform:translateY(0) rotate(-2deg)}to{transform:translateY(-12px) rotate(3deg)}}
@keyframes wave{from{transform:rotate(-12deg)}to{transform:rotate(18deg)}}

/* rollerblader with a receipt as long as January */
.runner{position:absolute;left:0}
.runner .bod{animation:stride .5s ease-in-out infinite alternate}
.runner .legA{transform-origin:72px 74px;animation:skate .5s ease-in-out infinite alternate}
.runner .legB{transform-origin:72px 74px;animation:skate .5s ease-in-out infinite alternate-reverse}
.runner .rcpt{transform-origin:48px 36px;animation:flutter .7s ease-in-out infinite alternate}
@keyframes roll{from{transform:translateX(calc(100vw + 40px))}to{transform:translateX(-240px)}}
@keyframes lane{from{transform:translateX(100vw)}to{transform:translateX(-180px)}}
@keyframes stride{from{transform:translateY(0)}to{transform:translateY(-3px)}}
@keyframes skate{from{transform:rotate(-14deg)}to{transform:rotate(12deg)}}
@keyframes flutter{from{transform:skewY(-3deg) scaleY(.92)}to{transform:skewY(3deg) scaleY(1.06)}}

/* Memphis squiggles, the 90s wallpaper */
.squig{position:absolute;width:40px;animation:drift 9s ease-in-out infinite alternate}
.squig .ln{stroke-width:2.5}
@keyframes drift{from{transform:translate(0,0) rotate(0)}to{transform:translate(10px,-14px) rotate(24deg)}}


/* cream-background version for a figure that sits on a dark block but shows on cream */
.crew.on-light{--cl:#15202D;--cf:#F5EFE4;--cm:#1FA56C}

/* the pointer: hand on hip, jabbing a finger at the thing that matters */
.pointer{position:absolute;z-index:3;pointer-events:auto}
.pointer .aim{transform-origin:50px 54px;animation:jab .8s ease-in-out infinite alternate}
.pointer .legB{transform-origin:50px 88px;animation:tap .45s ease-in-out infinite alternate}
.pointer .spark{transform-box:fill-box;transform-origin:center;animation:pulse .8s ease-in-out infinite}
.pointer:hover .aim{animation-duration:.25s}
.pointer.flip{transform:scaleX(-1)}
@keyframes jab{from{transform:rotate(calc(var(--aim,0deg) - 3deg))}to{transform:rotate(calc(var(--aim,0deg) + 5deg)) translateX(3px)}}
@keyframes tap{from{transform:rotate(0)}to{transform:rotate(-9deg)}}

/* ---------- tabs: pager keys at the top of every page ---------- */
.site-top{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:18px 24px}
.tabs{display:flex;flex-wrap:wrap;gap:10px;margin:0;padding:0;list-style:none}
.key{position:relative;display:inline-flex;align-items:center;gap:8px;font-family:var(--mono,"SF Mono",ui-monospace,Menlo,Consolas,monospace);font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;text-decoration:none;color:#F3EDE2;padding:11px 15px 10px;border-radius:12px;background:linear-gradient(180deg,#24374F,#15243A);box-shadow:inset 0 1px 0 rgba(255,255,255,.12),0 4px 0 #08111D,0 10px 18px -10px rgba(0,0,0,.7);transition:transform .15s ease,box-shadow .15s ease,color .15s ease;white-space:nowrap}
.key:hover{color:#7BF5B8;transform:translateY(3px);box-shadow:inset 0 1px 0 rgba(255,255,255,.12),0 1px 0 #08111D,0 4px 10px -8px rgba(0,0,0,.7)}
.key:focus-visible{outline:2px solid #7BF5B8;outline-offset:3px}
.key[aria-current=page]{color:#7BF5B8}
.key[aria-current=page]::before{content:"";width:7px;height:7px;border-radius:50%;background:#7BF5B8;box-shadow:0 0 8px rgba(123,245,184,.7)}
.key.go{background:linear-gradient(180deg,#E2C47E,#C9A24A);color:#07101C;box-shadow:inset 0 1px 0 rgba(255,255,255,.4),0 4px 0 #7A5E20,0 10px 18px -10px rgba(0,0,0,.7)}
.key.go:hover{color:#07101C;box-shadow:inset 0 1px 0 rgba(255,255,255,.4),0 1px 0 #7A5E20,0 4px 10px -8px rgba(0,0,0,.7)}
@media (max-width:640px){
  .site-top.site-top{flex-direction:column;align-items:flex-start}
  .tabs{gap:8px}
  .key{font-size:11px;padding:10px 12px 9px;letter-spacing:.1em}
}

/* ---------- tabs again, big, in every footer ---------- */
.foot-tabs{margin:34px auto 26px;max-width:1000px;text-align:center}
.foot-tabs .ft-head{display:inline-block;font-family:var(--mono,"SF Mono",ui-monospace,Menlo,Consolas,monospace);font-size:12px;font-weight:700;letter-spacing:.3em;text-transform:uppercase;color:#7BF5B8;text-shadow:0 0 8px rgba(123,245,184,.55);background:#04120C;border:1px solid rgba(123,245,184,.3);border-radius:8px;padding:6px 12px;margin:0 0 18px}
.foot-tabs .tabs{justify-content:center;gap:12px}
.foot-tabs .key{font-size:14px;padding:15px 20px 14px}
@media (max-width:640px){.foot-tabs .key{font-size:12px;padding:13px 15px 12px}}

/* the kid sitting on the little pager icon in the footer */
.icon-host{position:relative;width:40px;margin:44px auto 16px;padding-top:56px}
.icon-host .pager-icon,.icon-host .mark{margin:0;display:block}
.icon-host .kid{left:50%;bottom:36px;width:68px;margin-left:-34px}

@media (prefers-reduced-motion:reduce){
  .crew *,.crew,.runner{animation:none!important}
  .key{transition:none}
}

/* ---------- smoothness ---------- */
/* paused while off screen (crew.js), moving figures get their own layer */
.crew-off,.crew-off *{animation-play-state:paused!important}
.runner{will-change:transform}
/* a quick cross-fade from page to page instead of a hard flash */
@view-transition{navigation:auto}
::view-transition-old(root),::view-transition-new(root){animation-duration:.2s}
@media (prefers-reduced-motion:reduce){::view-transition-old(root),::view-transition-new(root){animation:none}}