/* BVUNZO wordmark: six letter assets (transform targets = .bv-logo__slot--*).
   Depth / extrusion layers exist only on letter O; other letters are flat front images.
   Sizes and slot margins below are hand-tuned — preserve when editing. */

.bv-logo {
  display: inline-block;
  max-width: 100%;
  line-height: 0;
  vertical-align: bottom;
  perspective: 960px;
  perspective-origin: 50% 82%;
}

.bv-logo__viewport {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 0;
  white-space: nowrap;
  line-height: 0;
  transform-style: preserve-3d;
}

.bv-logo--nav .bv-logo__viewport {
  justify-content: flex-start;
}

.bv-logo__slot {
  display: inline-flex;
  align-items: flex-end;
  justify-content: center;
  flex: 0 0 auto;
  transform-origin: 50% 85%;
  transform-style: preserve-3d;
  backface-visibility: hidden;
  will-change: auto;
}

.bv-logo__slot.bv-logo__slot--is-animating {
  will-change: transform;
}

/* Letter O: wheel-roll spins in the image plane (rotateZ) around the glyph center. */
.bv-logo__slot--wheel-roll {
  transform-origin: 50% 50%;
}

/* O only: extrusion — static 3D offsets on depth layers; slot carries translateX + rotateY (+ rotateZ wheel). */
.bv-logo__extrude {
  position: relative;
  display: inline-block;
  line-height: 0;
  vertical-align: bottom;
  transform-style: preserve-3d;
  --bv-depth-step: 1px;
}

.bv-logo--nav .bv-logo__extrude {
  --bv-depth-step: 0.42px;
}

.bv-logo__depth-stack {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  top: 0;
  pointer-events: none;
  transform-style: preserve-3d;
}

.bv-logo__layer--depth {
  position: absolute;
  left: 50%;
  bottom: 0;
  display: block;
  height: 40px;
  width: auto;
  max-width: none;
  object-fit: contain;
  object-position: center bottom;
  user-select: none;
  pointer-events: none;
  -webkit-user-drag: none;
  transform-style: preserve-3d;
  backface-visibility: hidden;
}

.bv-logo__layer--depth:nth-child(1) {
  transform: translate3d(-50%, 0, calc(-1 * var(--bv-depth-step)));
  filter: brightness(0.93) saturate(0.96);
  opacity: 0.94;
}
.bv-logo__layer--depth:nth-child(2) {
  transform: translate3d(-50%, 0, calc(-2 * var(--bv-depth-step)));
  filter: brightness(0.87) saturate(0.93);
  opacity: 0.9;
}
.bv-logo__layer--depth:nth-child(3) {
  transform: translate3d(-50%, 0, calc(-3 * var(--bv-depth-step)));
  filter: brightness(0.81) saturate(0.9);
  opacity: 0.86;
}
.bv-logo__layer--depth:nth-child(4) {
  transform: translate3d(-50%, 0, calc(-4 * var(--bv-depth-step)));
  filter: brightness(0.76) saturate(0.88);
  opacity: 0.82;
}
.bv-logo__layer--depth:nth-child(5) {
  transform: translate3d(-50%, 0, calc(-5 * var(--bv-depth-step)));
  filter: brightness(0.71) saturate(0.86);
  opacity: 0.78;
}
.bv-logo__layer--depth:nth-child(6) {
  transform: translate3d(-50%, 0, calc(-6 * var(--bv-depth-step)));
  filter: brightness(0.66) saturate(0.84);
  opacity: 0.74;
}

.bv-logo__letter--front {
  position: relative;
  z-index: 2;
  display: block;
  height: 40px;
  width: auto;
  object-fit: contain;
  user-select: none;
  pointer-events: none;
  -webkit-user-drag: none;
  transform: translateZ(0.35px);
  transform-style: preserve-3d;
  backface-visibility: hidden;
}

/* Tighten overlaps between custom letter shapes — adjust by eye */
.bv-logo__slot--b { margin-right: -4px; }
.bv-logo__slot--v { margin-right: -6px; }
.bv-logo__slot--u { margin-right: -2px; }
.bv-logo__slot--n { margin-right: -4px; }
.bv-logo__slot--z { margin-right: -2px; }
.bv-logo__slot--o { margin-right: 0; }

/* Navbar / dashboard: fits previous single-logo bar height */
.bv-logo--nav .bv-logo__letter--front,
.bv-logo--nav .bv-logo__layer--depth {
  height: 18px;
}

.bv-logo--nav .bv-logo__letter--front {
  transform: translateZ(0.15px);
}

.bv-logo--nav .bv-logo__slot--b { margin-right: 0px; }
.bv-logo--nav .bv-logo__slot--v { margin-right: 1px; }
.bv-logo--nav .bv-logo__slot--u { margin-right: 1px; }
.bv-logo--nav .bv-logo__slot--n { margin-right: 1px; }
.bv-logo--nav .bv-logo__slot--z { margin-right: 0px; }

/* Wide: breathing room before siblings; horizontal motion clamped in JS from live layout */
@media (min-width: 769px) {
  .navbar-inner .navbar-brand {
    position: relative;
    padding-right: 8px;
    margin-right: 2px;
    min-width: 0;
    max-width: min(480px, 52vw);
  }

  .navbar-inner.navbar-inner--landing .navbar-brand {
    max-width: min(440px, 48vw);
  }

  .dashboard-card-nav-logo {
    position: relative;
    padding-right: 8px;
    margin-right: 2px;
    min-width: 0;
    max-width: min(480px, 50vw);
  }
}

@media (max-width: 768px) {
  .bv-logo {
    perspective: 920px;
  }

  .navbar-inner .navbar-brand,
  .dashboard-card-nav-logo {
    overflow-x: visible;
    overflow-y: visible;
    max-width: none;
  }
}

@media (max-width: 568px) {
  .dashboard-card-nav-logo .bv-logo--nav .bv-logo__letter--front,
  .dashboard-card-nav-logo .bv-logo--nav .bv-logo__layer--depth {
    height: 18px;
  }

  .dashboard-card-nav-inner .dashboard-card-nav-logo {
    max-width: none;
    overflow-x: visible;
    padding-right: 0;
  }

  .navbar-inner .navbar-brand {
    max-width: none;
    overflow-x: visible;
    padding-right: 0;
    margin-right: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .bv-logo__slot {
    transform: none !important;
    transition: none !important;
    will-change: auto !important;
  }

  .bv-logo {
    perspective: none;
  }
}