/* Featured on Three.js Resources — shared across units */
.tjs-badge {
  position: fixed;
  z-index: 90;
  /* Desktop: top aligns with Works (under Get in touch + gap) */
  top: calc(var(--ui-pad-top, 1rem) + 2.9rem + 0.55rem);
  left: var(--ui-pad-left, 1rem);
  bottom: auto;
  display: inline-flex;
  align-items: center;
  gap: 0.62rem;
  padding: 0.4rem 0.75rem;
  background: #ffffff;
  border: 1px solid #e5e5e5;
  border-radius: 0.5rem;
  text-decoration: none;
  font-family: var(--font-body, sans-serif);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
  opacity: 0;
  pointer-events: none;
  cursor: pointer;
  transition:
    box-shadow 0.2s ease,
    border-color 0.2s ease;
  will-change: opacity, transform;
}

html.is-ready .tjs-badge {
  pointer-events: auto;
}

.tjs-badge:hover {
  border-color: #d4d4d4;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.12);
}

.tjs-badge__logo {
  display: block;
  width: 1.25rem;
  height: 1.25rem;
  object-fit: contain;
  flex-shrink: 0;
}

.tjs-badge__copy {
  display: flex;
  flex-direction: column;
  line-height: 1.1;
  gap: 0.08rem;
}

.tjs-badge__eyebrow {
  color: #000000;
  font-weight: 400;
  font-size: 0.625rem;
}

.tjs-badge__title {
  color: #000000;
  font-weight: 600;
  font-size: 0.75rem;
}

body.is-works-open .tjs-badge,
html.is-embed .tjs-badge,
html.is-special-attack .tjs-badge {
  opacity: 0 !important;
  visibility: hidden;
  pointer-events: none !important;
  transition: opacity 0.25s ease, visibility 0.25s;
}

@media (max-width: 900px) {
  /* Mobile: above bottom-left robot switches (unit-nav owns space under brand) */
  .tjs-badge {
    top: auto;
    left: var(--ui-pad-left, 0.85rem);
    right: auto;
    bottom: calc(var(--ui-pad-bottom, 0.85rem) + 9.75rem);
    gap: 0.5rem;
    padding: 0.35rem 0.65rem;
    border-radius: 0.45rem;
  }

  .tjs-badge__logo {
    width: 1.1rem;
    height: 1.1rem;
  }

  .tjs-badge__eyebrow {
    font-size: 0.55rem;
  }

  .tjs-badge__title {
    font-size: 0.68rem;
  }
}

@media (max-width: 480px) {
  .tjs-badge {
    bottom: calc(var(--ui-pad-bottom, 0.75rem) + 10.25rem);
    max-width: calc(100vw - var(--ui-pad-left, 0.75rem) - 8.5rem);
  }

  .tjs-badge__title {
    font-size: 0.64rem;
  }
}