/* * AnnGhar UI — Animations * ------------------------------------------------------------------ * Fade/slide-in, hover lift (defined on .ag-card/.ag-btn/.ag-nav__link * themselves via `transition`), progress-bar fill, and a pulse for * the "current step" of a timeline. Everything respects * prefers-reduced-motion. */ @keyframes ag-fade-in { from { opacity: 0; } to { opacity: 1; } } @keyframes ag-slide-up { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } } @keyframes ag-pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(200, 155, 60, .35); } 50% { box-shadow: 0 0 0 6px rgba(200, 155, 60, 0); } } .ag-animate-in { animation: ag-slide-up .5s cubic-bezier(.22, 1, .36, 1) both; } .ag-card { animation: ag-slide-up .45s cubic-bezier(.22, 1, .36, 1) both; } .ag-grid > .ag-card:nth-child(1) { animation-delay: .02s; } .ag-grid > .ag-card:nth-child(2) { animation-delay: .08s; } .ag-grid > .ag-card:nth-child(3) { animation-delay: .14s; } .ag-grid > .ag-card:nth-child(4) { animation-delay: .2s; } /* Toast — a brief, self-dismissing confirmation (e.g. "Copied to clipboard!"). Created dynamically by account-theme.js and appended to carrying its own .ag-ui class, so it always has its own copy of the design tokens regardless of where in the DOM it lives. */ .ag-toast { position: fixed; bottom: 28px; left: 50%; transform: translateX(-50%); z-index: 9999; display: flex; align-items: center; gap: 10px; padding: 14px 22px; background: var(--ag-primary-dark); color: var(--ag-white); border-radius: 999px; box-shadow: var(--ag-shadow-hover); font-size: 14px; font-weight: 600; animation: ag-slide-up .3s cubic-bezier(.22, 1, .36, 1) both; } .ag-toast.is-leaving { animation: ag-fade-in .25s ease reverse both; } @media (prefers-reduced-motion: reduce) { .ag-ui *, .ag-toast { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; } }