/* Homepage Hero: isolated WebGL particle logo presentation. */
.hero-particle-visual {
  isolation: isolate;
  contain: layout style;
  overflow: visible;
  z-index: 1;
}

#home .hero-copy {
  position: relative;
  z-index: 3;
}

.hero-particle-visual::before {
  z-index: 0;
  inset: 13%;
  border-radius: 44% 56% 52% 48%;
  background:
    radial-gradient(ellipse at 48% 46%, rgba(34, 199, 255, 0.105), transparent 56%),
    radial-gradient(ellipse at 57% 59%, rgba(255, 32, 64, 0.035), transparent 72%);
  filter: blur(36px);
  opacity: 0.78;
}

.hero-particle-visual::after {
  display: none;
}

.particle-depth-halo {
  position: absolute;
  z-index: 1;
  inset: 10%;
  border-radius: 46% 54% 51% 49%;
  background:
    radial-gradient(ellipse at center, rgba(43, 194, 255, 0.05) 0%, rgba(18, 99, 170, 0.022) 43%, transparent 73%),
    radial-gradient(ellipse at 48% 52%, transparent 42%, rgba(98, 222, 255, 0.025) 58%, transparent 72%);
  filter: blur(10px);
  opacity: 0.56;
  pointer-events: none;
  animation: hero-particle-halo-breathe 7s ease-in-out infinite;
}

#logo-particle-canvas {
  position: absolute;
  z-index: 2;
  display: block;
  pointer-events: none;
  filter: none;
  outline: none;
  touch-action: pan-y;
  user-select: none;
  -webkit-user-select: none;
}

@media (pointer: fine) {
  .hero-particle-visual.supports-drag {
    cursor: grab;
    touch-action: none;
  }

  .hero-particle-visual.is-dragging {
    cursor: grabbing;
  }
}

@keyframes hero-particle-halo-breathe {
  0%, 100% { opacity: 0.44; transform: scale3d(0.985, 0.985, 1); }
  50% { opacity: 0.62; transform: scale3d(1.012, 1.012, 1); }
}

@media (max-width: 900px) {
  .hero-particle-visual::before {
    inset: 16%;
    opacity: 0.6;
    filter: blur(30px);
  }

  .particle-depth-halo {
    inset: 13%;
    opacity: 0.44;
  }
}

@media (prefers-reduced-motion: reduce) {
  .particle-depth-halo {
    animation: none !important;
  }
}