/* Treatly holographic logo — uncontained; glow and wave spill past the nav chip */

.holo-logo-host,
.ni-add-holo[data-holo-logo] {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: visible !important;
  border-radius: 0;
  background: none !important;
  background-color: transparent !important;
  pointer-events: none;
  contain: none;
  isolation: auto;
}

.holo-logo-canvas {
  display: block;
  overflow: visible;
  border-radius: 0;
  background: none !important;
  background-color: transparent !important;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  pointer-events: auto;
}

#n-add {
  overflow: visible !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

#n-add .ni-inner {
  overflow: visible !important;
  pointer-events: none;
}

#n-add .ni-add-holo[data-holo-logo],
#n-add .ni-add-holo-mini[data-holo-logo] {
  width: 62px;
  height: 62px;
  margin-bottom: 0;
  transform: translateY(-10px);
  box-shadow: none;
  pointer-events: none;
  background: none !important;
  animation: holo-nav-float 5.5s ease-in-out infinite;
}

#n-add .ni-add-ring .ni-add-holo-mini[data-holo-logo] {
  width: 48px;
  height: 48px;
  transform: translate(-50%, -50%);
  left: 50%;
  top: 50%;
  margin: 0;
  animation: none;
}

#n-add.ni-add--turbo-on .ni-add-ring .ni-add-holo-mini[data-holo-logo] {
  animation: holo-nav-float 5.5s ease-in-out infinite;
}

#n-add .holo-logo-canvas {
  filter: drop-shadow(0 0 10px rgba(48, 120, 200, 0.62))
    drop-shadow(0 0 24px rgba(36, 96, 180, 0.4))
    drop-shadow(0 0 42px rgba(60, 100, 200, 0.22));
}

@keyframes holo-nav-float {
  0%,
  100% {
    transform: translateY(-10px);
  }
  50% {
    transform: translateY(-15px);
  }
}

@media (prefers-reduced-motion: reduce) {
  #n-add .ni-add-holo[data-holo-logo] {
    animation: none;
  }
}

#n-add.ni-add--ghost-min .ni-add-holo[data-holo-logo] {
  box-shadow: none;
}

#n-add.ni-add--ghost-min .holo-logo-canvas {
  filter: drop-shadow(0 0 12px rgba(48, 120, 200, 0.5))
    drop-shadow(0 0 28px rgba(36, 96, 180, 0.28));
}

.holo-logo-host--lg {
  width: min(320px, 80vw);
  height: min(320px, 80vw);
  margin: 0 auto;
}

@media (prefers-reduced-motion: reduce) {
  .holo-logo-canvas {
    animation: none;
  }
}