/* Siegel Financial v508 — premium one-shot Budget allocation reveal. */

.budget-page .budget-monthly-summary-bar {
  position: relative;
  isolation: isolate;
  transform-origin: 50% 58%;
}

.budget-page .budget-monthly-summary-bar.is-budget-allocation-pending {
  opacity: 0;
  transform: translateY(12px) scale(.978);
}

.budget-page .budget-monthly-summary-bar.is-budget-allocation-entering {
  animation: budget-allocation-shell-enter .76s cubic-bezier(.16, 1, .3, 1) both;
  will-change: opacity, filter, transform;
}

.budget-page .budget-monthly-summary-bar.is-budget-allocation-entering::before,
.budget-page .budget-monthly-summary-bar.is-budget-allocation-entering::after {
  position: absolute;
  pointer-events: none;
  content: "";
}

.budget-page .budget-monthly-summary-bar.is-budget-allocation-entering::before {
  z-index: 4;
  inset: 0;
  border: 1px solid rgba(255, 255, 255, .62);
  border-radius: inherit;
  box-shadow:
    0 0 0 0 rgba(48, 180, 126, 0),
    inset 0 0 18px rgba(255, 255, 255, .12);
  animation: budget-allocation-lock-in .92s cubic-bezier(.16, 1, .3, 1) .82s both;
}

.budget-page .budget-monthly-summary-bar.is-budget-allocation-entering::after {
  z-index: 3;
  top: -35%;
  bottom: -35%;
  left: -28%;
  width: 16%;
  opacity: 0;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .62), transparent);
  filter: blur(.4px);
  transform: skewX(-17deg);
  animation: budget-allocation-sheen .92s cubic-bezier(.22, 1, .36, 1) .72s both;
}

.budget-page .budget-monthly-summary-bar.is-budget-allocation-entering
  .budget-monthly-summary-segment {
  overflow: hidden;
  animation: budget-allocation-segment-build .72s cubic-bezier(.16, 1, .3, 1)
    var(--allocation-delay) both;
  will-change: clip-path, filter;
}

.budget-page .budget-monthly-summary-bar.is-budget-allocation-entering
  .budget-monthly-summary-segment span,
.budget-page .budget-monthly-summary-bar.is-budget-allocation-entering
  .budget-monthly-summary-segment em {
  animation: budget-allocation-label-settle .42s cubic-bezier(.16, 1, .3, 1)
    var(--allocation-label-delay) both;
}

:root[data-theme="dark"] .budget-page
  .budget-monthly-summary-bar.is-budget-allocation-entering::before {
  border-color: rgba(244, 218, 145, .52);
  box-shadow:
    0 0 0 0 rgba(240, 203, 101, 0),
    inset 0 0 18px rgba(244, 218, 145, .08);
}

:root[data-theme="dark"] .budget-page
  .budget-monthly-summary-bar.is-budget-allocation-entering::after {
  background: linear-gradient(90deg, transparent, rgba(255, 244, 207, .54), transparent);
}

@keyframes budget-allocation-shell-enter {
  0% {
    opacity: 0;
    filter: saturate(.72) blur(1.5px);
    transform: translateY(13px) scale(.975);
  }
  58% {
    opacity: 1;
    filter: saturate(1.06) blur(0);
    transform: translateY(-2px) scale(1.006);
  }
  100% {
    opacity: 1;
    filter: none;
    transform: none;
  }
}

@keyframes budget-allocation-segment-build {
  0% {
    clip-path: inset(0 100% 0 0);
    filter: brightness(1.16) saturate(.72);
  }
  68% {
    filter: brightness(1.1) saturate(1.06);
  }
  100% {
    clip-path: inset(0);
    filter: none;
  }
}

@keyframes budget-allocation-label-settle {
  0% {
    opacity: 0;
    transform: translateY(6px) scale(.975);
  }
  100% {
    opacity: 1;
    transform: none;
  }
}

@keyframes budget-allocation-sheen {
  0% {
    left: -28%;
    opacity: 0;
  }
  18% {
    opacity: .78;
  }
  82% {
    opacity: .5;
  }
  100% {
    left: 116%;
    opacity: 0;
  }
}

@keyframes budget-allocation-lock-in {
  0% {
    opacity: 0;
    box-shadow:
      0 0 0 0 rgba(48, 180, 126, 0),
      inset 0 0 18px rgba(255, 255, 255, 0);
  }
  48% {
    opacity: 1;
    box-shadow:
      0 0 0 5px rgba(48, 180, 126, .10),
      inset 0 0 18px rgba(255, 255, 255, .16);
  }
  100% {
    opacity: 0;
    box-shadow:
      0 0 0 10px rgba(48, 180, 126, 0),
      inset 0 0 18px rgba(255, 255, 255, 0);
  }
}

@media (max-width: 720px) {
  .budget-page .budget-monthly-summary-bar.is-budget-allocation-entering
    .budget-monthly-summary-segment {
    animation-duration: .66s;
  }

  .budget-page .budget-monthly-summary-bar.is-budget-allocation-entering
    .budget-monthly-summary-segment em {
    font-variant-numeric: tabular-nums;
  }
}

@media (prefers-reduced-motion: reduce) {
  .budget-page .budget-monthly-summary-bar.is-budget-allocation-pending,
  .budget-page .budget-monthly-summary-bar.is-budget-allocation-entering {
    opacity: 1;
    filter: none;
    transform: none;
    animation: none !important;
  }

  .budget-page .budget-monthly-summary-bar.is-budget-allocation-entering::before,
  .budget-page .budget-monthly-summary-bar.is-budget-allocation-entering::after {
    display: none;
    animation: none !important;
  }

  .budget-page .budget-monthly-summary-bar.is-budget-allocation-entering
    .budget-monthly-summary-segment,
  .budget-page .budget-monthly-summary-bar.is-budget-allocation-entering
    .budget-monthly-summary-segment span,
  .budget-page .budget-monthly-summary-bar.is-budget-allocation-entering
    .budget-monthly-summary-segment em {
    opacity: 1;
    clip-path: none;
    filter: none;
    transform: none;
    animation: none !important;
  }
}