/* BlueLabs brain — one continuous line (heart → tail → bubble → heart), line = 42.4 units (2px at top-bar size), round caps and joins.
   Always alive: the line sits in BlueLabs blue while warm light (orange → coral → lilac) pools and orbits around it at three speeds,
   ripples roll outward through it, and the whole thing breathes on a slow 4.8s pulse. Click turns the heart cursor on / off. */
.bl{--bl-blue:#024CFF;--bl-ease-out:cubic-bezier(.23,1,.32,1);
  position:relative;box-sizing:border-box;flex:none;display:inline-flex;align-items:center;justify-content:center;margin:0;padding:0;border:0;background:transparent;color:var(--bl-blue);cursor:pointer;-webkit-tap-highlight-color:transparent;transition:transform .16s var(--bl-ease-out),box-shadow .5s var(--bl-ease-out)}
.bl:active{transform:scale(.97)}
.bl:focus-visible{outline:2px solid #3b7bff;outline-offset:3px}
/* the 48 glass circle used in the top bar (same as the back button) */
.bl.is-circle{width:48px;height:48px;border-radius:50%;background:rgba(255,255,255,.7);-webkit-backdrop-filter:blur(18px) saturate(1.4);backdrop-filter:blur(18px) saturate(1.4);box-shadow:inset 0 0 0 1px rgba(0,0,0,.06),0 14px 34px -14px rgba(255,120,60,.4)}
.bl.is-circle.is-on{box-shadow:inset 0 0 0 1px rgba(255,138,61,.3),0 14px 34px -14px rgba(255,120,60,.6)}
.bl-art{position:relative;display:block;flex:none}
.bl-art svg{position:absolute;inset:0;display:block;overflow:visible}
.bl-base path{stroke:var(--bl-blue)}
.bl-glow-wrap{position:absolute;inset:0;pointer-events:none}
@media (prefers-reduced-motion:reduce){.bl:active{transform:none}}
@keyframes bl-orbit{from{transform:rotate(0deg) translate(26%) rotate(0deg)}to{transform:rotate(360deg) translate(26%) rotate(-360deg)}}@keyframes bl-orbit-r{from{transform:rotate(0deg) translate(-22%,12%) rotate(0deg)}to{transform:rotate(-360deg) translate(-22%,12%) rotate(360deg)}}@keyframes bl-ripple{0%{transform:scale(.12);opacity:0}18%{opacity:1}100%{transform:scale(1.85);opacity:0}}@keyframes bl-pulse{0%,100%{filter:saturate(1) brightness(1)}50%{filter:saturate(1.15) brightness(1.1)}}@keyframes bl-pulse-glow{0%,100%{opacity:.22}50%{opacity:.8}}.bl-fx{position:absolute;overflow:hidden;pointer-events:none;-webkit-mask-size:100% 100%;mask-size:100% 100%;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;animation:bl-pulse var(--bl-pulse-dur,4.8s) ease-in-out infinite}.bl-fx.is-glow{animation-name:bl-pulse-glow}.bl-fx i{position:absolute;display:block;left:50%;top:50%;border-radius:50%;aspect-ratio:1}.bl-o1{width:86%;margin:-43% 0 0 -43%;background:radial-gradient(closest-side,#FF7A1A 0%,#FF8A24 30%,#FFA23F 46%,#FF5E62 62%,rgba(183,124,255,.75) 74%,rgba(2,76,255,0) 88%);animation:bl-orbit calc(9s * var(--bl-drift,1)) linear infinite}.bl-o2{width:64%;margin:-32% 0 0 -32%;background:radial-gradient(closest-side,#FF6A3D 0%,#FF5E62 40%,rgba(196,124,255,.8) 64%,rgba(2,76,255,0) 84%);animation:bl-orbit-r calc(13s * var(--bl-drift,1)) linear infinite}.bl-o3{width:52%;margin:-26% 0 0 -26%;background:radial-gradient(closest-side,#FFB25C 0%,#FF8A3D 46%,rgba(255,103,120,.7) 66%,rgba(2,76,255,0) 84%);animation:bl-orbit calc(6.4s * var(--bl-drift,1)) linear calc(-3s * var(--bl-drift,1)) infinite reverse}.bl-r{width:130%;margin:-65% 0 0 -65%;background:radial-gradient(closest-side,rgba(2,76,255,0) calc(68% - 2 * var(--bl-wave-w,4%)),rgba(183,124,255,.85) calc(68% - var(--bl-wave-w,4%)),#FF8A24 68%,rgba(183,124,255,.85) calc(68% + var(--bl-wave-w,4%)),rgba(2,76,255,0) calc(68% + 2 * var(--bl-wave-w,4%)));animation:bl-ripple var(--bl-wave-dur,4.8s) cubic-bezier(.2,.6,.3,1) infinite}.bl-r2{animation-delay:calc(var(--bl-wave-dur,4.8s) * -0.3333)}.bl-r3{animation-delay:calc(var(--bl-wave-dur,4.8s) * -0.6667)}@media (prefers-reduced-motion:reduce){.bl-fx,.bl-fx i{animation:none!important}.bl-r{display:none!important}}

/* flat: the plain BlueLabs-blue mark, no light (logos, favicons, print). A Maslow brain rests flat and lights up while Maslow is on. */
.bl .bl-fx,.bl .bl-glow-wrap{transition:opacity .38s var(--bl-ease-out)}
.bl.is-flat .bl-fx,.bl.is-flat .bl-glow-wrap{opacity:0}
.bl.is-flat .bl-fx,.bl.is-flat .bl-fx i{animation-play-state:paused}
/* Maslow: click → hyper colour (the light floods in, a bright flash and a ring), then the heart cursor, then Maslow is on */
@keyframes bl-hyper{0%{filter:saturate(1) brightness(1)}30%{filter:saturate(2.4) brightness(1.4) drop-shadow(0 0 5px rgba(255,138,61,.85))}100%{filter:saturate(1.3) brightness(1.05)}}
@keyframes bl-hyper-ring{0%{box-shadow:inset 0 0 0 1px rgba(255,138,61,.3),0 0 0 0 rgba(255,122,26,.55)}100%{box-shadow:inset 0 0 0 1px rgba(255,138,61,.3),0 0 0 16px rgba(255,122,26,0)}}
.bl.is-maslow.is-on .bl-art{filter:saturate(1.3) brightness(1.05)}
.bl.is-hyper .bl-art{animation:bl-hyper 1.2s var(--bl-ease-out) both}
.bl.is-circle.is-hyper{animation:bl-hyper-ring .9s var(--bl-ease-out) both}
@media (prefers-reduced-motion:reduce){.bl .bl-fx,.bl .bl-glow-wrap{transition:none}.bl.is-hyper .bl-art,.bl.is-circle.is-hyper{animation:none}}
/* bare (glass off): the 48 circle keeps its size, place and hit area, with nothing behind the brain */
.bl.is-circle.is-bare,.bl.is-circle.is-bare.is-on{background:transparent;-webkit-backdrop-filter:none;backdrop-filter:none;box-shadow:none}
@keyframes bl-hyper-ring-bare{0%{box-shadow:0 0 0 0 rgba(255,122,26,.5)}100%{box-shadow:0 0 0 16px rgba(255,122,26,0)}}
.bl.is-circle.is-bare.is-hyper{animation:bl-hyper-ring-bare .9s var(--bl-ease-out) both}
@media (prefers-reduced-motion:reduce){.bl.is-circle.is-bare.is-hyper{animation:none}}