/* motion.css — with static/motion.js: the menu's gliding highlights, folding groups and details, busy buttons.
   Loaded on every Lunaro panel after the theme files. Only transform and opacity move (height for folding, which has
   no transform twin); hover motion only under a fine pointer; prefers-reduced-motion keeps the states, drops the travel. */
:root { --m-out: cubic-bezier(.23, 1, .32, 1); }

/* ---- the menu: one current-row highlight and one hover highlight, under the rows ---- */
.menu.glide { position: relative; isolation: isolate; }
.menu.glide > a, .menu.glide > form, .menu.glide .group > a, .menu.glide .group > form, .menu.glide .glabel { position: relative; z-index: 1; }
.glide-mark, .glide-hover { position: absolute; left: 0; top: 0; z-index: 0; pointer-events: none; }
.glide-mark { view-transition-name: nav-mark; }
.glide-mark i { position: absolute; }
html[data-theme] .menu a.glided[aria-current]::before { display: none; }
/* the hover highlight wears each shell's hover colour; the rows' own hover fill steps aside for it */
.glide-hover { opacity: 0; background: var(--hover, rgba(201, 216, 255, .06)); border-radius: var(--r, 0);
  transition: opacity .12s ease, transform .16s var(--m-out), height .16s var(--m-out), width .16s var(--m-out); }
.glide-hover.on { opacity: 1; }
.glide-hover.jump { transition: none; }
html[data-theme=lunaro] .glide-hover { background: linear-gradient(90deg, rgba(201, 216, 255, .085), rgba(201, 216, 255, .015) 85%); }
html.flat .glide-hover { background: var(--hover); }
html.biz[data-theme=lunaro] .glide-hover { background: var(--d-hover); border-radius: var(--d-radius); }
html[data-theme][class] .menu.glide a:not([aria-current]):hover, html[data-theme][class] .menu.glide button.link:hover { background: transparent; }

/* across pages the current-row highlight travels from the old row to the new one (the menu itself holds still) */
::view-transition-group(nav-mark) { animation-duration: .22s; animation-timing-function: var(--m-out); }
::view-transition-old(nav-mark), ::view-transition-new(nav-mark) { animation: none; }
::view-transition-old(nav-mark) { display: none; }

/* ---- details that fold (FAQ answers, closed rows), not the ones that pop a menu ---- */
@supports (interpolate-size: allow-keywords) {
  html[data-theme=lunaro] main details:not(.pop) { interpolate-size: allow-keywords; }
  html[data-theme=lunaro] main details:not(.pop)::details-content {
    block-size: 0; overflow: clip;
    transition: block-size .2s var(--m-out), content-visibility .2s allow-discrete;
  }
  html[data-theme=lunaro] main details:not(.pop)[open]::details-content { block-size: auto; }
}

/* ---- a button whose form is on its way: the label gives way to a small ring, same size (::before, since the
   primary button's ::after is depth.css's sheen) ---- */
html .btn.busy, html button.busy { position: relative; cursor: progress; }
html .btn.busy > *, html button.busy, html .btn.busy { color: transparent !important; }
html .btn.busy::before, html button.busy::before {
  content: ""; position: absolute; left: 50%; top: 50%; width: 14px; height: 14px; margin: -7px 0 0 -7px;
  border: 2px solid currentColor; border-radius: 50%; border-right-color: transparent; opacity: 0; pointer-events: none;
  color: var(--text, #e6ebf5); animation: m-spin .7s linear infinite, m-show .15s ease .15s forwards;
}
html .btn.primary.busy::before, html button.primary.busy::before { color: var(--accent-text, #1a1206); }
html.biz .btn.busy::before, html.biz button.busy::before { color: var(--d-text); }
html.biz .btn.primary.busy::before, html.biz button.primary.busy::before { color: var(--d-on-act, #1a1206); }
@keyframes m-spin { to { transform: rotate(1turn); } }
@keyframes m-show { to { opacity: 1; } }

@media (prefers-reduced-motion: reduce) {
  .glide-hover { transition: opacity .12s ease; }
  ::view-transition-group(nav-mark) { animation: none; }
  html[data-theme=lunaro] main details:not(.pop)::details-content { transition: none; }
  /* depth.css stops every animation here; the ring still shows, standing still */
  html .btn.busy::before, html button.busy::before { opacity: 1; }
}