/* ============================================================
   VIONARK — Reusable components
   Buttons, cards, tags, stat blocks, hairline rules, marquee,
   custom cursor, preloader.
   ============================================================ */

/* ---- Buttons ---- */
.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.95em 1.6em;
  font-family: var(--font-mono);
  font-size: 0.74rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--white);
  border-radius: 100px;
  border: 1px solid var(--panel-edge);
  background: rgba(74,143,255,0.06);
  overflow: hidden;
  transition: color 0.4s, border-color 0.4s, background 0.4s, transform 0.4s var(--ease-out);
  will-change: transform;
}
.btn::before {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(120deg, var(--blue), var(--blue-soft));
  transform: translateY(101%);
  transition: transform 0.45s var(--ease-out);
  z-index: -1;
}
.btn:hover { border-color: var(--blue); color: #04060d; }
.btn:hover::before { transform: translateY(0); }
.btn--solid {
  background: var(--blue);
  color: #04060d;
  border-color: var(--blue);
}
.btn--solid::before { background: linear-gradient(120deg, var(--blue-bright), var(--blue)); }
.btn--solid:hover { color: #04060d; }
.btn__dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 8px currentColor;
}
.btn--ghost { background: transparent; }

.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--blue-bright);
  transition: gap 0.3s var(--ease-out), color 0.3s;
}
.link-arrow:hover { gap: 0.85rem; color: var(--white); }

/* ---- Hairline rule that draws in on scroll ---- */
.rule {
  height: 1px;
  width: 100%;
  background: var(--hairline);
  transform: scaleX(0);
  transform-origin: left;
}
.rule--drawn { /* JS sets scaleX via GSAP; class is a hook */ }

/* ---- Section heading block ---- */
.head { max-width: 60ch; }
.head .eyebrow { margin-bottom: 1.4rem; }
.head h2 { font-size: var(--t-display); }
.head .lead {
  margin-top: 1.5rem;
  font-size: var(--t-lead);
  color: var(--muted);
  font-weight: 300;
  max-width: 48ch;
}

/* ---- Cards ---- */
.card {
  position: relative;
  padding: clamp(1.4rem, 2.2vw, 2.1rem);
  background: var(--panel-soft);
  border: 1px solid var(--panel-edge);
  border-radius: var(--radius);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  overflow: hidden;
  transition: border-color 0.45s var(--ease-out), transform 0.45s var(--ease-out), background 0.45s;
}
.card::after {
  /* the brand "tick" — a short accent rule at the top-left corner */
  content: "";
  position: absolute;
  top: 0; left: clamp(1.4rem, 2.2vw, 2.1rem);
  width: 34px; height: 2px;
  background: var(--blue);
  box-shadow: 0 0 12px var(--blue-glow);
  transform: scaleX(0.4);
  transform-origin: left;
  transition: transform 0.45s var(--ease-out);
}
.card:hover {
  border-color: var(--blue);
  transform: translateY(-4px);
  background: rgba(20,34,64,0.55);
}
.card:hover::after { transform: scaleX(1); }
.card--amber::after { background: var(--amber); box-shadow: 0 0 12px var(--amber-glow); }
.card--flagship {
  border-color: rgba(232,178,78,0.32);
  background: linear-gradient(180deg, rgba(40,30,12,0.5), rgba(14,21,38,0.45));
}
.card--flagship:hover { border-color: var(--amber); }

.card__idx {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.18em;
  color: var(--blue);
  text-transform: uppercase;
}
.card--amber .card__idx, .card--flagship .card__idx { color: var(--amber); }
.card__title {
  margin-top: 0.9rem;
  font-size: var(--t-h3);
  font-weight: 400;
  color: var(--white);
  letter-spacing: -0.01em;
}
.card__body { margin-top: 0.8rem; color: var(--muted); font-size: var(--t-small); }

