/* CUICelebration - mirrors motion/celebration/cui_celebration.dart.
   Wrapper clips to a pill; AnimatedSize 400ms easeOut (JS sets width/height), AnimatedSwitcher 200ms cross-fade,
   ghost pill (base colour + shadow md) under a toast pill that rises/holds/exits (JS, WAAPI). */
.cui-celebration { display: inline-block; vertical-align: top; max-width: 100%;
  --_base: var(--cui-color-surface-bg-brand);
  --_toast-bg: var(--cui-color-surface-bg-warning-muted);
  --_toast-fg: var(--cui-color-text-warning); }
.cui-celebration__clip { position: relative; overflow: hidden; border-radius: var(--cui-radius-pill); display: block; }
.cui-celebration__rest, .cui-celebration__ride { display: block; }
.cui-celebration__rest { transition: none; }
/* while both layers coexist (cross-fade) they stack on top of each other, centred */
.cui-celebration__clip.is-swapping > * { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: max-content; }
.cui-celebration__ride { position: relative; display: grid; place-items: center; }
.cui-celebration__ghost, .cui-celebration__toast {
  grid-area: 1 / 1;  border-radius: var(--cui-radius-pill);
  padding: var(--cui-space-md) var(--cui-space-lg);
  font-family: var(--cui-type-body-md-semi-family); font-size: var(--cui-type-body-md-semi-size);
  font-weight: var(--cui-type-body-md-semi-weight); letter-spacing: var(--cui-type-body-md-semi-spacing);
  line-height: round(up, var(--cui-type-body-md-semi-line), 1px); white-space: nowrap; display: flex; align-items: center; gap: var(--cui-space-xs); justify-content: center; }
.cui-celebration__ghost { background: var(--_base); color: transparent; box-shadow: var(--cui-shadow-md); }
.cui-celebration__toast { background: var(--_toast-bg); color: var(--_toast-fg); will-change: transform; }

/* demo scaffolding (the Widgetbook use case's trigger buttons) */
.cui-celebration-demo { display: flex; flex-direction: column; align-items: flex-start; gap: var(--cui-space-md); }
.cui-celebration-demo__actions { display: flex; flex-wrap: wrap; gap: var(--cui-space-xs); }
.cui-celebration-demo__btn { appearance: none; cursor: pointer; border: var(--cui-border-default) solid var(--cui-color-border-default);
  background: var(--cui-color-surface-bg-default); color: var(--cui-color-text-default);
  border-radius: var(--cui-radius-sm); padding: var(--cui-space-xs) var(--cui-space-sm);
  font-family: var(--cui-type-body-sm-semi-family); font-size: var(--cui-type-body-sm-semi-size);
  font-weight: var(--cui-type-body-sm-semi-weight); line-height: var(--cui-type-body-sm-semi-line); }
.cui-celebration-demo__btn:disabled { opacity: .5; cursor: default; }
.cui-celebration__fallback { display: inline-block; padding: var(--cui-space-xs) var(--cui-space-md); min-height: 48px; box-sizing: border-box;
  background: var(--cui-color-surface-bg-brand); color: var(--cui-color-text-on-brand); border-radius: var(--cui-radius-pill);
  font-family: var(--cui-type-body-md-semi-family); font-size: var(--cui-type-body-md-semi-size); font-weight: var(--cui-type-body-md-semi-weight);
  line-height: 30px; white-space: nowrap; }

.cui-celebration__ghost .cui-icon, .cui-celebration__toast .cui-icon { flex: none; width: var(--cui-size-icon-md); height: var(--cui-size-icon-md); font-size: var(--cui-size-icon-md); }
.cui-celebration__ghost .cui-icon { visibility: hidden; }