/* ============================================================
   Active Sports FC — Base layer
   Light element defaults + a few brand utilities. Kept minimal so
   consumers can opt in. Builds on the tokens above.
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--font-size-base);
  line-height: var(--line-height-normal);
  color: var(--text-default);
  background: var(--surface-default);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ---- Headings: Oswald, uppercase via CSS (CMS text stays normal-case) ---- */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  text-transform: uppercase;
  letter-spacing: var(--tracking-heading);
  color: var(--text-heading);
  line-height: var(--line-height-tight);
  margin: 0 0 var(--space-4);
  font-weight: var(--font-weight-regular); /* section default; display bumps to 600 */
}
h1 { font-size: var(--font-size-5xl); font-weight: var(--font-weight-semibold); line-height: var(--line-height-display); letter-spacing: var(--tracking-display); }
h2 { font-size: var(--font-size-4xl); font-weight: var(--font-weight-semibold); line-height: var(--line-height-display); letter-spacing: var(--tracking-display); }
h3 { font-size: var(--font-size-3xl); }
h4 { font-size: var(--font-size-2xl); }
h5 { font-size: var(--font-size-xl); }
h6 { font-size: var(--font-size-lg); }

p { margin: 0 0 var(--space-4); }

a { color: var(--link-on-light); text-decoration: underline; text-underline-offset: 0.15em; }
a:hover { text-decoration-thickness: 2px; }

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

:focus-visible { outline: 2px solid transparent; box-shadow: var(--focus-ring); border-radius: var(--radius-sm); }

/* ---- Utilities ---- */
.as-kicker {
  font-family: var(--font-heading);
  text-transform: uppercase;
  letter-spacing: var(--tracking-kicker);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--text-muted);
}
.as-container { max-width: var(--container-max); margin-inline: auto; padding-inline: var(--gutter); }
@media (min-width: 768px) { .as-container { padding-inline: var(--gutter-lg); } }

/* Dark section helper — paints warm near-black, flips text + links.
   Now also carries the diagonal hatch automatically: every dark band picks
   up a subtle texture via ::before (sits above the fill, below content). */
.as-inverse {
  position: relative;
  isolation: isolate;
  background: var(--surface-inverse);
  color: var(--text-inverse);
}
.as-inverse::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image: repeating-linear-gradient(
    45deg,
    rgba(0, 0, 0, 0.28) 0,
    rgba(0, 0, 0, 0.28) 1px,
    transparent 1px,
    transparent 4px
  );
}
/* Opt a dark band out of the texture when needed */
.as-inverse.as-no-hatch::before { display: none; }
.as-inverse h1, .as-inverse h2, .as-inverse h3,
.as-inverse h4, .as-inverse h5, .as-inverse h6 { color: var(--text-heading-inverse); }
.as-inverse a { color: var(--link-on-dark); }
.as-inverse .as-kicker { color: var(--text-accent); }

/* Gold accent rule (kickers / section tops) */
.as-rule-accent {
  border: 0;
  height: var(--border-rule-accent);
  width: 48px;
  background: var(--accent);
  margin: var(--space-3) 0;
}

/* ---- Diagonal hatch overlay ----
   Pure-CSS repeating hairline texture for hero images and tinted panels.
   Recolour/retune via the local custom props; combine with .as-hatch-scrim
   on a hero so the texture rides over the dark protection gradient. */
.as-hatch {
  --hatch-color: rgba(0, 0, 0, 0.28); /* dark range, subtle — sits down into dark surfaces */
  --hatch-line: 1px;     /* stroke weight */
  --hatch-gap: 3px;      /* clear space between strokes */
  --hatch-angle: 45deg; /* @kind other */
  background-image: repeating-linear-gradient(
    var(--hatch-angle),
    var(--hatch-color) 0,
    var(--hatch-color) var(--hatch-line),
    transparent var(--hatch-line),
    transparent calc(var(--hatch-line) + var(--hatch-gap))
  );
}

/* As a non-interactive layer over a hero image (place absolutely, inset:0) */
.as-hatch-overlay { position: absolute; inset: 0; pointer-events: none; }

/* Dark protection gradient + hatch in one layer for hero captions */
.as-hatch-scrim {
  --hatch-color: rgba(0, 0, 0, 0.28); /* subtle dark-range texture over imagery */
  background-image:
    repeating-linear-gradient(
      var(--hatch-angle, 45deg),
      var(--hatch-color) 0,
      var(--hatch-color) var(--hatch-line, 1px),
      transparent var(--hatch-line, 1px),
      transparent calc(var(--hatch-line, 1px) + var(--hatch-gap, 3px))
    ),
    linear-gradient(0deg, rgba(24,21,16,0.92) 0%, rgba(24,21,16,0.30) 55%, rgba(24,21,16,0) 100%);
}

/* Plain protection gradient (no hatch) — for full-colour photography */
.as-scrim {
  background-image: linear-gradient(0deg, rgba(24,21,16,0.92) 0%, rgba(24,21,16,0.30) 55%, rgba(24,21,16,0) 100%);
}

/* ---- Hero entrance: staggered rise ----
   Apply .as-rise to each hero typography block (eyebrow, heading, paragraph,
   CTA row) and order the cascade with --rise-step (0,1,2,3). Slow, paced lift:
   each block fades up into place a beat after the one above it. Reduced-motion
   users get the final state with no animation. */
@keyframes as-hero-rise {
  from { opacity: 0; transform: translate3d(0, 24px, 0); }
  to   { opacity: 1; transform: translate3d(0, 0, 0); }
}
.as-rise {
  opacity: 0;
  animation: as-hero-rise 0.9s var(--ease-out) both;
  animation-delay: calc(var(--rise-step, 0) * 160ms + 80ms);
}
@media (prefers-reduced-motion: reduce) {
  .as-rise {
    animation: none;
    opacity: 1;
    transform: none;
  }
}