/* ============================================================================
   CHIA portal — motion.css
   Motion for the public website (portal.html and the fallback page).
   Works with motion.js; everything is still for prefers-reduced-motion.
   ========================================================================= */

:root { --m-ease: cubic-bezier(.16, 1, .3, 1); --m-ease-2: cubic-bezier(.22, .61, .36, 1); }

/* soft colour fields drifting behind the page */
/* z-index -1: painted above the page background, below all content, without
   changing the position of anything (the portal's sidebar is position:fixed). */
.m-aurora { position: fixed; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; }
.m-aurora i { position: absolute; border-radius: 50%; filter: blur(80px); opacity: .5; will-change: transform; }
.m-aurora i:nth-child(1) { width: 46vmax; height: 46vmax; left: -12vmax; top: -18vmax; background: color-mix(in srgb, var(--accent, #7c5cf6) 26%, transparent); animation: m-drift-a 26s ease-in-out infinite alternate; }
.m-aurora i:nth-child(2) { width: 40vmax; height: 40vmax; right: -14vmax; top: 18vh; background: color-mix(in srgb, var(--pink, #d946ef) 18%, transparent); animation: m-drift-b 31s ease-in-out infinite alternate; }
.m-aurora i:nth-child(3) { width: 38vmax; height: 38vmax; left: 30vw; bottom: -22vmax; background: color-mix(in srgb, var(--green, #22c55e) 12%, transparent); animation: m-drift-c 35s ease-in-out infinite alternate; }
:root[data-theme="light"] .m-aurora i { opacity: .55; }
@keyframes m-drift-a { to { transform: translate3d(8vmax, 6vmax, 0) scale(1.12); } }
@keyframes m-drift-b { to { transform: translate3d(-7vmax, -5vmax, 0) scale(1.08); } }
@keyframes m-drift-c { to { transform: translate3d(-6vmax, -7vmax, 0) scale(1.1); } }

/* reveal on route change and scroll */
.m-reveal { opacity: 0; transform: translate3d(0, 18px, 0); }
.m-reveal.m-in { animation: m-rise .7s var(--m-ease) both; animation-delay: var(--m-delay, 0ms); }
@keyframes m-rise { from { opacity: 0; transform: translate3d(0, 18px, 0); } to { opacity: 1; transform: none; } }

/* page headings arrive with a soft clip */
.m-title { animation: m-title .8s var(--m-ease) both; }
@keyframes m-title { from { opacity: 0; transform: translate3d(0, 22px, 0); filter: blur(6px); } to { opacity: 1; transform: none; filter: none; } }

/* sidebar items slide in once */
.m-nav-in { animation: m-slide .55s var(--m-ease) both; animation-delay: var(--m-delay, 0ms); }
@keyframes m-slide { from { opacity: 0; transform: translate3d(-12px, 0, 0); } to { opacity: 1; transform: none; } }

/* cards lift under the pointer */
.bot-card, .command-card, .overview-card, .primary-card, .donate-card, .metric, .server-costs-card, .auth-card, .card, .stat {
  transition: transform .45s var(--m-ease), box-shadow .45s var(--m-ease), border-color .3s var(--m-ease-2);
}
@media (hover: hover) {
  .bot-card:hover, .command-card:hover, .overview-card:hover, .metric:hover, .donate-card:hover, .card:hover, .stat:hover {
    transform: translate3d(0, -4px, 0);
    box-shadow: 0 22px 50px -24px color-mix(in srgb, var(--accent, #7c5cf6) 45%, transparent);
    border-color: color-mix(in srgb, var(--accent, #7c5cf6) 40%, var(--border, #343645));
  }
}

/* buttons: press feel + ripple */
.button, button, .btn { transition: transform .2s var(--m-ease), box-shadow .3s var(--m-ease), background-color .2s var(--m-ease-2), color .2s var(--m-ease-2), border-color .2s var(--m-ease-2); }
.button:active, .btn:active, button:active { transform: scale(.97); }
.m-ripple-host { position: relative; overflow: hidden; }
.m-ripple { position: absolute; border-radius: 50%; pointer-events: none; background: currentColor; opacity: .18; transform: scale(0); animation: m-ripple .65s var(--m-ease) forwards; }
@keyframes m-ripple { to { transform: scale(2.6); opacity: 0; } }

/* live status dots breathe */
.status-pulse, .live-dot, .dot.live { animation: m-breathe 2.2s ease-in-out infinite; }
@keyframes m-breathe { 50% { opacity: .45; transform: scale(.85); } }

/* top bar gains depth once the page scrolls */
.workspace-top, .topbar-inner, body > header { transition: box-shadow .3s var(--m-ease-2), background-color .3s var(--m-ease-2), backdrop-filter .3s; }
.m-scrolled .workspace-top { box-shadow: 0 10px 30px -22px rgba(0, 0, 0, .55); backdrop-filter: blur(10px) saturate(140%); }

/* scroll progress line */
.m-progress { position: fixed; z-index: 9999; left: 0; top: 0; height: 2px; width: 100%; transform-origin: 0 50%; transform: scaleX(0);
  background: linear-gradient(90deg, var(--accent, #7c5cf6), var(--pink, #d946ef)); pointer-events: none; }

/* count-up numbers keep their width steady */
.m-count { font-variant-numeric: tabular-nums; }

/* ---------- developer credit (sidebar + fallback page) ---------- */
.dev-credit {
  display: flex; align-items: center; gap: 10px; margin: 0 0 10px; padding: 10px 11px;
  border-radius: 14px; text-decoration: none; color: var(--text, #eeeef4);
  background: linear-gradient(135deg, color-mix(in srgb, var(--accent, #7c5cf6) 14%, transparent), color-mix(in srgb, var(--pink, #d946ef) 8%, transparent));
  border: 1px solid color-mix(in srgb, var(--accent, #7c5cf6) 26%, var(--border, #343645));
  transition: transform .35s var(--m-ease), box-shadow .35s var(--m-ease), border-color .25s var(--m-ease-2);
}
.dev-credit:hover { transform: translate3d(0, -2px, 0); border-color: color-mix(in srgb, var(--accent, #7c5cf6) 55%, transparent); box-shadow: 0 14px 30px -18px color-mix(in srgb, var(--accent, #7c5cf6) 70%, transparent); }
.dev-credit:focus-visible { outline: 2px solid var(--accent, #7c5cf6); outline-offset: 2px; }
.dev-avatar {
  flex: none; width: 36px; height: 36px; border-radius: 11px; display: grid; place-items: center;
  font: 700 13px/1 system-ui, sans-serif; letter-spacing: .02em; color: #fff;
  background: linear-gradient(135deg, var(--accent, #7c5cf6), var(--pink, #d946ef));
}
/* dark theme uses a light lilac accent: dark letters read better on it */
:root:not([data-theme="light"]) .dev-avatar { color: #1b1530; }
.dev-text { min-width: 0; flex: 1; display: flex; flex-direction: column; line-height: 1.25; }
.dev-text small { font-size: 10.5px; text-transform: uppercase; letter-spacing: .08em; color: var(--faint, #9395aa); }
.dev-text strong { font-size: 13.5px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dev-text em { font-style: normal; font-size: 11.5px; color: var(--muted, #b3b4c4); }
.dev-credit svg { flex: none; width: 15px; height: 15px; opacity: .6; }
.dev-footer { display: flex; justify-content: center; padding: 28px 16px 44px; }
.dev-footer .dev-credit { margin: 0; min-width: 260px; }
.dev-credit.floating { position: fixed; z-index: 5; right: 16px; bottom: 16px; margin: 0; max-width: 300px; box-shadow: 0 18px 40px -22px rgba(0,0,0,.6); backdrop-filter: blur(10px); }
@media (max-width: 760px) { .dev-credit.floating { left: 12px; right: 12px; max-width: none; bottom: 12px; } }

@media (prefers-reduced-motion: reduce) {
  .m-aurora i, .status-pulse, .live-dot, .dot.live { animation: none !important; }
  .m-reveal { opacity: 1; transform: none; }
  .m-reveal.m-in, .m-title, .m-nav-in { animation: none !important; }
  .bot-card:hover, .command-card:hover, .overview-card:hover, .metric:hover, .donate-card:hover, .card:hover, .stat:hover { transform: none; }
}
@media (max-width: 760px) {
  .m-aurora i { filter: blur(60px); opacity: .4; }
}