/* Optional companion for the standalone /battery shell.
 * Keep this separate from portal panel-motion.css because the standalone page
 * intentionally has a smaller navigation contract.
 */
.bnk .bnk-nav {
  background:
    linear-gradient(180deg, rgba(17, 24, 22, .96), rgba(10, 14, 12, .94));
  border-bottom-color: rgba(232, 93, 42, .24);
  box-shadow: 0 12px 30px rgba(0, 0, 0, .18);
  isolation: isolate;
}

.bnk .bnk-nav::after {
  content: "";
  position: absolute;
  inset: auto 0 -1px;
  height: 2px;
  background: linear-gradient(90deg, transparent, rgba(232, 93, 42, .82), rgba(115, 214, 192, .48), transparent);
  background-size: 220% 100%;
  animation: bnk-nav-signal 8s linear infinite;
  pointer-events: none;
}

.bnk .bnk-home {
  position: relative;
  opacity: .94;
  border-right-color: rgba(232, 93, 42, .24);
  transition: opacity .2s ease, transform .2s ease;
}

.bnk .bnk-home:hover,
.bnk .bnk-home:focus-visible {
  opacity: 1;
  transform: translateY(-1px);
}

.bnk .bnk-home-ic {
  filter: drop-shadow(0 4px 10px rgba(185, 68, 24, .26));
  transition: transform .24s ease, filter .24s ease;
}

.bnk .bnk-home:hover .bnk-home-ic,
.bnk .bnk-home:focus-visible .bnk-home-ic {
  transform: rotate(-3deg) scale(1.06);
  filter: drop-shadow(0 6px 14px rgba(232, 93, 42, .45));
}

.bnk .bnk-nav nav button,
.bnk .bnk-nav-order,
.bnk .bnk-order,
.bnk .bnk-nav-toggle {
  transition: color .2s ease, background-color .2s ease, border-color .2s ease,
    transform .2s ease, box-shadow .2s ease;
}

.bnk .bnk-nav nav button:hover,
.bnk .bnk-nav nav button:focus-visible {
  color: var(--brand, #e85d2a);
  transform: translateY(-1px);
}

.bnk .bnk-nav-order,
.bnk .bnk-order {
  box-shadow: 0 6px 16px -11px rgba(232, 93, 42, .9);
}

.bnk .bnk-nav-order:hover,
.bnk .bnk-nav-order:focus-visible,
.bnk .bnk-order:hover,
.bnk .bnk-order:focus-visible,
.bnk .bnk-nav-toggle:focus-visible {
  transform: translateY(-1px);
  box-shadow: 0 8px 18px -11px rgba(232, 93, 42, .95);
}

@keyframes bnk-nav-signal {
  from { background-position: 180% 0; }
  to { background-position: -40% 0; }
}

@media (prefers-reduced-motion: reduce) {
  .bnk .bnk-nav::after { animation: none; }
  .bnk .bnk-home,
  .bnk .bnk-home-ic,
  .bnk .bnk-nav nav button,
  .bnk .bnk-nav-order,
  .bnk .bnk-order,
  .bnk .bnk-nav-toggle { transition: none; }
}