/* Motion system (SPEC §2.4). Components reference these tokens and keyframes only. */
:root {
  --ease-out: cubic-bezier(.22, 1, .36, 1);
  --ease-in-out: cubic-bezier(.65, 0, .35, 1);
  --ease-spring: cubic-bezier(.34, 1.56, .64, 1);
  --dur-1: 120ms;
  --dur-2: 180ms;
  --dur-3: 240ms;
  --dur-4: 320ms;
  /* Distances used inside keyframes; reduced motion zeroes them so only opacity remains. */
  --motion-rise: 4px;
  --motion-scale-pop: .98;
  --motion-scale-dialog: .96;
  --motion-press: .97;
  --motion-toast: 12px;
}

@keyframes bramble-fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes bramble-fade-out { from { opacity: 1; } to { opacity: 0; } }

@keyframes bramble-pop-in {
  from { opacity: 0; transform: translateY(var(--pop-dir, var(--motion-rise))) scale(var(--motion-scale-pop)); }
  to { opacity: 1; transform: none; }
}
@keyframes bramble-pop-out {
  from { opacity: 1; transform: none; }
  to { opacity: 0; transform: translateY(var(--pop-dir, var(--motion-rise))) scale(var(--motion-scale-pop)); }
}
@keyframes bramble-dialog-in {
  from { opacity: 0; transform: scale(var(--motion-scale-dialog)); }
  to { opacity: 1; transform: none; }
}
@keyframes bramble-dialog-out {
  from { opacity: 1; transform: none; }
  to { opacity: 0; transform: scale(var(--motion-scale-dialog)); }
}
@keyframes bramble-sheet-in {
  from { opacity: 0; transform: translateX(var(--motion-sheet, 24px)); }
  to { opacity: 1; transform: none; }
}
@keyframes bramble-sheet-out {
  from { opacity: 1; transform: none; }
  to { opacity: 0; transform: translateX(var(--motion-sheet, 24px)); }
}
@keyframes bramble-toast-in {
  from { opacity: 0; transform: translateY(var(--motion-toast)) scale(.98); }
  to { opacity: 1; transform: none; }
}
@keyframes bramble-toast-out {
  from { opacity: 1; transform: none; }
  to { opacity: 0; transform: translateX(var(--motion-toast)); }
}
@keyframes bramble-rise {
  from { opacity: 0; transform: translateY(var(--motion-rise)); }
  to { opacity: 1; transform: none; }
}
@keyframes bramble-progress { from { transform: scaleX(1); } to { transform: scaleX(0); } }
@keyframes bramble-spin { to { transform: rotate(360deg); } }
@keyframes bramble-pulse {
  0% { box-shadow: 0 0 0 0 var(--pulse-color, var(--accent-tint-2)); }
  70% { box-shadow: 0 0 0 5px transparent; }
  100% { box-shadow: 0 0 0 0 transparent; }
}
@keyframes bramble-breathe { 0%, 100% { opacity: 1; } 50% { opacity: .45; } }
@keyframes bramble-caret { 0%, 45% { opacity: 1; } 55%, 100% { opacity: 0; } }
@keyframes bramble-shimmer { from { background-position: 100% 0; } to { background-position: 0% 0; } }
@keyframes bramble-skeleton { from { background-position: 150% 0; } to { background-position: -50% 0; } }
@keyframes bramble-draw { to { stroke-dashoffset: 0; } }
@keyframes bramble-berry { from { opacity: 0; transform: scale(.4); } to { opacity: 1; transform: none; } }

/* Shared utility classes. */
.motion-pop { animation: bramble-pop-in var(--dur-2) var(--ease-out) both; }
.motion-rise { animation: bramble-rise var(--dur-3) var(--ease-out) both; }
.motion-fade { animation: bramble-fade-in var(--dur-2) var(--ease-out) both; }

/* "Working" status label (SPEC §2.4): a berry highlight sweeps through otherwise neutral text.
   It conveys live state, so it only runs while an agent is working. */
.shimmer-text {
  color: var(--text-2);
  background: linear-gradient(90deg, var(--text-3) 0%, var(--text-3) 34%, #B84BDD 44%, var(--accent) 50%, #FF5E8A 56%, var(--text-3) 66%, var(--text-3) 100%);
  background-size: 300% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: bramble-shimmer 2.2s linear infinite;
}

/* Reduced motion: transforms and shimmers off, fades at most 120ms. */
@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-2: 120ms; --dur-3: 120ms; --dur-4: 120ms;
    --motion-rise: 0px; --motion-scale-pop: 1; --motion-scale-dialog: 1; --motion-press: 1; --motion-toast: 0px; --motion-sheet: 0px;
  }
  .shimmer-text { animation: none; -webkit-text-fill-color: currentColor; background: none; }
  *, *::before, *::after { scroll-behavior: auto !important; }
}
:root[data-reduce-motion="true"] {
  --dur-2: 120ms; --dur-3: 120ms; --dur-4: 120ms;
  --motion-rise: 0px; --motion-scale-pop: 1; --motion-scale-dialog: 1; --motion-press: 1; --motion-toast: 0px; --motion-sheet: 0px;
}
:root[data-reduce-motion="true"] .shimmer-text { animation: none; -webkit-text-fill-color: currentColor; background: none; }
:root[data-reduce-motion="true"] *, :root[data-reduce-motion="true"] *::before, :root[data-reduce-motion="true"] *::after { scroll-behavior: auto !important; }
