/* ══ BOTSBURG'S RGB INTERACTION LANGUAGE ═════════════════════════════════
   The owner: "when you go over one of the tabs, I want it to glow — and the
   glow changes colours. And a line comes together at the bottom and expands,
   in RGB. Same for every single button. This look everywhere."
   One sheet, linked from every page, so every button on the site speaks it. */

:root { --bb-rgb: linear-gradient(90deg,#FF5F6D,#FFC371,#34D399,#38BDF8,#A78BFA,#FF5F6D); }

@keyframes bb-glow {
  0%,100% { box-shadow: 0 0 13px 1px rgba(255,95,109,.55); }
  25%     { box-shadow: 0 0 13px 1px rgba(255,195,113,.55); }
  50%     { box-shadow: 0 0 13px 1px rgba(52,211,153,.55); }
  75%     { box-shadow: 0 0 13px 1px rgba(56,189,248,.55); }
}
@keyframes bb-rgbsweep { to { background-position: 300% 0; } }

/* whole words, side by side — a tab never breaks in half again */
nav .lk, nav a, .lk { white-space: nowrap; }

/* the turning glow, on everything a pointer can press */
a.cta:hover, .cta:hover, .lk:hover, .ghost:hover, .door:hover,
button:hover:not(:disabled),
.tier a:hover, .bank:hover, .plan a:hover, .tool:hover, .t:hover {
  animation: bb-glow 2.8s linear infinite;
}

/* the line that meets in the middle and spreads — RGB, on the nav tabs */
nav .lk { position: relative; }
nav .lk::after {
  content: ''; position: absolute; left: 50%; bottom: -3px; height: 2px; width: 0;
  transform: translateX(-50%);
  background: var(--bb-rgb); background-size: 300% 100%;
  border-radius: 2px; transition: width .28s ease;
  animation: bb-rgbsweep 6s linear infinite;
}
nav .lk:hover::after { width: calc(100% - 6px); }

@media (prefers-reduced-motion: reduce) {
  a.cta:hover, .cta:hover, .lk:hover, .ghost:hover, .door:hover,
  button:hover:not(:disabled), .tier a:hover, .bank:hover, .plan a:hover,
  .tool:hover, .t:hover, nav .lk::after { animation: none; }
}

/* ══ THE LIVING WORDMARK — everywhere the logo appears ══
   The owner: "anywhere we put that logo, I want it to be changing colours."
   A 260%-wide gradient whose first and last stop match, swept over 9 s. */
.logo.grad, .grad.alive, .bb-live {
  background-image: linear-gradient(92deg,
    #2DD4BF 0%, #38BDF8 22%, #A78BFA 44%, #F0A3D8 62%, #38BDF8 80%, #2DD4BF 100%) !important;
  background-size: 260% 100% !important;
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  animation: bb-chameleon 9s linear infinite;
}
@keyframes bb-chameleon { 0% { background-position: 0% 50%; } 100% { background-position: 260% 50%; } }
@media (prefers-reduced-motion: reduce) { .logo.grad, .grad.alive, .bb-live { animation: none; background-position: 18% 50%; } }