#bo-user-ambience,
#bo-user-ambience-tiles {
  position: fixed;
  inset: 0;
  pointer-events: none;
  user-select: none;
  overflow: hidden;
}

/*
 * Global ambience tile layer.
 * Keep this very far back, but slightly above the deepest site background.
 */
#bo-user-ambience-tiles {
  z-index: 0;
  display: grid;
  grid-template-columns: repeat(var(--bo-ambience-tile-columns, 32), var(--bo-ambience-tile-size, 4vw));
  grid-auto-rows: var(--bo-ambience-tile-size, 4vw);
  opacity: 0.8;
}

.bo-user-ambience-tile {
  display: block;
  width: var(--bo-ambience-tile-size, 4vw);
  height: var(--bo-ambience-tile-size, 4vw);
  border: 1px solid rgba(0, 80, 180, 0.045);
  background: transparent;
  box-shadow: none;
  opacity: 0;

  transform: translateY(0) scale(1);
  transform-origin: center center;

  transition:
    opacity 1.6s ease,
    background-color 1.6s ease,
    box-shadow 1.6s ease,
    transform 1.6s ease,
    filter 1.6s ease;
}

.bo-user-ambience-tile.is-glowing {
  position: relative;
  opacity: 1;
}

.bo-user-ambience-tile.is-cyan {
  color: rgba(0, 220, 255, 0.85);
  background-color: rgba(0, 220, 255, 0.24);
  box-shadow:
    inset 0 0 14px rgba(255, 255, 255, 0.16),
    0 0 24px rgba(0, 220, 255, 0.30);
}

.bo-user-ambience-tile.is-violet {
  color: rgba(130, 70, 255, 0.85);
  background-color: rgba(130, 70, 255, 0.22);
  box-shadow:
    inset 0 0 14px rgba(255, 255, 255, 0.13),
    0 0 26px rgba(130, 70, 255, 0.28);
}

.bo-user-ambience-tile.is-magenta {
  color: rgba(255, 45, 180, 0.85);
  background-color: rgba(255, 45, 180, 0.18);
  box-shadow:
    inset 0 0 14px rgba(255, 255, 255, 0.12),
    0 0 26px rgba(255, 45, 180, 0.24);
}

.bo-user-ambience-tile.is-blue {
  color: rgba(20, 80, 255, 0.85);
  background-color: rgba(20, 80, 255, 0.20);
  box-shadow:
    inset 0 0 14px rgba(255, 255, 255, 0.12),
    0 0 26px rgba(20, 80, 255, 0.24);
}

/*
 * Topographic cluster depth.
 * Perimeter tiles stay flatter/fainter, center tiles rise/glow more.
 */
.bo-user-ambience-tile.is-glowing.bo-depth-0 {
  transform: translateY(0) scale(1);
  filter: brightness(0.88) saturate(0.9);
  opacity: 0.42;
}

.bo-user-ambience-tile.is-glowing.bo-depth-1 {
  transform: translateY(-1px) scale(1.015);
  filter: brightness(1) saturate(1.05);
  opacity: 0.58;
}

.bo-user-ambience-tile.is-glowing.bo-depth-2 {
  transform: translateY(-2px) scale(1.035);
  filter: brightness(1.14) saturate(1.18);
  opacity: 0.74;
}

.bo-user-ambience-tile.is-glowing.bo-depth-3 {
  transform: translateY(-3px) scale(1.055);
  filter: brightness(1.32) saturate(1.32);
  opacity: 0.9;
}

.bo-user-ambience-tile.is-glowing.bo-depth-4 {
  transform: translateY(-4px) scale(1.08);
  filter: brightness(1.55) saturate(1.55);
  opacity: 1;
}

/*
 * Extra peak glow for center-ish tiles.
 */
.bo-user-ambience-tile.is-glowing.bo-depth-3,
.bo-user-ambience-tile.is-glowing.bo-depth-4 {
  box-shadow:
    inset 0 0 18px rgba(255, 255, 255, 0.24),
    0 0 28px rgba(255, 255, 255, 0.14),
    0 0 52px currentColor;
}

/*
 * Occasional ignition sparkle.
 * This is no longer responsible for the height effect. It just adds a little
 * hot spot inside the cluster.
 */
.bo-user-ambience-tile.is-cluster-core {
  filter: brightness(1.75) saturate(1.7);
  box-shadow:
    inset 0 0 22px rgba(255, 255, 255, 0.32),
    0 0 38px rgba(255, 255, 255, 0.22),
    0 0 68px currentColor;
}

/*
 * Large user-page-only signature.
 */
#bo-user-ambience {
  z-index: -9;

  display: flex;
  align-items: center;
  justify-content: center;

  opacity: 0.72;
}

.bo-user-ambience__text {
  position: relative;
  display: block;
  max-width: 180vw;

  font-family: "Brush Script MT", "Segoe Script", "Snell Roundhand", cursive;
  font-size: clamp(6rem, 16vw, 22rem);
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
  text-align: center;

  color: rgba(8, 8, 88, 0.95);

  transform: rotate(-24deg) scale(1.18);

  text-shadow:
    0 0 2px rgba(8, 8, 88, 0.85),
    0 0 8px rgba(8, 8, 88, 0.65),
    0 0 18px rgba(0, 120, 255, 0.50),
    0 0 42px rgba(0, 210, 255, 0.34),
    0 0 78px rgba(170, 70, 255, 0.32),
    0 0 130px rgba(255, 45, 180, 0.18);

  mix-blend-mode: normal;
}

.bo-user-ambience__text::before {
  content: attr(data-ambience-text);
  position: absolute;
  inset: 0;
  z-index: -1;

  color: rgba(0, 180, 255, 0.38);

  filter: blur(12px);

  text-shadow:
    0 0 24px rgba(0, 210, 255, 0.48),
    0 0 64px rgba(120, 70, 255, 0.38),
    0 0 120px rgba(255, 45, 180, 0.24);

  opacity: 0.85;
}

@media (max-width: 700px) {
  #bo-user-ambience {
    opacity: 0.62;
  }

  .bo-user-ambience__text {
    font-size: clamp(4.5rem, 22vw, 11rem);
    transform: rotate(-28deg) scale(1.22);

    text-shadow:
      0 0 2px rgba(8, 8, 88, 0.85),
      0 0 8px rgba(8, 8, 88, 0.65),
      0 0 18px rgba(0, 120, 255, 0.42),
      0 0 38px rgba(0, 210, 255, 0.30),
      0 0 72px rgba(170, 70, 255, 0.28),
      0 0 120px rgba(255, 45, 180, 0.16);
  }

  .bo-user-ambience__text::before {
    filter: blur(9px);

    text-shadow:
      0 0 20px rgba(0, 210, 255, 0.42),
      0 0 52px rgba(120, 70, 255, 0.32),
      0 0 95px rgba(255, 45, 180, 0.18);
  }
}

@media (prefers-reduced-motion: reduce) {
  #bo-user-ambience-tiles {
    display: none;
  }
}

#bo-user-ambience-tiles {
  z-index: -1;
  display: grid;
  width: 100vw;
  height: 100vh;
  grid-template-columns: repeat(var(--bo-ambience-tile-columns, 32), var(--bo-ambience-tile-size, 4vw));
  grid-auto-rows: var(--bo-ambience-tile-size, 4vw);
  opacity: 0.8;
  contain: layout paint style;
}