:root {
  --black: #000;
  --charcoal: #111;
  --panel: #181818;
  --silver: #c0c0c0;
  --steel: #e5e7eb;
  --muted: #999;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--black);
  color: var(--steel);
  font-family: Arial, Helvetica, sans-serif;
}

a {
  color: inherit;
  text-decoration: none;
}

button, a {
  -webkit-tap-highlight-color: transparent;
}

button:focus-visible,
a:focus-visible {
  outline: 2px solid white;
  outline-offset: 5px;
}

/* HEADER */

.header {
  min-height: 90px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  padding: 15px 5%;
  background: #080808;
  border-bottom: 1px solid #333;
}

.brand {
  display: flex;
  align-items: center;
  gap: 15px;
  font-weight: 700;
  letter-spacing: 3px;
}

.brand img {
  width: 65px;
  height: 65px;
  object-fit: contain;
}

.header nav {
  display: flex;
  flex-wrap: wrap;
  gap: 25px;
  font-size: 12px;
  letter-spacing: 2px;
}

.header nav a:hover {
  color: var(--silver);
}

/* HERO */

.hero {
  min-height: 78vh;
  display: flex;
  align-items: center;
  padding: 10%;
  background:
    radial-gradient(
      ellipse at 75% 50%,
      #333 0%,
      #111 35%,
      #000 75%
    );
}

.hero-content {
  max-width: 800px;
}

.eyebrow {
  color: var(--silver);
  font-size: 12px;
  letter-spacing: 5px;
}

.hero h1 {
  font-size: clamp(42px, 7vw, 105px);
  line-height: 1;
  letter-spacing: -3px;
  margin: 25px 0;
}

.hero-description {
  color: var(--muted);
  font-size: 18px;
  line-height: 1.7;
}

.primary-button {
  display: inline-block;
  margin-top: 30px;
  padding: 17px 35px;
  border: 1px solid var(--silver);
  background: linear-gradient(135deg, #eee, #888);
  color: #000;
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 2px;
  transition: .25s;
}

.primary-button:hover {
  background: white;
  transform: translateY(-3px);
}

/* COLLECTION */

.collection {
  padding: 100px 5%;
  text-align: center;
}

.collection h2,
.shop-banner h2 {
  font-size: clamp(28px, 4vw, 52px);
  letter-spacing: 3px;
}

.product-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 25px;
  max-width: 1400px;
  margin: 60px auto 0;
}

.product {
  background: var(--panel);
  border: 1px solid #333;
  padding: 20px;
  transition: .3s;
}

.product:hover {
  border-color: var(--silver);
  transform: translateY(-5px);
}

.product img {
  display: block;
  width: 100%;
  height: 320px;
  object-fit: contain;
  background: #fff;
}

.product h3 {
  margin-top: 25px;
  letter-spacing: 2px;
}

.product p {
  color: var(--muted);
  font-size: 14px;
}

.product a {
  display: inline-block;
  margin: 20px 0 10px;
  padding: 12px 20px;
  border: 1px solid var(--silver);
  font-size: 11px;
  letter-spacing: 2px;
}

.product a:hover {
  background: var(--silver);
  color: #000;
}

/* SHOP BANNER */

