/* Replyly motion layer — shared, framework-free interaction polish. */

:root {
  --rly-motion-fast: 140ms;
  --rly-motion-base: 220ms;
  --rly-motion-slow: 520ms;
  --rly-motion-ease: cubic-bezier(.2, .78, .2, 1);
  --rly-motion-spring: cubic-bezier(.22, 1, .36, 1);
}

@keyframes rly-fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes rly-rise-in {
  from { opacity: 0; transform: translate3d(0, 12px, 0); }
  to { opacity: 1; transform: translate3d(0, 0, 0); }
}

@keyframes rly-scale-in {
  from { opacity: 0; transform: translate3d(0, 8px, 0) scale(.975); }
  to { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }
}

@keyframes rly-shimmer {
  from { transform: translateX(-130%) skewX(-18deg); }
  to { transform: translateX(170%) skewX(-18deg); }
}

@keyframes rly-spin {
  to { transform: rotate(1turn); }
}

@keyframes rly-nudge {
  0%, 100% { transform: translateX(0); }
  30% { transform: translateX(-3px); }
  65% { transform: translateX(3px); }
}

@keyframes rly-feedback-in {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes rly-copy-confirm {
  0% { transform: scale(1); }
  42% { transform: scale(.96); }
  72% { transform: scale(1.035); }
  100% { transform: scale(1); }
}

@keyframes rly-success-ring {
  0% { opacity: .7; transform: scale(.78); }
  100% { opacity: 0; transform: scale(1.5); }
}

@keyframes rly-success-card {
  0% { box-shadow: 0 0 0 0 rgba(114, 223, 157, 0); }
  35% { box-shadow: 0 0 0 1px rgba(114, 223, 157, .42), 0 0 38px rgba(114, 223, 157, .15); }
  100% { box-shadow: 0 0 0 0 rgba(114, 223, 157, 0); }
}

@keyframes rly-quota-pulse {
  0% { filter: brightness(1); }
  45% { filter: brightness(1.45) saturate(1.25); }
  100% { filter: brightness(1); }
}

@keyframes rly-bar-grow {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}

@keyframes rly-target-flash {
  0% { background: rgba(229, 72, 123, .2); box-shadow: 0 0 0 5px rgba(229, 72, 123, .08); }
  100% { background: transparent; box-shadow: 0 0 0 0 rgba(229, 72, 123, 0); }
}

/* Keyboard and form focus. */
:where(a, button, summary, [role="button"], [tabindex]):focus-visible {
  outline: 2px solid var(--pink, #e5487b) !important;
  outline-offset: 3px;
}

:where(input, textarea, select):focus-visible {
  outline: none;
  border-color: var(--pink, #e5487b) !important;
  box-shadow: 0 0 0 3px var(--pink-bg, rgba(229, 72, 123, .12)) !important;
}

.switch input:focus-visible + :is(.slider, .switch-track) {
  border-color: var(--pink, #e5487b) !important;
  box-shadow: 0 0 0 3px var(--pink-bg, rgba(229, 72, 123, .12));
}

/* Buttons feel tactile without moving layout. */
:is(
  .btn,
  .nav-cta,
  .nav-account,
  .plan-btn,
  .copy-btn,
  .save-btn,
  .upgrade-btn,
  .share-btn,
  .setup-action,
  .nav-out,
  .nav-pricing,
  .btn-primary,
  .btn-secondary,
  .modal-btn,
  .row-action,
  .tab
) {
  -webkit-tap-highlight-color: transparent;
  transform-origin: center;
}

:is(
  .btn,
  .nav-cta,
  .nav-account,
  .plan-btn,
  .copy-btn,
  .save-btn,
  .upgrade-btn,
  .share-btn,
  .setup-action,
  .nav-out,
  .nav-pricing,
  .btn-primary,
  .btn-secondary,
  .modal-btn,
  .row-action,
  .tab
):active:not(:disabled):not([aria-disabled="true"]) {
  transform: translateY(0) scale(.975) !important;
  transition-duration: 90ms !important;
}

/* A restrained highlight only on primary actions. */
:is(
  .page-landing .nav-cta,
  .page-landing .btn-primary,
  .page-landing .plan-btn,
  .page-landing .copy-btn:not(.secondary),
  .page-dashboard .copy-btn:not(.secondary),
  .page-dashboard .save-btn,
  .page-dashboard .upgrade-btn:not(.secondary),
  .page-dashboard .shortcut-install-btn,
  .page-success .btn:not(.btn-outline),
  .page-recover .offer-max .btn,
  .page-admin .btn-primary,
  .page-admin .modal-btn.primary
) {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

:is(
  .page-landing .nav-cta,
  .page-landing .btn-primary,
  .page-landing .plan-btn,
  .page-landing .copy-btn:not(.secondary),
  .page-dashboard .copy-btn:not(.secondary),
  .page-dashboard .save-btn,
  .page-dashboard .upgrade-btn:not(.secondary),
  .page-dashboard .shortcut-install-btn,
  .page-success .btn:not(.btn-outline),
  .page-recover .offer-max .btn,
  .page-admin .btn-primary,
  .page-admin .modal-btn.primary
)::before {
  content: '';
  position: absolute;
  inset: -45% auto -45% -35%;
  width: 26%;
  pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .24), transparent);
  transform: translateX(-130%) skewX(-18deg);
}

@media (hover: hover) {
  :is(
    .page-landing .nav-cta,
    .page-landing .btn-primary,
    .page-landing .plan-btn,
    .page-landing .copy-btn:not(.secondary),
    .page-dashboard .copy-btn:not(.secondary),
    .page-dashboard .save-btn,
    .page-dashboard .upgrade-btn:not(.secondary),
    .page-dashboard .shortcut-install-btn,
    .page-success .btn:not(.btn-outline),
    .page-recover .offer-max .btn,
    .page-admin .btn-primary,
    .page-admin .modal-btn.primary
  ):hover::before {
    animation: rly-shimmer 620ms var(--rly-motion-ease) both;
  }
}

/* Loading indicators reuse existing disabled/is-loading hooks. */
:is(
  .page-landing #auth-btn:disabled,
  .page-dashboard .verify-form button:disabled,
  .page-dashboard .upgrade-btn.is-loading,
  .page-dashboard #save-settings-btn:disabled,
  .page-admin #login-btn:disabled,
  .page-recover #max-btn.is-loading,
  .page-recover #pro-btn.is-loading
) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .55rem;
  pointer-events: none;
  opacity: .78;
}

:is(
  .page-landing #auth-btn:disabled,
  .page-dashboard .verify-form button:disabled,
  .page-dashboard .upgrade-btn.is-loading,
  .page-dashboard #save-settings-btn:disabled,
  .page-admin #login-btn:disabled,
  .page-recover #max-btn.is-loading,
  .page-recover #pro-btn.is-loading
)::after {
  content: '';
  width: .82rem;
  height: .82rem;
  flex: 0 0 auto;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: rly-spin 720ms linear infinite;
}

/* Feedback states. */
:is(
  .msg-status.err,
  .verify-status.err,
  .billing-status.err,
  .save-status.err,
  .form-status.err,
  .status-line.err,
  .login-err:not(:empty)
) {
  animation: rly-nudge 260ms var(--rly-motion-ease), rly-feedback-in 220ms var(--rly-motion-ease);
}

:is(
  .msg-status.ok,
  .verify-status.ok,
  .billing-status.ok,
  .save-status.ok,
  .form-status.ok,
  .status-line.ok
) {
  animation: rly-feedback-in 300ms var(--rly-motion-spring);
}

:is(input.err, textarea.err, [aria-invalid="true"]) {
  animation: rly-nudge 260ms var(--rly-motion-ease);
}

.page-landing #auth-form:has(.msg-status.err) :is(input, textarea, select):focus,
.page-admin #login-screen:has(.login-err:not(:empty)) #admin-token-input {
  border-color: #f05b8d !important;
  box-shadow: 0 0 0 3px rgba(240, 91, 141, .15) !important;
  animation: rly-nudge 260ms var(--rly-motion-ease);
}

.page-landing .overlay.open {
  animation: rly-fade-in 180ms ease-out both;
}

.page-landing .overlay.open .modal,
.page-admin .modal-overlay.show .modal {
  animation: rly-scale-in 260ms var(--rly-motion-spring) both;
}

.page-landing .faq-item[open] .faq-a,
.page-dashboard :is(.shortcut-details, .dashboard-details)[open] > :is(.shortcut-details-body, .dashboard-details-body) {
  animation: rly-rise-in 220ms var(--rly-motion-ease) both;
}

/* Copy confirmation, including the success-page specificity fix. */
:is(
  .page-landing .copy-btn.copied,
  .page-dashboard .copy-btn.copied,
  .page-success .btn.copied,
  .page-admin [data-copy].is-copied
) {
  animation: rly-copy-confirm 420ms var(--rly-motion-spring);
}

.page-success .btn.copied {
  background: var(--product-green, #72df9d) !important;
  border-color: var(--product-green, #72df9d) !important;
  color: #07100b !important;
  box-shadow: 0 0 0 4px rgba(114, 223, 157, .1) !important;
}

.page-admin [data-copy].is-copied {
  color: var(--green, #72df9d) !important;
  text-shadow: 0 0 18px rgba(114, 223, 157, .38);
}

/* Landing load choreography. */
.page-landing nav {
  animation: rly-fade-in 420ms ease-out 40ms both;
}

.page-landing .hero-text > .eyebrow { animation: rly-rise-in 460ms var(--rly-motion-spring) 80ms both; }
.page-landing .hero-text > .hero-h { animation: rly-rise-in 520ms var(--rly-motion-spring) 130ms both; }
.page-landing .hero-text > .hero-lede { animation: rly-rise-in 520ms var(--rly-motion-spring) 190ms both; }
.page-landing .hero-text > .btn-row { animation: rly-rise-in 520ms var(--rly-motion-spring) 250ms both; }
.page-landing .hero-text > .trust-strip { animation: rly-rise-in 500ms var(--rly-motion-spring) 310ms both; }
.page-landing .hero-visual { animation: rly-scale-in 680ms var(--rly-motion-spring) 150ms both; }

/* Dashboard loading, reveal, quota and first-win moments. */
.page-dashboard nav,
.page-dashboard .dashboard-hero > div {
  animation: rly-fade-in 380ms ease-out both;
}

.page-dashboard .dashboard-hero > div {
  animation-name: rly-rise-in;
  animation-duration: 460ms;
  animation-timing-function: var(--rly-motion-spring);
  animation-delay: 70ms;
}

.page-dashboard #loading {
  position: relative;
  max-width: 430px;
  margin: 2.6rem auto;
  overflow: hidden;
  border: 1px solid var(--border, rgba(255, 255, 255, .08));
  border-radius: 16px;
  background: var(--surface, #18181f);
  box-shadow: 0 18px 52px rgba(0, 0, 0, .22);
}

.page-dashboard #loading::before,
.page-admin .loading::before {
  content: '';
  display: inline-block;
  width: .78rem;
  height: .78rem;
  margin-right: .55rem;
  vertical-align: -.08rem;
  border: 2px solid var(--pink-line, rgba(229, 72, 123, .28));
  border-top-color: var(--pink, #e5487b);
  border-radius: 50%;
  animation: rly-spin 760ms linear infinite;
}

.page-dashboard #loading::after {
  content: '';
  position: absolute;
  inset: 0;
  width: 36%;
  pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .055), transparent);
  animation: rly-shimmer 1.35s ease-in-out infinite;
}

.page-dashboard #content.is-loaded .dashboard-main > *,
.page-dashboard #content.is-loaded .dashboard-aside > * {
  animation: rly-rise-in 430ms var(--rly-motion-spring) both;
}

.page-dashboard #content.is-loaded .dashboard-main > :nth-child(2),
.page-dashboard #content.is-loaded .dashboard-aside > :nth-child(2) { animation-delay: 45ms; }
.page-dashboard #content.is-loaded .dashboard-main > :nth-child(3),
.page-dashboard #content.is-loaded .dashboard-aside > :nth-child(3) { animation-delay: 85ms; }
.page-dashboard #content.is-loaded .dashboard-main > :nth-child(n+4),
.page-dashboard #content.is-loaded .dashboard-aside > :nth-child(n+4) { animation-delay: 120ms; }

.page-dashboard #content.is-loaded .usage-fill {
  transform-origin: left center;
  animation: rly-bar-grow 680ms var(--rly-motion-spring) 160ms both;
}

