/* ===== JM motion layer: buttons, cards, reveals ===== */
@property --jm-ang { syntax: "<angle>"; inherits: false; initial-value: 0deg; }

/* ---------- Buttons ---------- */
.btn {
  --tx: 0px; --ty: 0px; --mx: 50%; --my: 50%;
  position: relative;
  overflow: hidden;
  isolation: isolate;
  white-space: nowrap;
  transform: translate3d(var(--tx), var(--ty), 0);
  transition: transform .45s cubic-bezier(.2,.9,.25,1), box-shadow .35s ease, color .25s ease, border-color .25s ease, background-color .25s ease;
}
.btn > * { position: relative; z-index: 2; }

/* Wind gust: a streak of light sweeps across on a loop, faster on hover */
.btn::before {
  content: "";
  position: absolute;
  top: -30%; bottom: -30%; left: -70%;
  width: 55%;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(100deg, transparent 0%, rgba(255,250,235,0) 15%, rgba(255,250,235,.55) 48%, rgba(255,250,235,.15) 62%, transparent 85%);
  transform: skewX(-20deg);
  animation: jm-gust 4.6s cubic-bezier(.45,0,.2,1) infinite;
  animation-delay: var(--jm-delay, 0s);
  transition: none;
}
.btn:hover::before, .btn.btn:hover::before { animation-duration: 1.15s; transform: skewX(-20deg); transition: none; }
.btn.btn:hover { transform: translate3d(var(--tx), calc(var(--ty) - 2px), 0); }

/* Gold beam that travels around the border */
.btn::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: inherit;
  padding: 1px;
  pointer-events: none;
  background: conic-gradient(from var(--jm-ang), transparent 0deg 250deg, rgba(240,215,159,.15) 280deg, #f3d898 330deg, transparent 360deg);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  animation: jm-orbit 3.6s linear infinite;
  animation-delay: var(--jm-delay, 0s);
  opacity: .9;
}

/* Primary: liquid gold that slowly flows */
.btn-primary {
  background-size: 220% 220% !important;
  animation: jm-flow 7s ease-in-out infinite;
}
.btn-primary:hover { box-shadow: 0 16px 44px rgba(222,192,126,.38), 0 0 0 1px rgba(255,240,205,.35) inset; }

/* Ghost: cursor spotlight + soft gold fill on hover */
.btn-ghost, .cta .btn {
  background-image: radial-gradient(140px circle at var(--mx) var(--my), rgba(222,192,126,0), transparent 70%);
}
.btn-ghost:hover, .cta .btn:hover {
  background-image: radial-gradient(140px circle at var(--mx) var(--my), rgba(222,192,126,.22), transparent 70%);
  box-shadow: 0 12px 34px rgba(222,192,126,.18);
}

.btn .arrow { display: inline-block; transition: transform .35s cubic-bezier(.2,.9,.25,1); }
.btn:hover .arrow { transform: translateX(4px); }

/* Click ripple */
.jm-ripple {
  position: absolute; z-index: 1; border-radius: 50%; pointer-events: none;
  width: 12px; height: 12px; margin: -6px 0 0 -6px;
  background: rgba(255,245,220,.55);
  animation: jm-ripple .65s ease-out forwards;
}

@keyframes jm-gust  { 0% { left: -70%; } 34% { left: 130%; } 100% { left: 130%; } }
@keyframes jm-orbit { to { --jm-ang: 360deg; } }
@keyframes jm-flow  { 0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } }
@keyframes jm-ripple { to { transform: scale(26); opacity: 0; } }

/* ---------- Cards: lift + gold spotlight that follows the cursor ---------- */
.jm-card { transition: transform .45s cubic-bezier(.2,.9,.25,1), border-color .3s ease, box-shadow .35s ease; }
.jm-glow {
  position: absolute; inset: 0; z-index: 0; pointer-events: none; border-radius: inherit;
  background: radial-gradient(360px circle at var(--mx, 50%) var(--my, 50%), rgba(222,192,126,.12), transparent 60%);
  opacity: 0; transition: opacity .35s ease;
}
.jm-card > :not(.jm-glow) { position: relative; z-index: 1; }
@media (hover: hover) and (pointer: fine) {
  .jm-card:hover { transform: translateY(-4px); border-color: rgba(222,192,126,.45); box-shadow: 0 22px 50px rgba(0,0,0,.28); }
  .jm-card:hover .jm-glow { opacity: 1; }
}

/* ---------- Scroll reveal (only when JS is running) ---------- */
.jm-js .jm-r { opacity: 0; transform: translateY(28px); transition: opacity .8s ease, transform .9s cubic-bezier(.2,.9,.25,1); transition-delay: var(--jm-rd, 0s); }
.jm-js .jm-r.jm-in { opacity: 1; transform: none; }

/* ---------- Scroll progress line ---------- */
.jm-progress {
  position: fixed; top: 0; left: 0; right: 0; height: 2px; z-index: 60; pointer-events: none;
  background: linear-gradient(90deg, #b98a39, #f3d898, #b98a39);
  transform-origin: 0 50%; transform: scaleX(0);
  box-shadow: 0 0 12px rgba(243,216,152,.6);
}

@media (prefers-reduced-motion: reduce) {
  .btn, .btn::before, .btn::after, .btn-primary, .jm-card { animation: none !important; transition: none !important; }
  .btn::before { display: none; }
  .jm-js .jm-r { opacity: 1; transform: none; transition: none; }
}