/* scroll motion: reveal on scroll, hero parallax, counters, reading bar, back-to-top, hero dust.
   Everything is driven by assets/motion.js; without JS (no .mo on <html>) nothing is hidden.
   Remove the <link>/<script> lines for motion in inc/bootstrap.php to turn it all off. */

/* reveal: fade + rise, staggered by --d (set per element by the script) */
.mo .rv { opacity: 0; translate: 0 26px; transition: opacity .7s cubic-bezier(.2, .7, .2, 1) var(--d, 0s), translate .7s cubic-bezier(.2, .7, .2, 1) var(--d, 0s); }
.mo .rv.rv-l { translate: -34px 0; }
.mo .rv.rv-r { translate: 34px 0; }
.mo .rv.rv-z { translate: 0 18px; scale: .94; transition-property: opacity, translate, scale; transition-duration: .7s; }
.mo .rv.in { opacity: 1; translate: 0 0; scale: 1; }

/* section heading: gold line draws in under the eyebrow */
.mo .section-head .eyebrow { position: relative; }
.mo .section-head.rv .eyebrow::after { content: ''; display: block; height: 1px; width: 64px; margin-top: 6px;
  background: linear-gradient(90deg, var(--gold), transparent); transform: scaleX(0); transform-origin: left; transition: transform .9s ease .25s; }
.mo .section-head.rv.in .eyebrow::after { transform: scaleX(1); }
.mo .section-head[style*="center"] .eyebrow::after, .mo .center .section-head .eyebrow::after { margin-left: auto; margin-right: auto; transform-origin: center; }

/* hero parallax: the script writes --py (px scrolled inside the hero) */
.hx-bg { translate: 0 calc(var(--py, 0) * .35px); }
.hx-l { translate: 0 calc(var(--py, 0) * .18px); }
.hx-r { translate: 0 calc(var(--py, 0) * .26px); }
.hx-in { translate: 0 calc(var(--py, 0) * -.12px); opacity: calc(1 - var(--py, 0) / 700); }
.hx-moon { scale: calc(1 + var(--py, 0) / 1600); }

/* hero dust (canvas made by the script) */
.hx-dust { position: absolute; inset: 0; z-index: -2; pointer-events: none; width: 100%; height: 100%; }

/* reading bar: every page, sits on the bottom edge of the menu bar (fixed at the top if there is no header) */
.mo-bar { position: fixed; left: 0; top: 0; right: 0; height: 3px; z-index: 60; pointer-events: none; transform: scaleX(0); transform-origin: left;
  background: linear-gradient(90deg, #8b5cf6, #e879f9 45%, var(--gold)); box-shadow: 0 0 10px rgba(242, 194, 91, .55); }
.top > .mo-bar { position: absolute; top: auto; bottom: -2px; }

/* back to top */
.mo-top { position: fixed; right: 18px; bottom: 18px; z-index: 20; width: 48px; height: 48px; border-radius: 50%; border: 1px solid rgba(242, 194, 91, .55);
  display: grid; place-items: center; cursor: pointer; color: var(--gold); background: rgba(18, 11, 40, .82); backdrop-filter: blur(8px);
  box-shadow: 0 0 18px rgba(139, 92, 246, .45); opacity: 0; translate: 0 16px; pointer-events: none; transition: opacity .3s, translate .3s, box-shadow .2s; }
.mo-top.on { opacity: 1; translate: 0 0; pointer-events: auto; }
.mo-top:hover, .mo-top:focus-visible { box-shadow: 0 0 0 3px rgba(242, 194, 91, .25), 0 0 26px rgba(242, 194, 91, .5); }
.mo-top svg { width: 22px; height: 22px; }
.mo-top circle { transition: stroke-dashoffset .1s linear; }
@media (max-width: 760px) { .mo-top { width: 44px; height: 44px; right: 14px; bottom: 22px; } }

@media (prefers-reduced-motion: reduce) {
  .mo .rv { opacity: 1 !important; translate: none !important; scale: none !important; transition: none !important; }
  .hx-bg, .hx-l, .hx-r, .hx-in { translate: none !important; }
  .hx-in { opacity: 1 !important; }
  .hx-dust { display: none; }
}