/* 3D JJ monogram in the hero (see hero-logo.js). The flat SVG inside is the fallback. */

.hero-logo {
  position: absolute;
  z-index: 4; /* above .hero-story-content (3) so clicks reach the logo */
  top: 50%;
  right: clamp(24px, 7vw, 130px);
  width: min(36vw, 520px);
  aspect-ratio: 1;
  transform: translateY(-52%);
  cursor: pointer;
}

.hero-logo canvas {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity 900ms ease;
}

.hero-logo.is-3d canvas {
  opacity: 1;
}

.hero-logo-fallback {
  position: absolute;
  inset: 8%;
  width: 84%;
  height: 84%;
  opacity: 0.95;
  filter: drop-shadow(0 0 42px rgba(91, 140, 255, 0.45));
  transition: opacity 600ms ease;
  pointer-events: none;
}

.hero-logo.is-3d .hero-logo-fallback {
  opacity: 0;
}

/* the 3D mark is now the focal point; let the existing signal graph recede */
.hero-story #hero-story-canvas {
  opacity: 0.4;
}

/* nav mark: the real monogram instead of a text tile */

@media (max-width: 900px) {
  .hero-logo {
    width: min(46vw, 360px);
  }
}

@media (max-width: 640px) {
  .hero-logo {
    top: 59%;
    right: 6vw;
    width: min(40vw, 170px);
    transform: none;
  }
}

/* very short phone screens: no room below the buttons, so skip the mark */
@media (max-width: 640px) and (max-height: 700px) {
  .hero-logo {
    display: none;
  }
}