/* Tesseract logo. The drawing is done on a canvas by assets/js/logo-cube.js (real 4D rotation,
   1px edges). The canvas is larger than the logo box so the shape can swell as it passes through
   the fourth dimension without being clipped; it never intercepts the pointer. */

.tesseract-logo {
  position: relative;
  display: block;
  flex: 0 0 auto;
  width: 48px;
  height: 48px;
  color: currentColor;
}

.tesseract-logo canvas {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 96px;
  height: 96px;
  margin: -48px 0 0 -48px;
  pointer-events: none;
  opacity: 0;
}

.tesseract-logo.is-ready canvas {
  opacity: 1;
}

/* Shown only until the script has drawn the first frame (or if scripts are off). */
.tesseract-fallback {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  border: 1px solid currentColor;
  font-size: 12px;
  font-weight: 800;
}

.tesseract-logo.is-ready .tesseract-fallback {
  display: none;
}

.brand-portfolio:focus-visible {
  outline: 1px solid currentColor;
  outline-offset: 4px;
}

@media (max-width: 900px) {
  .tesseract-logo {
    width: 42px;
    height: 42px;
  }

  .tesseract-logo canvas {
    width: 84px;
    height: 84px;
    margin: -42px 0 0 -42px;
  }
}