/* Ambitious mist. Six soft blooms drifting over the shell: a core of the
   brand blue, a ring of its lighter steps and the blue tint, and one warm
   beige-white counterweight so the field has a range rather than one wash.

   motion-gradient: every bloom below is repositioned, rescaled and hue-shifted
   each frame by mountBloom(), and the grain drifts on its own keyframes. None
   of it is ever still and none of it is a surface. Static elements stay flat.

   Colours are mixed from the tokens rather than restated as rgba, so the mist
   follows the palette. */

.bloom-stage {
  position: fixed; inset: 0; z-index: 0;
  overflow: hidden; pointer-events: none;
  background: var(--surface-shell);
}

.bloom-stage .bloom {
  position: absolute; top: 50%; left: 50%;
  border-radius: var(--radius-full);
  filter: blur(90px);
  will-change: transform, filter;
  mix-blend-mode: multiply;
  transform: translate(-50%, -50%);
}

/* Core: the brand blue itself, at its strongest in the centre. */
.bloom-stage .bloom-1 {
  width: 72vmin; height: 72vmin;
  background: radial-gradient(circle at center,
    color-mix(in srgb, var(--teal-500) 66%, transparent) 0%,
    color-mix(in srgb, var(--teal-500) 50%, transparent) 30%,
    color-mix(in srgb, var(--teal-300) 30%, transparent) 52%,
    transparent 72%);
}

/* Broad cloud, the blue tint pulled halfway back to the brand blue. */
.bloom-stage .bloom-2 {
  width: 96vmin; height: 96vmin;
  background: radial-gradient(circle at center,
    color-mix(in srgb, color-mix(in srgb, var(--blue-tint), var(--teal-300)) 72%, transparent) 0%,
    color-mix(in srgb, var(--sky-100) 60%, transparent) 40%,
    transparent 72%);
}

/* Mid ramp. */
.bloom-stage .bloom-3 {
  width: 64vmin; height: 64vmin;
  background: radial-gradient(circle at center,
    color-mix(in srgb, var(--teal-300) 70%, transparent) 0%,
    color-mix(in srgb, var(--teal-200) 45%, transparent) 40%,
    transparent 70%);
}

/* Pale ramp, wide and thin. */
.bloom-stage .bloom-4 {
  width: 110vmin; height: 80vmin;
  background: radial-gradient(ellipse at center,
    color-mix(in srgb, var(--teal-100) 80%, transparent) 0%,
    color-mix(in srgb, var(--sky-50) 50%, transparent) 45%,
    transparent 72%);
}

/* Warm counterweight from the beige-white, kept light so it never greys the blue. */
.bloom-stage .bloom-5 {
  width: 70vmin; height: 70vmin;
  background: radial-gradient(circle at center,
    color-mix(in srgb, var(--paper-150) 55%, transparent) 0%,
    color-mix(in srgb, var(--off-white) 40%, transparent) 40%,
    transparent 70%);
}

/* Small bright knot of the tint that wanders across the core. */
.bloom-stage .bloom-6 {
  width: 42vmin; height: 42vmin;
  background: radial-gradient(circle at center,
    color-mix(in srgb, var(--blue-tint) 70%, transparent) 0%,
    color-mix(in srgb, var(--teal-200) 35%, transparent) 45%,
    transparent 70%);
}

/* Grain keeps the blur from banding on wide screens. */
.bloom-stage .bloom-grain {
  position: absolute; inset: -20%;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.4  0 0 0 0 0.45  0 0 0 0 0.45  0 0 0 0.6 0'/></filter><rect width='100%' height='100%' filter='url(%23n)' opacity='0.5'/></svg>");
  opacity: 0.06; mix-blend-mode: multiply;
  animation: bloom-grain-shift 8s steps(6) infinite;
}

@keyframes bloom-grain-shift {
  0%,100% { transform: translate(0,0); }
  25%     { transform: translate(-3%,2%); }
  50%     { transform: translate(2%,-2%); }
  75%     { transform: translate(-1%,-3%); }
}

@media (prefers-reduced-motion: reduce) {
  .bloom-stage .bloom-grain { animation: none; }
}