/* Founder-approved R03 Hon faces and existing BBX-Nexus wordmark.
   Glow and wordmark follow the globe-owned --bbx-page-neon; no separate clock. */
#experience header .bbxn-brand-logo {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  gap: 10px;
  min-width: 0;
  line-height: 1;
  text-decoration: none;
}

.bbxn-brand-logo__coin {
  position: relative;
  display: block;
  width: 52px;
  height: 52px;
  flex: 0 0 52px;
  perspective: 620px;
}

.bbxn-brand-logo__coin::before {
  content: "";
  position: absolute;
  inset: 6%;
  border-radius: 50%;
  box-shadow: 0 0 8px 2px var(--bbx-page-neon, #FF2028);
  opacity: .65;
  pointer-events: none;
}

.bbxn-brand-logo__rotor {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
  animation: bbxn-hon-revolution 16s linear infinite;
}

.bbxn-brand-logo__face {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

.bbxn-brand-logo__face--front { transform: translateZ(.75px); }
.bbxn-brand-logo__face--back { transform: rotateY(180deg) translateZ(.75px); }

.bbxn-brand-logo__wordmark {
  position: relative;
  display: block;
  width: 205px;
  height: auto;
  aspect-ratio: 1042 / 190;
  flex: 0 0 205px;
}

.bbxn-brand-logo__wordmark > img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* Preserve the original BBX glyph outlines and white dash; recolor the full
   Nexus and its new full-width blockchain underline with the globe colour. */
.bbxn-brand-logo__neon {
  position: absolute;
  inset: 0;
  display: block;
  pointer-events: none;
  background: var(--bbx-page-neon, #FF2028);
  -webkit-mask-image: url('./assets/bbxnexus-wordmark-v47.svg');
  mask-image: url('./assets/bbxnexus-wordmark-v47.svg');
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  /* 44% is after the white dash and before the first N outline. */
  clip-path: inset(0 0 0 44%);
}

@keyframes bbxn-hon-revolution {
  from { transform: rotateY(0deg); }
  to { transform: rotateY(360deg); }
}

@media (max-width: 900px) {
  #experience header .bbxn-brand-logo { gap: 7px; }
  .bbxn-brand-logo__coin { width: 40px; height: 40px; flex-basis: 40px; }
  .bbxn-brand-logo__wordmark { width: 158px; flex-basis: 158px; }
}

@media (max-width: 600px) {
  #experience header .bbxn-brand-logo { gap: 6px; }
  .bbxn-brand-logo__coin { width: 36px; height: 36px; flex-basis: 36px; }
  .bbxn-brand-logo__wordmark { width: 137px; flex-basis: 137px; }
}

@media (max-width: 420px) {
  #experience header .bbxn-brand-logo { gap: 4px; }
  .bbxn-brand-logo__coin { width: 31px; height: 31px; flex-basis: 31px; }
  .bbxn-brand-logo__wordmark { width: 110px; flex-basis: 110px; }
}

@media (max-width: 360px) {
  .bbxn-brand-logo__coin { width: 27px; height: 27px; flex-basis: 27px; }
  .bbxn-brand-logo__wordmark { width: 93px; flex-basis: 93px; }
}

@media (prefers-reduced-motion: reduce) {
  .bbxn-brand-logo__rotor { animation: none; transform: rotateY(0deg); }
}