/* Brand OS: one-page navigation with log in and sign up. */
#mast-right-talk-btn,
#mast-right-talk-btn-placeholder,
#mast-right-menu-btn,
#mast-menu,
#mast-background {
  display: none !important;
}
#mast-right {
  gap: 12px !important;
  align-items: center;
}
#bos-nav {
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 5px;
  border-radius: 999px;
  background: rgba(8, 12, 30, 0.8);
  border: 1px solid rgba(255, 255, 255, 0.1);
  -webkit-backdrop-filter: blur(16px) saturate(1.4);
  backdrop-filter: blur(16px) saturate(1.4);
  box-shadow: none;
  font-family: BosSans, sans-serif;
  font-size: 15px;
  font-weight: 500;
  line-height: 1;
  color: #e9ebf5;
  pointer-events: auto;
}
#bos-nav a,
#bos-nav button {
  position: relative;
  display: inline-flex;
  align-items: center;
  padding: 0.72em 1.05em;
  border: 0;
  border-radius: 999px;
  background: none;
  color: inherit;
  font: inherit;
  text-decoration: none;
  text-transform: none;
  white-space: nowrap;
  cursor: pointer;
  z-index: 1;
  transition: color 0.45s cubic-bezier(0.2, 0.8, 0.2, 1), opacity 0.45s cubic-bezier(0.2, 0.8, 0.2, 1);
}
#bos-nav {
  position: relative;
}
#bos-nav [data-go],
#bos-nav .bn-in {
  opacity: 0.74;
}
#bos-nav [data-go]:hover,
#bos-nav [data-go].on,
#bos-nav .bn-in:hover {
  opacity: 1;
}
/* the highlight: one soft pill that slides and stretches to the link under the pointer */
#bos-nav .bn-hl {
  position: absolute;
  left: 0;
  top: 5px;
  bottom: 5px;
  width: 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.12);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1);
  opacity: 0;
  pointer-events: none;
  transition:
    transform 0.55s cubic-bezier(0.2, 0.8, 0.2, 1),
    width 0.55s cubic-bezier(0.2, 0.8, 0.2, 1),
    opacity 0.4s;
}
#bos-nav .bn-hl.show {
  opacity: 1;
}
#bos-nav .bn-sep {
  width: 1px;
  height: 1.3em;
  margin: 0 6px;
  background: rgba(255, 255, 255, 0.16);
}
#bos-nav .bn-up {
  margin-left: 2px;
  background: #fff;
  color: #060a1c;
  overflow: hidden;
  isolation: isolate;
}
#bos-nav .bn-up::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(90deg, #6078ea, #17ead9);
  opacity: 0;
  transition: opacity 0.5s cubic-bezier(0.2, 0.8, 0.2, 1);
}
#bos-nav .bn-up {
  transition: transform 0.5s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.5s;
}
#bos-nav .bn-up:hover::before {
  opacity: 1;
}
#bos-nav .bn-up:hover {
  transform: scale(1.04);
}
#bos-nav .bn-up:active {
  transform: scale(0.97);
}
@media (max-width: 980px) {
  #bos-nav [data-go],
  #bos-nav .bn-sep {
    display: none;
  }
}
@media (max-width: 812px) {
  #bos-nav {
    font-size: 14px;
  }
}

/* sound button: animated bars; flat when off */
#mast-right-sound-btn {
  display: grid;
  place-items: center;
  width: 46px !important;
  height: 46px !important;
  border-radius: 50%;
  background: rgba(8, 12, 30, 0.8) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  -webkit-backdrop-filter: blur(16px) saturate(1.4);
  backdrop-filter: blur(16px) saturate(1.4);
  pointer-events: auto;
  transition: border-color 0.45s cubic-bezier(0.2, 0.8, 0.2, 1), scale 0.5s cubic-bezier(0.2, 0.8, 0.2, 1);
}
#mast-right-sound-btn:hover {
  border-color: rgba(255, 255, 255, 0.4) !important;
  scale: 1.06;
}
#mast-right-sound-btn:active {
  scale: 0.96;
}
#mast-right-sound-btn canvas {
  display: none;
}
.bos-eq {
  display: flex;
  align-items: center;
  gap: 3px;
  height: 16px;
}
.bos-eq i {
  width: 3px;
  height: 100%;
  border-radius: 2px;
  background: rgba(233, 235, 245, 0.55);
  transform: scaleY(0.16);
  transition: transform 0.4s, background 0.4s;
}
html.bos-audio-on .bos-eq i {
  background: linear-gradient(180deg, #17ead9, #6078ea);
  animation: bos-eq 0.9s ease-in-out infinite;
  animation-delay: calc(var(--i) * -0.27s);
}
@keyframes bos-eq {
  0%,
  100% {
    transform: scaleY(0.3);
  }
  35% {
    transform: scaleY(1);
  }
  70% {
    transform: scaleY(0.55);
  }
}
@media (max-width: 812px) {
  #mast-right-sound-btn {
    display: block !important;
    visibility: visible !important;
    width: 38px !important;
    height: 38px !important;
    flex: 0 0 auto;
  }
  #bos-tip {
    font-size: 13px;
  }
}

