/* Background canvas styles only - don't override main page body styles */
#glCanvas {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  height: 100dvh;
  min-height: 100vh;
  z-index: 0;
  opacity: 0.9;
  display: block;
  pointer-events: none;
  background: #0a0514;
  transform: translateZ(0);
  backface-visibility: hidden;
}

html:not(.loading) #glCanvas.active {
  opacity: 0.9;
}

@media (min-width: 769px) {
  html:not(.loading) #glCanvas.active {
    transition: opacity 0.3s ease-out;
  }
}

@supports (height: 100svh) {
  #glCanvas {
    height: 100svh;
    min-height: 100svh;
  }
}

@media (max-width: 1024px) {
  #glCanvas {
    display: none !important;
  }
}

.feature-card {
  display: flex;
  flex-direction: column;
  height: 100%;
}