/*!
 * smb-magic.css - Start My Business homepage motion layer (v1, 2026-10-10)
 * Vanilla CSS ports of Magic UI components: shimmer-button, border-beam,
 * number-ticker, blur-fade, animated-list, marquee, dot-pattern,
 * animated-gradient-text.
 * Magic UI (https://magicui.design, github.com/magicuidesign/magicui)
 * Copyright (c) Magic UI. Licensed under the MIT License.
 * Animations use transform/opacity only (gradient text: background-position,
 * 3 runs then stops). Everything is off under prefers-reduced-motion.
 */
:root{
  --mu-navy:#1E3A5F;
  --mu-gold:#D4A84B;
  --mu-blue:#2563eb;
  --mu-purple:#7c3aed;
}

/* ---------- shared: masked ring used by shimmer + border beam ---------- */
mu-fx,mu-ring,mu-spin,mu-sheen{display:block}
.mu-fx{position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:-1;overflow:hidden}
.mu-ring{position:absolute;inset:0;border-radius:inherit;padding:var(--mu-ring-w,1.5px);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;
  overflow:hidden}
.mu-ring > mu-spin{position:absolute;left:50%;top:50%;width:var(--mu-spin-size,240%);aspect-ratio:1;
  transform:translate(-50%,-50%) rotate(0deg);will-change:transform;
  animation:mu-spin var(--mu-speed,3s) linear infinite;animation-play-state:paused}
.mu-on .mu-ring > mu-spin,.mu-on .mu-sheen{animation-play-state:running}
@keyframes mu-spin{to{transform:translate(-50%,-50%) rotate(360deg)}}

/* ---------- 1. Shimmer button (primary CTAs) ---------- */
.mu-shim{position:relative;isolation:isolate}
.mu-shim .mu-ring > mu-spin{background:conic-gradient(from 0deg,transparent 0 290deg,rgba(255,255,255,.95) 335deg,transparent 360deg)}
.mu-shim .mu-sheen{position:absolute;top:0;bottom:0;left:0;width:45%;
  background:linear-gradient(105deg,transparent 0,rgba(255,255,255,.28) 45%,rgba(255,255,255,.05) 60%,transparent 100%);
  transform:translateX(-120%) skewX(-18deg);will-change:transform;
  animation:mu-sheen 4.2s cubic-bezier(.4,0,.2,1) infinite;animation-play-state:paused}
@keyframes mu-sheen{0%{transform:translateX(-120%) skewX(-18deg)}38%,100%{transform:translateX(330%) skewX(-18deg)}}
.mu-shim.mu-shim--gold .mu-ring > mu-spin{background:conic-gradient(from 0deg,transparent 0 290deg,var(--mu-navy) 335deg,transparent 360deg)}
.mu-shim.mu-shim--gold .mu-sheen{background:linear-gradient(105deg,transparent 0,rgba(255,255,255,.55) 45%,rgba(255,255,255,.1) 60%,transparent 100%)}
.mu-shim{box-shadow:0 8px 24px -10px rgba(37,99,235,.55)}
.mu-shim.mu-shim--gold{box-shadow:0 8px 24px -10px rgba(212,168,75,.7)}

/* ---------- 2. Border beam (key cards) ---------- */
.mu-beam{isolation:isolate}
.mu-beam > .mu-fx{z-index:2;overflow:visible}
.mu-beam .mu-ring{--mu-ring-w:2px}
.mu-beam .mu-ring > mu-spin{--mu-spin-size:160%;--mu-speed:9s;
  background:conic-gradient(from 0deg,transparent 0 280deg,rgba(212,168,75,.0) 285deg,var(--mu-gold) 325deg,var(--mu-blue) 352deg,transparent 360deg)}
.mu-beam--b .mu-ring > mu-spin{animation-delay:-4.5s}

/* ---------- 3. Number ticker ---------- */
.mu-tick{display:inline-block;font-variant-numeric:tabular-nums}

/* ---------- 4. Blur-fade reveal (fade-up; blur dropped to keep transform/opacity only) ---------- */
html.mu-js .mu-reveal{opacity:0;transform:translateY(18px);
  transition:opacity .7s cubic-bezier(.22,1,.36,1),transform .7s cubic-bezier(.22,1,.36,1);
  transition-delay:var(--mu-d,0ms)}
html.mu-js .mu-reveal.mu-in{opacity:1;transform:none}