/* ---- Tag chips ---- */
.tags { display: flex; flex-wrap: wrap; gap: 0.45rem; margin-top: 1.4rem; }
.tag {
  font-family: var(--font-mono);
  font-size: 0.6rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  padding: 0.4em 0.7em;
  border: 1px solid var(--hairline);
  border-radius: 4px;
}
.card--flagship .tag, .card--amber .tag { border-color: rgba(232,178,78,0.25); }

/* ---- Stat block ---- */
.stat__num {
  font-family: var(--font-display);
  font-weight: 200;
  font-size: clamp(2.6rem, 6vw, 5rem);
  line-height: 0.95;
  letter-spacing: -0.03em;
  color: var(--blue-bright);
}
.stat__num .unit { font-size: 0.42em; color: var(--muted); font-weight: 300; margin-left: 0.1em; }
.stat__num.amber { color: var(--amber); }
.stat__num.white { color: var(--white); }
.stat__label {
  margin-top: 0.7rem;
  font-family: var(--font-mono);
  font-size: 0.64rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--faint);
}
.stat__sub { margin-top: 0.5rem; font-size: var(--t-small); color: var(--muted); }

/* ---- Marquee ticker ---- */
.marquee {
  overflow: hidden;
  border-block: 1px solid var(--hairline);
  padding-block: 1rem;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.marquee__row { display: flex; width: max-content; will-change: transform; }
.marquee__item {
  display: inline-flex;
  align-items: center;
  gap: 1.2rem;
  padding-inline: 1.6rem;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  white-space: nowrap;
}
.marquee__item::after { content: "◇"; color: var(--blue); font-size: 0.7em; }

/* ---- Custom sonar cursor ---- */
.cursor {
  position: fixed; top: 0; left: 0;
  z-index: var(--z-cursor);
  pointer-events: none;
  mix-blend-mode: screen;
  will-change: transform;
}
.cursor__ring {
  width: 34px; height: 34px;
  margin: -17px 0 0 -17px;
  border: 1px solid var(--blue);
  border-radius: 50%;
  transition: width 0.3s var(--ease-out), height 0.3s var(--ease-out),
              margin 0.3s var(--ease-out), background 0.3s, border-color 0.3s;
}
.cursor__dot {
  position: fixed; top: 0; left: 0;
  width: 5px; height: 5px; margin: -2.5px 0 0 -2.5px;
  background: var(--blue-bright); border-radius: 50%;
  box-shadow: 0 0 8px var(--blue-glow);
  z-index: var(--z-cursor); pointer-events: none;
  will-change: transform;
}
.cursor.is-hover .cursor__ring {
  width: 58px; height: 58px; margin: -29px 0 0 -29px;
  background: rgba(74,143,255,0.10);
  border-color: var(--blue-bright);
}
body.has-cursor, body.has-cursor a, body.has-cursor button { cursor: none; }

/* Hide custom cursor on touch / coarse pointers */
@media (hover: none), (pointer: coarse) {
  .cursor, .cursor__dot { display: none !important; }
  body.has-cursor, body.has-cursor a, body.has-cursor button { cursor: auto; }
}

/* ---- Preloader ---- */
.loader {
  position: fixed; inset: 0; z-index: var(--z-loader);
  display: grid; place-items: center;
  background: var(--abyss);
  transition: opacity 0.8s ease, visibility 0.8s;
}
.loader.is-done { opacity: 0; visibility: hidden; }
.loader__inner { text-align: center; }
.loader__mark { width: 56px; margin: 0 auto 1.6rem; opacity: 0.9; filter: drop-shadow(0 0 18px var(--blue-glow)); }
.loader__depth {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.2em;
  color: var(--blue-bright);
}
.loader__bar { width: 180px; height: 1px; margin: 1.1rem auto 0; background: var(--hairline); overflow: hidden; }
.loader__bar i { display:block; height: 100%; width: 0%; background: var(--blue); box-shadow: 0 0 8px var(--blue-glow); }
.loader__label { margin-top: 1rem; font-family: var(--font-mono); font-size: 0.62rem; letter-spacing: 0.24em; text-transform: uppercase; color: var(--faint); }