/* Aurora Icosahedron Styles */
.aurora-hero {
  height: 100vh;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: "Poppins", sans-serif;
  background: #050505;
  color: #eaeaea;
  position: relative;
}

/* aurora layers (pure CSS base, animated by JS transforms) */
.aurora-layer {
  position: absolute;
  inset: 0;
  filter: blur(140px) saturate(1.6);
  mix-blend-mode: screen;
  opacity: 0.85;
  will-change: transform, opacity;
  z-index: 0;
  pointer-events: none;
}

/* use your brand colors as core */
#auroraA {
  background: radial-gradient(
    circle at 22% 36%,
    rgba(181, 85, 39, 0.92) 0%,
    rgba(217, 136, 106, 0.5) 20%,
    rgba(217, 136, 106, 0.15) 35%,
    transparent 55%
  );
}
#auroraB {
  background: radial-gradient(
    circle at 78% 64%,
    rgba(112, 152, 192, 0.92) 0%,
    rgba(129, 155, 190, 0.5) 20%,
    rgba(140, 130, 200, 0.15) 35%,
    transparent 55%
  );
}

/* vignette & canvas */
.vignette {
  position: absolute;
  inset: 0;
  z-index: 4;
  background: radial-gradient(
    circle at center,
    transparent 66%,
    rgba(0, 0, 0, 0.78)
  );
  pointer-events: none;
}

#icosahedron {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
  display: block;
}