/* ════════════════════════════════════════════════════════════════════════
   motion.css — the "sexy" layer · premium motion polish, additive only
   Loaded after site.css on every page. Nothing here restructures content;
   it elevates what's already there: shimmer accents, magnetic buttons,
   drifting glow orbs, richer reveals. All of it respects reduced-motion.
   ════════════════════════════════════════════════════════════════════════ */

/* ── 1 · Gradient-text shimmer on accent words ───────────────────────────
   The purple <em> / .lo-accent words become a slow-moving brand gradient. */
@keyframes sx-shimmer { to { background-position: -200% center; } }
.sx-shimmer {
  background-image: linear-gradient(100deg,
    var(--e-purple,#7c3aed) 0%, var(--e-violet,#a78bfa) 24%,
    var(--e-elec,#60a5fa) 50%, var(--e-violet,#a78bfa) 76%,
    var(--e-purple,#7c3aed) 100%);
  background-size: 200% auto;
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  animation: sx-shimmer 7s linear infinite;
}
/* on dark sections, lift the floor so the gradient stays luminous */
.e-dark .sx-shimmer {
  background-image: linear-gradient(100deg,
    var(--e-violet,#a78bfa) 0%, var(--e-lilac,#c4b5fd) 26%,
    var(--e-elec,#60a5fa) 50%, var(--e-lilac,#c4b5fd) 74%,
    var(--e-violet,#a78bfa) 100%);
}

/* ── 2 · Ambient glow orbs (JS-injected into dark sections) ──────────────
   Big, soft, slowly drifting radial light behind the content. */
.sx-orb {
  position: absolute; border-radius: 50%;
  filter: blur(72px); opacity: .55;
  pointer-events: none; z-index: 0; will-change: transform;
}
.sx-orb-a { width: 540px; height: 540px;
  background: radial-gradient(circle, rgba(124,58,237,.60), transparent 68%); }
.sx-orb-b { width: 460px; height: 460px;
  background: radial-gradient(circle, rgba(96,165,250,.42), transparent 70%); }
@keyframes sx-drift1 { 0%,100% { transform: translate3d(0,0,0) scale(1); }
  50% { transform: translate3d(46px,-34px,0) scale(1.08); } }
@keyframes sx-drift2 { 0%,100% { transform: translate3d(0,0,0) scale(1); }
  50% { transform: translate3d(-52px,30px,0) scale(1.1); } }
/* content rides above the orbs */
section.e-dark > .e-wrap { position: relative; z-index: 1; }

/* ── 3 · Magnetic buttons (desktop pointer only; JS sets the transform) ── */
@media (hover: hover) and (pointer: fine) {
  .e-btn.sx-mag, .lo-cta.sx-mag, .hx-cta.sx-mag {
    transition: transform .3s cubic-bezier(.16,1,.3,1),
                box-shadow .35s ease, background-color .35s ease,
                border-color .35s ease, color .35s ease;
    will-change: transform;
  }
}

/* ── 4 · Reveal polish — a touch more travel + the expensive ease ───────
   Upgrades the existing .rv without changing its JS hooks. */
.rv  { transition: opacity 1s cubic-bezier(.16,1,.3,1), transform 1s cubic-bezier(.16,1,.3,1); }
.rv-line { transition: clip-path 1.15s cubic-bezier(.16,1,.3,1); }

/* ── 5 · Link affordance — accent links get a sliding underline ─────────── */
.sx-ul { position: relative; text-decoration: none; }
.sx-ul::after {
  content: ""; position: absolute; left: 0; bottom: -2px; height: 1.5px; width: 100%;
  background: currentColor; transform: scaleX(0); transform-origin: right center;
  transition: transform .4s cubic-bezier(.16,1,.3,1);
}
.sx-ul:hover::after { transform: scaleX(1); transform-origin: left center; }

/* ── Reduced motion — stillness ─────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .sx-shimmer { animation: none; }
  .sx-orb { animation: none !important; }
}