/* Motion layer. Loaded after site.css; every effect is disabled for reduced-motion users. */
:root {
  --ease-out: cubic-bezier(.22, 1, .36, 1);
  --ease-spring: cubic-bezier(.34, 1.56, .64, 1);
  --glow: rgba(74, 138, 255, .35);
}

/* ---------- Page load ---------- */
body { animation: pageIn .6s var(--ease-out) both; }
.site-header { animation: headerIn .6s var(--ease-out) both; }
.site-footer { animation: pageIn .8s var(--ease-out) .2s both; }

@keyframes pageIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes headerIn { from { opacity: 0; transform: translateY(-100%); } to { opacity: 1; transform: none; } }
@keyframes riseIn { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } }
@keyframes popIn { from { opacity: 0; transform: scale(.88); } to { opacity: 1; transform: none; } }
@keyframes panelIn { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }

/* Hero: staggered entrance */
.hero > * { animation: riseIn .8s var(--ease-out) both; }
.hero > :nth-child(1) { animation-delay: .10s; }
.hero > :nth-child(2) { animation-delay: .20s; animation-name: popIn; animation-timing-function: var(--ease-spring); }
.hero > :nth-child(3) { animation-delay: .30s; }
.hero > :nth-child(4) { animation-delay: .40s; }
.hero > :nth-child(5) { animation-delay: .50s; }
.hero > :nth-child(6) { animation-delay: .55s; }
.hero > :nth-child(7) { animation-delay: .65s; }

.hero-logo { animation: popIn .8s var(--ease-spring) .2s both, logoFloat 6s ease-in-out 1s infinite; filter: drop-shadow(0 12px 28px rgba(31, 107, 255, .45)); }
@keyframes logoFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }

.hero h1 {
  background: linear-gradient(100deg, #fff 20%, #9cc2ff 45%, #c9b3ff 60%, #fff 80%);
  background-size: 220% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: riseIn .8s var(--ease-out) .3s both, textShine 8s linear 1.2s infinite;
}
@keyframes textShine { from { background-position: 0% 0; } to { background-position: -220% 0; } }

.badge { position: relative; overflow: hidden; }
.badge::after {
  content: ''; position: absolute; inset: 0; transform: translateX(-120%);
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .25), transparent);
  animation: sheen 4.5s ease-in-out 1.5s infinite;
}
@keyframes sheen { 0%, 60% { transform: translateX(-120%); } 100% { transform: translateX(120%); } }

