:root { --pace-ease: cubic-bezier(.22, 1, .36, 1); }

/* The animation layer never hides content while waiting for JavaScript. */
.reveal { opacity: 1; }
.week-bars i { transform-origin: center bottom; }
.meter i, .allocation-bar i { transform-origin: left center; }
.big-result, .result-amount strong, .stat-card strong, .result-stats strong { font-variant-numeric: tabular-nums; }

/* Settle after a brief introduction instead of running decorative loops forever. */
.ticker-track { animation: pace-ticker-sway 4.5s ease-in-out 1; }
.ring-two { animation: pace-ring-settle 4s ease-in-out 1; }
.ticker-track, .ring-two { animation-play-state: paused; }
.motion-onstage .ticker-track, .motion-onstage .ring-two { animation-play-state: running; }
@keyframes pace-ticker-sway {
  0%, 100% { transform: translateX(0); }
  50% { transform: translateX(-45px); }
}
@keyframes pace-ring-settle {
  0%, 100% { rotate: 0deg; }
  50% { rotate: 45deg; }
}
.motion-paused *, .motion-paused *::before, .motion-paused *::after { animation-play-state: paused !important; }
.menu-toggle[aria-expanded="true"] span:nth-child(2) { transform: translateY(3.5px) rotate(45deg); }
.menu-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-3.5px) rotate(-45deg); }

@media (prefers-reduced-motion: no-preference) {
  .button, .header-cta, .action-button, .save-plan {
    transition: transform .25s var(--pace-ease), box-shadow .25s var(--pace-ease), background-color .2s ease;
  }
  .button > span, .header-cta > span, .action-button > span, .card-link > span,
  .text-link > span, .guide-teaser-links a > span, .next-tool a > span {
    display: inline-block;
    transition: translate .3s var(--pace-ease);
  }
  .tool-card { transition: transform .35s var(--pace-ease), box-shadow .35s var(--pace-ease), border-color .3s ease; }
  .preview-symbol { transition: rotate .55s var(--pace-ease), scale .55s var(--pace-ease); }
  .preview-symbol::after { transition: scale .55s var(--pace-ease); }
  .brand-mark i { transform-origin: bottom; transition: scale .3s var(--pace-ease); }
  .brand-mark i:nth-child(2) { transition-delay: 40ms; }
  .brand-mark i:nth-child(3) { transition-delay: 80ms; }
  .filter-group button { transition: background-color .25s ease, color .25s ease, transform .2s var(--pace-ease); }
  .field input, .field select { transition: border-color .2s ease, box-shadow .2s ease; }
  .field input:focus, .field select:focus { border-color: #879c59; box-shadow: 0 0 0 4px #a6c27218; }
  .meter i, .allocation-bar i { transition: width .55s var(--pace-ease); }
  .mobile-nav { transition: none; }
  .menu-toggle span:not(.sr-only) { transition: transform .25s var(--pace-ease); }
  .button:active, .header-cta:active, .action-button:not(:disabled):active, .save-plan:not(:disabled):active,
  .filter-group button:active { transform: scale(.97); box-shadow: none; }

  @media (hover: hover) and (pointer: fine) {
    .tool-card:hover { transform: translateY(-7px); box-shadow: 0 16px 30px #19240b10; border-color: #aeb89a; }
    .tool-card:hover .preview-symbol { rotate: 12deg; scale: 1.06; }
    .tool-card:hover .preview-symbol::after { scale: 1.08; }
    .tool-card:hover .card-link > span, .header-cta:hover > span { translate: 3px -3px; }
    .button:hover > span, .action-button:not(:disabled):hover > span,
    .text-link:hover > span, .guide-teaser-links a:hover > span, .next-tool a:hover > span { translate: 4px 0; }
    .action-button:not(:disabled):hover { transform: translateY(-2px); box-shadow: 0 5px 12px #19240b12; }
    .brand:hover .brand-mark i { scale: 1 1.18; }
  }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  .tool-card:hover, .button:hover, .button:active, .header-cta:hover, .action-button:hover, .save-plan:hover, .round-arrow:hover { transform: none; }
}