/* Parallax Stats teaser page — vanilla CSS, no build step, no external
   network requests. The wordmark uses an inline SVG logo whose Montserrat
   glyphs are embedded in the SVG itself, so no web font is fetched. */

:root {
  --bg-0: #05040a;
  --bg-1: #0b0716;
  --bg-2: #140b26;
  --panel: rgba(255, 255, 255, 0.04);
  --panel-border: rgba(255, 255, 255, 0.09);
  --text-0: #f4f2fb;
  --text-1: #cbc4de;
  --text-2: #8f89a8;
  --accent-violet: #a78bfa;
  --accent-violet-strong: #8b5cf6;
  --accent-blue: #38bdf8;
  --accent-amber: #f5a656;
  --focus-ring: #38bdf8;

  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue",
    Arial, "Noto Sans", sans-serif;
  --font-mono: ui-monospace, "SF Mono", "Cascadia Code", "Roboto Mono", Menlo, Consolas,
    monospace;

  --space-1: 0.5rem;
  --space-2: 1rem;
  --space-3: 1.5rem;
  --space-4: 2.5rem;
  --space-5: 4rem;

  --max-width: 1180px;
}

* {
  box-sizing: border-box;
}

html {
  background: var(--bg-0);
  color-scheme: dark;
}

body {
  margin: 0;
  min-width: 0;
  overflow-x: hidden;
  font-family: var(--font-sans);
  color: var(--text-0);
  background: var(--bg-0);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

a {
  color: inherit;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  background: var(--bg-2);
  color: var(--text-0);
  padding: var(--space-1) var(--space-2);
  border-radius: 0 0 8px 0;
}

.skip-link:focus {
  left: 0;
}

:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 3px;
}

/* ------------------------------------------------------------------ */
/* Hero                                                                 */
/* ------------------------------------------------------------------ */

.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: var(--space-4) var(--space-2);
  overflow: hidden;
  background:
    radial-gradient(60% 55% at 50% 12%, rgba(139, 92, 246, 0.35), transparent 60%),
    radial-gradient(55% 45% at 85% 85%, rgba(56, 189, 248, 0.16), transparent 60%),
    linear-gradient(160deg, var(--bg-1) 0%, var(--bg-0) 55%, #090512 100%);
}

.hero::before {
  /* faint rink-line texture, pure CSS, zero network cost */
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.5;
  background-image:
    repeating-linear-gradient(
      115deg,
      rgba(255, 255, 255, 0.025) 0px,
      rgba(255, 255, 255, 0.025) 1px,
      transparent 1px,
      transparent 68px
    );
  mask-image: radial-gradient(70% 70% at 50% 35%, black, transparent 75%);
}

.hero__inner {
  position: relative;
  max-width: 46rem;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.hero__mark {
  margin-bottom: var(--space-2);
  filter: drop-shadow(0 0 18px rgba(167, 139, 250, 0.45));
}

/* Inline SVG wordmark (mark + "PARALLAX STATS"). Scales down on small
   viewports; the SVG's own viewBox keeps its aspect ratio. */
.hero__logo {
  width: min(30rem, 82vw);
  height: auto;
  margin: 0 auto var(--space-1);
  filter: drop-shadow(0 0 26px rgba(139, 92, 246, 0.4));
}

.hero__logo svg {
  display: block;
  width: 100%;
  height: auto;
}

/* Visually-hidden but available to assistive tech + crawlers. The visible
   brand is the SVG above (aria-hidden); this carries the real <h1> text. */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.hero__eyebrow {
  margin: 0 0 var(--space-1);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent-blue);
}

