/* MapToNap brand motion · 2026-10-17 (see mtn-brand.js)
   One small element carries the brand everywhere: the bead, a black core with a thin white gap and
   a red ring, taken from the logo. Motion follows the logo too: things grow out from a centre on
   rounded arms, masses pop in one after another, and openings are circles. */
:root{--mtn-red-b:#e33a32;--mtn-ink-b:#141414;--mtn-pop:cubic-bezier(.34,1.56,.64,1);--mtn-out:cubic-bezier(.2,.8,.2,1)}

/* ---------- the mark ---------- */
.mtn-mark{display:block;overflow:visible}
.mtn-mark .mk-red{fill:var(--mtn-red-b)}
.mtn-mark .mk-arm{fill:none;stroke:var(--mtn-red-b);stroke-width:9;stroke-linecap:round}
.mtn-mark .mk-dots circle{fill:var(--mtn-ink-b);stroke:#fff;stroke-width:2}
.mtn-mark .mk-core{fill:var(--mtn-ink-b)}
.mtn-mark .mk-hub,.mtn-mark .mk-knob,.mtn-mark .mk-dot,.mtn-mark .mk-core{transform-box:fill-box;transform-origin:center}
/* on a dark ground the white gap becomes the ground colour */
.mtn-mark-host .mtn-mark .mk-dots circle,.lb-brand .mtn-mark .mk-dots circle{stroke:var(--mk-gap,#fff)}
.lb-brand{--mk-gap:#0b0c10}
.lb-brand .mtn-mark .mk-dots circle,.lb-brand .mtn-mark .mk-core{fill:#f3f1ec}
.lb-loading{--mk-gap:#15171c}
.lb-loading .mtn-mark .mk-dots circle,.lb-loading .mtn-mark .mk-core{fill:#f3f1ec}

/* loop: the hub swells, arms reach out, knobs and masses pop one by one, hold, then gather back */
.mk-loop .mk-hub{animation:mkHub 2s var(--mtn-out) infinite}
.mk-loop .mk-arm{stroke-dasharray:1;animation:mkArm 2s var(--mtn-out) infinite;animation-delay:calc(var(--i) * 40ms)}
.mk-loop .mk-knob{animation:mkKnob 2s var(--mtn-pop) infinite;animation-delay:calc(var(--i) * 40ms)}
.mk-loop .mk-dot{animation:mkDot 2s var(--mtn-pop) infinite;animation-delay:calc(var(--i) * 55ms)}
.mk-loop .mk-core{animation:mkCore 2s var(--mtn-pop) infinite}
@keyframes mkHub{0%{transform:scale(0)}16%{transform:scale(1.06)}22%,82%{transform:scale(1)}96%,100%{transform:scale(0)}}
@keyframes mkArm{0%,10%{stroke-dashoffset:1}34%,82%{stroke-dashoffset:0}96%,100%{stroke-dashoffset:1}}
@keyframes mkKnob{0%,28%{transform:scale(0)}38%{transform:scale(1.25)}46%,82%{transform:scale(1)}94%,100%{transform:scale(0)}}
@keyframes mkDot{0%,34%{transform:scale(0)}48%{transform:scale(1.12)}56%,82%{transform:scale(1)}95%,100%{transform:scale(0)}}
@keyframes mkCore{0%,4%{transform:scale(0)}16%{transform:scale(1.2)}24%,84%{transform:scale(1)}98%,100%{transform:scale(0)}}
/* once: the same assembly, ending on the full mark */
.mk-once .mk-hub{animation:mkHubO .9s var(--mtn-out) both}
.mk-once .mk-arm{stroke-dasharray:1;animation:mkArmO .9s var(--mtn-out) both;animation-delay:calc(120ms + var(--i) * 40ms)}
.mk-once .mk-knob{animation:mkPopO .7s var(--mtn-pop) both;animation-delay:calc(360ms + var(--i) * 40ms)}
.mk-once .mk-dot{animation:mkPopO .7s var(--mtn-pop) both;animation-delay:calc(420ms + var(--i) * 60ms)}
.mk-once .mk-core{animation:mkPopO .6s var(--mtn-pop) both}
@keyframes mkHubO{from{transform:scale(0)}to{transform:scale(1)}}
@keyframes mkArmO{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
@keyframes mkPopO{from{transform:scale(0)}to{transform:scale(1)}}

/* spinners that became the mark */
.mtn-mark-host{border:0!important;border-radius:0!important;animation:none!important;background:none!important;display:inline-flex!important;align-items:center;justify-content:center;width:auto!important;height:auto!important}
.mtn-mark-brand{display:inline-flex;flex:none;vertical-align:middle}
.lb-brand .mtn-mark-brand{margin-right:1px}

/* ---------- the pin a press leaves ---------- */
.mtn-pin{position:fixed;left:0;top:0;width:0;height:0;pointer-events:none;z-index:2147483000}
.mtn-pin:before,.mtn-pin:after{content:"";position:absolute;left:0;top:0;border-radius:50%;transform:translate(-50%,-50%)}
.mtn-pin:before{width:9px;height:9px;background:var(--mtn-ink-b);box-shadow:0 0 0 2px #fff;animation:mtnPinCore .5s var(--mtn-out) forwards}
.mtn-pin:after{width:34px;height:34px;border:2px solid var(--mtn-red-b);animation:mtnPinRing .6s var(--mtn-out) forwards}
.mtn-pin.big:before{width:12px;height:12px}
.mtn-pin.big:after{width:64px;height:64px;border-width:2.5px}
@keyframes mtnPinCore{0%{transform:translate(-50%,-50%) scale(.2)}35%{transform:translate(-50%,-50%) scale(1.15)}100%{transform:translate(-50%,-50%) scale(0);opacity:.0}}
@keyframes mtnPinRing{0%{transform:translate(-50%,-50%) scale(.15);opacity:1}100%{transform:translate(-50%,-50%) scale(1);opacity:0}}

/* ---------- circles that open ---------- */
@keyframes mtnIris{from{clip-path:circle(0 at var(--ix,50%) var(--iy,50%))}to{clip-path:circle(150% at var(--ix,50%) var(--iy,50%))}}
.mtn-commerce,.lb-gatebox,.mtn-onboard,.mtn-acc-modal,.mtn-guide-pop{animation:mtnIris .6s var(--mtn-out) both}
.mtn-iris{animation:mtnIrisMap .9s var(--mtn-out) both}
@keyframes mtnIrisMap{from{clip-path:circle(0 at 50% 50%)}to{clip-path:circle(75% at 50% 50%)}}

/* ---------- the bead: focus, toasts, selection ---------- */
:where(button,a,input,select,textarea,summary,[tabindex]):focus-visible{outline:none!important;box-shadow:0 0 0 2px #fff,0 0 0 4px var(--mtn-red-b)!important;border-radius:inherit}
/* toasts: one white capsule in the middle of the screen, led by the mark, on every page */
:root .toast,:root .lb-toast{position:fixed!important;left:50%!important;top:50%!important;right:auto!important;bottom:auto!important;transform:translate(-50%,-50%) scale(.92)!important;margin:0!important;background:#fff!important;color:var(--mtn-ink-b)!important;border:1px solid #e6e3dc!important;border-radius:999px!important;padding:11px 20px 11px 13px!important;font:600 13px/1.35 Inter,system-ui,-apple-system,"Segoe UI",sans-serif!important;letter-spacing:0!important;text-transform:none!important;text-align:left!important;white-space:normal!important;max-width:min(480px,calc(100vw - 32px))!important;box-shadow:0 22px 60px -14px rgba(20,20,20,.32),0 2px 8px rgba(20,20,20,.07)!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important;transition:opacity .2s,transform .42s var(--mtn-pop)!important;z-index:2147482000!important}
:root .toast.on,:root .toast.show,:root .lb-toast:not([hidden]){transform:translate(-50%,-50%) scale(1)!important}
:root .toast:before,:root .lb-toast:before{content:"";display:inline-block;flex:none;width:22px;height:22px;margin-right:11px;vertical-align:-6px;background:url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%272 2 96 96%27%3E%3Cg fill=%27%23e33a32%27%3E%3Ccircle cx=%2750%27 cy=%2750%27 r=%2723%27/%3E%3Ccircle cx=%2780.8%27 cy=%2769.8%27 r=%275.4%27/%3E%3Ccircle cx=%2738%27 cy=%2788.4%27 r=%275.4%27/%3E%3Ccircle cx=%2715.3%27 cy=%2757.3%27 r=%275.4%27/%3E%3Ccircle cx=%2737.8%27 cy=%2713.9%27 r=%275.4%27/%3E%3Ccircle cx=%2779.1%27 cy=%2729.8%27 r=%275.4%27/%3E%3C/g%3E%3Cg stroke=%27%23e33a32%27 stroke-width=%279%27 stroke-linecap=%27round%27%3E%3Cpath d=%27M50 50L80.8 69.8%27/%3E%3Cpath d=%27M50 50L38 88.4%27/%3E%3Cpath d=%27M50 50L15.3 57.3%27/%3E%3Cpath d=%27M50 50L37.8 13.9%27/%3E%3Cpath d=%27M50 50L79.1 29.8%27/%3E%3C/g%3E%3Cg fill=%27%23141414%27 stroke=%27%23fff%27 stroke-width=%272%27%3E%3Ccircle cx=%2759.4%27 cy=%2723.8%27 r=%2712.4%27/%3E%3Ccircle cx=%2777.8%27 cy=%2750.2%27 r=%2712.3%27/%3E%3Ccircle cx=%2760.3%27 cy=%2781.1%27 r=%2716.6%27/%3E%3Ccircle cx=%2726.6%27 cy=%2773.3%27 r=%2712.2%27/%3E%3Ccircle cx=%2726.5%27 cy=%2737.4%27 r=%2713.3%27/%3E%3C/g%3E%3Ccircle cx=%2750%27 cy=%2750%27 r=%277.8%27 fill=%27%23141414%27/%3E%3C/svg%3E") center/contain no-repeat;transform:scale(.3) rotate(-120deg);transition:transform .55s var(--mtn-pop) .06s}
:root .toast.on:before,:root .toast.show:before,:root .lb-toast:not([hidden]):before{transform:none}
::selection{background:var(--mtn-red-b);color:#fff}

/* ---------- arms with a knob: active tabs ---------- */
.lb-tabs button:before{content:"";position:absolute;right:9px;bottom:-4px;width:8px;height:8px;border-radius:50%;background:var(--red,#e5392f);box-shadow:0 0 0 2px var(--bg,#0b0c10);transform:scale(0);transition:transform .35s var(--mtn-pop) .12s}
.lb-tabs button.on:before{transform:scale(1)}
.lb-tabs button:after{transform-origin:left center!important}

/* ---------- the sidebar: glyphs answer the pointer like the mark ---------- */
.dk-mode .dk-glyph svg{transition:transform .45s var(--mtn-pop)}
.dk-mode:hover .dk-glyph svg{transform:rotate(-14deg) scale(1.08)}
.dk-mode.on .dk-glyph{position:relative}
.dk-mode.on .dk-glyph:after{content:"";position:absolute;right:-3px;top:-3px;width:9px;height:9px;border-radius:50%;background:var(--mtn-ink-b);box-shadow:0 0 0 2px #fff,0 0 0 3.5px var(--mtn-red-b);animation:mkPopO .45s var(--mtn-pop) both}
.dk-tile .ico svg,.dk-tile>svg{transition:transform .4s var(--mtn-pop)}
.dk-tile:hover .ico svg,.dk-tile:hover>svg{transform:translateY(-2px) scale(1.08)}

/* ---------- maps: a sighting cursor ---------- */
.lb-tap{cursor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28' viewBox='0 0 28 28'%3E%3Ccircle cx='14' cy='14' r='10' fill='none' stroke='%23e33a32' stroke-width='2'/%3E%3Ccircle cx='14' cy='14' r='4.6' fill='%23141414' stroke='%23fff' stroke-width='2'/%3E%3C/svg%3E") 14 14,crosshair}

@media (prefers-reduced-motion:reduce){
  .mk-loop *,.mk-once *,.mtn-iris,.mtn-commerce,.lb-gatebox,.mtn-onboard{animation:none!important}
  :root .toast,:root .lb-toast,:root .toast:before,:root .lb-toast:before{transition:opacity .2s!important}
  .mk-loop{animation:mkFade 1.6s ease-in-out infinite}
  @keyframes mkFade{50%{opacity:.45}}
}