/* "start the party" hint under the sound button: a white bubble inside a ring of the party's colours that keeps turning */
#bos-tip {
  position: fixed;
  z-index: 60;
  left: 0;
  top: 0;
  isolation: isolate;
  padding: 2px;
  border: 0;
  border-radius: 16px;
  background: none;
  color: #060a1c;
  font: 500 14px/1.2 BosSans, sans-serif;
  white-space: nowrap;
  box-shadow: 0 16px 44px rgba(0, 0, 0, 0.4), 0 0 26px rgba(96, 120, 234, 0.35);
  opacity: 0;
  translate: 0 -8px;
  pointer-events: none;
  cursor: pointer;
  transition: opacity 0.45s, translate 0.45s cubic-bezier(0.2, 0.8, 0.2, 1), scale 0.4s cubic-bezier(0.2, 0.8, 0.2, 1), rotate 0.6s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.6s;
}
#bos-tip .bt-ring {
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  overflow: hidden;
}
/* drawn once, only turned: no repaint per frame */
#bos-tip .bt-ring b {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 340px;
  height: 340px;
  margin: -170px 0 0 -170px;
  background: conic-gradient(#6078ea, #17ead9, #b69cff, #ff7ad9, #6078ea);
  animation: bos-tip-spin 2.4s linear infinite;
  transition: opacity 0.6s;
}
#bos-tip .bt-t {
  display: block;
  padding: 0.75em 1.15em;
  border-radius: 14px;
  background: #fff;
  transition: color 0.6s;
}
#bos-tip .bt-w {
  background: linear-gradient(90deg, #4d63d6, #0fa89b, #8b6cf0, #d4479f, #4d63d6) 0 0 / 6em 100% repeat-x;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  font-weight: 600;
  animation: bos-tip-ink 2.4s linear infinite;
}
/* the pointer under the ring: the ring's colours, tucked behind it */
#bos-tip::before {
  content: "";
  position: absolute;
  z-index: -2;
  left: var(--ax, 50%);
  top: -6px;
  width: 14px;
  height: 14px;
  margin-left: -7px;
  border-radius: 3px;
  background: linear-gradient(135deg, #17ead9, #6078ea);
  transform: rotate(45deg);
  transition: background 0.6s;
}
#bos-tip.on {
  opacity: 1;
  translate: 0 0;
  pointer-events: auto;
  animation: bos-tip 2.2s ease-in-out 0.5s infinite;
}
#bos-tip:not(.on) .bt-ring b,
#bos-tip:not(.on) .bt-w {
  animation-play-state: paused;
}
@keyframes bos-tip {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(5px);
  }
}
@keyframes bos-tip-spin {
  to {
    transform: rotate(1turn);
  }
}
@keyframes bos-tip-ink {
  to {
    background-position: 6em 0;
  }
}
/* the party is on: the hint says how to stop it, in quieter colours */
#bos-tip.stop {
  box-shadow: 0 16px 44px rgba(0, 0, 0, 0.4), 0 0 18px rgba(96, 120, 234, 0.2);
}
#bos-tip.stop .bt-ring b {
  opacity: 0.45;
}
/* about to stop it: the colour drains out and the hint droops */
html.bos-sad #bos-tip.on {
  rotate: -2.5deg;
  scale: 0.97;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.4);
}
html.bos-sad #bos-tip .bt-ring b {
  opacity: 0;
}
html.bos-sad #bos-tip .bt-ring {
  background: #9aa0b8;
}
html.bos-sad #bos-tip::before {
  background: #9aa0b8;
}
html.bos-sad #bos-tip .bt-t {
  color: #5b6178;
}
/* the pointer over the button while the party is off: it can't wait */
html.bos-want #bos-tip.on {
  scale: 1.05;
}
html.bos-want #mast-right-sound-btn {
  border-color: rgba(23, 234, 217, 0.7) !important;
  animation: bos-want 0.5s ease-in-out infinite;
}
html.bos-want .bos-eq i {
  background: linear-gradient(180deg, #17ead9, #6078ea);
  animation: bos-eq 0.5s ease-in-out infinite;
  animation-delay: calc(var(--i) * -0.15s);
}
@keyframes bos-want {
  0%,
  100% {
    rotate: -8deg;
    translate: 0 0;
  }
  50% {
    rotate: 8deg;
    translate: 0 -2px;
  }
}
/* the pointer over the button while the party is on: it stops dancing, slumps and the bars droop */
html.bos-sad #mast-right-sound-btn,
html.bos-sad #mast-right-sound-btn:hover {
  rotate: -10deg;
  translate: 0 3px;
  scale: 0.94;
  border-color: rgba(255, 255, 255, 0.12) !important;
  transition: rotate 0.6s cubic-bezier(0.2, 0.8, 0.2, 1), translate 0.6s cubic-bezier(0.2, 0.8, 0.2, 1), scale 0.6s cubic-bezier(0.2, 0.8, 0.2, 1), border-color 0.45s;
}
html.bos-sad #mast-right-sound-btn .bos-neon {
  opacity: 0.15 !important;
}
html.bos-audio-on.bos-sad .bos-eq i {
  background: rgba(233, 235, 245, 0.4);
  animation: bos-eq-sad 1.8s ease-in-out infinite;
  animation-delay: calc(var(--i) * -0.45s);
}
@keyframes bos-eq-sad {
  0%,
  100% {
    transform: scaleY(0.16);
  }
  50% {
    transform: scaleY(0.36);
  }
}
@media (prefers-reduced-motion: reduce) {
  #bos-tip.on,
  #bos-tip .bt-ring b,
  #bos-tip .bt-w,
  html.bos-want #mast-right-sound-btn,
  html.bos-want .bos-eq i,
  html.bos-audio-on.bos-sad .bos-eq i,
  html.bos-audio-on .bos-eq i {
    animation: none;
  }
  html.bos-audio-on .bos-eq i {
    transform: scaleY(0.7);
  }
}
/* off state reads as a paused level meter, not as menu dots */
.bos-eq i:nth-child(1) { transform: scaleY(0.4); }
.bos-eq i:nth-child(2) { transform: scaleY(0.75); }
.bos-eq i:nth-child(3) { transform: scaleY(0.5); }
.bos-eq i:nth-child(4) { transform: scaleY(0.28); }