:root {
  --motion-out: cubic-bezier(.22, 1, .36, 1);
  --motion-soft: cubic-bezier(.4, 0, .2, 1);
}
/* Independent translate/scale preserve the mockups' existing transforms. */
.button, .hero-actions .text-link, .explore-download {
  transition: translate 280ms var(--motion-out), scale 180ms var(--motion-out),
    background-color 220ms ease, box-shadow 280ms ease;
  -webkit-tap-highlight-color: transparent;
}
.button:active, .hero-actions .text-link:active, .explore-download:active {
  scale: .975;
  translate: 0 0;
}
.main-nav a, .moneva-footer-nav a { position: relative; }
.main-nav a::after, .moneva-footer-nav a::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: -4px;
  height: 1px; background: currentColor; transform: scaleX(0);
  transform-origin: left; transition: transform 280ms var(--motion-out);
}
.main-nav a:focus-visible::after, .moneva-footer-nav a:focus-visible::after { transform: scaleX(1); }
a:focus-visible, button:focus-visible { outline: 2px solid #1464f6; outline-offset: 5px; }
.money-feature>img { transition: translate 650ms var(--motion-out), box-shadow 650ms var(--motion-out); border-radius: 20px; }
.why-card>img { transition: scale 800ms var(--motion-out); }
.friend-card { transition: background-color 300ms ease, border-color 300ms ease; }
.friendly-faq summary { transition: color 220ms ease; }
.friendly-faq summary span::after { transition: transform 300ms var(--motion-out), opacity 220ms ease; }
.friendly-faq details[open] summary span::after { opacity: 0; }
.friendly-faq details { overflow: hidden; }
.friendly-faq summary:focus-visible { outline-offset: -3px; }
.motion-resting .analytics-gradient-fallback { animation-play-state: paused; }
.why-scroll-driven .why-card { transition: none; }
.analytics-product>img {
  translate: var(--pointer-x, 0px) calc(var(--pointer-y, 0px) + var(--scroll-y, 0px));
  transition: translate 900ms var(--motion-out);
}
.explore-characters { transition: translate 950ms var(--motion-out), rotate 950ms var(--motion-out); }
.explore-banner:has(.explore-download:focus-visible) .explore-characters { translate: 0 -7px; rotate: -1deg; }
.moneva-footer .footer-letter-bounce>span,
.moneva-footer .footer-letter-bounce img { animation-duration: 11s; }
.moneva-footer .footer-letter-e { --letter-delay: .65s; }
.moneva-footer .footer-letter-a { --letter-delay: 1.3s; }
@keyframes footer-letter-dip {
  0%, 16%, 67%, 100% { transform: translateY(0); }
  30% { transform: translateY(.09em); }
  35%, 44% { transform: translateY(.085em); }
  60% { transform: translateY(-.005em); }
}
@keyframes footer-character-peek {
  0%, 19%, 63%, 100% { opacity: 0; transform: translate(-50%, .06em) scale(.8); }
  32%, 44% { opacity: 1; transform: translate(-50%, 0) scale(1); }
  57% { opacity: 0; transform: translate(-50%, -.02em) scale(.9); }
}
html.motion-tab-hidden .friends-track,
html.motion-tab-hidden .footer-letter-bounce>span,
html.motion-tab-hidden .footer-letter-bounce img,
html.motion-tab-hidden .analytics-gradient-fallback { animation-play-state: paused; }
@media (hover: hover) and (pointer: fine) {
  .explore-banner:has(.explore-download:hover) .explore-characters { translate: 0 -7px; rotate: -1deg; }
  .button:hover { transform: none; }
  .button:hover, .hero-actions .text-link:hover, .explore-download:hover { translate: 0 -2px; box-shadow: 0 8px 22px -12px #1d293970; }
  .main-nav a:hover::after, .moneva-footer-nav a:hover::after { transform: scaleX(1); }
  .money-feature:hover>img { translate: 0 -5px; box-shadow: 0 18px 28px -24px #34405460; }
  .why-moneva:not(.is-stacked) .why-card:hover>img { scale: 1.025; }
  .friend-card:hover { background-color: #fff; border-color: #dce2e9; }
  .friendly-faq summary:hover { color: #1464f6; }
}
html[data-motion="reduced"] { scroll-behavior: auto; }
html[data-motion="reduced"] .analytics-product>img,
html[data-motion="reduced"] .explore-characters { translate: none; rotate: none; transition: none; }
html[data-motion="reduced"] :is(.button, .hero-actions .text-link, .explore-download, .money-feature>img, .why-card>img, .main-nav a::after, .moneva-footer-nav a::after) { transition: none; }
html[data-motion="reduced"] :is(.button:hover, .hero-actions .text-link:hover, .explore-download:hover, .money-feature:hover>img) { transform: none; translate: none; }