/* ---------- 5. Animated list ("what we handle" pills) ---------- */
html.mu-js #metrics-grid .pill-card{
  transition:opacity .45s ease,transform .6s cubic-bezier(.34,1.45,.64,1),box-shadow .18s ease,border-color .18s ease,background .18s ease}
html.mu-js #metrics-grid .pill-card:not(.visible){opacity:0;transform:translateY(22px) scale(.94)}
html.mu-js #metrics-grid .pill-card.visible{opacity:1}

/* ---------- 6. Marquee (our own services) ---------- */
.mu-marquee{--gap:12px;--duration:46s;position:relative;background:#fff;padding:26px 0 30px;overflow:hidden;
  font-family:'Plus Jakarta Sans',Inter,system-ui,-apple-system,'Segoe UI',sans-serif}
.mu-marquee-label{text-align:center;margin:0 16px 14px;font-size:12px;font-weight:800;letter-spacing:.14em;
  text-transform:uppercase;color:var(--mu-navy)}
.mu-marquee-label span{color:var(--mu-gold)}
.mu-marquee-viewport{display:flex;gap:var(--gap);overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent)}
.mu-marquee-track{display:flex;flex-shrink:0;gap:var(--gap);margin:0;padding:0;list-style:none;
  animation:mu-marquee var(--duration) linear infinite;animation-play-state:paused;will-change:transform}
.mu-marquee.mu-on .mu-marquee-track{animation-play-state:running}
.mu-marquee:hover .mu-marquee-track,.mu-marquee:focus-within .mu-marquee-track{animation-play-state:paused}
@keyframes mu-marquee{to{transform:translateX(calc(-100% - var(--gap)))}}
.mu-chip{display:inline-flex;align-items:center;gap:8px;white-space:nowrap;padding:10px 16px;border-radius:999px;
  background:linear-gradient(180deg,#fff,#f6f8fc);border:1px solid #e3e9f3;color:#16294a;font-size:14.5px;font-weight:700;
  box-shadow:0 1px 2px rgba(16,24,40,.05)}
.mu-chip::before{content:"";width:7px;height:7px;border-radius:50%;background:linear-gradient(135deg,var(--mu-gold),#f3d27a);flex:none}
.mu-chip:nth-child(3n+2)::before{background:linear-gradient(135deg,var(--mu-blue),#60a5fa)}
.mu-chip:nth-child(3n)::before{background:linear-gradient(135deg,var(--mu-purple),#a78bfa)}
@media (max-width:600px){.mu-marquee{--duration:38s;padding:22px 0 24px}.mu-chip{font-size:13.5px;padding:9px 14px}}

/* ---------- 7. Dot pattern (CTA bands) ---------- */
.mu-dots{position:relative;isolation:isolate}
.mu-dots::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background-image:radial-gradient(rgba(30,58,95,.22) 1px,transparent 1.2px);background-size:18px 18px;
  -webkit-mask-image:radial-gradient(ellipse 70% 75% at 50% 50%,#000 20%,transparent 75%);
  mask-image:radial-gradient(ellipse 70% 75% at 50% 50%,#000 20%,transparent 75%)}

/* ---------- 8. Animated gradient text (one accent phrase) ---------- */
#smb-hero-2col .smb-highlight.mu-grad{
  background:linear-gradient(90deg,var(--mu-blue) 0%,var(--mu-purple) 25%,var(--mu-gold) 50%,var(--mu-purple) 75%,var(--mu-blue) 100%);
  background-size:300% 100%;background-position:0% 50%;
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
#smb-hero-2col .smb-highlight.mu-grad.mu-on{animation:mu-grad 6s ease-in-out 3 forwards}
@keyframes mu-grad{0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}}

/* ---------- reduced motion: everything static ---------- */
@media (prefers-reduced-motion:reduce){
  .mu-fx{display:none}
  html.mu-js .mu-reveal{opacity:1;transform:none;transition:none}
  html.mu-js #metrics-grid .pill-card{transition:none}
  .mu-marquee-viewport{-webkit-mask-image:none;mask-image:none;justify-content:center}
  .mu-marquee-track{animation:none;flex-wrap:wrap;justify-content:center;flex-shrink:1;padding:0 16px}
  .mu-marquee-track[aria-hidden="true"]{display:none}
  #smb-hero-2col .smb-highlight.mu-grad.mu-on{animation:none}
}