.page-dashboard :is(#usage-count, .usage-bar).motion-quota-pulse {
  animation: rly-quota-pulse 620ms var(--rly-motion-ease);
}

.page-dashboard #content.is-loaded #quickstart-card.motion-first-win {
  animation: rly-success-card 900ms var(--rly-motion-ease);
}

.page-dashboard #quickstart-card.motion-first-win .setup-step.done .setup-mark {
  animation: rly-copy-confirm 480ms var(--rly-motion-spring);
}

.page-dashboard .setup-step,
.page-dashboard .setup-mark {
  transition: border-color var(--rly-motion-base) ease, background var(--rly-motion-base) ease, color var(--rly-motion-base) ease, transform var(--rly-motion-base) var(--rly-motion-spring);
}

.page-dashboard .setup-step.done .setup-mark {
  transform: scale(1.04);
}

/* Payment return: loading is calm, success is unmistakable. */
.page-success .logo {
  animation: rly-fade-in 360ms ease-out 30ms both;
}

.page-success .card {
  animation: rly-scale-in 560ms var(--rly-motion-spring) 80ms both;
}

.page-success .success-state.motion-status-enter > * {
  animation: rly-rise-in 360ms var(--rly-motion-spring) both;
}

.page-success .success-state.motion-status-enter > :nth-child(2) { animation-delay: 35ms; }
.page-success .success-state.motion-status-enter > :nth-child(3) { animation-delay: 70ms; }
.page-success .success-state.motion-status-enter > :nth-child(4) { animation-delay: 105ms; }
.page-success .success-state.motion-status-enter > :nth-child(5) { animation-delay: 140ms; }

