/* =============================================================
   neurabot · components.css
   Wiederverwendbare UI-Bausteine: Custom Cursor, Navigation,
   Buttons (magnetisch), Glas-Karten, Marquee, Badges, Reveal.
   ============================================================= */

/* ---------- Custom Cursor (nur auf Geräten mit feinem Zeiger) ---------- */
@media (hover: hover) and (pointer: fine) {
  body { cursor: none; }
  a, button, [data-cursor] { cursor: none; }

  .cursor-dot, .cursor-ring {
    position: fixed; top: 0; left: 0; z-index: var(--z-cursor);
    pointer-events: none; border-radius: 50%; will-change: transform;
    transform: translate3d(-50%, -50%, 0);
  }
  .cursor-dot {
    width: 7px; height: 7px; background: var(--c-white);
    mix-blend-mode: difference;
  }
  .cursor-ring {
    width: 38px; height: 38px; border: 1.5px solid rgba(140, 165, 255, 0.6);
    transition: width var(--t-fast) var(--ease-out),
                height var(--t-fast) var(--ease-out),
                background var(--t-fast), border-color var(--t-fast);
    backdrop-filter: invert(8%);
  }
  /* Wachstum über Links/Buttons */
  body.cursor-hover .cursor-ring {
    width: 64px; height: 64px;
    background: rgba(10, 77, 244, 0.12); border-color: var(--c-blue-bright);
  }
}

/* ---------- Navigation ---------- */
.nav {
  position: fixed; inset: 0 0 auto 0; z-index: var(--z-nav);
  transition: background var(--t-med), border-color var(--t-med), backdrop-filter var(--t-med);
  border-bottom: 1px solid transparent;
}
.nav.is-scrolled {
  background: rgba(5, 9, 23, 0.72);
  backdrop-filter: blur(18px) saturate(140%);
  border-bottom-color: var(--line);
}
.nav__inner {
  display: flex; align-items: center; justify-content: space-between;
  height: 76px; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter);
}
.brand { display: flex; align-items: center; gap: 11px; font-family: var(--font-disp); font-weight: 700; font-size: 1.35rem; letter-spacing: -0.04em; }
.brand__mark { width: 38px; height: 38px; }
.brand b { color: var(--c-white); }
.brand span { color: var(--c-blue-bright); }

.nav__links { display: flex; gap: 32px; align-items: center; }
.nav__links a { position: relative; font-size: 0.92rem; font-weight: 500; color: var(--c-mut); transition: color var(--t-fast); }
.nav__links a:hover { color: var(--c-white); }
.nav__links a::after { content: ""; position: absolute; left: 0; bottom: -6px; height: 2px; width: 0; background: var(--c-blue-bright); transition: width var(--t-fast) var(--ease-out); }
.nav__links a:hover::after { width: 100%; }
.nav__cta { display: flex; gap: 12px; align-items: center; }

