/* Noom motion. Durations and curves are the Spore presets from Uniswap/interface @6f54d9a:
   packages/tailwind/src/animations/curves.ts (SPORE_ANIMATION_CURVE_CSS), packages/tailwind/css/animations.css,
   ui/src/components/modal/AdaptiveWebModalInternals.web.tsx, mycelium shimmer / spinner / segmented control,
   uniswap/src/components/AnimatedNumber/animationConfig.ts. */
:root {
  --ease-fast: cubic-bezier(0.17, 0.67, 0.45, 1);      /* fast / stiff / fastExit */
  --ease-quick: cubic-bezier(0.25, 0.46, 0.45, 0.94);  /* quick / quickLong / quicker */
  --ease-bouncy: cubic-bezier(0.34, 1.56, 0.64, 1);    /* bouncy */
  --ease-lazy: cubic-bezier(0.25, 0.1, 0.25, 1);       /* lazy */
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);       /* appear / hide / overlay */
  --ease-spin: cubic-bezier(0.83, 0, 0.17, 1);         /* rotate360 spinner */
  --t-fast: 100ms;  --t-fast-exit: 80ms;  --t-simple: 80ms;  --t-125: 125ms;
  --t-200: 200ms;   --t-300: 300ms;       --t-bouncy: 400ms; --t-lazy: 500ms;
}

/* Page content fade-in: animations.css `appear` (300ms standard, 80ms delay, 5px rise). */
@keyframes appear { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: none; } }
main, .page { animation: appear var(--t-300) var(--ease-standard) 80ms backwards; }

/* Staggered tiles: Spore 200msDelayed{0,40,80,120}ms = 200ms ease-out, fadeInBelow (10px). */
@keyframes fade-in-below { from { opacity: 0; transform: translateY(10px); } }
.board .stat, .steps li, .grid > .card { animation: fade-in-below var(--t-200) ease-out backwards; }
.board .stat:nth-child(1), .steps li:nth-child(1), .grid > .card:nth-child(1) { animation-delay: 120ms; }
.board .stat:nth-child(2), .steps li:nth-child(2), .grid > .card:nth-child(2) { animation-delay: 160ms; }
.board .stat:nth-child(3), .steps li:nth-child(3), .grid > .card:nth-child(3) { animation-delay: 200ms; }
.board .stat:nth-child(4), .steps li:nth-child(4), .grid > .card:nth-child(4) { animation-delay: 240ms; }
.grid > .card:nth-child(5) { animation-delay: 280ms; }

/* Buttons: press scale 0.98 on `fast` (button-compat), hover colour on `simple` 80ms ease-in-out. */
.btn, .tab, .icon-btn, .presets button {
  transition: transform var(--t-fast) var(--ease-fast), background-color var(--t-simple) ease-in-out,
    color var(--t-simple) ease-in-out, border-color var(--t-simple) ease-in-out;
}
.btn:active, .presets button:active { transform: scale(0.98); }
.icon-btn:active { transform: scale(0.9); }   /* dialog close: active:scale-90 */
.tab:active { transform: scale(0.98); }

/* Card hover lift: `quick` 200ms. */
.stat, .steps li, .stats > div, .picker {
  transition: transform var(--t-200) var(--ease-quick), box-shadow var(--t-200) var(--ease-quick), background-color var(--t-simple) ease-in-out;
}
@media (hover: hover) {
  .stat:hover, .steps li:hover, .stats > div:hover { transform: translateY(-2px); box-shadow: var(--shadow-medium); }
  .picker:hover { background: var(--surface2-hover); }
}

/* Input focus ring: border colour on Spore `125ms` (ease-in-out) plus a soft accent halo. */
.panel { transition: border-color var(--t-125) ease-in-out, box-shadow var(--t-125) ease-in-out, background-color var(--t-simple) ease-in-out; }
.panel:focus-within { box-shadow: 0 0 0 3px var(--accent2); }

/* Tab indicator (segmented control): transform/width/height on `fast` 100ms. */
.tabs.has-indicator { position: relative; isolation: isolate; }
.tabs.has-indicator .tab.on { background: transparent; }
.tab-indicator {
  position: absolute; left: 0; top: 0; z-index: -1; border-radius: var(--r20); background: var(--surface3); pointer-events: none;
  transition: transform var(--t-fast) var(--ease-fast), width var(--t-fast) var(--ease-fast), height var(--t-fast) var(--ease-fast);
}

/* Review pop-up: overlay fade 300ms ease-in-out; content enters from below 12px on `fast` 100ms,
   exits down 10px on `fastExit` 80ms (AdaptiveWebModalInternals). */
@keyframes modal-fade-in { from { opacity: 0; } }
@keyframes modal-fade-out { to { opacity: 0; } }
@keyframes modal-enter { from { opacity: 0; transform: translateY(12px) scale(0.98); } }
@keyframes modal-exit { to { opacity: 0; transform: translateY(10px) scale(0.98); } }
.scrim:not([hidden]) { animation: modal-fade-in var(--t-300) ease-in-out; }
.scrim:not([hidden]) .modal { animation: modal-enter var(--t-fast) var(--ease-fast) backwards; }
.scrim[data-state="closed"] { animation: modal-fade-out var(--t-300) ease-in-out forwards; pointer-events: none; }
.scrim[data-state="closed"] .modal { animation: modal-exit var(--t-fast-exit) var(--ease-fast) forwards; }

