/* A mint spark running around selected surfaces, with quieter motion inside. */
.spark-host { position: relative; isolation: isolate; --spark-duration: 11s; --spark-color: #7be4b0; }
.spark-host > svg.spark-frame {
  position: absolute; inset: 0; width: 100%; height: 100%; overflow: hidden;
  pointer-events: none; z-index: 2; border-radius: inherit;
}
.spark-frame rect {
  fill: none; stroke: var(--spark-color); stroke-linecap: round;
  stroke-width: 1.5; animation: spark-orbit var(--spark-duration) linear infinite;
  stroke-dashoffset: var(--spark-offset, 0px);
}
.spark-frame .spark-halo { stroke-width: 7; opacity: .1; }
.spark-frame .spark-tail { stroke-width: 1.4; opacity: .35; }
.spark-frame .spark-trail { --spark-offset: -66px; stroke-width: 2; opacity: .8; }
.spark-frame .spark-core {
  --spark-offset: -89px; stroke: #ddffed; stroke-width: 3;
  filter: drop-shadow(0 0 4px #7be4b0) drop-shadow(0 0 8px #7be4b080);
}
@keyframes spark-orbit {
  from { stroke-dashoffset: var(--spark-offset, 0px); }
  to { stroke-dashoffset: calc(var(--spark-offset, 0px) - 1000px); }
}
.login-shell.spark-host { --spark-duration: 10s; box-shadow: 0 30px 80px #0004, 0 0 60px #7be4b008; }
.status-banner.spark-host { --spark-duration: 14s; }
.status-banner > .spark-frame { opacity: .75; }
.status-banner.offline > .spark-frame, .status-banner.pending > .spark-frame { opacity: .4; }
.nav-item.spark-host { --spark-duration: 8s; }
.nav-item > .spark-frame { opacity: .65; }
.nav-item .spark-halo, .nav-item .spark-tail { opacity: .12; }
.nav-item .spark-trail { opacity: .45; }
.nav-item .spark-core { stroke-width: 2; filter: drop-shadow(0 0 3px #7be4b0); }
.modal.spark-host { --spark-duration: 12s; }
.modal > .spark-frame { opacity: .55; }
.spark-host[data-motion-visible="false"] > .spark-frame rect { animation-play-state: paused; }

/* Short, staggered entrances settle before a user starts interacting. */
.login-shell { animation: login-arrive .6s cubic-bezier(.2,.8,.2,1) both; }
.motion-enter { animation: panel-arrive .48s cubic-bezier(.2,.8,.2,1) var(--motion-delay, 0ms) both; }
@keyframes login-arrive { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } }
@keyframes panel-arrive { from { opacity: 0; transform: translateY(9px); } to { opacity: 1; transform: translateY(0); } }
.modal { animation: dialog-arrive .28s cubic-bezier(.2,.8,.2,1) both; }
@keyframes dialog-arrive { from { opacity: 0; transform: translateY(10px) scale(.985); } to { opacity: 1; transform: translateY(0) scale(1); } }

/* Hover motion stays on controls and quick links, away from editable content. */
.nav-item { transition: background .2s, color .2s, border-color .2s; }
.nav-item > svg:first-child, .nav-item > span { transition: transform .22s cubic-bezier(.2,.8,.2,1); }
.dashboard-shortcut { transition: transform .22s, background .22s, border-color .22s, box-shadow .22s; }
.dashboard-shortcut > svg:last-child { transition: transform .22s; }
.metric-card { transition: border-color .22s, box-shadow .22s; }
.btn { transition: background .2s, border-color .2s, color .2s, box-shadow .2s, transform .16s; }
.btn.primary { position: relative; overflow: hidden; }
.btn.primary::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(105deg, transparent 25%, #ffffff38 50%, transparent 75%);
  transform: translateX(-125%); opacity: 0;
}
.btn.primary:hover:not(:disabled)::after, .btn.primary:focus-visible::after { animation: button-glint .65s ease-out; }
@keyframes button-glint { 0% { opacity: 0; transform: translateX(-125%); } 25% { opacity: 1; } 100% { opacity: 0; transform: translateX(125%); } }
.login-submit:not(:disabled) { box-shadow: 0 4px 18px #7be4b012; }
.login-card input { transition: border-color .2s, box-shadow .2s, background .2s; }
.login-card input:focus { box-shadow: 0 0 0 3px #7be4b016, 0 0 24px #7be4b008; }
.login-body { position: relative; isolation: isolate; }
.login-body::before {
  content: ''; position: fixed; inset: -5%; pointer-events: none; z-index: -1;
  background: radial-gradient(ellipse at 65% 20%, #7be4b009, transparent 50%), radial-gradient(ellipse at 20% 85%, #7be4b00b, transparent 45%);
  animation: ambient-drift 20s ease-in-out infinite alternate;
}
@keyframes ambient-drift { to { transform: translate3d(2%, -2%, 0); opacity: .55; } }
@media (hover: hover) and (pointer: fine) {
  .nav-item:hover > svg:first-child, .nav-item:hover > span { transform: translateX(3px); }
  .dashboard-shortcut:hover { transform: translateY(-3px); box-shadow: 0 8px 22px #0002; }
  .dashboard-shortcut:hover > svg:last-child { transform: translateX(3px); }
  .metric-card:hover { border-color: #7be4b04d; box-shadow: 0 0 24px #7be4b009; }
  .btn.primary:hover:not(:disabled) { transform: translateY(-1px); box-shadow: 0 5px 22px #7be4b025; }
}
@media (min-width: 681px) {
  .world-cube { animation: cube-float 7s ease-in-out infinite; }
  .cube-back { animation-delay: -2.5s; animation-duration: 9s; }
  .cube-front { animation-delay: -4s; animation-duration: 8s; }
  .world-star { animation: star-glow 4s ease-in-out infinite; }
  .star-two { animation-delay: -1.3s; }
  .star-three { animation-delay: -2.7s; }
}
@keyframes cube-float { 0%, 100% { transform: rotate(-30deg) skew(12deg); } 50% { transform: translateY(-8px) rotate(-30deg) skew(12deg); } }
@keyframes star-glow { 0%, 100% { opacity: .35; } 50% { opacity: 1; } }
html[data-motion-paused="true"] .spark-frame rect,
html[data-motion-paused="true"] .world-cube,
html[data-motion-paused="true"] .world-star,
html[data-motion-paused="true"] .login-body::before { animation-play-state: paused; }
:root[data-theme="light"] .spark-frame .spark-core { stroke: #168c52; }
:root[data-theme="light"] .spark-host { --spark-color: #2ca76a; }
@media (prefers-reduced-motion: reduce) {
  .spark-frame { display: none; }
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  .motion-enter, .login-shell, .modal { opacity: 1; transform: none; }
}