/* ============================================================================
   WEB-LIBRARY — BASE STYLES
   Wires the raw tokens in tokens.css to real elements. Load this after
   your own tokens.css on every project/page — every consumer (real sites
   and template-parts demos alike) already links its own tokens.css
   separately, so this file intentionally does NOT @import one itself.
   It used to (`@import url("tokens.css")`), which worked only by
   accident: that's a relative import, and it happened to resolve
   correctly back when this file was copied into each site's own css/
   folder (right next to that site's tokens.css). The first time it was
   referenced directly from here instead of copied, the same relative
   import silently resolved to THIS folder's own generic/placeholder
   tokens.css and overrode every real site's actual brand colors —
   caught immediately (Summit Air rendered gold instead of navy/orange)
   but worth leaving this note so it's not reintroduced.
   ============================================================================ */

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--text-size);
  font-weight: var(--text-weight);
  line-height: var(--text-leading);
  color: var(--color-text);
  background: var(--color-white);
}

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

/* Container — fluid side padding (see tokens.css --container-pad), scales
   continuously instead of snapping at breakpoints. */
.wrap, .container {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--container-pad);
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  color: var(--color-heading);
  margin: 0 0 var(--space-sm);
}
h1 { font-size: var(--h1-size); font-weight: var(--h1-weight); line-height: var(--h1-leading); letter-spacing: var(--h1-tracking); }
h2 { font-size: var(--h2-size); font-weight: var(--h2-weight); line-height: var(--h2-leading); letter-spacing: var(--h2-tracking); }
h3 { font-size: var(--h3-size); font-weight: var(--h3-weight); line-height: var(--h3-leading); letter-spacing: var(--h3-tracking); }
h4 { font-size: var(--h4-size); font-weight: var(--h4-weight); line-height: var(--h4-leading); letter-spacing: var(--h4-tracking); }
h5 { font-size: var(--h5-size); font-weight: var(--h5-weight); line-height: var(--h5-leading); letter-spacing: var(--h5-tracking); }
h6 { font-size: var(--h6-size); font-weight: var(--h6-weight); line-height: var(--h6-leading); letter-spacing: var(--h6-tracking); }

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

.eyebrow, .hero__eyebrow {
  display: inline-block;
  font-family: var(--font-body);
  font-size: var(--subtitle-size);
  font-weight: var(--subtitle-weight);
  letter-spacing: var(--subtitle-tracking);
  line-height: var(--subtitle-leading);
  text-transform: uppercase;
  color: var(--color-accent);
}

.sub-text { font-size: var(--sub-text-size); font-weight: var(--sub-text-weight); line-height: var(--sub-text-leading); }

a { color: var(--color-accent); }

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-body);
  font-size: var(--button-text-size);
  font-weight: var(--button-text-weight);
  line-height: var(--button-text-leading);
  padding: 16px 32px;
  border-radius: var(--radius-interactive);
  border: 1px solid transparent;
  text-decoration: none;
  cursor: pointer;
  transition: transform var(--duration-fast) var(--ease),
              background var(--duration-fast) var(--ease),
              box-shadow var(--duration-fast) var(--ease);
}
.btn--primary { background: var(--color-accent); color: var(--color-dark-bg); }
.btn--primary:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }

.btn--outline { background: transparent; border-color: currentColor; color: inherit; }
.btn--outline:hover { transform: translateY(-4px); }

/* Fill-sweep variant — a second color slides up from beneath on hover
   instead of a flat color swap (see aiken-code-study.md .btn::before).
   Usage: <a class="btn btn--sweep"><span>Label</span></a> */
.btn--sweep { position: relative; overflow: hidden; background: var(--color-accent); color: var(--color-dark-bg); transition: color var(--duration-base) var(--ease); }
.btn--sweep > span { position: relative; z-index: 2; }
.btn--sweep::before {
  content: ""; position: absolute; inset: 0; background: var(--color-dark-bg);
  transform: translateY(101%); transition: transform var(--duration-base) var(--ease); z-index: 1;
}
.btn--sweep:hover { color: var(--color-white); }
.btn--sweep:hover::before { transform: translateY(0); }

.card {
  background: var(--color-white);
  border-radius: var(--radius-structure);
  padding: var(--space-md);
}

.section { padding: var(--section-pad-y) 0; }
.section--dark { background: var(--color-dark-bg); color: var(--color-white); }
.section--dark h1, .section--dark h2, .section--dark h3 { color: var(--color-white); }
.section--light { background: var(--color-light-bg); }

/* ============================================================================
   MOTION — scroll-reveal contract shared by motion.js (GSAP tier) and any
   vanilla IntersectionObserver fallback. See aiken-code-study.md.

   Usage:
   - [data-reveal]           one element fades/rises in on scroll
   - [data-stagger] > *      children reveal one after another (CSS-only,
                              nth-child delays — no JS math needed, good
                              for Elementor-hybrid or no-JS-budget builds)
   - .line > span            wrap each heading line for a mask-reveal;
                              motion.js animates the inner span up into view
   - html.no-motion          added by motion.js if GSAP fails to load, or by
                              default in plain-CSS-only builds — always show
                              content instead of leaving it invisible
   ============================================================================ */
[data-reveal] {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity var(--duration-slow) var(--ease), transform var(--duration-slow) var(--ease);
  will-change: opacity, transform;
}
[data-reveal].is-revealed,
html.no-motion [data-reveal] { opacity: 1; transform: none; }

[data-stagger] > * {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity var(--duration-base) var(--ease), transform var(--duration-base) var(--ease);
}
[data-stagger].is-revealed > *,
html.no-motion [data-stagger] > * { opacity: 1; transform: none; }
[data-stagger].is-revealed > *:nth-child(1) { transition-delay: .05s; }
[data-stagger].is-revealed > *:nth-child(2) { transition-delay: .13s; }
[data-stagger].is-revealed > *:nth-child(3) { transition-delay: .21s; }
[data-stagger].is-revealed > *:nth-child(4) { transition-delay: .29s; }
[data-stagger].is-revealed > *:nth-child(5) { transition-delay: .37s; }
[data-stagger].is-revealed > *:nth-child(6) { transition-delay: .45s; }

.line { display: block; overflow: hidden; }
.line > span { display: block; transform: translateY(110%); }
html.no-motion .line > span { transform: none; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}