.shop-banner {
  padding: 110px 5%;
  text-align: center;
  background: linear-gradient(135deg, #191919, #000);
  border-top: 1px solid #333;
}

/* FOOTER */

footer {
  padding: 35px 5%;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 15px;
  color: #888;
  font-size: 11px;
  letter-spacing: 2px;
}

/* CINEMATIC INTRO */

.intro {
  position: fixed;
  inset: 0;
  z-index: 9999;
  overflow: hidden;
  background: transparent;
  isolation: isolate;
}

.intro-panel {
  position: absolute;
  inset: -80vmax;
  background: #000;
  z-index: 1;
  will-change: transform;
  transition: transform 1.2s cubic-bezier(.7,0,.2,1);
}

/* Diagonal cut line from upper-left to lower-right */

.intro-top {
  clip-path: polygon(0 0, 100% 0, 0 100%);
}

.intro-bottom {
  clip-path: polygon(100% 0, 100% 100%, 0 100%);
}

.intro-brand {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: grid;
  place-items: center;
  transition: opacity .35s;
}

.intro-brand img {
  width: min(55vw, 330px);
  height: auto;
  filter: drop-shadow(0 0 25px #7777);
}

.blade {
  position: absolute;
  z-index: 4;
  top: 50%;
  left: 50%;
  width: 140vmax;
  height: 5px;
  background: linear-gradient(
    to bottom,
    #fff,
    #bfc3c8 35%,
    #4d5258 75%,
    #fff
  );
  box-shadow: 0 0 18px #ffffff99;
  transform: translate(-50%, -50%)
             rotate(-45deg)
             translateX(-130%);
  opacity: 0;
  pointer-events: none;
}

.intro.cutting .intro-brand {
  opacity: 0;
}

.intro.cutting .blade {
  opacity: 1;
  animation: blade-sweep 1s ease-in-out forwards;
}

@keyframes blade-sweep {
  from {
    transform: translate(-50%, -50%)
               rotate(-45deg)
               translateX(-130%);
  }
  to {
    transform: translate(-50%, -50%)
               rotate(-45deg)
               translateX(130%);
  }
}

.intro.open .intro-top {
  transform: translate(-110vw, -110vh);
}

.intro.open .intro-bottom {
  transform: translate(110vw, 110vh);
}

.skip-intro {
  position: absolute;
  right: 30px;
  bottom: 30px;
  z-index: 10;
  padding: 12px 20px;
  background: #111;
  border: 1px solid #777;
  color: white;
  cursor: pointer;
  letter-spacing: 2px;
}

/* MOBILE */

@media (max-width: 800px) {
  .header {
    flex-direction: column;
    text-align: center;
  }

  .header nav {
    justify-content: center;
    gap: 15px;
  }

  .hero {
    min-height: 65vh;
    padding: 70px 7%;
  }

  .hero h1 {
    letter-spacing: -1px;
  }

  .product-grid {
    grid-template-columns: 1fr;
  }

  .product img {
    height: 280px;
  }

  footer {
    justify-content: center;
    text-align: center;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
  }
}

/* BLACKBAR V2 KNIFE ANIMATION */

.knife-track {
  position: absolute;
  inset: 0;
  z-index: 5;
  opacity: 0;
  pointer-events: none;
  transform: translate(110vw, -110vh);
}

.knife-image {
  position: absolute;
  left: 50%;
  top: 50%;
  width: clamp(320px, 55vw, 800px);
  max-width: none;
  height: auto;
  transform: translate(-50%, -50%);
  filter: drop-shadow(0 12px 25px #000b);
}

.cut-flash {
  position: absolute;
  inset: 0;
  z-index: 4;
  opacity: 0;
  pointer-events: none;
  background: linear-gradient(
    135deg,
    transparent calc(50% - 2px),
    #fff 50%,
    transparent calc(50% + 2px)
  );
}

.intro.cutting .knife-track {
  opacity: 1;
  animation: knife-v2-sweep 1.15s ease-in-out forwards;
}

@keyframes knife-v2-sweep {
  from {
    transform: translate(110vw, -110vh);
  }
  to {
    transform: translate(-110vw, 110vh);
  }
}

.intro.cut-complete .cut-flash {
  opacity: .85;
}

.intro.open .cut-flash {
  opacity: 0;
}

.intro.open .knife-track {
  opacity: 0;
  transition: opacity .2s;
}


/* BLACKBAR V3 LIVE — PROGRESSIVE FOLD */

.intro-panel {
  transition: none;
  transform-origin: center;
  backface-visibility: hidden;
}

.intro.cutting .intro-top {
  animation: bb-fold-top 1.15s ease-in-out forwards;
}

.intro.cutting .intro-bottom {
  animation: bb-fold-bottom 1.15s ease-in-out forwards;
}

@keyframes bb-fold-top {
  0%, 10% {
    transform: translate(0, 0) rotateY(0deg);
  }
  50% {
    transform: translate(-8vw, -8vh) rotateY(-7deg);
  }
  100% {
    transform: translate(-110vw, -110vh) rotateY(-15deg);
  }
}

@keyframes bb-fold-bottom {
  0%, 10% {
    transform: translate(0, 0) rotateY(0deg);
  }
  50% {
    transform: translate(8vw, 8vh) rotateY(7deg);
  }
  100% {
    transform: translate(110vw, 110vh) rotateY(15deg);
  }
}

.intro.cutting .cut-flash {
  opacity: .8;
  background: linear-gradient(
    135deg,
    transparent 48%,
    #111 49%,
    #818992 49.7%,
    #f1f3f5 50%,
    #333940 50.4%,
    transparent 52%
  );
  animation: bb-cut-edge 1.15s ease-in-out forwards;
}

@keyframes bb-cut-edge {
  from {
    clip-path: inset(0 100% 0 0);
  }
  to {
    clip-path: inset(0 0 0 0);
  }
}

.intro.open .intro-top,
.intro.open .intro-bottom {
  transition: none;
}


/* BLACKBAR V3 — REMOVE DUPLICATE CUT LINE */
.intro .cut-flash,
.intro.cutting .cut-flash,
.intro.cut-complete .cut-flash {
  display: none !important;
}


/* V3 — KNIFE AND FOLD START TOGETHER */
.intro.cutting .knife-track,
.intro.cutting .intro-top,
.intro.cutting .intro-bottom {
  animation-delay: 0s !important;
  animation-duration: 1.15s !important;
  animation-timing-function: linear !important;
}


/* V3 — DELAY CUT 100ms TO MATCH KNIFE */
.intro.cutting .intro-top,
.intro.cutting .intro-bottom {
  animation-delay: 0.1s !important;
}

/* BLACKBAR CATEGORY NAVIGATION — CENTRAL LOGO */
.hero .bb-category-logo {
  position: relative;
  z-index: 2;
  width: clamp(180px, 24vw, 300px);
  margin: 0 auto 35px;
}

.hero .bb-category-logo img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
}


/* BLACKBAR — FIX CENTRAL LOGO SIZE */
.hero .bb-category-logo {
  position: relative !important;
  display: block !important;
  width: 260px !important;
  max-width: 65vw !important;
  height: 260px !important;
  max-height: 65vw !important;
  margin: 40px auto 30px !important;
  padding: 0 !important;
  flex: 0 0 auto !important;
  z-index: 2;
}

.hero .bb-category-logo img {
  display: block !important;
  position: static !important;
  width: 100% !important;
  height: 100% !important;
  max-width: 100% !important;
  object-fit: contain !important;
  transform: none !important;
}


/* BLACKBAR — CENTRAL HERO LAYOUT CORRECTION */

.hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 20px;
  width: 100%;
  min-height: 78vh;
  padding: 60px 5%;
  box-sizing: border-box;
  overflow: hidden;
}

.hero .bb-category-logo {
  position: relative !important;
  display: block !important;
  width: min(260px, 65vw) !important;
  height: auto !important;
  max-height: none !important;
  margin: 0 auto !important;
  flex: none !important;
}

.hero .bb-category-logo img {
  display: block !important;
  width: 100% !important;
  height: auto !important;
  max-width: 100% !important;
  object-fit: contain !important;
}

.hero .hero-content {
  width: 100%;
  max-width: 800px;
  text-align: center;
  margin: 0 auto;
}

@media (max-width: 800px) {
  .hero {
    min-height: 65vh;
    padding: 45px 5%;
  }

  .hero .bb-category-logo {
    width: min(220px, 60vw) !important;
  }
}


/* BLACKBAR ORBIT V1 */

.bb-orbit-stage {
  position: relative;
  width: min(100%, 1050px);
  height: 510px;
  margin: 0 auto;
  flex: 0 0 auto;
  isolation: isolate;
}

.bb-orbit-ring {
  position: absolute;
  inset: 12% 5%;
  border: 1px solid rgba(195,205,215,.35);
  border-radius: 50%;
  transform: rotate(-12deg);
  box-shadow:
    0 0 25px rgba(180,200,220,.08),
    inset 0 0 25px rgba(180,200,220,.06);
  pointer-events: none;
}

.bb-orbit-stage::before {
  content: "";
  position: absolute;
  inset: 23% 17%;
  border: 1px dashed rgba(180,195,210,.22);
  border-radius: 50%;
  transform: rotate(12deg);
  pointer-events: none;
}

.bb-orbit-stage .bb-category-logo {
  position: absolute !important;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 230px !important;
  max-width: 38% !important;
  margin: 0 !important;
  z-index: 5;
  pointer-events: none;
}

.bb-orbit-rotor {
  position: absolute;
  inset: 0;
  animation: bb-orbit-turn 32s linear infinite;
}

.bb-orbit-stage:hover .bb-orbit-rotor,
.bb-orbit-stage:focus-within .bb-orbit-rotor {
  animation-play-state: paused;
}

.bb-orbit-item {
  position: absolute;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  width: 190px;
  color: #e7e9ec;
  text-decoration: none;
  z-index: 6;
  animation: bb-orbit-counterturn 32s linear infinite;
}

.bb-orbit-stage:hover .bb-orbit-item,
.bb-orbit-stage:focus-within .bb-orbit-item {
  animation-play-state: paused;
}

.bb-o1 { left: 4%; top: 12%; }
.bb-o2 { right: 4%; top: 12%; }
.bb-o3 { left: 4%; bottom: 12%; }
.bb-o4 { right: 4%; bottom: 12%; }

.bb-knife-shape {
  display: block;
  position: relative;
  width: 150px;
  height: 26px;
  transform: rotate(-18deg);
  filter: drop-shadow(0 0 12px rgba(190,210,230,.35));
}

.bb-knife-shape::before {
  content: "";
  position: absolute;
  left: 0;
  top: 4px;
  width: 56px;
  height: 19px;
  border-radius: 8px 3px 3px 8px;
  background: linear-gradient(#666, #17191c 45%, #555);
  border: 1px solid #a2a8af;
}

.bb-knife-shape::after {
  content: "";
  position: absolute;
  left: 57px;
  top: 3px;
  width: 92px;
  height: 21px;
  background: linear-gradient(#f3f5f7, #929ba5 55%, #30363c);
  clip-path: polygon(0 0, 78% 0, 100% 42%, 75% 100%, 0 100%);
}

.bb-orbit-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 2px;
  white-space: nowrap;
  text-shadow: 0 2px 8px #000;
}

.bb-orbit-item:hover,
.bb-orbit-item:focus-visible {
  color: white;
  filter: brightness(1.5);
}

@keyframes bb-orbit-turn {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

@keyframes bb-orbit-counterturn {
  from { transform: rotate(0deg); }
  to { transform: rotate(-360deg); }
}

@media (max-width: 700px) {
  .bb-orbit-stage {
    height: 470px;
    width: 100%;
  }

  .bb-orbit-stage .bb-category-logo {
    width: 155px !important;
    max-width: 42% !important;
  }

  .bb-orbit-item {
    width: 115px;
  }

  .bb-o1 { left: 0; top: 8%; }
  .bb-o2 { right: 0; top: 8%; }
  .bb-o3 { left: 0; bottom: 8%; }
  .bb-o4 { right: 0; bottom: 8%; }

  .bb-knife-shape {
    transform: rotate(-18deg) scale(.7);
  }

  .bb-orbit-label {
    font-size: 9px;
    letter-spacing: 1px;
    white-space: normal;
    text-align: center;
  }
}

@media (prefers-reduced-motion: reduce) {
  .bb-orbit-rotor,
  .bb-orbit-item {
    animation: none;
  }
}


/* BLACKBAR ORBIT — PERFORMANCE OPTIMIZATION */

.bb-orbit-stage {
  contain: layout paint;
}

.bb-orbit-rotor {
  animation-duration: 45s !important;
  will-change: transform;
  transform: translateZ(0);
  backface-visibility: hidden;
}

.bb-orbit-item {
  animation-duration: 45s !important;
  will-change: transform;
  backface-visibility: hidden;
}

.bb-knife-shape {
  filter: none !important;
}

.bb-orbit-ring {
  box-shadow: none !important;
}

.bb-orbit-item:hover,
.bb-orbit-item:focus-visible {
  filter: none !important;
  color: #ffffff;
}

@media (prefers-reduced-motion: reduce) {
  .bb-orbit-rotor,
  .bb-orbit-item {
    animation: none !important;
    will-change: auto;
  }
}


/* BLACKBAR — DESKTOP ORBIT WIDTH CORRECTION */

@media (min-width: 701px) {
  .bb-orbit-stage {
    width: min(720px, 68vw) !important;
    height: 430px !important;
    max-width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  .bb-orbit-rotor {
    inset: 15% 19% !important;
  }

  .bb-orbit-ring {
    inset: 18% 12% !important;
  }

  .bb-orbit-item {
    width: 155px !important;
  }

  .bb-knife-shape {
    transform: rotate(-18deg) scale(.82);
  }

  .bb-orbit-stage .bb-category-logo {
    width: 205px !important;
  }
}


/* BLACKBAR ORBIT V5 — REAL KNIFE IMAGES */

.bb-orbit-knife-photo {
  display: block;
  width: 155px;
  height: 80px;
  max-width: 100%;
  object-fit: contain;
  transform: rotate(-18deg);
  pointer-events: none;
  user-select: none;
}

.bb-orbit-item {
  gap: 5px;
}

@media (max-width: 700px) {
  .bb-orbit-knife-photo {
    width: 105px;
    height: 60px;
  }
}


/* BLACKBAR ORBIT V6 — EVEN KNIFE SPACING */

@media (min-width: 701px) {

  .bb-orbit-stage {
    width: min(720px, 68vw) !important;
    height: 430px !important;
  }

  .bb-orbit-rotor {
    inset: 0 !important;
  }

  .bb-orbit-item {
    width: 155px !important;
    margin: 0 !important;
    right: auto !important;
    bottom: auto !important;
    translate: -50% -50%;
  }

  /* Four equally spaced points on the ellipse */

  .bb-o1 {
    left: 50% !important;
    top: 10% !important;
  }

  .bb-o2 {
    left: 85% !important;
    top: 50% !important;
  }

  .bb-o3 {
    left: 50% !important;
    top: 90% !important;
  }

  .bb-o4 {
    left: 15% !important;
    top: 50% !important;
  }

}


/* BLACKBAR ORBIT V7 — FASTER ROTATION */

.bb-orbit-rotor,
.bb-orbit-item {
  animation-duration: 25s !important;
}


/* BLACKBAR ORBIT V9 — LABEL VISIBILITY */

.bb-orbit-rotor {
  isolation: isolate;
}

.bb-orbit-item {
  z-index: auto !important;
}

.bb-orbit-knife-photo {
  position: relative;
  z-index: 1;
  pointer-events: none;
}

.bb-orbit-label {
  position: relative;
  z-index: 100 !important;
  color: #ffffff !important;
  font-weight: 800 !important;
  -webkit-text-stroke: 1.5px #000000;
  paint-order: stroke fill;
  text-shadow:
    -2px -2px 0 #000,
     2px -2px 0 #000,
    -2px  2px 0 #000,
     2px  2px 0 #000,
     0 0 10px #000;
}


/* BLACKBAR V10 — ORBIT VISIBILITY AND SPACING */

@media (min-width: 701px) {

  /* Allow orbiting knives to extend beyond the stage */
  .hero {
    overflow: visible !important;
  }

  .bb-orbit-stage {
    contain: none !important;
    overflow: visible !important;
    isolation: isolate;
    z-index: 2;
    margin-bottom: 130px !important;
  }

  .bb-orbit-rotor {
    overflow: visible !important;
    z-index: 3;
  }

  /* Keep knife images and labels visible */
  .bb-orbit-item {
    overflow: visible !important;
    z-index: 4 !important;
    opacity: 1 !important;
    visibility: visible !important;
  }

  .bb-orbit-knife-photo {
    opacity: 1 !important;
    visibility: visible !important;
    z-index: 5 !important;
  }

  .bb-orbit-label {
    z-index: 6 !important;
  }

  /* Move heading below the entire orbit */
  .hero .hero-content {
    position: relative;
    z-index: 1;
    margin-top: 30px !important;
  }

}


/* BLACKBAR V11 — FULL-SCREEN DESKTOP ORBIT */

@media (min-width: 701px) {

  .hero {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 0 !important;
    padding-top: 0 !important;
    overflow: visible !important;
  }

  .bb-orbit-stage {
    width: min(720px, 68vw) !important;
    height: 430px !important;

    /* Reserve one full screen for the orbit */
    margin-top: max(80px, calc((100svh - 430px) / 2)) !important;
    margin-bottom: max(180px, calc((100svh - 430px) / 2)) !important;

    overflow: visible !important;
    contain: none !important;
  }

  .hero .hero-content {
    margin-top: 0 !important;
    padding-top: 60px !important;
  }

}


/* BLACKBAR V12 — FULL-SCREEN MOBILE ORBIT */

@media (max-width: 700px) {

  .hero {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 0 !important;
    padding-top: 0 !important;
    overflow: visible !important;
  }

  .bb-orbit-stage {
    width: 100% !important;
    height: 470px !important;

    /* Center the orbit in the first mobile screen */
    margin-top: max(65px, calc((100svh - 470px) / 2)) !important;
    margin-bottom: max(110px, calc((100svh - 470px) / 2)) !important;

    contain: none !important;
    overflow: visible !important;
  }

  .hero .hero-content {
    margin-top: 0 !important;
    padding-top: 40px !important;
  }

}


/* BLACKBAR V13 — COMPACT MOBILE ORBIT */

@media (max-width: 700px) {

  .bb-orbit-stage {
    width: min(100%, 340px) !important;
    height: 360px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    margin-top: max(75px, calc((100svh - 360px) / 2)) !important;
    margin-bottom: max(130px, calc((100svh - 360px) / 2)) !important;
    overflow: visible !important;
  }

  /* Reduce the orbit radius */
  .bb-orbit-rotor {
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
  }

  .bb-orbit-item {
    width: 100px !important;
    margin: 0 !important;
    right: auto !important;
    bottom: auto !important;
    translate: -50% -50%;
  }

  /* Four evenly spaced positions */
  .bb-o1 {
    left: 50% !important;
    top: 22% !important;
  }

  .bb-o2 {
    left: 73% !important;
    top: 50% !important;
  }

  .bb-o3 {
    left: 50% !important;
    top: 78% !important;
  }

  .bb-o4 {
    left: 27% !important;
    top: 50% !important;
  }

  .bb-orbit-knife-photo {
    width: 95px !important;
    height: 50px !important;
  }

  .bb-orbit-label {
    font-size: 9px !important;
    letter-spacing: .5px !important;
    line-height: 1.2;
  }

  .bb-orbit-stage .bb-category-logo {
    width: 135px !important;
  }

}


/* BLACKBAR V14 — MOBILE LOGO CLEARANCE */

@media (max-width: 700px) {

  .bb-orbit-stage {
    width: min(100%, 340px) !important;
    height: 360px !important;
  }

  /* Increase the radius without enlarging the knives */

  .bb-o1 {
    left: 50% !important;
    top: 16% !important;
  }

  .bb-o2 {
    left: 78% !important;
    top: 50% !important;
  }

  .bb-o3 {
    left: 50% !important;
    top: 84% !important;
  }

  .bb-o4 {
    left: 22% !important;
    top: 50% !important;
  }

  .bb-orbit-knife-photo {
    width: 95px !important;
    height: 50px !important;
  }

}


/* BLACKBAR V15 — SECONDARY COUNTER-ROTATING ORBIT */

.bb-secondary-orbit {
  position: absolute;
  inset: 0;
  z-index: 7;
  pointer-events: none;
  overflow: visible;
}

.bb-secondary-ring {
  position: absolute;
  inset: 28% 24%;
  border: 1px dashed rgba(195,205,215,.24);
  border-radius: 50%;
  pointer-events: none;
}

.bb-secondary-rotor {
  position: absolute;
  inset: 0;
  animation: bb-secondary-turn 35s linear infinite;
  will-change: transform;
  pointer-events: none;
}

.bb-secondary-item {
  position: absolute;
  width: 150px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  color: #fff;
  text-decoration: none;
  pointer-events: auto;
  animation: bb-secondary-counterturn 35s linear infinite;
  translate: -50% -50%;
}

.bb-s1 {
  left: 50%;
  top: 25%;
}

.bb-s2 {
  left: 72%;
  top: 65%;
}

.bb-s3 {
  left: 28%;
  top: 65%;
}

.bb-secondary-marker {
  display: block;
  width: 12px;
  height: 12px;
  border: 1px solid #f0f2f4;
  border-radius: 50%;
  background: linear-gradient(135deg,#fff,#737c86);
  box-shadow: 0 0 12px rgba(220,230,240,.45);
}

.bb-secondary-label {
  color: #fff;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 1px;
  text-align: center;
  -webkit-text-stroke: 1px #000;
  paint-order: stroke fill;
  text-shadow: 0 2px 6px #000;
}

@keyframes bb-secondary-turn {
  from { transform: rotate(0deg); }
  to   { transform: rotate(-360deg); }
}

@keyframes bb-secondary-counterturn {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

.bb-orbit-stage:hover .bb-secondary-rotor,
.bb-orbit-stage:focus-within .bb-secondary-rotor,
.bb-orbit-stage:hover .bb-secondary-item,
.bb-orbit-stage:focus-within .bb-secondary-item {
  animation-play-state: paused;
}

@media (max-width: 700px) {
  .bb-secondary-item {
    width: 100px;
  }

  .bb-secondary-label {
    font-size: 8px;
    letter-spacing: .3px;
  }

  .bb-secondary-marker {
    width: 9px;
    height: 9px;
  }

  .bb-s1 { left: 50%; top: 27%; }
  .bb-s2 { left: 68%; top: 62%; }
  .bb-s3 { left: 32%; top: 62%; }
}

@media (prefers-reduced-motion: reduce) {
  .bb-secondary-rotor,
  .bb-secondary-item {
    animation: none !important;
  }
}


/* BLACKBAR V16 — SECONDARY ORBIT KNIVES */

.bb-secondary-item {
  gap: 5px;
  z-index: 8;
}

.bb-secondary-knife-photo {
  display: block;
  position: relative;
  width: 135px;
  height: 65px;
  max-width: 100%;
  object-fit: contain;
  transform: rotate(18deg);
  pointer-events: none;
  user-select: none;
}

.bb-secondary-label {
  position: relative;
  z-index: 9;
  color: #ffffff;
  font-weight: 800;
  -webkit-text-stroke: 1.2px #000000;
  paint-order: stroke fill;
  text-shadow:
    -2px -2px 0 #000,
     2px -2px 0 #000,
    -2px  2px 0 #000,
     2px  2px 0 #000;
}

@media (max-width: 700px) {
  .bb-secondary-knife-photo {
    width: 85px;
    height: 45px;
  }

  .bb-secondary-label {
    font-size: 8px;
    line-height: 1.2;
  }
}


/* BLACKBAR V17 — OUTER ORBIT SEPARATION */

/* Desktop */
@media (min-width: 701px) {

  .bb-o1 {
    left: 50% !important;
    top: 2% !important;
  }

  .bb-o2 {
    left: 94% !important;
    top: 50% !important;
  }

  .bb-o3 {
    left: 50% !important;
    top: 98% !important;
  }

  .bb-o4 {
    left: 6% !important;
    top: 50% !important;
  }

}

/* Mobile */
@media (max-width: 700px) {

  .bb-o1 {
    left: 50% !important;
    top: 8% !important;
  }

  .bb-o2 {
    left: 84% !important;
    top: 50% !important;
  }

  .bb-o3 {
    left: 50% !important;
    top: 92% !important;
  }

  .bb-o4 {
    left: 16% !important;
    top: 50% !important;
  }

}