/* Tollkit motion layer, shared by the home, Connect and Weigh Station pages.
   Every hidden starting state is gated on html.m, which motion.js sets only
   when the browser supports it and the visitor hasn't asked for reduced
   motion. With no JS, or with reduced motion, the pages are static and fully
   visible. */

:root { --ease-out: cubic-bezier(.16, 1, .3, 1); --glow: 74, 142, 255; }

/* ── Aurora behind the hero ─────────────────────────────────────── */
.has-aurora { position: relative; isolation: isolate; }
.has-aurora > .container { position: relative; z-index: 1; }
.aurora {
  position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none;
  -webkit-mask-image: linear-gradient(to bottom, #000 55%, transparent);
          mask-image: linear-gradient(to bottom, #000 55%, transparent);
}
.hero.has-aurora .aurora { top: -72px; } /* run up under the frosted nav */
/* Inner pages: the nav isn't frosted, so fade the glow in from the top edge too. */
header.head.has-aurora .aurora {
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 30%, #000 50%, transparent);
          mask-image: linear-gradient(to bottom, transparent, #000 30%, #000 50%, transparent);
}
.aurora .drift { position: absolute; inset: 0; transition: transform 1.2s var(--ease-out); will-change: transform; }
.aurora i {
  position: absolute; border-radius: 50%; filter: blur(64px); will-change: transform;
  width: 44vmax; height: 44vmax; max-width: 760px; max-height: 760px;
}
.aurora i:nth-child(1) { background: radial-gradient(circle, rgba(47,107,255,.55), transparent 62%); top: -26%; left: -12%; animation: tk-drift-a 24s ease-in-out infinite alternate; }
.aurora i:nth-child(2) { background: radial-gradient(circle, rgba(122,77,255,.38), transparent 62%); top: -34%; right: -14%; animation: tk-drift-b 28s ease-in-out infinite alternate; }
.aurora i:nth-child(3) { background: radial-gradient(circle, rgba(25,194,160,.20), transparent 62%); top: 8%; left: 34%; width: 30vmax; height: 30vmax; animation: tk-drift-c 32s ease-in-out infinite alternate; }
.aurora::after {
  content: ""; position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px);
  background-size: 48px 48px;
  -webkit-mask-image: radial-gradient(ellipse 70% 70% at 28% 30%, #000 20%, transparent 72%);
          mask-image: radial-gradient(ellipse 70% 70% at 28% 30%, #000 20%, transparent 72%);
}
@keyframes tk-drift-a { to { transform: translate(14%, 10%) scale(1.12); } }
@keyframes tk-drift-b { to { transform: translate(-12%, 14%) scale(.92); } }
@keyframes tk-drift-c { to { transform: translate(-18%, -6%) scale(1.2); } }

/* ── Hero entrance ──────────────────────────────────────────────── */
.m .hero .container > *,
.m header.head .container > * {
  animation: tk-rise .95s var(--ease-out) both;
  animation-delay: calc(var(--i, 0) * 90ms + 60ms);
}
@keyframes tk-rise {
  from { opacity: 0; transform: translateY(16px); filter: blur(6px); }
  to   { opacity: 1; transform: none; filter: none; }
}

/* The ".dot" half of the wordmark gets a slow sheen */
.m .hero h1 .dot {
  background: linear-gradient(100deg, #4a8eff 20%, #a98bff 40%, #6fe0c8 50%, #4a8eff 70%);
  background-size: 250% 100%;
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
  animation: tk-sheen 7s linear infinite;
}
@keyframes tk-sheen { from { background-position: 100% 0; } to { background-position: -150% 0; } }

/* ── Scroll reveal ──────────────────────────────────────────────── */
.m [data-r] {
  opacity: 0; transform: translateY(22px) scale(.985); filter: blur(4px);
  transition:
    opacity .85s var(--ease-out), transform .85s var(--ease-out), filter .85s var(--ease-out),
    border-color .2s ease, background .2s ease, box-shadow .35s ease;
  transition-delay: calc(var(--i, 0) * 75ms);
}
.m [data-r].in { opacity: 1; transform: none; filter: none; }

/* ── Cards: lift + cursor spotlight ─────────────────────────────── */
.m .lift { transition: transform .4s var(--ease-out), border-color .2s ease, background .2s ease, box-shadow .4s ease; }
.m .lift:hover { transform: translateY(-3px); box-shadow: 0 18px 50px -20px rgba(var(--glow), .35); }

.spot { position: relative; isolation: isolate; }
.spot::before, .spot::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  opacity: 0; transition: opacity .35s ease;
}
.spot::before {
  z-index: -1;
  background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 50%), rgba(var(--glow), .10), transparent 45%);
}
.spot::after {
  padding: 1px;
  background: radial-gradient(260px circle at var(--mx, 50%) var(--my, 50%), rgba(var(--glow), .75), transparent 60%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
}
.m .spot:hover::before, .m .spot:hover::after { opacity: 1; }

/* Product icons tilt toward you on hover */
.m .p-icon { transition: transform .45s var(--ease-out), box-shadow .45s ease; }
.m .lift:hover .p-icon { transform: translateY(-1px) rotate(-6deg) scale(1.07); box-shadow: 0 6px 22px -6px rgba(var(--glow), .6); }

/* Tool rows on Connect: a quiet highlight that slides in */
.m .tool { transition: background .25s ease, padding-left .35s var(--ease-out); border-radius: 8px; }
.m .tool:hover { background: rgba(var(--glow), .05); }

/* ── Buttons ────────────────────────────────────────────────────── */
.m .btn { transition: transform .18s var(--ease-out), background .2s ease, border-color .2s ease, color .2s ease, box-shadow .3s ease; }
.m .btn:active { transform: scale(.965); }
.m .btn-primary { position: relative; overflow: hidden; isolation: isolate; }
.m .btn-primary::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(110deg, transparent 30%, rgba(var(--glow), .28) 50%, transparent 70%);
  transform: translateX(-120%);
}
.m .btn-primary:hover::after { transform: translateX(120%); transition: transform .9s var(--ease-out); }
.m .btn-primary:hover { box-shadow: 0 8px 30px -10px rgba(var(--glow), .55); }

/* ── Live badges: a breathing dot ───────────────────────────────── */
.m .badge.live::before, .m .badge-free::before {
  content: ""; display: inline-block; width: 6px; height: 6px; margin: 0 .4rem 0 0;
  border-radius: 50%; background: currentColor; vertical-align: 1px;
  animation: tk-ping 2.2s ease-out infinite;
}
@keyframes tk-ping {
  0%   { box-shadow: 0 0 0 0 rgba(108,230,135,.6); }
  70%  { box-shadow: 0 0 0 6px rgba(108,230,135,0); }
  100% { box-shadow: 0 0 0 0 rgba(108,230,135,0); }
}

/* ── Nav: underline that draws in, shadow once you scroll ───────── */
.m nav.top { transition: box-shadow .4s ease, border-color .4s ease, background .4s ease; }
.m nav.top.scrolled { box-shadow: 0 10px 30px -14px rgba(0,0,0,.8); border-bottom-color: #262626; }
.m nav.top .links a {
  background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat;
  transition: background-size .35s var(--ease-out), color .2s ease; padding-bottom: 2px;
}
.m nav.top .links a:hover { background-size: 100% 1px; text-decoration: none; }

/* Thin scroll-progress line along the top edge */
.tk-progress {
  position: fixed; top: 0; left: 0; right: 0; height: 2px; z-index: 50; pointer-events: none;
  background: linear-gradient(90deg, #2f6bff, #a98bff, #6fe0c8);
  transform-origin: 0 50%; transform: scaleX(var(--p, 0));
}

/* Step numbers pop when their card arrives */
.m .step[data-r] .num { transform: scale(.4); opacity: 0; transition: transform .6s var(--ease-out) .25s, opacity .4s ease .25s; }
.m .step[data-r].in .num, .m .step:not([data-r]) .num { transform: none; opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  .aurora i { animation: none; }
  .tk-progress { display: none; }
}