/* Scatter — spinning capsule composition
   Instance values arrive as custom properties set inline in
   module.html, so this file stays static and cacheable. */

.deq-scatter { display: flex; width: 100%; }

.deq-scatter--left   { justify-content: flex-start; }
.deq-scatter--center { justify-content: center; }
.deq-scatter--right  { justify-content: flex-end; }

.deq-scatter__stage {
  position: relative;
  width: 100%;
  max-width: var(--deq-max, 400px);
  aspect-ratio: 800 / 900;
  background: var(--deq-bg, #161623);
  overflow: hidden;

  /* ---- Tint ramp -------------------------------------------------
     Three shades: the two chosen colours and the midpoint between
     them, mixed live. Change either field and the middle step
     re-derives with them. */
  --deq-t1: var(--deq-base, #00E9D8);
  --deq-t2: color-mix(in srgb, var(--deq-base, #00E9D8) 50%, var(--deq-tint, #F5F5F5));
  --deq-t3: var(--deq-tint, #F5F5F5);
}

/* Precomputed midpoint for browsers without color-mix. This is the
   #00E9D8 -> #F5F5F5 blend at 50%, so the default look is identical;
   only a custom base colour would differ. */
@supports not (color: color-mix(in srgb, red, blue)) {
  .deq-scatter__stage { --deq-t2: #7AEFE6; }
}

@supports not (aspect-ratio: 800 / 900) {
  .deq-scatter__stage { height: 0; padding-bottom: 112.5%; }
}

.deq-scatter__stage > svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.deq-scatter__stage [data-spin] { will-change: transform; }