/* Nebula — EXACT replica of website/ Webflow gradient background

   In Webflow:
   .main-shapes-wrapper    = bg: #00051f, blur: 120px, NO blend mode
   .blending-group-wrapper = bg: black,   blur: 100px, mix-blend-mode: overlay
   .space-grid             = opacity: 0.5, z-index: 0
   .background-noise       = noise.png, opacity: 0.3
*/

:root {
  --blue-nebula: #8294ff;
  --beige: #f1dac4;
  --orange: #d58e4b;
  --deep-black: #00051f;
}

/* ── Outer wrapper ── */
.nebula-wrapper {
  position: absolute;
  inset: 0;
  overflow: hidden;
  z-index: 0;
  max-height: 1200px;
  -webkit-mask-image: linear-gradient(to bottom, black 0%, black 70%, transparent 100%);
  mask-image: linear-gradient(to bottom, black 0%, black 70%, transparent 100%);
}

/* ── Ultra gradient wrapper ──
   font-size: 1vw makes all em units scale with viewport */
.ultra-gradient-wrapper {
  background-color: transparent;
  width: 100%;
  height: 130vh;
  font-size: 1vw;
  position: absolute;
  inset: 0 0 auto;
  overflow: visible;
}

/* GPU hint */
.gradient-animation-shape {
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

/* ── Top shape group ──
   bg: #00051f (dark blue), blur: 120px, NO blend mode
   Positioned down via top offset */
.main-shapes-wrapper {
  background-color: var(--deep-black);
  filter: blur(120px);
  position: relative;
  top: 36.4rem;
}

/* ── Blending group ──
   bg: black, blur, overlay blend = the colored glow effect */
.blending-group-wrapper {
  z-index: 1;
  background-color: black;
  filter: blur(120px);
  mix-blend-mode: overlay;
}
.blending-group-wrapper._2-copy {
  filter: blur(100px);
  position: relative;
  top: 41.3em;
}

/* ── Individual shapes ── */
.shape-3-b {
  background-color: var(--blue-nebula);
  border-radius: 999em;
  width: 50em;
  height: 50vh;
  position: absolute;
  top: -3.1em;
  left: -21.5em;
  right: 0;
}

.shape-9-b-copy {
  background-color: var(--blue-nebula);
  border-radius: 999em;
  width: 25em;
  height: 25em;
  position: absolute;
  top: 12.6em;
  right: 31.5em;
  transform: rotate(39deg);
}

.shape-5-c3 {
  background-color: var(--blue-nebula);
  opacity: 0.72;
  border-radius: 999em;
  width: 33em;
  height: 33em;
  margin-left: auto;
  margin-right: auto;
  position: absolute;
  top: -1.8em;
  left: 0;
  right: 27%;
}

.shape-7-c4 {
  z-index: 1;
  background-color: var(--blue-nebula);
  background-image: linear-gradient(124deg, var(--blue-nebula), var(--blue-nebula) 20%, var(--beige));
  border-radius: 999em;
  width: 46em;
  height: 46em;
  position: absolute;
  inset: 5vh 0 auto auto;
  transform: rotate(40deg);
}

.shape-7-c-copy-copy {
  background-color: var(--purple-nebula, #9c77e8);
  border-radius: 999em;
  width: 21.6em;
  height: 26.4em;
  position: absolute;
  inset: 16vh 5% 0 auto;
  transform: rotate(40deg);
}

.shape-6-b54 {
  background-color: var(--beige);
  filter: blur(100px);
  border-radius: 999em;
  width: 46em;
  height: 28em;
  margin-left: auto;
  position: absolute;
  inset: 28vh auto auto -30%;
  transform: rotate(18deg);
}

.shape-6-b5 {
  background-color: var(--orange);
  border-radius: 999em;
  width: 28em;
  height: 16em;
  margin-left: auto;
  position: absolute;
  top: -3em;
  right: -18.6em;
  transform: rotate(60deg);
}

.shape-6-b5-copy {
  background-color: var(--orange);
  border-radius: 999em;
  width: 20em;
  height: 16em;
  margin-left: auto;
  position: absolute;
  inset: -12vw auto auto -10%;
  transform: rotate(60deg);
}

/* ── Nebula drift animations ── */
@keyframes nebula-drift-1 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  25% { transform: translate(4em, -5em) scale(1.05); }
  50% { transform: translate(-2em, 3em) scale(0.95); }
  75% { transform: translate(3em, 2em) scale(1.03); }
}
@keyframes nebula-drift-2 {
  0%, 100% { transform: translate(0, 0) rotate(39deg) scale(1); }
  33% { transform: translate(-4em, 5em) rotate(46deg) scale(1.08); }
  66% { transform: translate(3em, -3em) rotate(34deg) scale(0.94); }
}
@keyframes nebula-drift-3 {
  0%, 100% { transform: translate(0, 0) rotate(40deg) scale(1); }
  25% { transform: translate(4em, 3em) rotate(35deg) scale(1.06); }
  50% { transform: translate(-2em, -5em) rotate(47deg) scale(0.93); }
  75% { transform: translate(-3em, 2em) rotate(38deg) scale(1.04); }
}
@keyframes nebula-drift-4 {
  0%, 100% { transform: translate(0, 0) rotate(18deg) scale(1); }
  33% { transform: translate(-5em, 3em) rotate(12deg) scale(1.07); }
  66% { transform: translate(3em, -3em) rotate(23deg) scale(0.95); }
}
@keyframes nebula-drift-5 {
  0%, 100% { transform: translate(0, 0) rotate(60deg) scale(1); }
  33% { transform: translate(4em, -4em) rotate(66deg) scale(1.06); }
  66% { transform: translate(-3em, 4em) rotate(55deg) scale(0.94); }
}

.shape-3-b { animation: nebula-drift-1 24s ease-in-out infinite; }
.shape-9-b-copy { animation: nebula-drift-2 28s ease-in-out infinite; }
.shape-5-c3 { animation: nebula-drift-1 32s ease-in-out infinite reverse; }
.shape-7-c4 { animation: nebula-drift-3 26s ease-in-out infinite; }
.shape-7-c-copy-copy { animation: nebula-drift-3 30s ease-in-out infinite reverse; }
.shape-6-b54 { animation: nebula-drift-4 22s ease-in-out infinite; }
.shape-6-b5 { animation: nebula-drift-5 24s ease-in-out infinite; }
.shape-6-b5-copy { animation: nebula-drift-5 28s ease-in-out infinite reverse; }

/* ── Grid overlay — .space-grid from Webflow ── */
.nebula-grid {
  z-index: 0;
  opacity: 0.5;
  color: white;
  width: 100%;
  position: absolute;
  top: 0;
}
.nebula-grid svg {
  width: 100%;
  height: auto;
}

/* ── Noise — real noise.png from Webflow ── */
.nebula-noise {
  z-index: 2;
  opacity: 0.3;
  background-image: url('../images/noise.png');
  background-position: 0 0;
  background-size: auto;
  width: 100%;
  height: 100%;
  min-height: 100vh;
  display: block;
  position: absolute;
  inset: 0;
  pointer-events: none;
}


/* ── Responsive ── */
@media screen and (max-width: 991px) {
  .ultra-gradient-wrapper {
    height: 100vh;
  }
  .main-shapes-wrapper {
    top: 28rem;
  }
  .blending-group-wrapper._2-copy {
    top: 30em;
  }
}

@media screen and (max-width: 767px) {
  .ultra-gradient-wrapper {
    height: 80vh;
  }
  .main-shapes-wrapper {
    top: 20rem;
  }
  .blending-group-wrapper._2-copy {
    top: 20em;
  }
}