/* Swing animation — deq-swing
   Instance values arrive as custom properties set inline in
   module.html, so this file stays static and cacheable. */

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

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

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

  /* 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, so the
   default look is identical either way. */
@supports not (color: color-mix(in srgb, red, blue)) {
  .deq-swing__stage { --deq-t2: #7AEFE6; }
}

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

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

.deq-swing__stage [data-spin],
.deq-swing__stage [data-bounce] { will-change: transform; }