/* Logo placement and navigation perspective. The camera itself lives in
   public/models/studio-logo.json and is exported from the original .blend. */
.sidebar {
  --studio-logo-roll: 2.5deg;
  --studio-logo-offset: -10px;
  --studio-nav-gap: 1.25rem;
  /* Exported from the STUDIO text plane at a 270px logo width. */
  --studio-nav-perspective-x: -0.000284812885;
  --studio-nav-perspective-y: 0.000128203980;
}

.sidebar-logo-visual {
  position: relative;
  display: block;
  aspect-ratio: 3845 / 3813;
  transform: translateX(var(--studio-logo-offset)) rotate(var(--studio-logo-roll));
  transform-origin: top center;
}

.sidebar .sidebar-logo {
  display: block;
  width: 100%;
  height: auto;
  transform: none;
}

.sidebar-logo-canvas {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  opacity: 0;
  pointer-events: none;
}

.sidebar-logo-visual.is-rendered .sidebar-logo {
  opacity: 0;
}

.sidebar-logo-visual.is-rendered .sidebar-logo-canvas {
  opacity: 1;
}

/* These stay real HTML links, including keyboard focus and text selection.
   Apply the same camera projection to the whole navigation plane. */
@media (min-width: 48em) {
  .sidebar {
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    padding-bottom: 1.25rem;
  }

  .sidebar .sidebar-sticky {
    position: static;
    flex: 1 0 auto;
    min-height: 0;
    width: 100%;
  }

  .sidebar .sidebar-sticky > * {
    flex-shrink: 0;
  }

  .sidebar .sidebar-nav {
    width: min(13.5rem, 100%);
    margin-top: var(--studio-nav-gap);
    transform-origin: top left;
    /* JavaScript projects this same plane on each frame of the logo tilt. */
    transform: rotate(var(--studio-logo-roll)) var(--studio-nav-projection, matrix3d(
      0.899982967, 0.117942864, 0, var(--studio-nav-perspective-x),
      0.054288279, 0.998525320, 0, var(--studio-nav-perspective-y),
      0, 0, 1, 0,
      0, 0, 0, 1
    ));
  }

  .sidebar .sidebar-nav-item {
    width: fit-content;
    min-height: 44px;
    padding: 0.5rem 0.2rem;
    font-size: 0.76rem;
    line-height: 1.75;
    letter-spacing: 0.18em;
  }

  .sidebar .sidebar-nav-item + .sidebar-nav-item {
    margin-top: 0.25rem;
  }

  .sidebar .sidebar-contact {
    margin-top: auto;
    padding-top: 2.5rem;
  }
}

.sidebar-logo-link:focus-visible,
.sidebar-nav-item:focus-visible {
  outline: 2px solid var(--accent-soft);
  outline-offset: 5px;
}

@media (min-width: 48em) and (max-height: 42em) {
  .sidebar .sidebar-logo-link {
    width: min(13.5rem, 34vh);
  }

  .sidebar .sidebar-about {
    margin-top: 0.5rem;
  }
}

@media (max-width: 47.999em) {
  .sidebar {
    --studio-logo-offset: 0px;
  }
}

@media (forced-colors: active) {
  .sidebar-logo-visual.is-rendered .sidebar-logo { opacity: 1; }
  .sidebar-logo-visual.is-rendered .sidebar-logo-canvas { opacity: 0; }
}