/* Elyon motion layer (redo 2026-10-24, anime.js 4.5.0 + Lenis 1.3.26).
   Everything here applies only under html.mx, which motion.js adds when
   motion is allowed. Without JS or under reduced motion none of it runs.
   MOTION.md sections 3 and 4. */

/* ---------- Lenis (lenis 1.3.26, dist/lenis.css) ---------- */
html.lenis, html.lenis body { height: auto; }
.lenis:not(.lenis-autoToggle).lenis-stopped { overflow: clip; }
.lenis [data-lenis-prevent], .lenis [data-lenis-prevent-wheel], .lenis [data-lenis-prevent-touch], .lenis [data-lenis-prevent-vertical], .lenis [data-lenis-prevent-horizontal] { overscroll-behavior: contain; }
.lenis.lenis-smooth iframe { pointer-events: none; }
.lenis.lenis-autoToggle { transition-property: overflow; transition-duration: 1ms; transition-behavior: allow-discrete; }
html.lenis { scroll-behavior: auto !important; }

/* ---------- Split headlines: words (or letters) rise out of a small blur ---------- */
.mx [data-split] .mx-w, .mx [data-split] .mx-c { display: inline-block; will-change: transform, opacity, filter; }
.mx [data-split]:not(.mx-done) .mx-w, .mx [data-split="chars"]:not(.mx-done) .mx-c { opacity: 0; }
.mx [data-split="chars"]:not(.mx-done) .mx-w { opacity: 1; }
.mx [data-split].mx-done .mx-w, .mx [data-split].mx-done .mx-c { will-change: auto; }

/* ---------- Cursor: a dot and a ring (fine pointers only) ---------- */
.mx-cursor-on, .mx-cursor-on * { cursor: none !important; }
.mx-cursor-on :is(input, textarea, select, [contenteditable=""], [contenteditable="true"]) { cursor: auto !important; }
.mx-modal, .mx-modal * { cursor: auto !important; }
.mx-cursor { position: fixed; left: 0; top: 0; z-index: 90; pointer-events: none; opacity: 0; transition: opacity 240ms var(--ease); --c: var(--bone); --c-hi: var(--cyan); }
.mx-cursor.on { opacity: 1; }
.mx-cursor.day { --c: var(--day-ink); --c-hi: var(--cyan-day); }
.mx-cursor.text, .mx-modal .mx-cursor { opacity: 0; }
.mx-cursor i { position: absolute; left: 0; top: 0; border-radius: 50%; will-change: transform; }
.mx-dot { width: 6px; height: 6px; margin: -3px 0 0 -3px; }
.mx-dot::before { content: ""; position: absolute; inset: 0; border-radius: 50%; background: var(--c); transition: transform 240ms var(--ease), background-color 240ms var(--ease); }
.mx-ring { width: 36px; height: 36px; margin: -18px 0 0 -18px; }
.mx-ring::before { content: ""; position: absolute; inset: 0; border-radius: 50%; border: 1px solid var(--c); opacity: 0.45; transition: transform 320ms var(--ease), opacity 240ms var(--ease), border-color 240ms var(--ease); }
.mx-cursor.link .mx-ring::before { transform: scale(1.6); opacity: 1; border-color: var(--c-hi); }
.mx-cursor.link .mx-dot::before { transform: scale(0.5); background: var(--c-hi); }
.mx-cursor.down .mx-ring::before { transform: scale(0.8); }
.mx-cursor.link.down .mx-ring::before { transform: scale(1.35); }

/* ---------- Page transition: the cross of light ----------
   A vertical line of light draws through the centre, the night opens out
   from it over the page, then the browser navigates. */
.mx-wipe { position: fixed; inset: 0; z-index: 95; pointer-events: none; visibility: hidden; }
.mx-wipe.on { visibility: visible; pointer-events: auto; }
.mx-wipe-panel { position: absolute; inset: 0; background: var(--night); clip-path: inset(0 50% 0 50%); }
.mx-wipe-edge { position: absolute; left: 0; top: 0; width: 1px; height: 100%; margin-left: -0.5px; background: var(--cyan); box-shadow: 0 0 10px 1px rgba(87, 212, 255, 0.55); opacity: 0; }
.mx-wipe-line { position: absolute; left: 0; top: 0; width: 1px; height: 100%; margin-left: -0.5px; background: linear-gradient(180deg, var(--light), var(--cyan) 40%, var(--cyan)); box-shadow: 0 0 12px 2px rgba(127, 222, 255, 0.7); transform: scaleY(0); transform-origin: 50% 0; }

@media (prefers-reduced-motion: reduce) {
  .mx-cursor, .mx-wipe { display: none !important; }
}

/* ---------- The light field (field.js): fixed behind the whole page ---------- */
canvas.field { position: fixed; left: 0; top: 0; width: 100%; height: 100vh; z-index: 0; pointer-events: none; display: block; }
.has-field .net-h { display: none; }