/* ============================================================================
   A-Trak — "Awwwards" kinetic layer
   Loader · custom cursor · scroll reveals · marquee · parallax · live data
   ============================================================================ */

/* ----------------------------------------------------------------- Cursor */
@media (hover: hover) and (pointer: fine) {
  * { cursor: none !important; }
  .cursor-dot, .cursor-ring {
    position: fixed; top: 0; left: 0; z-index: 2147483000;
    pointer-events: none; border-radius: 50%;
    mix-blend-mode: difference;
  }
  .cursor-dot {
    width: 7px; height: 7px; background: #fff;
    transform: translate(-50%, -50%);
    transition: width .2s, height .2s, background .2s;
  }
  .cursor-ring {
    width: 38px; height: 38px;
    border: 1px solid rgba(255,255,255,0.6);
    transform: translate(-50%, -50%);
    transition: width .25s cubic-bezier(.2,.8,.2,1), height .25s cubic-bezier(.2,.8,.2,1),
                border-color .25s, background .25s, opacity .2s;
  }
  body.cursor-hover .cursor-ring {
    width: 64px; height: 64px;
    border-color: var(--signal);
    background: rgba(0,229,168,0.08);
  }
  body.cursor-hover .cursor-dot { width: 4px; height: 4px; }
  body.cursor-down .cursor-ring { width: 28px; height: 28px; }
}

/* ----------------------------------------------------------------- Loader */
.loader {
  position: fixed; inset: 0; z-index: 2147483600;
  background: var(--ink-000);
  display: grid; place-items: center;
  transition: opacity .8s ease, visibility .8s;
}
.loader.done { opacity: 0; visibility: hidden; }
.loader-inner { text-align: center; width: min(420px, 78vw); }
.loader-logo {
  height: 40px; width: auto; margin: 0 auto 32px;
  filter: invert(1) brightness(1.1);
  opacity: 0; transform: translateY(8px);
  animation: loaderIn .7s .1s cubic-bezier(.2,.8,.2,1) forwards;
}
.loader-track {
  height: 2px; width: 100%;
  background: var(--ink-300);
  border-radius: 2px; overflow: hidden;
  position: relative;
}
.loader-bar {
  position: absolute; inset: 0; transform-origin: left;
  transform: scaleX(0);
  background: linear-gradient(90deg, var(--teal), var(--signal));
  box-shadow: 0 0 12px var(--signal);
}
.loader-meta {
  display: flex; justify-content: space-between;
  margin-top: 14px;
  font: 500 11px/1 var(--font-mono);
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--ink-600);
}
.loader-meta .pct { color: var(--signal); }
html[data-theme="light"] .loader-logo,
html[data-theme="grey"] .loader-logo { filter: none; }
@keyframes loaderIn { to { opacity: 1; transform: none; } }

/* lock scroll while loading */
html.loading, html.loading body { overflow: hidden; height: 100%; }

/* --------------------------------------------------------- Scroll progress */
.scroll-progress {
  position: fixed; top: 0; left: 0; height: 2px; z-index: 60;
  width: 100%; transform-origin: left; transform: scaleX(0);
  background: linear-gradient(90deg, var(--teal), var(--signal));
  box-shadow: 0 0 10px var(--signal);
}

/* ------------------------------------------------------------ Reveal anims */
/* Hidden state gated on html.js-anim (JS-added) so content is NEVER stuck
   hidden if JS fails or reduced-motion is on.
   IMPORTANT: opacity flips instantly (no transition on it) so the revealed
   state is guaranteed visible in every render context. Only `transform` is
   transitioned for the smooth slide — if a context freezes its timeline the
   content is still fully visible (merely un-slid). */
@media (prefers-reduced-motion: no-preference) {
  html.js-anim [data-reveal] {
    opacity: 0;
    transform: translateY(34px);
    transition: transform .9s cubic-bezier(.2,.8,.2,1);
  }
  html.js-anim [data-reveal="fade"]  { transform: none; }
  html.js-anim [data-reveal="left"]  { transform: translateX(-40px); }
  html.js-anim [data-reveal="right"] { transform: translateX(40px); }
  html.js-anim [data-reveal="scale"] { transform: scale(.96); }
  html.js-anim [data-reveal].in { opacity: 1; transform: none; }

  /* stagger children */
  html.js-anim [data-stagger] > * {
    opacity: 0; transform: translateY(28px);
    transition: transform .8s cubic-bezier(.2,.8,.2,1);
  }
  html.js-anim [data-stagger].in > * { opacity: 1; transform: none; }
}

/* ----------------------------------------------------------------- Marquee */
.marquee {
  overflow: hidden; position: relative;
  -webkit-mask-image: linear-gradient(90deg, transparent, black 8%, black 92%, transparent);
          mask-image: linear-gradient(90deg, transparent, black 8%, black 92%, transparent);
}
.marquee-track {
  display: flex; gap: 64px; width: max-content;
  animation: marquee 32s linear infinite;
}
.marquee:hover .marquee-track { animation-play-state: paused; }
@keyframes marquee { to { transform: translateX(-50%); } }
.marquee-item {
  font: 500 13px/1 var(--font-mono);
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--ink-600);
  display: inline-flex; align-items: center; gap: 12px;
  white-space: nowrap;
}
.marquee-item::before {
  content: ""; width: 5px; height: 5px; border-radius: 50%;
  background: var(--signal); opacity: .6;
}

/* ------------------------------------------------------------ Magnetic btn */
.btn, .ind-card, .feature, .prod { will-change: transform; }

/* ---------------------------------------------------------- Hero parallax */
[data-parallax] { will-change: transform; }

/* gradient sheen sweep on primary buttons */
.btn-primary { position: relative; overflow: hidden; }
.btn-primary::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(110deg, transparent 30%, rgba(255,255,255,0.45) 50%, transparent 70%);
  transform: translateX(-120%);
  transition: transform .6s;
}
.btn-primary:hover::after { transform: translateX(120%); }

/* live ticking number flash */
.tick-flash { animation: tickFlash .5s ease; }
@keyframes tickFlash {
  0% { color: var(--signal); }
  100% { color: inherit; }
}

/* subtle float on dashboard preview */
@media (prefers-reduced-motion: no-preference) {
  .dash { animation: floaty 7s ease-in-out infinite; }
  @keyframes floaty {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
  }
}

/* nav hide-on-scroll-down */
.nav { transition: transform .4s cubic-bezier(.2,.8,.2,1), background .3s, border-color .3s; }
.nav.nav-hidden { transform: translateY(-100%); }

/* link underline draw for nav */
.nav-links a { position: relative; }
.nav-links a::after {
  content: ""; position: absolute; left: 14px; right: 14px; bottom: 2px;
  height: 1px; background: var(--signal); transform: scaleX(0); transform-origin: left;
  transition: transform .3s cubic-bezier(.2,.8,.2,1);
}
.nav-links a:hover::after, .nav-links a.active::after { transform: scaleX(1); }

/* big section number watermark */
.section { position: relative; }

/* count-up wrapper keeps layout stable */
[data-count] { font-variant-numeric: tabular-nums; }