/* NodeLifeCycle Consulting — small helpers beyond Tailwind utilities. */

/* Scrollbar styled to the zinc palette so it blends with the design. */
html {
  scrollbar-color: #a1a1aa transparent; /* Firefox */
}

html.dark {
  scrollbar-color: #52525b transparent;
}

::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background-color: #a1a1aa; /* zinc-400 */
  border-radius: 9999px;
  border: 2px solid transparent;
  background-clip: content-box;
}

html.dark ::-webkit-scrollbar-thumb {
  background-color: #52525b; /* zinc-600 */
}

::-webkit-scrollbar-thumb:hover {
  background-color: #71717a; /* zinc-500 */
}

/* Keep canvas backgrounds from ever capturing clicks. */
canvas.mesh-canvas {
  pointer-events: none;
}

/* Arabic is a connected script: letter-spacing breaks glyph joins.
   The eyebrow rule is scoped to translated labels so the Latin-only client
   wordmarks keep their wide tracking even in RTL mode. */
[dir="rtl"] .tracking-tighter,
[dir="rtl"] .tracking-tight,
[dir="rtl"] [data-i18n^="eyebrow."] {
  letter-spacing: 0;
}

/* Scroll-reveal: hidden start state is gated behind .js-fx (set by the inline
   head script) so content stays visible if JavaScript never runs. */
html.js-fx [data-reveal],
html.js-fx [data-reveal-stagger] > * {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

html.js-fx [data-reveal].is-revealed,
html.js-fx [data-reveal-stagger] > .is-revealed {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  html.js-fx [data-reveal],
  html.js-fx [data-reveal-stagger] > * {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* Blinking caret for the hero terminal. */
.terminal-caret {
  display: inline-block;
  margin-left: 2px;
  color: #22d3ee; /* cyan-400 */
  animation: caret-blink 1s steps(1) infinite;
}

@keyframes caret-blink {
  50% { opacity: 0; }
}