/* A quiet spatial-brain backdrop. The interface remains a separate layer. */
.brand-backdrop {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  user-select: none;
  background:
    radial-gradient(
      ellipse 67% 67% at 4% 16%,
      rgba(223, 215, 255, .45) 0%,
      rgba(237, 232, 255, .22) 46%,
      transparent 76%
    ),
    radial-gradient(
      ellipse 48% 72% at 105% 77%,
      rgba(209, 236, 223, .51) 0%,
      rgba(229, 244, 236, .25) 44%,
      transparent 77%
    );
}

.brand-backdrop .brain-watermark {
  position: absolute;
  display: block;
  width: 680px;
  max-width: none;
  height: auto;
  right: -150px;
  top: 50%;
  transform: translateY(-29%);
  object-fit: contain;
  opacity: .34;
  filter: saturate(.82);
  mix-blend-mode: multiply;
  pointer-events: none;
  user-select: none;
}

#app-shell {
  position: relative;
  z-index: 1;
}

/* The brain is the single illustration motif; the header keeps the brand. */
.studio-wordmark-art {
  display: none;
}

.studio-composer::before,
.studio-composer::after {
  content: none;
}

.splash {
  background-color: #fafafd;
  background-image:
    radial-gradient(ellipse 64% 70% at 5% 10%, rgba(228, 222, 255, .42), transparent 75%),
    radial-gradient(ellipse 50% 70% at 105% 85%, rgba(218, 240, 228, .42), transparent 76%);
}

.splash::before {
  content: "";
  position: absolute;
  width: 720px;
  height: 720px;
  right: -180px;
  top: 50%;
  transform: translateY(-31%);
  z-index: 0;
  background: url("assets/spatial-brain.png") center / contain no-repeat;
  opacity: .34;
  filter: saturate(.82);
  mix-blend-mode: multiply;
  pointer-events: none;
}

.splash-content {
  position: relative;
  z-index: 2;
}

@media (min-width: 1600px) {
  .brand-backdrop .brain-watermark {
    width: 760px;
    right: -130px;
  }
}

@media (max-width: 1100px) {
  .brand-backdrop .brain-watermark {
    width: 610px;
    right: -245px;
    opacity: .34;
  }
}

@media (max-width: 767px) {
  .brand-backdrop {
    background:
      radial-gradient(
        ellipse 100% 47% at -16% 7%,
        rgba(225, 218, 254, .45) 0%,
        rgba(239, 235, 255, .17) 53%,
        transparent 82%
      ),
      radial-gradient(
        ellipse 90% 63% at 116% 87%,
        rgba(211, 236, 224, .50) 0%,
        rgba(234, 246, 240, .20) 49%,
        transparent 82%
      );
  }

  .brand-backdrop .brain-watermark {
    width: 470px;
    right: -225px;
    top: auto;
    bottom: -55px;
    transform: none;
    opacity: .34;
  }

  .splash::before {
    width: 470px;
    height: 470px;
    right: -210px;
    top: auto;
    bottom: -30px;
    transform: none;
    opacity: .34;
  }
}

@media (max-width: 390px) {
  .brand-backdrop .brain-watermark {
    width: 440px;
    right: -225px;
    bottom: -40px;
  }
}

@media print {
  .brand-backdrop { display: none; }
}