/* ═══════════════════ MORPHING LOGO — shared-element transition ═══════════════════
 * Fixed-position SVG logo that animates between the hero slot and the nav anchor
 * as the user scrolls. Controlled from js/morph-logo.js via GSAP ScrollTrigger.
 * ─────────────────────────────────────────────────────────── */

.morph-logo {
  position: fixed;
  top: 0;
  left: 0;
  width: 420px;
  pointer-events: none;
  z-index: 1100; /* above nav (1000) so it stays visible while docking */
  opacity: 0;
  will-change: transform, width;
}

.morph-logo.active {
  opacity: 1;
  transition: opacity 0.4s ease;
}

.morph-logo img,
.morph-logo svg {
  width: 100%;
  height: auto;
  display: block;
  filter: drop-shadow(0 0 18px rgba(224, 64, 251, 0.35));
}

/* Nav anchor — reserves the destination slot in the navbar.
   Empty, but sized so its bounding box is what the morph-logo docks to.
   Aspect matches nexwave-full.svg (449×182 ≈ 2.47:1). */
.nav-logo-anchor {
  width: 110px;
  height: 44px;
  flex-shrink: 0;
  pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
  .morph-logo { transition: opacity 0.3s ease; }
}