/* ---- preloader (self-contained: shows before town.css/babel finish) ---- */
.bk-pre { position: fixed; inset: 0; z-index: 999; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 22px; background: #FBFAF6; transition: opacity .55s ease, visibility .55s; }
.bk-pre--out { opacity: 0; visibility: hidden; pointer-events: none; }
.bk-pre__logo { width: min(240px, 56vw); animation: bk-pre-squish 1.5s cubic-bezier(.62,.06,.34,1) infinite; transform-origin: 50% 100%; }
.bk-pre--still .bk-pre__logo { animation: none; }
@keyframes bk-pre-squish { 0%, 100% { transform: scale(1, 1); } 28% { transform: scale(1.05, .92); } 58% { transform: scale(.97, 1.06) translateY(-7px); } 80% { transform: scale(1.02, .97); } }
.bk-pre__txt { font-family: "Courgette", "Comic Sans MS", cursive; font-size: 19px; color: #8A6A66; }
.bk-pre__bar { width: 220px; height: 14px; border: 3px solid #B58E8C; border-radius: 999px; background: #fff; overflow: hidden; }
.bk-pre__fill { display: block; height: 100%; width: 0%; background: #F4AB9A; border-radius: 999px; transition: width .25s ease; }
/* variant: bounce — hopping character dots */
.bk-pre__dots { display: flex; gap: 12px; }
.bk-pre__dots i { width: 16px; height: 16px; border-radius: 50%; border: 3px solid #B58E8C; animation: bk-pre-hop 1.1s ease-in-out infinite; }
.bk-pre__dots i:nth-child(1) { background: #BFDCE5; animation-delay: 0s; }
.bk-pre__dots i:nth-child(2) { background: #F7E9C4; animation-delay: .14s; }
.bk-pre__dots i:nth-child(3) { background: #F4C9C2; animation-delay: .28s; }
@keyframes bk-pre-hop { 0%, 100% { transform: translateY(0); } 38% { transform: translateY(-12px); } 62% { transform: translateY(0) scale(1.06, .9); } 75% { transform: scale(1, 1); } }
/* variant: walker — boro on a treadmill street */
.bk-pre__walk { display: flex; flex-direction: column; align-items: center; gap: 0; }
.bk-pre__walker { height: 110px; animation: bk-pre-walkbob .42s ease-in-out infinite; }
@keyframes bk-pre-walkbob { 0%, 100% { transform: translateY(0) rotate(-2deg); } 50% { transform: translateY(-8px) rotate(2deg); } }
.bk-pre__ground { width: 210px; height: 6px; margin-top: 4px; border-radius: 999px; overflow: hidden;
  background: repeating-linear-gradient(90deg, #CBB3B1 0 20px, transparent 20px 40px); animation: bk-pre-ground .5s linear infinite; }
@keyframes bk-pre-ground { from { background-position: 0 0; } to { background-position: -40px 0; } }
/* variant: ramen — steaming bowl */
.bk-pre__bowl { position: relative; width: 150px; height: 120px; }
.bk-pre__bowlbody { position: absolute; bottom: 0; left: 8px; width: 130px; height: 68px; background: #C97F76; border: 4px solid #8A6A66; border-radius: 10px 10px 64px 64px; }
.bk-pre__noodles { position: absolute; bottom: 56px; left: 14px; width: 122px; height: 24px; background: #F7E9C4; border: 3.5px solid #8A6A66; border-radius: 999px; }
.bk-pre__steam { position: absolute; bottom: 90px; width: 10px; height: 26px; border-radius: 999px; background: rgba(138,106,102,.32); animation: bk-pre-steam 1.6s ease-in-out infinite; }
.bk-pre__steam:nth-child(1) { left: 38px; animation-delay: 0s; }
.bk-pre__steam:nth-child(2) { left: 70px; animation-delay: .3s; }
.bk-pre__steam:nth-child(3) { left: 102px; animation-delay: .6s; }
@keyframes bk-pre-steam { 0% { transform: translateY(10px) scaleY(.5); opacity: 0; } 40% { opacity: 1; } 100% { transform: translateY(-24px) scaleY(1.15); opacity: 0; } }
/* variant: stamps — the stamp book filling up */
.bk-pre__stamps { display: flex; gap: 16px; }
.bk-pre__stamps i { width: 54px; height: 54px; display: grid; place-items: center; font-style: normal; font-size: 23px; font-weight: 700; color: #8A6A66; border: 3.5px solid #B58E8C; border-radius: 50%; animation: bk-pre-stamp 2.2s ease infinite both; }
.bk-pre__stamps i:nth-child(1) { background: #BFDCE5; animation-delay: 0s; }
.bk-pre__stamps i:nth-child(2) { background: #F7E9C4; animation-delay: .35s; }
.bk-pre__stamps i:nth-child(3) { background: #F4C9C2; animation-delay: .7s; }
@keyframes bk-pre-stamp { 0%, 6% { transform: scale(1.8) rotate(-16deg); opacity: 0; } 16% { transform: scale(1) rotate(-8deg); opacity: 1; } 78% { transform: scale(1) rotate(-8deg); opacity: 1; } 90%, 100% { transform: scale(1) rotate(-8deg); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .bk-pre * { animation: none !important; } }