/* 2026-05-19 C62: shared motion primitives, extracted from index.html for bundle budget. */
@keyframes twfEnter {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}
.twf-enter {
  animation: twfEnter var(--twf-duration-med, .22s) var(--twf-ease-out, cubic-bezier(.16, 1, .3, 1)) both;
}
.twf-enter--delay-1 { animation-delay: 60ms; }
.twf-enter--delay-2 { animation-delay: 120ms; }
.twf-enter--delay-3 { animation-delay: 180ms; }
.twf-enter--delay-4 { animation-delay: 240ms; }

@keyframes twfModalEnter {
  from { opacity: 0; transform: scale(.96); }
  to { opacity: 1; transform: scale(1); }
}
.twf-modal-enter {
  animation: twfModalEnter var(--twf-duration-med, .22s) var(--twf-ease-spring, cubic-bezier(.34, 1.56, .64, 1)) both;
}

@keyframes twfFlashSuccess {
  0% { box-shadow: 0 0 0 0 rgba(16, 185, 129, .35); transform: scale(1); }
  35% { box-shadow: 0 0 0 12px rgba(16, 185, 129, .15); transform: scale(1.02); }
  100% { box-shadow: 0 0 0 18px rgba(16, 185, 129, 0); transform: scale(1); }
}
[data-twf-flash="success"] {
  animation: twfFlashSuccess .9s var(--twf-ease-out, cubic-bezier(.16, 1, .3, 1));
}

@keyframes twfShimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}
.twf-shimmer {
  background: linear-gradient(90deg, rgba(12, 18, 32, .04) 0%, rgba(201, 168, 76, .12) 50%, rgba(12, 18, 32, .04) 100%);
  background-size: 200% 100%;
  animation: twfShimmer 1.6s linear infinite;
  border-radius: var(--twf-radius-sm, 8px);
}

@keyframes twfRouteEnter {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: translateY(0); }
}
.twf-route-enter {
  animation: twfRouteEnter .18s var(--twf-ease-out, cubic-bezier(.16, 1, .3, 1)) both;
}

@media (prefers-reduced-motion: reduce) {
  .twf-enter,
  .twf-modal-enter,
  .twf-route-enter,
  [data-twf-flash="success"] {
    animation: none !important;
  }
  .twf-shimmer {
    animation: none !important;
    background: rgba(12, 18, 32, .06);
  }
}