/* ---------- Background ---------- */
.stars::after { animation: twinkle 4s ease-in-out infinite alternate; }
@keyframes twinkle { from { opacity: .15; } to { opacity: .6; } }
.nebula { animation: nebulaDrift 28s ease-in-out infinite alternate; }
@keyframes nebulaDrift { from { transform: translate(0, 0) scale(1); } to { transform: translate(8vw, -4vw) scale(1.12); } }
.space::after {
  content: ''; position: absolute; top: 12%; left: -10%; width: 140px; height: 1px;
  background: linear-gradient(90deg, transparent, #fff);
  transform: rotate(18deg); opacity: 0;
  animation: shootingStar 11s ease-in 3s infinite;
}
@keyframes shootingStar {
  0% { opacity: 0; transform: translate(0, 0) rotate(18deg); }
  2% { opacity: 1; }
  9% { opacity: 0; transform: translate(70vw, 26vw) rotate(18deg); }
  100% { opacity: 0; transform: translate(70vw, 26vw) rotate(18deg); }
}

/* ---------- Scroll reveal (only active once motion.js has run) ---------- */
.js-motion .reveal { opacity: 0; transform: translateY(24px) scale(.98); }
.js-motion .reveal.in {
  opacity: 1; transform: none;
  transition: opacity .65s var(--ease-out), transform .65s var(--ease-out);
  transition-delay: calc(var(--i, 0) * 60ms);
}
/* After the entrance, hand transforms back to hover effects without a delay. */
.js-motion .reveal.in.settled {
  transition: transform .3s var(--ease-out), border-color .3s, box-shadow .3s, background-color .3s;
  transition-delay: 0s;
}

/* ---------- Buttons ---------- */
.btn { position: relative; overflow: hidden; transition: background-color .2s, border-color .2s, transform .2s var(--ease-spring), box-shadow .25s; }
.btn:hover:not([disabled]):not(.is-disabled) { transform: translateY(-2px); }
.btn:active:not([disabled]):not(.is-disabled) { transform: translateY(0) scale(.97); }
.btn-primary { box-shadow: 0 6px 18px -6px var(--glow); }
.btn-primary:hover { box-shadow: 0 10px 26px -6px rgba(74, 138, 255, .65); }
.btn-primary::after {
  content: ''; position: absolute; inset: 0; transform: translateX(-130%) skewX(-20deg);
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .28), transparent);
}
.btn-primary:hover:not([disabled])::after { transform: translateX(130%) skewX(-20deg); transition: transform .7s var(--ease-out); }
.btn.is-busy { pointer-events: none; opacity: .75; }
.btn.is-busy::before {
  content: ''; width: 14px; height: 14px; border: 2px solid rgba(255, 255, 255, .35); border-top-color: #fff;
  border-radius: 50%; animation: spin .7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------- Header and navigation ---------- */
.brand img { transition: transform .4s var(--ease-spring); }
.brand:hover img { transform: rotate(-8deg) scale(1.1); }
.nav-links a { position: relative; transition: color .2s, background-color .2s; }
.nav-links a::after {
  content: ''; position: absolute; inset-inline: 12px; bottom: 3px; height: 2px; border-radius: 2px;
  background: var(--blue-hover); transform: scaleX(0); transition: transform .3s var(--ease-out);
}
.nav-links a:hover::after, .nav-links a[aria-current='page']::after { transform: scaleX(1); }
.menu-toggle span, .menu-toggle span::before, .menu-toggle span::after { transition: transform .25s var(--ease-out), background-color .2s, top .25s var(--ease-out); }
body.drawer-open .menu-toggle span { background: transparent; }
body.drawer-open .menu-toggle span::before { top: 0; transform: rotate(45deg); }
body.drawer-open .menu-toggle span::after { top: 0; transform: rotate(-45deg); }
.drawer a.drawer-link { transition: background-color .2s, color .2s, transform .2s var(--ease-out); }
.drawer a.drawer-link:hover { transform: translateX(4px); }
[dir='rtl'] .drawer a.drawer-link:hover { transform: translateX(-4px); }
body.drawer-open .drawer > * { animation: riseIn .45s var(--ease-out) both; }
body.drawer-open .drawer > :nth-child(2) { animation-delay: .05s; }
body.drawer-open .drawer > :nth-child(3) { animation-delay: .10s; }
body.drawer-open .drawer > :nth-child(4) { animation-delay: .15s; }
body.drawer-open .drawer > :nth-child(5) { animation-delay: .20s; }
body.drawer-open .drawer > :nth-child(6) { animation-delay: .25s; }
body.drawer-open .drawer > :nth-child(7) { animation-delay: .30s; }

/* ---------- Cards with a cursor-following glow ---------- */
.card, .stat, .command, .plan, .server-card, .dashboard-staff-row, .global-staff-row {
  position: relative;
  transition: transform .3s var(--ease-out), border-color .3s, box-shadow .3s, background-color .3s, opacity .65s var(--ease-out);
}
.card::before, .stat::before, .command::before, .plan::before, .server-card::before {
  content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0;
  background: radial-gradient(260px circle at var(--mx, 50%) var(--my, 0%), rgba(74, 138, 255, .16), transparent 60%);
  transition: opacity .3s;
}
.card:hover::before, .stat:hover::before, .command:hover::before, .plan:hover::before, .server-card:hover::before { opacity: 1; }
.card:hover, .stat:hover, .command:hover, .plan:hover {
  transform: translateY(-4px); border-color: var(--blue); box-shadow: 0 14px 34px -14px rgba(31, 107, 255, .55);
}
.js-motion .reveal.in:not(.settled):hover { transform: none; }
.feature-index { transition: transform .4s var(--ease-spring), background-color .3s, color .3s; }
.card:hover .feature-index { transform: rotate(-10deg) scale(1.12); background: var(--blue); color: #fff; }
.command code { transition: letter-spacing .3s var(--ease-out), color .2s; }
.command:hover code { letter-spacing: .02em; color: #fff; }
.plan:nth-child(2) { border-color: var(--blue); box-shadow: 0 0 0 1px rgba(31, 107, 255, .35), 0 18px 44px -20px rgba(31, 107, 255, .6); }
.plan li { transition: transform .2s var(--ease-out); }
.plan li:hover { transform: translateX(4px); }

/* Stats and live indicators */
.stat strong { transition: color .3s; }
.stat:hover strong { color: var(--blue-hover); }
.stat strong.counting { color: var(--blue-hover); }

/* ---------- Commands search and chips ---------- */
.search, .input, .select { transition: border-color .2s, box-shadow .25s, background-color .2s; }
.search:focus, .input:focus, .select:focus { outline: none; border-color: var(--blue); box-shadow: 0 0 0 3px rgba(31, 107, 255, .28); }
.chip { transition: background-color .2s, border-color .2s, color .2s, transform .25s var(--ease-spring); }
.chip:hover { transform: translateY(-2px); border-color: var(--blue); }
.chip[aria-pressed='true'] { animation: popIn .3s var(--ease-spring); box-shadow: 0 6px 16px -6px var(--glow); }
.command-grid > .command { animation: popIn .35s var(--ease-out) backwards; animation-delay: calc(var(--i, 0) * 25ms); }
.empty { animation: riseIn .4s var(--ease-out) both; }

/* ---------- Dashboard ---------- */
.dash h1, .dash .lead { animation: riseIn .6s var(--ease-out) both; }
.dash .lead { animation-delay: .08s; }
.server-card { animation: riseIn .55s var(--ease-out) backwards; animation-delay: calc(var(--i, 0) * 70ms); }
.server-card:hover { transform: translateY(-4px); border-color: var(--blue); box-shadow: 0 14px 34px -14px rgba(31, 107, 255, .55); }
.guild-icon { transition: transform .4s var(--ease-spring); }
.server-card:hover .guild-icon, .guild-head .guild-icon:hover { transform: rotate(-6deg) scale(1.08); }
.panel-layout .tabs { animation: riseIn .5s var(--ease-out) .05s both; }
.panel { animation: panelIn .45s var(--ease-out) both; }
.panel .form > *, .panel .overview-grid > *, .role-list > * { animation: riseIn .45s var(--ease-out) backwards; animation-delay: calc(var(--i, 0) * 45ms); }
.tab { position: relative; transition: background-color .2s, color .2s, transform .2s var(--ease-out); }
.tab:hover { transform: translateX(4px); }
[dir='rtl'] .tab:hover { transform: translateX(-4px); }
.tab[aria-selected='true'] { box-shadow: 0 8px 20px -10px var(--glow); }
.tab[aria-selected='true']:hover { transform: none; }
.toggle input { transition: transform .2s var(--ease-spring); }
.toggle input:active { transform: scale(.8); }
.role-list .toggle { border-radius: 8px; padding-inline: 6px; transition: background-color .2s; }
.role-list .toggle:hover { background: var(--bg-raised); }
.dashboard-staff-row:hover, .global-staff-row:hover { border-color: var(--blue); transform: translateX(3px); }
.access-pill { transition: border-color .2s, color .2s; }
.server-card:hover .access-pill { border-color: var(--blue); color: var(--text-soft); }

.status:not(:empty) { animation: statusIn .35s var(--ease-spring) both; display: inline-block; }
.status.error:not(:empty) { animation: statusIn .35s var(--ease-spring) both, shake .45s .1s; }
@keyframes statusIn { from { opacity: 0; transform: translateY(6px) scale(.96); } to { opacity: 1; transform: none; } }
@keyframes shake { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-5px); } 75% { transform: translateX(5px); } }
.notice:not([hidden]) { animation: statusIn .4s var(--ease-spring) both, shake .45s .15s; }

/* Loading placeholders */
.loader { display: grid; place-items: center; gap: 14px; min-height: 220px; color: var(--muted); }
.loader::before {
  content: ''; width: 38px; height: 38px; border-radius: 50%;
  border: 3px solid var(--border); border-top-color: var(--blue-hover); animation: spin .8s linear infinite;
}
.skeleton-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 24px; }
.skeleton {
  min-height: 170px; border-radius: var(--radius); border: 1px solid var(--border);
  background: linear-gradient(100deg, var(--bg-raised) 30%, var(--surface) 50%, var(--bg-raised) 70%);
  background-size: 220% 100%; animation: shimmer 1.4s linear infinite;
}
@keyframes shimmer { from { background-position: 100% 0; } to { background-position: -100% 0; } }
@media (max-width: 900px) { .skeleton-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .skeleton-grid { grid-template-columns: 1fr; } }

.copy-status:not(:empty) { animation: statusIn .3s var(--ease-out) both; }

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .js-motion .reveal, .js-motion .reveal.in { opacity: 1; transform: none; transition: none; }
  .space::after { display: none; }
  .hero h1 { -webkit-text-fill-color: #fff; background: none; }
}


@media (max-width: 760px) {
  .js-motion .reveal {
    opacity: 1;
    transform: none;
  }
  .js-motion .reveal.in {
    transition: none;
  }
}