/* Boba mascots. Loaded only when MASCOTS = True (config.py). Remove this file, boba.js and static/boba/ to take the mascots out for good. */
.boba{display:block;height:var(--bh,96px);width:auto;max-width:none;pointer-events:none;user-select:none;-webkit-user-drag:none}
picture.boba img{height:var(--bh,96px);width:auto;display:block}
/* a character peeking over the top edge of a card (the card hides its lower part) */
.peek-host{position:relative}
.peek-host>a,.peek-host>div:not(.boba-wrap),.peek-host>figure{position:relative;z-index:1}
.boba-peek{position:absolute;right:1.1rem;bottom:calc(100% - 22px);z-index:0;transform-origin:50% 100%;animation:boba-bob 3.6s ease-in-out infinite}
.boba-peek.left{right:auto;left:1.1rem}
.peek-host:nth-child(2n) .boba-peek{animation-delay:-1.2s}
.peek-host:nth-child(3n) .boba-peek{animation-delay:-2.3s}
@keyframes boba-bob{0%,100%{transform:translateY(0) rotate(0)}45%{transform:translateY(-5px) rotate(-2deg)}75%{transform:translateY(-2px) rotate(2deg)}}
.has-boba{row-gap:4rem;padding-top:3.8rem}
/* the logo */
.boba-logo{height:2.6rem;width:auto}
/* a row perched on the top edge of the footer */
.foot{position:relative}
.boba-row{position:absolute;right:clamp(.8rem,4vw,3rem);bottom:calc(100% - 3px);display:flex;gap:.3rem;align-items:flex-end;pointer-events:none}
.boba-row .boba{height:var(--bh,56px);animation:boba-bob 4.4s ease-in-out infinite}
.boba-row .boba:nth-child(2){animation-delay:-1.1s}.boba-row .boba:nth-child(3){animation-delay:-2.2s}.boba-row .boba:nth-child(4){animation-delay:-3.3s}
.boba-toggle{background:none;border:0;padding:0;margin:0 0 0 .6rem;font:inherit;text-decoration:underline;color:inherit;cursor:pointer}
/* one character that scurries across the bottom of the screen now and then */
.boba-run{position:fixed;left:-160px;bottom:6px;z-index:30;pointer-events:none;animation:boba-run 12s linear forwards}
.boba-run img{height:84px;width:auto;display:block;animation:boba-hop .45s ease-in-out infinite alternate}
@keyframes boba-run{to{left:calc(100vw + 160px)}}
@keyframes boba-hop{from{transform:translateY(0)}to{transform:translateY(-14px)}}
/* a celebration after a test or tracker has been made */
.boba-celebrate{display:flex;align-items:flex-end;gap:.8rem;margin:.6rem 0}
.boba-celebrate .say{background:#fff;border:2px solid var(--ink);border-radius:14px;padding:.4rem .8rem;font-weight:700;position:relative;margin-bottom:1.2rem}
.boba-celebrate .say::before{content:"";position:absolute;left:-9px;bottom:10px;width:14px;height:14px;background:#fff;border-left:2px solid var(--ink);border-bottom:2px solid var(--ink);transform:rotate(45deg)}
.boba-404{margin:1rem 0}
/* switched off by the visitor, by reduced-motion settings, and in print */
.boba-off .boba,.boba-off .boba-row,.boba-off .boba-run,.boba-off .boba-celebrate{display:none!important}
@media (prefers-reduced-motion:reduce){.boba,.boba-peek,.boba-row .boba,.boba-run,.boba-run img{animation:none!important}.boba-run{display:none}}
@media print{.boba,.boba-row,.boba-run,.boba-celebrate,.boba-toggle{display:none!important}}
@media (max-width:34rem){.boba-row .boba:nth-child(n+3){display:none}.boba-peek{--bh:56px!important}}