/* ==========================================================================
   HOME — motion layer 2. index.html only.
   A. Buttons: each CTA has its own palette (from the Quorel mark) and its own
      click response — ripple + arrow fire, spinning gradient border, particle
      burst, light sweep.
   ========================================================================== */
:root { --mk-blue: #007cfe; --mk-leaf: #5cb615; --mk-violet: #6a31ee; --mk-orange: #ff8a00; }

/* --- A1. Hero primary: blue → violet --------------------------------------- */
.hh-btn--primary { background: linear-gradient(110deg, #0b6bff 0%, #2f55f5 45%, #6a31ee 100%); background-size: 160% 100%; background-position: 0% 50%; border-color: transparent;
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 20%), 0 14px 30px -14px rgb(76 60 240 / 70%); transition: background-position 600ms ease, transform 220ms cubic-bezier(.22, 1, .36, 1), box-shadow 300ms ease; }
.hh-btn--primary:hover { background: linear-gradient(110deg, #0b6bff 0%, #2f55f5 45%, #6a31ee 100%); background-size: 160% 100%; background-position: 100% 50%; box-shadow: inset 0 1px 0 rgb(255 255 255 / 20%), 0 20px 36px -14px rgb(106 49 238 / 70%); }

/* --- A2. Hero secondary: white with a turning four-colour border ----------- */
@property --hb-angle { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
.hh-btn--ghost { border: 1.5px solid transparent;
  background: linear-gradient(#fff, #fff) padding-box, conic-gradient(from var(--hb-angle), var(--mk-blue), var(--mk-leaf), var(--mk-orange), var(--mk-violet), var(--mk-blue)) border-box;
  animation: hb-turn 8s linear infinite; }
.hh-btn--ghost:hover { background: linear-gradient(#fff, #fff) padding-box, conic-gradient(from var(--hb-angle), var(--mk-blue), var(--mk-leaf), var(--mk-orange), var(--mk-violet), var(--mk-blue)) border-box; border-color: transparent; }
.hh-btn--ghost .hh-btn-arrow { background: linear-gradient(135deg, rgb(92 182 21 / 14%), rgb(255 138 0 / 14%)); color: #3d8a0e; }
.hh-btn--ghost:hover .hh-btn-arrow { background: linear-gradient(135deg, var(--mk-leaf), #2f9e44); color: #fff; }
.hh-btn--ghost.is-firing { animation: hb-turn 600ms cubic-bezier(.65, 0, .35, 1) 1, hb-turn 8s linear 600ms infinite; }
.hh-btn--ghost.is-firing .hh-btn-arrow svg { animation: hb-bounce 560ms cubic-bezier(.34, 1.56, .64, 1); }
@keyframes hb-turn { to { --hb-angle: 360deg; } }
@keyframes hb-bounce { 0% { transform: translateX(0); } 40% { transform: translateX(7px) scale(1.15); } 70% { transform: translateX(-2px); } 100% { transform: none; } }

/* --- A3/A4. Closing CTA pair ---------------------------------------------- */
.cta-section .btn { position: relative; overflow: hidden; isolation: isolate; border-radius: 14px; transition: transform 220ms cubic-bezier(.22, 1, .36, 1), box-shadow 300ms ease, background-color 300ms ease, color 300ms ease, border-color 300ms ease; }
.cta-section .btn-primary { color: #fff; border-color: transparent; background: linear-gradient(110deg, var(--mk-orange) 0%, #ff5a5f 55%, #e0368f 100%);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 25%), 0 14px 30px -14px rgb(255 90 95 / 70%); }
.cta-section .btn-primary:hover { color: #fff; transform: translateY(-2px); box-shadow: inset 0 1px 0 rgb(255 255 255 / 25%), 0 20px 36px -14px rgb(255 90 95 / 80%); filter: saturate(1.1); }
.cta-section .btn-ghost { color: #2f7a0c; background: #fff; border: 1.5px solid rgb(92 182 21 / 55%); }
.cta-section .btn-ghost:hover { color: #fff; background: var(--mk-leaf); border-color: var(--mk-leaf); transform: translateY(-2px); box-shadow: 0 14px 28px -14px rgb(92 182 21 / 70%); }
.cta-section .btn:active { transform: scale(.97); transition-duration: 90ms; }
/* Particle burst (primary) */
.mo-burst { position: fixed; z-index: 100; left: 0; top: 0; width: 8px; height: 8px; margin: -4px 0 0 -4px; border-radius: 2px; pointer-events: none; background: var(--c);
  animation: mo-burst 700ms cubic-bezier(.2, .8, .3, 1) forwards; }
@keyframes mo-burst { to { transform: translate(var(--tx), var(--ty)) rotate(var(--rot)) scale(.4); opacity: 0; } }
/* Light sweep (ghost) */
.cta-section .btn-ghost::after { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(105deg, transparent 30%, rgb(255 255 255 / 70%) 50%, transparent 70%); transform: translateX(-120%); }
.cta-section .btn-ghost.is-sweeping::after { animation: mo-sweep 600ms ease; }
.cta-section .btn-ghost.is-sweeping { color: #fff; background: var(--mk-leaf); border-color: var(--mk-leaf); }
@keyframes mo-sweep { to { transform: translateX(120%); } }

@media (prefers-reduced-motion: reduce) {
  .hh-btn--ghost, .hh-btn--ghost.is-firing, .hh-btn *, .mo-burst, .cta-section .btn-ghost::after { animation: none !important; }
}