/*!
 * tlj-magic.css - TradeLineJet homepage motion layer (v1, 2026-10-11)
 * Vanilla CSS ports of Magic UI components: shimmer-button, border-beam,
 * number-ticker, blur-fade (fade-up), animated-list, marquee, dot-pattern,
 * grid-pattern, animated-gradient-text. Re-themed red #dc2626 / blue #2563eb / slate-900.
 * Magic UI (https://magicui.design, github.com/magicuidesign/magicui)
 * Copyright (c) Magic UI. Licensed under the MIT License.
 * Motion uses transform/opacity (gradient text: background-position, 3 runs then stops).
 * Loops only run while on screen (.tlj-on). Everything is off under prefers-reduced-motion.
 */
:root{
  --tlj-red:#dc2626;
  --tlj-blue:#2563eb;
  --tlj-ink:#0f172a;
  --tlj-ease:cubic-bezier(.22,1,.36,1);
  --tlj-spring:cubic-bezier(.32,.72,0,1);
}

/* ---------- base polish ---------- */
.tlj-page{-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
.tlj-clip-x{overflow-x:clip}
.tlj-tabnum{font-variant-numeric:tabular-nums}
.tlj-page a:focus-visible,.tlj-page button:focus-visible,.tlj-page [tabindex]:focus-visible{
  outline:3px solid var(--tlj-blue);outline-offset:3px;border-radius:12px}
.tlj-dark a:focus-visible,.tlj-dark button:focus-visible{outline-color:#93c5fd}
.tlj-sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.tlj-lift{transition:transform .5s var(--tlj-spring),box-shadow .5s var(--tlj-spring)}
.tlj-lift:hover{transform:translateY(-4px);box-shadow:0 30px 60px -30px rgba(15,23,42,.35)}
.tlj-press{transition:transform .35s var(--tlj-spring),box-shadow .35s var(--tlj-spring),background-color .25s ease,color .25s ease}
.tlj-press:hover{transform:translateY(-1px)}
.tlj-press:active{transform:scale(.98)}
.tlj-press .tlj-nub{transition:transform .45s var(--tlj-spring)}
.tlj-press:hover .tlj-nub{transform:translate(3px,-1px) scale(1.05)}

/* ---------- shared masked ring (shimmer + beam) ---------- */
.tlj-fx{position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:0;overflow:hidden}
.tlj-ring{position:absolute;inset:0;border-radius:inherit;padding:var(--tlj-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}
.tlj-spin{position:absolute;left:50%;top:50%;width:var(--tlj-spin-size,240%);aspect-ratio:1;
  transform:translate(-50%,-50%) rotate(0deg);
  animation:tlj-spin var(--tlj-speed,3s) linear infinite;animation-play-state:paused}
.tlj-on .tlj-spin,.tlj-on .tlj-sheen{animation-play-state:running}
@keyframes tlj-spin{to{transform:translate(-50%,-50%) rotate(360deg)}}

/* ---------- 1. Shimmer button (primary CTAs) ---------- */
.tlj-shim{position:relative;isolation:isolate;box-shadow:0 10px 28px -12px rgba(37,99,235,.65)}
.tlj-shim > *:not(.tlj-fx){position:relative;z-index:1}
.tlj-shim .tlj-spin{background:conic-gradient(from 0deg,transparent 0 290deg,rgba(255,255,255,.95) 335deg,transparent 360deg)}
.tlj-sheen{position:absolute;top:0;bottom:0;left:0;width:45%;
  background:linear-gradient(105deg,transparent 0,rgba(255,255,255,.30) 45%,rgba(255,255,255,.06) 60%,transparent 100%);
  transform:translateX(-120%) skewX(-18deg);
  animation:tlj-sheen 4.2s cubic-bezier(.4,0,.2,1) infinite;animation-play-state:paused}
@keyframes tlj-sheen{0%{transform:translateX(-120%) skewX(-18deg)}38%,100%{transform:translateX(330%) skewX(-18deg)}}

/* ---------- 2. Border beam (product cards) ---------- */
.tlj-beam{position:relative;isolation:isolate}
.tlj-beam > .tlj-fx{z-index:3}
.tlj-beam .tlj-ring{--tlj-ring-w:2px}
.tlj-beam .tlj-spin{--tlj-spin-size:160%;--tlj-speed:9s;
  background:conic-gradient(from 0deg,transparent 0 280deg,rgba(220,38,38,0) 285deg,var(--tlj-red) 325deg,var(--tlj-blue) 352deg,transparent 360deg)}
.tlj-beam--b .tlj-spin{animation-delay:-3s}
.tlj-beam--c .tlj-spin{animation-delay:-6s}

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

/* ---------- 4. Fade-up reveal (blur dropped: transform/opacity only) ---------- */
html.tlj-js [data-reveal]{opacity:0;transform:translateY(22px);
  transition:opacity .8s var(--tlj-ease),transform .9s var(--tlj-ease);transition-delay:var(--d,0ms)}
html.tlj-js [data-reveal].tlj-in{opacity:1;transform:none}

/* ---------- 5. Animated list (How It Works steps) ---------- */
html.tlj-js [data-reveal="pop"]{transform:translateY(26px) scale(.96)}
html.tlj-js [data-reveal="pop"].tlj-in{transform:none;transition-timing-function:var(--tlj-ease),cubic-bezier(.34,1.45,.64,1)}
.tlj-path{transform-origin:left center;transform:scaleX(0);transition:transform 1.4s var(--tlj-ease) .25s}
.tlj-in .tlj-path,html:not(.tlj-js) .tlj-path{transform:scaleX(1)}

/* ---------- 6. Marquee (bank names) ---------- */
.tlj-marquee{--gap:12px;--duration:52s;position:relative;overflow:hidden}
.tlj-marquee-viewport{display:flex;gap:var(--gap);overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.tlj-marquee-track{display:flex;flex-shrink:0;gap:var(--gap);margin:0;padding:0;list-style:none;
  animation:tlj-marquee var(--duration) linear infinite;animation-play-state:paused}
.tlj-marquee.tlj-on .tlj-marquee-track{animation-play-state:running}
.tlj-marquee:hover .tlj-marquee-track,.tlj-marquee:focus-within .tlj-marquee-track{animation-play-state:paused}
@keyframes tlj-marquee{to{transform:translateX(calc(-100% - var(--gap)))}}
.tlj-chip{display:inline-flex;align-items:center;gap:10px;white-space:nowrap;padding:12px 18px;border-radius:999px;
  background:linear-gradient(180deg,#fff,#f8fafc);border:1px solid rgba(15,23,42,.08);color:#0f172a;
  font-size:15px;font-weight:650;letter-spacing:-.005em;box-shadow:0 1px 2px rgba(15,23,42,.04)}
.tlj-chip::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--tlj-red);flex:none}
.tlj-chip:nth-child(even)::before{background:var(--tlj-blue)}
@media (max-width:600px){.tlj-marquee{--duration:40s}.tlj-chip{font-size:14px;padding:11px 15px}}

/* ---------- 7. Dot + grid patterns ---------- */
.tlj-dots,.tlj-grid{position:relative;isolation:isolate}
.tlj-dots::after,.tlj-grid::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none}
.tlj-dots::after{background-image:radial-gradient(rgba(255,255,255,.22) 1px,transparent 1.3px);background-size:20px 20px;
  -webkit-mask-image:radial-gradient(ellipse 70% 75% at 50% 50%,#000 20%,transparent 78%);
  mask-image:radial-gradient(ellipse 70% 75% at 50% 50%,#000 20%,transparent 78%)}
.tlj-dots--ink::after{background-image:radial-gradient(rgba(15,23,42,.16) 1px,transparent 1.3px)}
.tlj-grid::after{background-image:linear-gradient(rgba(148,163,184,.12) 1px,transparent 1px),linear-gradient(90deg,rgba(148,163,184,.12) 1px,transparent 1px);
  background-size:48px 48px;
  -webkit-mask-image:radial-gradient(ellipse 80% 70% at 50% 0%,#000 30%,transparent 80%);
  mask-image:radial-gradient(ellipse 80% 70% at 50% 0%,#000 30%,transparent 80%)}
.tlj-grid--ink::after{background-image:linear-gradient(rgba(15,23,42,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(15,23,42,.06) 1px,transparent 1px)}

/* ---------- 8. Animated gradient text (section kickers) ---------- */
.tlj-kicker{display:inline-flex;align-items:center;gap:8px;padding:6px 14px;border-radius:999px;
  font-size:14px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  background:rgba(15,23,42,.04);box-shadow:inset 0 0 0 1px rgba(15,23,42,.08)}
.tlj-dark .tlj-kicker{background:rgba(255,255,255,.06);box-shadow:inset 0 0 0 1px rgba(255,255,255,.14)}
.tlj-grad{background:linear-gradient(90deg,#b91c1c 0%,#1d4ed8 33%,#b91c1c 66%,#1d4ed8 100%);
  background-size:300% 100%;background-position:0% 50%;
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:#1d4ed8}
.tlj-dark .tlj-grad{background-image:linear-gradient(90deg,#fca5a5 0%,#93c5fd 33%,#fca5a5 66%,#93c5fd 100%)}
.tlj-grad.tlj-on{animation:tlj-grad 6s ease-in-out 3 forwards}
@keyframes tlj-grad{0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}}

/* ---------- video cards + modal ---------- */
.tlj-vcard{position:relative;display:block;width:100%;text-align:left;border-radius:1.75rem;padding:6px;
  background:rgba(255,255,255,.05);box-shadow:inset 0 0 0 1px rgba(255,255,255,.1);
  transition:transform .6s var(--tlj-spring),background-color .4s ease}
.tlj-vcard:hover{transform:translateY(-6px);background:rgba(255,255,255,.08)}
.tlj-vcard .tlj-vthumb{transition:transform 1.2s var(--tlj-spring)}
.tlj-vcard:hover .tlj-vthumb,.tlj-vcard:focus-visible .tlj-vthumb{transform:scale(1.045)}
.tlj-play{transition:transform .5s var(--tlj-spring),box-shadow .5s ease}
.tlj-vcard:hover .tlj-play,.tlj-vcard:focus-visible .tlj-play{transform:scale(1.08);box-shadow:0 0 0 10px rgba(255,255,255,.12)}
.tlj-modal-in{animation:tlj-fade .3s var(--tlj-ease) both}
.tlj-modal-in > *{animation:tlj-rise .45s var(--tlj-ease) both}
@keyframes tlj-fade{from{opacity:0}to{opacity:1}}
@keyframes tlj-rise{from{opacity:0;transform:translateY(16px) scale(.98)}to{opacity:1;transform:none}}
.tlj-faq-in{animation:tlj-rise .4s var(--tlj-ease) both}

/* ---------- mobile call bar (leaves the bottom-right 96px for the chat widget) ---------- */
.tlj-callbar{position:fixed;left:12px;right:108px;bottom:14px;z-index:30;
  transform:translateY(140%);opacity:0;visibility:hidden;transition:transform .5s var(--tlj-spring),opacity .3s ease,visibility 0s linear .5s}
.tlj-callbar.is-shown{transform:none;opacity:1;visibility:visible;transition-delay:0s}
@media (min-width:768px){.tlj-callbar{display:none}}

/* ---------- seam plane / birds (moved below the hero) ---------- */
.tlj-seam{position:absolute;top:0;left:0;right:0;height:0;overflow:visible;pointer-events:none;z-index:20}

/* ---------- reduced motion: everything static ---------- */
@media (prefers-reduced-motion:reduce){
  .tlj-fx{display:none}
  html.tlj-js [data-reveal]{opacity:1;transform:none;transition:none}
  .tlj-path{transform:none;transition:none}
  .tlj-marquee-viewport{-webkit-mask-image:none;mask-image:none;justify-content:center}
  .tlj-marquee-track{animation:none;flex-wrap:wrap;justify-content:center;flex-shrink:1;padding:0 16px}
  .tlj-marquee-track[aria-hidden="true"]{display:none}
  .tlj-grad.tlj-on{animation:none}
  .tlj-seam,.tlj-seam *{animation:none!important}
  .tlj-seam{display:none}
  .tlj-lift,.tlj-lift:hover,.tlj-press,.tlj-press:hover,.tlj-vcard,.tlj-vcard:hover,.tlj-vcard .tlj-vthumb,.tlj-play,.tlj-callbar{transition:none;transform:none}
  .tlj-vcard:hover .tlj-vthumb,.tlj-vcard:hover .tlj-play,.tlj-press:hover .tlj-nub{transform:none}
  .tlj-modal-in,.tlj-modal-in > *,.tlj-faq-in{animation:none}
  .tlj-callbar.is-shown{transform:none}
}