.page-success .success-state[aria-busy="true"] .icon-wrap {
  animation: rly-copy-confirm 1.3s ease-in-out infinite;
}

.page-success .success-state.motion-success-burst .icon-wrap {
  position: relative;
  animation: rly-copy-confirm 520ms var(--rly-motion-spring);
}

.page-success .success-state.motion-success-burst .icon-wrap::after {
  content: '';
  position: absolute;
  inset: -10px;
  border: 1px solid rgba(114, 223, 157, .55);
  border-radius: inherit;
  pointer-events: none;
  animation: rly-success-ring 720ms var(--rly-motion-ease) 80ms both;
}

.page-success .success-state.motion-success-burst ~ .success-next :is(#next-steps, #token-box, #copy-btn, #shortcut-btn) {
  animation: rly-rise-in 420ms var(--rly-motion-spring) both;
}

.page-success .success-state.motion-success-burst ~ .success-next #token-box { animation-delay: 70ms; }
.page-success .success-state.motion-success-burst ~ .success-next #copy-btn { animation-delay: 110ms; }
.page-success .success-state.motion-success-burst ~ .success-next #shortcut-btn { animation-delay: 150ms; }

/* Recovery is intentionally quieter than payment success. */
.page-recover main > .logo {
  animation: rly-fade-in 360ms ease-out 30ms both;
}

