/* Terracotta atmosphere for the whole site. The layer is fixed behind the
   document content, replacing the former page-sized grid. */

.concept-page-clouds {
  position: fixed;
  z-index: 0;
  inset: 0;
  overflow: hidden;
  background:
    radial-gradient(ellipse at 50% -12%, color-mix(in srgb, var(--palette-soft-ivory-bright) 24%, transparent), transparent 42%),
    radial-gradient(ellipse at 4% 42%, color-mix(in srgb, var(--palette-terracotta) 15%, transparent), transparent 48%),
    radial-gradient(ellipse at 96% 68%, color-mix(in srgb, var(--palette-terracotta) 11%, transparent), transparent 46%);
  width: 100vw;
  height: 100vh;
  opacity: .76;
  pointer-events: none;
  transition: opacity 900ms var(--concept-ease-out);
}

.concept-page > main,
.concept-page > .concept-footer {
  position: relative;
  z-index: 1;
}

.concept-page-clouds-source {
  display: none;
}

.concept-page-clouds-output {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  opacity: 0;
  pointer-events: none;
  transition: opacity 1100ms var(--concept-ease-out);
}

.concept-page-clouds.is-ready .concept-page-clouds-output {
  opacity: 1;
}

html[data-theme="light"] .concept-page-clouds {
  background:
    radial-gradient(ellipse at 50% -12%, color-mix(in srgb, var(--palette-soft-ivory-bright) 30%, transparent), transparent 42%),
    radial-gradient(ellipse at 4% 42%, color-mix(in srgb, var(--palette-terracotta) 12%, transparent), transparent 48%),
    radial-gradient(ellipse at 96% 68%, color-mix(in srgb, var(--palette-terracotta) 9%, transparent), transparent 46%);
  mix-blend-mode: multiply;
  opacity: .68;
}

@media (max-width: 720px) {
  .concept-page-clouds {
    opacity: .64;
  }

  html[data-theme="light"] .concept-page-clouds {
    opacity: .56;
  }
}

@media (prefers-reduced-motion: reduce) {
  .concept-page-clouds-output {
    display: none;
  }
}