/* sc-motion v1 - custom self-hosted motion + design tokens for portal
   Companion: /js/sc-motion.js. References: Linear, Tailscale, Fly.io. */

:root {
  --dur-instant: 80ms;
  --dur-fast:    160ms;
  --dur-med:     240ms;
  --dur-slow:    420ms;
  --ease-out:      cubic-bezier(0.16, 1, 0.3, 1);
  --ease-out-back: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-in-out:   cubic-bezier(0.65, 0, 0.35, 1);
  --elev-0: 0 0 0 0 transparent;
  --elev-1: 0 1px 2px rgba(0,0,0,.18), 0 0 0 1px rgba(255,255,255,.04);
  --elev-2: 0 4px 12px rgba(0,0,0,.28), 0 0 0 1px rgba(255,255,255,.06);
  --elev-3: 0 12px 28px rgba(0,0,0,.36), 0 0 0 1px rgba(255,255,255,.07);
}

@media (prefers-reduced-motion: reduce) {
  :root { --dur-instant:0ms; --dur-fast:0ms; --dur-med:0ms; --dur-slow:0ms; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* Buttons - press feedback + hover lift */
.btn, button:not([disabled]) {
  transition: transform var(--dur-fast) var(--ease-out),
              background-color var(--dur-fast) var(--ease-out),
              box-shadow var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out),
              opacity var(--dur-fast) var(--ease-out);
}
.btn:not([disabled]):active, button:not([disabled]):active { transform: scale(0.97); }
.btn:not([disabled]):hover { box-shadow: var(--elev-2); }

/* Unified status badge component */
.sc-status {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px; border-radius: 999px;
  font-family: var(--mono); font-size: 11px; font-weight: 600;
  letter-spacing: 0.05em; text-transform: uppercase;
  border: 1px solid transparent; white-space: nowrap; line-height: 1;
  transition: background-color var(--dur-fast) var(--ease-out);
}
.sc-status::before { content:''; width:6px; height:6px; border-radius:50%; flex-shrink:0; }
.sc-status.is-active  { background: var(--grn-dim); color: var(--grn); border-color: rgba(52,211,153,.25); }
.sc-status.is-active::before  { background: var(--grn); box-shadow: 0 0 8px var(--grn); }
.sc-status.is-paid    { background: var(--grn-dim); color: var(--grn); border-color: rgba(52,211,153,.25); }
.sc-status.is-paid::before    { background: var(--grn); }
.sc-status.is-provisioning, .sc-status.is-pending {
  background: var(--gold-dim); color: var(--gold); border-color: rgba(240,192,64,.25);
}
.sc-status.is-provisioning::before, .sc-status.is-pending::before {
  background: var(--gold); animation: sc-pulse 1.6s var(--ease-in-out) infinite;
}
.sc-status.is-due     { background: var(--amb-dim); color: var(--amber); border-color: rgba(251,191,36,.25); }
.sc-status.is-due::before     { background: var(--amber); }
.sc-status.is-suspended, .sc-status.is-failed {
  background: var(--red-dim); color: var(--red); border-color: rgba(248,113,113,.25);
}
.sc-status.is-suspended::before, .sc-status.is-failed::before { background: var(--red); }
.sc-status.is-void, .sc-status.is-canceled, .sc-status.is-none {
  background: rgba(78,106,134,.15); color: var(--ink-3); border-color: rgba(78,106,134,.3);
}
.sc-status.is-void::before, .sc-status.is-canceled::before, .sc-status.is-none::before {
  background: var(--ink-3);
}

@keyframes sc-pulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50%      { transform: scale(1.4); opacity: .55; }
}

/* Skeleton shimmer */
.sc-skeleton {
  background: linear-gradient(90deg, var(--bg3) 0%, var(--bg4) 50%, var(--bg3) 100%);
  background-size: 200% 100%; animation: sc-shimmer 1.4s linear infinite;
  border-radius: var(--r-sm); display: inline-block; height: 1em; width: 100%;
  vertical-align: middle; color: transparent;
}
@keyframes sc-shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }

/* Spinner */
.sc-spinner {
  display: inline-block; width: 14px; height: 14px;
  border: 2px solid currentColor; border-top-color: transparent;
  border-radius: 50%; animation: sc-spin 0.7s linear infinite; vertical-align: -2px;
}
.sc-spinner.sc-spinner-lg { width: 22px; height: 22px; border-width: 2.5px; }
@keyframes sc-spin { to { transform: rotate(360deg); } }

/* "Provisioning…" inline text indicator */
.sc-provisioning-text {
  color: var(--gold); font-family: var(--mono); font-size: 13px;
  display: inline-flex; align-items: center; gap: 8px;
}
.sc-provisioning-text::before {
  content:''; width:8px; height:8px; border-radius:50%; background: var(--gold);
  animation: sc-pulse 1.6s var(--ease-in-out) infinite;
}

/* Scroll-reveal / mount animations via data-motion */
[data-motion] { opacity: 0; will-change: transform, opacity; }
[data-motion].is-revealed { opacity: 1; }
[data-motion="fade"]    { transition: opacity var(--dur-med) var(--ease-out); }
[data-motion="fade-up"] {
  transform: translateY(12px);
  transition: opacity var(--dur-med) var(--ease-out), transform var(--dur-med) var(--ease-out);
}
[data-motion="fade-up"].is-revealed { transform: translateY(0); }
[data-motion="scale-in"] {
  transform: scale(0.96);
  transition: opacity var(--dur-med) var(--ease-out), transform var(--dur-med) var(--ease-out-back);
}
[data-motion="scale-in"].is-revealed { transform: scale(1); }

[data-stagger] > * {
  opacity: 0; transform: translateY(8px);
  transition: opacity var(--dur-med) var(--ease-out), transform var(--dur-med) var(--ease-out);
  transition-delay: calc(var(--i, 0) * 40ms);
}
[data-stagger].is-revealed > * { opacity: 1; transform: translateY(0); }

/* Card hover lift - subtle, Linear style */
.card {
  transition: transform var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out),
              box-shadow var(--dur-fast) var(--ease-out);
}
.card:hover { border-color: var(--bdr2); box-shadow: var(--elev-2); }

/* Stat value pop on update */
.stat-value { transition: transform var(--dur-med) var(--ease-out-back); }
.stat-value.sc-just-updated { animation: sc-pop var(--dur-med) var(--ease-out-back); }
@keyframes sc-pop {
  0%   { transform: scale(1); }
  40%  { transform: scale(1.08); }
  100% { transform: scale(1); }
}

/* Focus rings - replaces ugly default outline */
:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; border-radius: 4px; }

/* Page enter */
body.sc-page-enter .page-content { animation: sc-page-in var(--dur-slow) var(--ease-out) both; }
@keyframes sc-page-in {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Mobile chat-bubble fix - safe-area-aware, no overlap with cards */
@media (max-width: 768px) {
  #sc-chat-bubble, .sc-chat-fab, [class*="chat-launcher"], [class*="chat-bubble"] {
    bottom: max(16px, env(safe-area-inset-bottom)) !important;
    right: 16px !important;
    transform: scale(0.85) !important;
    transform-origin: bottom right !important;
  }
  .page-content, main, .portal-layout .page-wrap {
    padding-bottom: max(96px, calc(env(safe-area-inset-bottom) + 96px)) !important;
  }
}