/* ============================================================
   16_ MOTION SYSTEM
   ============================================================ */
:root {
  --motion-fast: 140ms;
  --motion-base: 220ms;
  --motion-slow: 480ms;
  --motion-ease: cubic-bezier(.16, 1, .3, 1);
  --motion-tap: cubic-bezier(.34, 1.56, .64, 1);
}

@keyframes motion-rise {
  from { opacity: 0; transform: translate3d(0, 12px, 0) scale(.985); }
  to { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }
}
@keyframes motion-drop {
  from { opacity: 0; transform: translate3d(0, -10px, 0); }
  to { opacity: 1; transform: translate3d(0, 0, 0); }
}
@keyframes motion-line {
  from { transform: scaleY(0); }
  to { transform: scaleY(1); }
}
@keyframes motion-select {
  0% { transform: scale(.82); }
  70% { transform: scale(1.08); }
  100% { transform: scale(1); }
}
@keyframes motion-row {
  from { opacity: 0; transform: translate3d(14px, 0, 0); }
  to { opacity: 1; transform: translate3d(0, 0, 0); }
}
@keyframes motion-wave-zoom {
  from { opacity: 0; transform: translate3d(0, -14px, 0) scale(1.03); filter: blur(2px) brightness(1.14) contrast(1.12); }
  42% { opacity: 1; transform: translate3d(0, 1px, 0) scale(.992); filter: blur(0) brightness(1.06) contrast(1.08); }
  72% { opacity: 1; transform: translate3d(0, -1px, 0) scale(1.006); filter: brightness(1.02) contrast(1.03); }
  to { opacity: 1; transform: translate3d(0, 0, 0) scale(1); filter: none; }
}

.app > .topbar { animation: motion-drop .42s var(--motion-ease) both; }
.app > .foot { animation: motion-rise .46s var(--motion-ease) 180ms both; }

.screen.is-active .reveal {
  animation: motion-rise var(--motion-slow) var(--motion-ease) both;
  animation-delay: var(--d, 0ms);
  will-change: transform, opacity;
}
.screen.is-active .budget-card,
.screen.is-active .field,
.screen.is-active .step {
  animation: motion-row .4s var(--motion-ease) both;
}
.screen.is-active .baustein {
  animation: motion-wave-zoom .64s cubic-bezier(.48, .04, .18, 1) both;
  animation-delay: calc(520ms + (var(--wave, 0) * 56ms));
  transform-origin: top center;
}
.screen.is-active .budget-card:nth-child(1),
.screen.is-active .field:nth-child(1),
.screen.is-active .step:nth-child(1) { animation-delay: 210ms; }
.screen.is-active .budget-card:nth-child(2),
.screen.is-active .field:nth-child(2),
.screen.is-active .step:nth-child(2) { animation-delay: 245ms; }
.screen.is-active .budget-card:nth-child(3),
.screen.is-active .field:nth-child(3),
.screen.is-active .step:nth-child(3) { animation-delay: 280ms; }
.screen.is-active .budget-card:nth-child(4),
.screen.is-active .field:nth-child(4),
.screen.is-active .step:nth-child(4) { animation-delay: 315ms; }
.screen.is-active .field:nth-child(5) { animation-delay: 350ms; }
.screen.is-active .field:nth-child(n+6) { animation-delay: 385ms; }

.legal > * {
  animation: motion-rise .44s var(--motion-ease) both;
}
.legal > *:nth-child(1) { animation-delay: 20ms; }
.legal > *:nth-child(2) { animation-delay: 70ms; }
.legal > *:nth-child(3) { animation-delay: 120ms; }
.legal > *:nth-child(4) { animation-delay: 170ms; }
.legal > *:nth-child(n+5) { animation-delay: 220ms; }

.btn,
.baustein,
.budget-card,
.chip,
.field,
.consent-row,
.exit {
  backface-visibility: hidden;
  transition:
    transform var(--motion-base) var(--motion-ease),
    background var(--motion-base) var(--motion-ease),
    border-color var(--motion-base) var(--motion-ease),
    color var(--motion-base) var(--motion-ease),
    opacity var(--motion-base) var(--motion-ease);
}
.btn:not(:disabled):not([aria-disabled="true"]):hover,
.budget-card:hover,
.exit:hover {
  transform: translate3d(0, -2px, 0);
}
.baustein:hover,
.sub-label:hover,
.consent-row:hover {
  transform: translate3d(2px, 0, 0);
}
.btn:not(:disabled):not([aria-disabled="true"]):active,
.budget-card:active,
.baustein-head:active,
.chip:active {
  transform: scale(.985);
}

.field:focus-within { transform: translate3d(0, -1px, 0); }
.field-input {
  transition:
    transform var(--motion-base) var(--motion-ease),
    background var(--motion-base) var(--motion-ease),
    border-color var(--motion-base) var(--motion-ease),
    box-shadow var(--motion-base) var(--motion-ease);
}
.field-input:focus {
  transform: translate3d(0, -1px, 0);
  box-shadow: 0 3px 0 rgba(11, 14, 19, .08);
}
.field.has-error .field-input {
  animation: motion-row .22s var(--motion-tap) both;
}

.baustein.is-selected::before,
.budget-card.is-selected::before {
  transform-origin: top;
  animation: motion-line var(--motion-base) var(--motion-ease) both;
}
.box,
.budget-id .marker,
.consent-row input {
  transition:
    transform var(--motion-base) var(--motion-tap),
    background var(--motion-base) var(--motion-ease),
    border-color var(--motion-base) var(--motion-ease);
}
.box::after,
.budget-card.is-selected .budget-id .marker::after {
  transform: scale(.7);
  transition: opacity var(--motion-fast) var(--motion-ease), transform var(--motion-base) var(--motion-tap);
}
.baustein.is-selected > .baustein-head .box,
.sub-row input:checked + .box,
.budget-card.is-selected .budget-id .marker,
.chip.is-selected {
  animation: motion-select .28s var(--motion-tap) both;
}
.baustein.is-selected > .baustein-head .box::after,
.sub-row input:checked + .box::after,
.budget-card.is-selected .budget-id .marker::after {
  transform: scale(1);
}

.baustein-sub {
  transition: grid-template-rows .34s var(--motion-ease);
}
.sub-input:not([hidden]) {
  animation: motion-rise .3s var(--motion-ease) both;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-delay: 0ms !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  .screen.is-active .reveal,
  .screen.is-active .baustein,
  .screen.is-active .budget-card,
  .screen.is-active .field,
  .screen.is-active .step,
  .legal > * {
    transform: none !important;
    opacity: 1 !important;
  }
}