/* ============================================================
   ZEROTUDE — Base semantic styles
   Element defaults + a few brand utility classes that the system
   leans on (eyebrow, display weights, numeral, mock frame, marquee).
   Built on the semantic tokens so light/dark theme for free.
   ============================================================ */

body {
  font-family: var(--font-body);
  font-size: var(--body);
  line-height: var(--body-lh);
  letter-spacing: var(--track-body);
  color: var(--fg1);
  background: var(--surface);
  font-feature-settings: "tnum" 1, "cv05" 1;  /* tabular numerals */
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ---------- Headings — display face, tight tracking & leading ---------- */
h1, h2, h3, h4, h5 {
  font-family: var(--font-display);
  letter-spacing: var(--track-display);
  text-wrap: balance;
  margin: 0;
}
h1 { font-size: var(--h1); line-height: var(--h1-lh); font-weight: 800; }
h2 { font-size: var(--h2); line-height: var(--h2-lh); font-weight: 800; }
h3 { font-size: var(--h3); line-height: var(--h3-lh); font-weight: 700; }
h4 { font-size: var(--h4); line-height: var(--h4-lh); font-weight: 700; }
h5 { font-size: var(--h5); line-height: var(--h5-lh); font-weight: 600; }

/* ---------- Display weight variants ----------
   Commit to heavy OR light — never the middle, never both in one headline.
   .display-black is reserved for the standalone "Zerotude" brand name. */
.display-light { font-family: var(--font-display); font-weight: 300; letter-spacing: -0.01em; }
.display-black { font-family: var(--font-display); font-weight: 900; letter-spacing: -0.025em; }

/* ---------- Body copy ---------- */
p { margin: 0 0 1em; max-width: 68ch; text-wrap: pretty; }
.lead { font-size: var(--body-lg); line-height: 1.45; color: var(--fg2); }
small, .caption { font-size: var(--caption); color: var(--fg2); }

a { color: var(--fg1); text-decoration-color: var(--accent); text-underline-offset: 3px; }
a:hover { color: var(--accent); }

code, kbd, samp {
  font-family: var(--font-mono);
  font-size: 0.9em;
  background: var(--surface-alt);
  padding: 0.12em 0.4em;
  border-radius: var(--r-xs);
}

/* ---------- Eyebrow / overline label ----------
   Short uppercase, wide-tracked label — clean text only.
   No rule, no box, no border, no dot-pill. */
.eyebrow {
  font-family: var(--font-body);
  font-size: var(--caption);
  font-weight: 600;
  letter-spacing: var(--track-eyebrow);
  text-transform: uppercase;
  color: var(--fg2);
}

/* ---------- Signature data numeral — Inter, tabular, tight ---------- */
.numeral {
  font-family: var(--font-body);
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  letter-spacing: -0.02em;
}

/* ---------- Mock frame radius — product/app mock frames ----------
   Corners are rounded by default (v2.1). A device/browser/app mock
   frame keeps its own larger radius so it reads as a screen even when
   a subtree opts into squared corners. */
.z-mock { border-radius: 14px !important; }

/* ---------- Glass — sanctioned (v2.1) ----------
   Frosted blur over IMAGERY / a scroll layer / a staged panel — pair
   with a hairline border + soft shadow, never over flat brand color.
   .z-glass = strong (headers, hero panels); .z-glass-lite = subtle. */
.z-glass      { backdrop-filter: blur(26px) saturate(150%); -webkit-backdrop-filter: blur(26px) saturate(150%); }
.z-glass-lite { backdrop-filter: blur(9px)  saturate(150%); -webkit-backdrop-filter: blur(9px)  saturate(150%); }

/* ---------- Parallax section background (v2.1) ----------
   The standard treatment for ANY full-bleed background image that carries
   text/elements over it (hero, CTA band, section device). The image lives
   in its OWN absolute layer with 22% extra height above and below the
   section, so it can translate on scroll without ever exposing an edge.

   Geometry ships here; the drift is driven from JS (the ParallaxSection
   React component, or the vanilla snippet in ParallaxSection.prompt.md):
   on every scroll/resize, per section —
     p = (rect.top + rect.height/2 - vh/2) / vh   // clamp to [-1, 1]
     t = -p * amplitude                            // clamp |t| ≤ rect.height*0.2
     layer.style.transform = `translateY(${t}px)`
   Easing is --ease (cubic-bezier(0.4,0,0.2,1)), no bounce. */
.z-parallax { position: relative; overflow: hidden; }
.z-parallax-media {
  position: absolute;
  inset: -22% 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  transform: translateY(0);
  transition: transform var(--dur) var(--ease);
  will-change: transform;
  pointer-events: none;
  z-index: 0;
}
.z-parallax > :not(.z-parallax-media) { position: relative; z-index: 1; }

/* Reduced motion: kill the drift entirely — static cover image, no listeners. */
@media (prefers-reduced-motion: reduce) {
  .z-parallax-media { transition: none; transform: none !important; }
}

/* ---------- Scoped dark band (v2.2 — light-first) ----------
   Light is the default everywhere. Put data-theme="dark" on a single
   section to break the page up (CTA band, stat/quote band, footer) and
   it paints itself from the inverted tokens. */
[data-theme="dark"]:not(:root) { background: var(--surface); color: var(--fg1); color-scheme: dark; }

/* ---------- Partner-logo marquee — monochrome coal silhouettes ----------
   Logos are normalized to one coal silhouette family; the marquee
   tints by opacity and inverts in dark mode. */
.z-marquee {
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
  overflow: hidden;
}
.z-marquee-track {
  display: flex;
  gap: 72px;
  width: max-content;
  align-items: center;
  animation: z-marquee 34s linear infinite;
}
.z-marquee:hover .z-marquee-track { animation-play-state: paused; }
.z-partner-logo { width: auto; flex: 0 0 auto; opacity: 0.58; transition: opacity 0.2s ease; }
:root[data-theme="dark"] .z-partner-logo,
[data-theme="dark"] .z-partner-logo { filter: invert(1) brightness(1.7); opacity: 0.72; }
@keyframes z-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }

@media (prefers-reduced-motion: reduce) {
  .z-marquee-track { animation: none; }
}