.page-recover .card {
  animation: rly-scale-in 540ms var(--rly-motion-spring) 70ms both;
}

.page-recover .motion-state-enter > * {
  animation: rly-rise-in 360ms var(--rly-motion-spring) both;
}

.page-recover .motion-state-enter > :nth-child(2) { animation-delay: 40ms; }
.page-recover .motion-state-enter > :nth-child(3) { animation-delay: 75ms; }
.page-recover .motion-state-enter > :nth-child(4) { animation-delay: 110ms; }
.page-recover .motion-state-enter > :nth-child(n+5) { animation-delay: 140ms; }

.page-recover #state-loading::after {
  content: '';
  display: block;
  width: 1.3rem;
  height: 1.3rem;
  margin: .2rem auto 0;
  border: 2px solid var(--pink-line, rgba(229, 72, 123, .28));
  border-top-color: var(--pink, #e5487b);
  border-radius: 50%;
  animation: rly-spin 760ms linear infinite;
}

.page-recover #pro-btn[aria-disabled="true"] {
  opacity: .58;
  pointer-events: none;
}

.page-recover .status-line.err {
  color: #f05b8d;
}

/* Admin stays operational: only state changes move. */
.page-admin nav,
.page-admin #login-screen {
  animation: rly-fade-in 360ms ease-out both;
}

