/* Motion references: Astryx Motion Examples and its duration/easing tokens.
   Existing colors, type, spacing and idle component appearance are retained. */
:root {
  --mk-motion-press: 130ms;
  --mk-motion-state: 175ms;
  --mk-motion-enter: 230ms;
  --mk-motion-panel: 410ms;
  --mk-motion-reveal: 550ms;
  --mk-motion-ease: cubic-bezier(.24, 1, .4, 1);
}

/* Buttons: Astryx's measured 0.98 press scale, including keyboard activation. */
.btn {
  transition-property: transform, scale, background, border-color;
  transition-duration: var(--mk-motion-state);
  transition-timing-function: var(--mk-motion-ease);
}
.btn:active:not(:disabled),
.btn.mk-pressed:not(:disabled) {
  scale: .98;
  transition-duration: var(--mk-motion-press);
}

/* Keep the existing scroll observer; use a shorter, consistently eased stagger. */
html.motion-ready .rv,
html.motion-ready .rg > * {
  transition-duration: var(--mk-motion-reveal);
  transition-timing-function: var(--mk-motion-ease);
}
html.motion-ready .rg > :nth-child(2) { transition-delay: 55ms !important; }
html.motion-ready .rg > :nth-child(3) { transition-delay: 110ms !important; }
html.motion-ready .rg > :nth-child(4) { transition-delay: 165ms !important; }
html.motion-ready .rg > :nth-child(5) { transition-delay: 220ms !important; }
html.motion-ready .rg > :nth-child(n+6) { transition-delay: 275ms !important; }
html.motion-ready .rg.in > :is(:hover, :focus-within) { transition-delay: 0ms !important; }

@media (hover: hover) and (pointer: fine) {
  .card:not(.no-lift), .card-raised {
    transition-timing-function: var(--mk-motion-ease);
  }
  .card:not(.no-lift):hover, .card-raised:hover {
    transition-duration: var(--mk-motion-enter);
  }
  header nav a { position: relative; }
  header nav a::after {
    content: '';
    position: absolute;
    inset-inline: 0;
    bottom: -8px;
    height: 1px;
    background: currentColor;
    opacity: .8;
    transform: scaleX(0);
    transform-origin: right;
    transition: transform var(--mk-motion-enter) var(--mk-motion-ease);
    pointer-events: none;
  }
  header nav a:is(:hover, :focus-visible)::after {
    transform: scaleX(1);
    transform-origin: left;
  }
}

/* Existing wallet panels inherit the same fade + translate + scale recipe. */
body .fixed.inset-0:has(> .card) {
  animation: mk-scrim-in var(--mk-motion-panel) var(--mk-motion-ease) both;
}
body .fixed.inset-0 > .card {
  animation: mk-panel-in var(--mk-motion-panel) var(--mk-motion-ease) both;
}
@keyframes mk-scrim-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes mk-panel-in {
  from { opacity: 0; transform: translateY(10px) scale(.97); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

/* Transient copy confirmation. This surface exists only after successful copying. */
.mk-copy-feedback {
  position: fixed;
  z-index: 80;
  left: 50%;
  bottom: max(24px, env(safe-area-inset-bottom));
  translate: -50% 0;
  display: flex;
  align-items: center;
  gap: 10px;
  width: max-content;
  max-width: calc(100vw - 32px);
  padding: 13px 18px;
  border: 1px solid var(--color-line);
  border-radius: 14px;
  color: var(--color-fg);
  background: var(--color-raised);
  font: inherit;
  font-size: 13px;
  box-shadow: 0 12px 32px #0004;
  pointer-events: none;
}
.mk-copy-feedback svg { flex: none; color: var(--color-vyra); }

@media (prefers-reduced-motion: reduce) {
  .btn, .card, .card-raised, header nav a::after,
  html.motion-ready .rv, html.motion-ready .rg > * {
    transition-duration: .01ms !important;
    transition-delay: 0ms !important;
  }
  .btn:is(:hover, :active, .mk-pressed),
  .card:hover, .card-raised:hover { transform: none !important; scale: 1 !important; }
  html.motion-ready .rv, html.motion-ready .rg > * {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
  }
  body .fixed.inset-0:has(> .card), body .fixed.inset-0 > .card {
    animation: none !important;
  }
  header nav a::after { transition: none !important; }
}
@media (hover: none) {
  .btn:hover, .card:hover, .card-raised:hover { transform: none; }
}
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  html.motion-ready .rg.in > .card-raised:hover,
  html.motion-ready .rg.in > .card:not(.no-lift):hover {
    transform: translateY(-4px) scale(1.008);
    transition-duration: var(--mk-motion-enter);
  }
}
@media (prefers-reduced-motion: reduce) {
  h1 span[style], h2 .inline-block {
    opacity: 1 !important;
    filter: none !important;
    transform: none !important;
  }
}