/* ═══════════════════════════════════════════════════════════
   ONYX FITNESS — BASE STYLES
   Modern reset + document defaults using design tokens.
   ═══════════════════════════════════════════════════════════ */

/* Reset */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: 5rem;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
  /* PD3: global optical kerning + ligatures + contextual alternates.
     Standard typography hygiene — both Archivo Black and Inter have
     well-crafted kerning tables; tightens letter pairs like AV / WA /
     Te that would otherwise sit too loose at display sizes. */
  font-feature-settings: "kern" 1, "calt" 1, "liga" 1;
}

body {
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  background: var(--color-onyx);
  color: var(--color-bone);
  overflow-x: hidden;
  min-height: 100vh;
}

/* Typography — Archivo Black for display, Inter for body */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  font-weight: 400;                    /* Archivo Black is intrinsically heavy; no weight variants */
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-display);
  color: var(--color-bone);
  text-transform: uppercase;           /* Premium fitness convention — display type is uppercase */
}

p {
  font-family: var(--font-body);
  max-width: var(--max-width-prose);
  line-height: var(--leading-loose);
}

/* Links */
a {
  color: inherit;
  text-decoration: none;
  transition: color var(--t-base), opacity var(--t-base);
}

a:hover {
  color: var(--chrome-bright);
}

/* Form elements */
button {
  all: unset;
  cursor: pointer;
  font-family: inherit;
}

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

/* Focus — visible but on-brand */
:focus-visible {
  outline: 2px solid var(--chrome);
  outline-offset: 3px;
}

/* Selection */
::selection {
  background: var(--chrome);
  color: var(--color-onyx);
}

/* Utilities */
.visually-hidden,
.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;
}

.container {
  max-width: var(--max-width);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.container--prose {
  max-width: var(--max-width-narrow);
}

/* Full-bleed container — spans full viewport width with no inner gutter.
   Used by sections whose backdrop bleeds edge-to-edge while inner content
   re-constrains via a nested .container or .container--bleed-inner. */
.container--bleed {
  max-width: none;
  padding-inline: 0;
}

.container--bleed-inner {
  max-width: var(--max-width);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* ─── 404 / Not Found page (Prompt 5) ─────────────────────── */
.not-found {
  min-height: 60vh;
  display: flex;
  align-items: center;
  padding-block: var(--section-y-large);
}

.not-found a {
  color: var(--platinum);
  border-bottom: 1px solid currentColor;
  transition: color var(--t-base);
}

.not-found a:hover {
  color: var(--platinum-bright);
}

.section {
  padding-block: var(--section-y);
  position: relative;
}

.section--large {
  padding-block: var(--section-y-large);
}

/* ─── Scroll reveal animations ────────────────────────────
   Applied to sections via JS (main.js). Initial state hidden +
   offset; .is-revealed restores at-rest state on intersect.
   Respects prefers-reduced-motion (animation disabled). */
.reveal-on-scroll {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.6s var(--ease-out-expo),
              transform 0.6s var(--ease-out-expo);
}

.reveal-on-scroll.is-revealed {
  opacity: 1;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  .reveal-on-scroll {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* Stagger reveal for pricing cards, features grid, and stat strip */
.home-pricing__card:nth-child(2),
.home-features__item:nth-child(2) {
  transition-delay: 0.1s;
}

.home-pricing__card:nth-child(3),
.home-features__item:nth-child(3) {
  transition-delay: 0.2s;
}

.home-stat-strip__item:nth-child(2) { transition-delay: 0.08s; }
.home-stat-strip__item:nth-child(3) { transition-delay: 0.16s; }
.home-stat-strip__item:nth-child(4) { transition-delay: 0.24s; }

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}