/* Narrow screens: the pop-up becomes a bottom sheet. Sheet 200ms ease-in-out from 100%;
   sheet overlay `lazy` 500ms. */
@keyframes sheet-in { from { transform: translateY(100%); } }
@keyframes sheet-out { to { transform: translateY(100%); } }
@media (max-width: 640px) {
  .scrim { place-items: end stretch; padding: 0; }
  .modal { width: 100%; max-height: 90vh; border-radius: var(--r24) var(--r24) 0 0; border-bottom: 0; }
  .scrim:not([hidden]) { animation: modal-fade-in var(--t-lazy) var(--ease-lazy); }
  .scrim:not([hidden]) .modal { animation: sheet-in var(--t-200) ease-in-out backwards; }
  .scrim[data-state="closed"] { animation: modal-fade-out var(--t-lazy) var(--ease-lazy) forwards; }
  .scrim[data-state="closed"] .modal { animation: sheet-out var(--t-200) ease-in-out forwards; }
}

/* Status track: connector fills on `quickLong` 300ms, check pops on `bouncy` 400ms,
   the step in progress spins on rotate360 1s (SpinningLoader). */
@keyframes track-fill { from { transform: scaleY(0); } }
@keyframes check-pop { from { transform: scale(0); opacity: 0; } }
@keyframes rotate360 { to { transform: rotate(360deg); } }
.track li.done::before { transform-origin: top; animation: track-fill var(--t-300) var(--ease-quick) both; }
.track li.done .dot { animation: check-pop var(--t-bouncy) var(--ease-bouncy) both; }
.track li.now .dot { position: relative; }
.track li.now .dot::after {
  content: ""; position: absolute; inset: 0; border-radius: 50%;
  border: 2px solid transparent; border-top-color: var(--accent1);
  animation: rotate360 1s var(--ease-spin) infinite;
}
.track li { transition: color var(--t-200) ease-in-out; }

/* Busy button spinner (rotate360 1s). */
.btn.is-busy { position: relative; color: transparent !important; pointer-events: none; }
.btn.is-busy::after {
  content: ""; position: absolute; width: 20px; height: 20px; border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.35); border-top-color: #fff;
  animation: rotate360 1s var(--ease-spin) infinite;
}

/* Number roll (AnimatedNumber): each character slides 50% up over 180ms, 40ms stagger. */
@keyframes roll-in { from { opacity: 0; transform: translateY(50%); } }
.roll-char { display: inline-block; animation: roll-in 180ms var(--ease-quick) both; }

/* Skeleton shimmer while data loads (mycelium Shimmer: -75deg mask, 200% size, 1s linear). */
@keyframes shimmer { from { -webkit-mask-position: 150%; mask-position: 150%; } to { -webkit-mask-position: -50%; mask-position: -50%; } }
.is-loading {
  color: transparent !important; background: var(--surface3) !important; border-radius: var(--r8);
  min-width: 72px; display: inline-block;
  -webkit-mask-image: linear-gradient(-75deg, rgba(0,0,0,0.5) 30%, #000 50%, rgba(0,0,0,0.5) 70%);
  mask-image: linear-gradient(-75deg, rgba(0,0,0,0.5) 30%, #000 50%, rgba(0,0,0,0.5) 70%);
  -webkit-mask-size: 200%; mask-size: 200%;
  animation: shimmer 1s linear infinite;
}
.is-loading::before { display: none !important; }
.state.is-loading, .status.is-loading { min-width: 96px; border-radius: var(--rfull); }

/* Errors and notes slide in: blur-fade-in-translate 200ms standard from -4px. */
@keyframes fade-in-down { from { opacity: 0; transform: translateY(-4px); } }
.error:not([hidden]), #claim-error:not([hidden]) { animation: fade-in-down var(--t-200) var(--ease-standard); }

/* Theme toggle: View Transition cross-fade. Old view `hide` 200ms, new view fades in 300ms after 80ms. */
::view-transition-old(root) { animation: modal-fade-out var(--t-200) var(--ease-standard) both; }
::view-transition-new(root) { animation: modal-fade-in var(--t-300) var(--ease-standard) 80ms both; }
@keyframes icon-in { from { opacity: 0; transform: rotate(-90deg) scale(0.6); } }
#theme-toggle svg { animation: icon-in var(--t-200) var(--ease-quick); }
/* Without View Transitions, colours switch instantly (no colour flashes), as Spore does. */
.theme-switching, .theme-switching *, .theme-switching *::before, .theme-switching *::after { transition: none !important; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important; animation-delay: 0ms !important;
    animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; transition-delay: 0ms !important;
  }
  .is-loading { -webkit-mask-image: none; mask-image: none; }
  .stat:hover, .steps li:hover, .stats > div:hover { transform: none; }
  ::view-transition-old(root), ::view-transition-new(root) { animation: none; }
}