/* One horizontal settle. The sibling translates at its original width beneath the row clip. */
@property --circle-sibling-progress {
  syntax: '<number>';
  inherits: true;
  initial-value: 0;
}
@media (min-width: 861px) {
  html.circle-open {
    --circle-ease: var(--resurs-ease);
    --circle-gather: var(--resurs-open);
    --circle-expand: var(--resurs-open);
    --circle-card-open: var(--resurs-slow);
    --circle-card-ease: cubic-bezier(0.16, 1, 0.3, 1);
    /* act2-departments.css uses 30px per side above 1080px. */
    --circle-card-padding: 60px;
    --circle-edge-fade: 48px;
    --circle-mask-clear: rgb(from var(--light-opaque) r g b / 0);
    --circle-open-share: calc(var(--resurs-counter-open) / (var(--resurs-counter-open) + var(--resurs-counter-shut)));
  }
  html.circle-open .counters {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    container-type: inline-size;
    overflow: clip;
  }
  html.circle-open .counter {
    --circle-sibling-progress: 0;
    --circle-card-shift: calc((100cqi - var(--resurs-card-gap) - var(--circle-card-padding) * 2) * (var(--circle-open-share) - 0.5));
    width: 100%;
    transition: width var(--circle-card-open) var(--circle-card-ease),
                transform var(--circle-card-open) var(--circle-card-ease),
                --circle-sibling-progress var(--circle-card-open) var(--circle-card-ease),
                background var(--circle-expand) var(--circle-ease);
  }
  html.circle-open .counters:is([data-open='a'], [data-open='b']) .counter[aria-expanded='true'] {
    width: calc(100% + var(--circle-card-shift));
  }
  /* Master keeps its hints when closed; their reflow must not deepen the row. */
  html.circle-open .counters:is([data-open='a'], [data-open='b']) .counter {
    height: var(--circle-card-height);
  }
  html.circle-open .counter-hint { transition-duration: var(--resurs-open); }
  html.circle-open .counter[aria-expanded='true'] .counter-hint { display: none; }
  html.circle-open .counters[data-open='a'] .counter[data-contour='b'] {
    transform: translateX(var(--circle-card-shift));
  }
  html.circle-open .counters[data-open='b'] .counter {
    transform: translateX(calc(var(--circle-card-shift) * -1));
  }
  html.circle-open .counters[data-open] .dep-chips .plate { width: 40px; height: 40px; }
  html.circle-open .counter[data-circle-phase='gather'] { background: var(--resurs-surface); }
  html.circle-open .counter-face { transition: opacity var(--circle-expand) var(--circle-ease); }
  html.circle-open .counters:is([data-open='a'], [data-open='b']) .counter[aria-expanded='false'] {
    --circle-sibling-progress: 1;
  }
  html.circle-open .counter[aria-expanded='false'] .counter-face {
    width: 100%;
    margin-left: 0;
    opacity: 1;
    transition: width var(--circle-card-open) var(--circle-card-ease),
                margin-left var(--circle-card-open) var(--circle-card-ease);
  }
  html.circle-open .counters:is([data-open='a'], [data-open='b']) .counter[aria-expanded='false'] .counter-face {
    width: calc(100% - var(--circle-card-shift));
  }
  html.circle-open .counters[data-open='b'] .counter[data-contour='a'] .counter-face {
    margin-left: var(--circle-card-shift);
  }
  /* The plate strip keeps its layout; only its passage across the row edge fades. */
  html.circle-open .counter[aria-expanded='false'] .counter-preview {
    --circle-clipped-strip: max(0px, calc(var(--circle-sibling-progress) * var(--circle-card-shift) - var(--circle-card-padding) / 2));
    --circle-strip-fade: calc(var(--circle-sibling-progress) * var(--circle-edge-fade));
    /* Release the mask after the return to preserve the closed plate rasterization. */
    transition: mask-image var(--resurs-open) var(--circle-card-ease) var(--circle-card-open) allow-discrete;
  }
  html.circle-open .counters:is([data-open='a'], [data-open='b']) .counter[aria-expanded='false'] .counter-preview {
    transition: none;
    mask-image: linear-gradient(to right,
      var(--light-opaque) calc(100% - var(--circle-clipped-strip) - var(--circle-strip-fade)),
      var(--circle-mask-clear) calc(100% - var(--circle-clipped-strip)));
  }
  html.circle-open .counters[data-open='b'] .counter[data-contour='a'] .counter-preview {
    mask-image: linear-gradient(to right,
      var(--circle-mask-clear) var(--circle-clipped-strip),
      var(--light-opaque) calc(var(--circle-clipped-strip) + var(--circle-strip-fade)));
  }
  html.circle-open .counter[data-circle-phase='gather'] .counter-face { opacity: 0; }
  html.circle-open .counter-list { transition-duration: var(--circle-expand), var(--circle-expand); }
  html.circle-open .counter[aria-expanded='true'] .counter-list { transition-delay: var(--circle-gather); }
  html.circle-open .circle-transfer {
    transition: transform var(--circle-gather) var(--circle-ease) calc(var(--circle-expand) + var(--circle-delay));
  }
  html.circle-open .circle-seat {
    transition: transform var(--circle-expand) var(--circle-ease) var(--circle-delay);
  }
  html.circle-open .counter[aria-expanded='true'] .circle-transfer { transition-delay: 0s; }
  html.circle-open .counter[data-circle-phase='gather'] .circle-seat { transform: none; }
}
@media (min-width: 861px) and (max-width: 1080px) {
  html.circle-open { --circle-card-padding: 44px; }
}
@media (min-width: 861px) and (prefers-reduced-motion: reduce) {
  html.circle-open .counter,
  html.circle-open .counter-face { transition: none; }
}