.page-admin #login-screen {
  animation-name: rly-rise-in;
  animation-duration: 440ms;
  animation-timing-function: var(--rly-motion-spring);
  animation-delay: 60ms;
}

.page-admin #dashboard.motion-dashboard-enter,
.page-admin .tab-content.active {
  animation: rly-feedback-in 180ms var(--rly-motion-ease) both;
}

.page-admin .skeleton::after {
  animation-duration: 1.35s;
  animation-timing-function: ease-in-out;
}

/* Legal pages: subtle entry, clear focus, no moving body copy. */
.page-legal .nav {
  animation: rly-fade-in 320ms ease-out both;
}

.page-legal .hero {
  animation: rly-rise-in 430ms var(--rly-motion-spring) 45ms both;
}

.page-legal :is(.grid, .toc) {
  animation: rly-rise-in 430ms var(--rly-motion-spring) 100ms both;
}

.page-legal .docs {
  animation: rly-rise-in 430ms var(--rly-motion-spring) 150ms both;
}

.page-legal .doc-card .arrow {
  transition: transform var(--rly-motion-base) var(--rly-motion-ease), color var(--rly-motion-base) ease;
}

.page-legal .doc-card:hover .arrow,
.page-legal .doc-card:focus-visible .arrow {
  transform: translateX(4px);
}

.page-legal .doc h2[id] {
  scroll-margin-top: 92px;
  border-radius: .3rem;
}

.page-legal .doc h2[id]:target {
  animation: rly-target-flash 1.15s ease-out both;
}

@media (max-width: 760px) {
  .page-legal .doc h2[id] { scroll-margin-top: 150px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto !important; }

  *, *::before, *::after {
    animation: none !important;
    animation-delay: 0ms !important;
    transition-duration: .001ms !important;
    transition-delay: 0ms !important;
    scroll-behavior: auto !important;
  }

  :is(
    .btn,
    .nav-cta,
    .nav-account,
    .plan-btn,
    .copy-btn,
    .save-btn,
    .upgrade-btn,
    .share-btn,
    .setup-action,
    .nav-out,
    .nav-pricing,
    .btn-primary,
    .btn-secondary,
    .modal-btn,
    .row-action,
    .tab
  ):active:not(:disabled):not([aria-disabled="true"]),
  .page-legal .doc-card:hover,
  .page-legal .doc-card:hover .arrow,
  .page-legal .doc-card:focus-visible .arrow,
  .page-dashboard .setup-step.done .setup-mark {
    transform: none !important;
    transition-duration: .001ms !important;
  }

  :is(
    .page-landing nav,
    .page-landing .hero-text > *,
    .page-landing .hero-visual,
    .page-dashboard nav,
    .page-dashboard .dashboard-hero > div,
    .page-dashboard #content.is-loaded .dashboard-main > *,
    .page-dashboard #content.is-loaded .dashboard-aside > *,
    .page-success .logo,
    .page-success .card,
    .page-recover main > .logo,
    .page-recover .card,
    .page-admin nav,
    .page-admin #login-screen,
    .page-legal .nav,
    .page-legal .hero,
    .page-legal .grid,
    .page-legal .toc,
    .page-legal .docs
  ) {
    opacity: 1 !important;
    transform: none !important;
  }
}