.nav__burger { display: none; background: none; border: 0; color: #fff; padding: 8px; }
.nav__burger span { display: block; width: 24px; height: 2px; background: #fff; margin: 5px 0; transition: transform var(--t-fast), opacity var(--t-fast); }
body.menu-open .nav__burger span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
body.menu-open .nav__burger span:nth-child(2) { opacity: 0; }
body.menu-open .nav__burger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Mobile-Menü-Overlay */
.nav__mobile {
  position: fixed; inset: 76px 0 0 0; z-index: 99;
  background: rgba(5, 9, 23, 0.96); backdrop-filter: blur(20px);
  display: flex; flex-direction: column; gap: 8px; padding: 40px var(--gutter);
  transform: translateY(-12px); opacity: 0; visibility: hidden;
  transition: opacity var(--t-med), transform var(--t-med), visibility var(--t-med);
}
body.menu-open .nav__mobile { opacity: 1; visibility: visible; transform: none; }
.nav__mobile a { font-family: var(--font-disp); font-size: 1.8rem; padding: 14px 0; border-bottom: 1px solid var(--line); }

@media (max-width: 920px) {
  .nav__links { display: none; }
  .nav__cta .btn--ghost { display: none; }
  .nav__burger { display: block; }
}

/* ---------- Buttons (magnetisch via JS) ---------- */
.btn {
  position: relative; display: inline-flex; align-items: center; gap: 9px;
  font-family: var(--font-body); font-weight: 600; font-size: 0.95rem;
  padding: 14px 26px; border-radius: 14px; border: 1px solid transparent;
  will-change: transform; transition: box-shadow var(--t-med), background var(--t-med), border-color var(--t-med);
  overflow: hidden;
}
.btn span { position: relative; z-index: 1; }
.btn--primary { background: linear-gradient(180deg, var(--c-blue-bright), var(--c-blue)); color: #fff; box-shadow: var(--glow-blue), inset 0 1px 0 rgba(255,255,255,0.3); }
.btn--primary:hover { box-shadow: 0 16px 50px rgba(10,77,244,0.6), inset 0 1px 0 rgba(255,255,255,0.4); }
.btn--ghost { background: rgba(255,255,255,0.04); border-color: var(--line-strong); color: var(--c-white); }
.btn--ghost:hover { border-color: var(--c-blue-bright); background: rgba(10,77,244,0.12); }
/* Shimmer-Glanz, der bei Hover über den Primärbutton läuft */
.btn--primary::before {
  content: ""; position: absolute; inset: 0; transform: translateX(-120%);
  background: linear-gradient(100deg, transparent, rgba(255,255,255,0.35), transparent);
  transition: transform 0.7s var(--ease-out);
}
.btn--primary:hover::before { transform: translateX(120%); }

/* ---------- Glas-Karte (Basis) ---------- */
.glass {
  background: linear-gradient(165deg, rgba(14,26,61,0.6), rgba(8,13,34,0.5));
  border: 1px solid var(--line);
  border-radius: var(--radius);
  backdrop-filter: blur(6px);
  box-shadow: var(--shadow-soft);
}

/* ---------- Marquee (Endlos-Laufband) ---------- */
.marquee {
  border-block: 1px solid var(--line); padding-block: 22px; overflow: hidden; margin-top: 40px;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}
.marquee__track {
  display: flex; gap: 0; width: max-content; will-change: transform;
  animation: marquee 28s linear infinite;
}
.marquee__group { display: flex; align-items: center; gap: 54px; padding-right: 54px; }
.marquee__group b { font-family: var(--font-disp); font-weight: 600; font-size: 1.15rem; color: var(--c-mut-2); white-space: nowrap; }
.marquee__group i { color: var(--c-blue); font-size: 0.6rem; font-style: normal; }
@keyframes marquee { to { transform: translateX(-50%); } }

/* ---------- Badge ---------- */
.badge {
  display: inline-flex; align-items: center; gap: 9px;
  font-family: var(--font-mono); font-size: 0.8rem; font-weight: 500;
  background: rgba(34,227,164,0.1); border: 1px solid rgba(34,227,164,0.3);
  color: var(--c-green); padding: 7px 14px; border-radius: 100px;
}
.badge .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--c-green); animation: ping 2s infinite; }
@keyframes ping {
  0%   { box-shadow: 0 0 0 0 rgba(34,227,164,0.55); }
  70%  { box-shadow: 0 0 0 10px rgba(34,227,164,0); }
  100% { box-shadow: 0 0 0 0 rgba(34,227,164,0); }
}

/* ---------- Reveal-Basis (von scrollFx.js gesteuert) ---------- */
.reveal { opacity: 0; transform: translateY(38px); }

/* Wort-Masken-Reveal für Headlines (Splitter in scrollFx.js) */
.word { display: inline-block; overflow: hidden; vertical-align: top; }
.word > i { display: inline-block; font-style: normal; transform: translateY(110%); will-change: transform; }