/* Procedural hero light field inspired by the motion language of Rujira. */
#hero {
  isolation: isolate;
  z-index: 0;
}

#hero > .crypton-aurora-stage {
  position: absolute;
  z-index: 0;
  top: -224px;
  left: 50%;
  width: 100vw;
  height: clamp(780px, 100vh, 1080px);
  transform: translateX(-50%);
  overflow: hidden;
  pointer-events: none;
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 72%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 0%, #000 72%, transparent 100%);
}

#hero > .crypton-aurora-stage::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 50% 43%, transparent 0 18%, rgba(3, 3, 3, 0.08) 52%, rgba(3, 3, 3, 0.54) 100%),
    linear-gradient(180deg, rgba(3, 3, 3, 0.04), transparent 18%, transparent 75%, #030303 100%);
}

.crypton-aurora-canvas {
  display: block;
  width: 100%;
  height: 100%;
  opacity: 0.9;
}

#hero > :not(.crypton-aurora-stage) {
  position: relative;
  z-index: 2;
}

body.crypton-aurora-active .framer-6b2916[data-framer-name="Lights"] {
  opacity: 0 !important;
}

@media (max-width: 809px) {
  #hero > .crypton-aurora-stage {
    top: -176px;
    height: 820px;
  }

  .crypton-aurora-canvas {
    opacity: 0.78;
  }
}

@media (prefers-reduced-motion: reduce) {
  .crypton-aurora-canvas {
    opacity: 0.72;
  }
}