/* Custom CSS — anything beyond Tailwind utilities. Keep it small. */

/* Sticky nav backdrop blur on scroll. The scroll handler in main.js
   toggles `.is-scrolled` on #nav; here we render the visual change. */
#nav {
  background-color: rgba(255, 255, 255, 0);
  backdrop-filter: none;
}
#nav.is-scrolled {
  background-color: rgba(255, 255, 255, 0.85);
  backdrop-filter: saturate(180%) blur(10px);
  border-bottom: 1px solid rgb(226 232 240); /* slate-200 */
}
@media (prefers-color-scheme: dark) {
  #nav.is-scrolled {
    background-color: rgba(2, 6, 23, 0.85); /* slate-950 */
    border-bottom-color: rgb(30 41 59 / 0.8); /* slate-800/80 */
  }
}

/* Subtle dotted background for the hero. Pure CSS, no image. The
   radial-gradient draws one dot per cell; background-size sets the
   spacing. Faded to almost-nothing in light mode. */
.dotted-bg {
  background-image: radial-gradient(circle, rgb(148 163 184 / 0.18) 1px, transparent 1px);
  background-size: 24px 24px;
  mask-image: radial-gradient(ellipse at center top, black 30%, transparent 75%);
  -webkit-mask-image: radial-gradient(ellipse at center top, black 30%, transparent 75%);
}

/* Smooth-scroll for in-page anchors so clicking the nav doesn't snap. */
html {
  scroll-behavior: smooth;
  scroll-padding-top: 5rem; /* clears the sticky nav */
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

/* Tab bar in the developer-showcase code panel — active tab gets the
   blue underline; the inactive ones live as plain text. The JS just
   toggles the data-state, this stylesheet does the rest. */
[data-tabs] .tab[data-active="true"] {
  color: rgb(226 232 240); /* slate-200 */
  border-bottom-color: rgb(96 165 250); /* blue-400 */
}

/* FAQ summary marker — hide the default disclosure triangle so our
   custom chevron is the only marker shown. */
details > summary {
  list-style: none;
}
details > summary::-webkit-details-marker {
  display: none;
}

/* Mobile menu enters from above when open — small flourish, respects
   reduced-motion. */
#mobile-menu:not(.hidden) {
  animation: mb-fade-in 120ms ease-out;
}
@keyframes mb-fade-in {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  #mobile-menu:not(.hidden) { animation: none; }
}

/* Tighten <pre> code blocks inside the prose-styled legal pages so
   monospace tokens line up nicely with surrounding type. */
.prose pre {
  background-color: rgb(15 23 42); /* slate-900 */
  color: rgb(226 232 240);
  font-size: 0.825rem;
  line-height: 1.55;
}
@media (prefers-color-scheme: dark) {
  .prose pre {
    background-color: rgb(2 6 23); /* slate-950 */
  }
}

/* Hero terminal — lines start invisible and slide up. The IO observer
   in main.js adds .is-visible the first time the terminal scrolls into
   view; the staggered transition-delay below paints them one at a
   time over ~700ms. Plays once, settles. Reduced-motion users get
   them all visible immediately. */
.hero-term .hero-term__line {
  opacity: 0;
  transform: translateY(4px);
  transition: opacity 320ms ease-out, transform 320ms ease-out;
}
.hero-term.is-visible .hero-term__line {
  opacity: 1;
  transform: none;
}
/* Stagger 11 lines across ~600ms (each lags the previous by ~55ms). */
.hero-term.is-visible .hero-term__line:nth-child(1)  { transition-delay:   0ms; }
.hero-term.is-visible .hero-term__line:nth-child(2)  { transition-delay:  55ms; }
.hero-term.is-visible .hero-term__line:nth-child(3)  { transition-delay: 110ms; }
.hero-term.is-visible .hero-term__line:nth-child(4)  { transition-delay: 165ms; }
.hero-term.is-visible .hero-term__line:nth-child(5)  { transition-delay: 220ms; }
.hero-term.is-visible .hero-term__line:nth-child(6)  { transition-delay: 275ms; }
.hero-term.is-visible .hero-term__line:nth-child(7)  { transition-delay: 330ms; }
.hero-term.is-visible .hero-term__line:nth-child(8)  { transition-delay: 385ms; }
.hero-term.is-visible .hero-term__line:nth-child(9)  { transition-delay: 440ms; }
.hero-term.is-visible .hero-term__line:nth-child(10) { transition-delay: 540ms; } /* small pause before the response */
.hero-term.is-visible .hero-term__line:nth-child(11) { transition-delay: 640ms; }
@media (prefers-reduced-motion: reduce) {
  .hero-term .hero-term__line { opacity: 1; transform: none; transition: none; }
}