.hero__brand {
  margin: 0;
  font-size: clamp(2.6rem, 8vw, 4.5rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1;
  background: linear-gradient(120deg, #ffffff 20%, var(--accent-violet) 65%, var(--accent-blue) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.hero__tagline {
  margin: var(--space-3) 0 0;
  font-size: clamp(1.15rem, 3vw, 1.6rem);
  font-weight: 600;
  color: var(--text-0);
}

.hero__subtagline {
  margin: 0.35rem 0 0;
  font-size: clamp(1rem, 2.4vw, 1.25rem);
  color: var(--text-1);
}

.cta {
  margin-top: var(--space-4);
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.9rem 1.7rem;
  border-radius: 999px;
  font-size: 1.05rem;
  font-weight: 600;
  text-decoration: none;
  color: #0a0714;
  background: linear-gradient(120deg, var(--accent-blue), var(--accent-violet));
  box-shadow: 0 10px 30px -8px rgba(139, 92, 246, 0.55);
  transition: transform 180ms ease, box-shadow 180ms ease;
}

.cta:hover,
.cta:focus-visible {
  transform: translateY(-2px);
  box-shadow: 0 14px 34px -6px rgba(139, 92, 246, 0.65);
}

.cta__arrow {
  transition: transform 180ms ease;
}

.cta:hover .cta__arrow,
.cta:focus-visible .cta__arrow {
  transform: translateX(3px);
}

.hero__note {
  margin: var(--space-2) 0 0;
  font-size: 0.85rem;
  color: var(--text-2);
}

.hero__scrollcue {
  position: absolute;
  bottom: var(--space-3);
  left: 50%;
  transform: translateX(-50%);
  width: 22px;
  height: 36px;
  border: 2px solid rgba(255, 255, 255, 0.22);
  border-radius: 999px;
}

.hero__scrollcue span {
  display: block;
  width: 4px;
  height: 8px;
  margin: 6px auto 0;
  border-radius: 999px;
  background: var(--accent-blue);
  animation: scrollcue 1.8s ease-in-out infinite;
}

@keyframes scrollcue {
  0% {
    transform: translateY(0);
    opacity: 1;
  }
  70% {
    transform: translateY(14px);
    opacity: 0;
  }
  100% {
    transform: translateY(14px);
    opacity: 0;
  }
}

/* ------------------------------------------------------------------ */
/* Feature sections                                                     */
/* ------------------------------------------------------------------ */

main {
  background: var(--bg-0);
}

.feature {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: var(--space-5) var(--space-3);
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: var(--space-4);
  align-items: center;
}

.feature--reverse .feature__text {
  order: 2;
}

.feature--reverse .feature__media {
  order: 1;
}

.feature__eyebrow {
  margin: 0 0 var(--space-1);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent-blue);
}

.feature__eyebrow--future {
  color: var(--accent-amber);
}

.feature__title {
  margin: 0 0 var(--space-2);
  font-size: clamp(1.6rem, 3.2vw, 2.25rem);
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--text-0);
}

.feature__body {
  margin: 0;
  font-size: 1.05rem;
  color: var(--text-1);
}

.feature__body strong {
  color: var(--text-0);
  font-variant-numeric: tabular-nums;
}

.feature__media {
  margin: 0;
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid var(--panel-border);
  background: var(--panel);
  box-shadow: 0 30px 60px -30px rgba(0, 0, 0, 0.7);
}

.feature__media img {
  width: 100%;
}

.feature__media figcaption {
  padding: 0.65rem 0.9rem;
  font-size: 0.8rem;
  color: var(--text-2);
  border-top: 1px solid var(--panel-border);
}

/* ------------------------------------------------------------------ */
/* Scroll fade-in — progressive enhancement                            */
/* ------------------------------------------------------------------ */

/* Base state (no-JS / JS-disabled / reduced-motion): always visible. */
.fade-section {
  opacity: 1;
  transform: none;
}

/* Only when JS has confirmed motion is allowed does the pre-visible
   state apply; IntersectionObserver then flips .is-visible on. See
   js/main.js. This guarantees content is never hidden behind JS that
   fails to load, and reduced-motion users never see any movement. */
body.js-fade-ready .fade-section {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 700ms ease, transform 700ms ease;
  will-change: opacity, transform;
}

body.js-fade-ready .fade-section.is-visible {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  body.js-fade-ready .fade-section {
    opacity: 1;
    transform: none;
    transition: none;
  }
  .hero__scrollcue span {
    animation: none;
  }
  .cta,
  .cta__arrow {
    transition: none;
  }
}

/* ------------------------------------------------------------------ */
/* Footer                                                               */
/* ------------------------------------------------------------------ */

.site-footer {
  padding: var(--space-4) var(--space-2) var(--space-4);
  text-align: center;
  color: var(--text-2);
  font-size: 0.85rem;
  border-top: 1px solid var(--panel-border);
}

.site-footer p {
  margin: 0;
}

/* ------------------------------------------------------------------ */
/* Responsive                                                           */
/* ------------------------------------------------------------------ */

@media (max-width: 900px) {
  .feature {
    grid-template-columns: 1fr;
    padding-top: var(--space-4);
    padding-bottom: var(--space-4);
  }

  .feature--reverse .feature__text,
  .feature--reverse .feature__media {
    order: initial;
  }
}

@media (max-width: 480px) {
  .hero {
    padding: var(--space-3) var(--space-2);
  }

  .cta {
    width: 100%;
    justify-content: center;
  }

  .feature {
    padding-left: var(--space-2);
    padding-right: var(--space-2);
  }
}