/* ============================================================================
   AA IMPACT GARAGE DOORS — CONCEPT A "STORM ATLAS"
   design-system.css — token layer. Every value traces to brand-guidelines.json.
   Named aesthetic: dark cinematic fortress luxury (~85% navy-black, ~10% gold).
   ============================================================================ */

/* ------------------------------------------------------------------ FONTS -- */
/* Archivo Expanded = engineered-architectural display (DCD "Expanded width").
   IBM Plex Sans = body. Never Inter/Montserrat/Poppins/DM Sans for headings. */
@import url('https://fonts.googleapis.com/css2?family=Archivo+Expanded:wght@600;700;800;900&family=Archivo:wght@500;600;700;800&family=IBM+Plex+Sans:wght@400;500;600&display=swap');

/* ----------------------------------------------------------------- TOKENS -- */
:root {
  /* --- Color (brand-guidelines.json color_palette) --- */
  --navy:            #0C1E3E;   /* AA Impact Navy — core structure            */
  --navy-midnight:   #0A1220;   /* Midnight Navy — dark cinematic envelope    */
  --navy-surface:    #14233F;   /* Elevated Navy Surface — panels / cards     */
  --navy-deep:       #060B15;   /* derived deepest black-navy for gradients   */
  --gold:            #C9A45C;   /* Champagne Gold — the luxury signature      */
  --gold-warm:       #D8B673;   /* hover / highlight gold                      */
  --gold-soft:       rgba(201,164,92,0.22); /* hairline gold                   */
  --bone:            #F5F1E8;   /* Warm Bone                                   */
  --near-white:      #EDEBE4;   /* Near-White — primary text on dark          */
  --graphite:        #2A2E37;   /* Graphite — dark UI                          */
  --cool-gray:       #8A93A3;   /* Cool Gray — secondary text                 */
  --white:           #FFFFFF;

  /* semantic (used only for true states) */
  --success:         #2FA36B;
  --error:           #C0392B;

  /* --- Surfaces & text roles --- */
  --bg:              var(--navy-midnight);
  --bg-alt:          #0B1526;   /* subtle alternate band                       */
  --ink:             var(--near-white);
  --ink-dim:         #B9C0CC;   /* dimmed near-white for body on dark          */
  --ink-faint:       var(--cool-gray);

  /* --- Type scale (DCD: --text-hero >= 6rem) --- */
  --font-display: 'Archivo Expanded', 'Archivo', 'Arial Narrow', sans-serif;
  --font-alt:     'Archivo', 'Helvetica Neue', Arial, sans-serif;
  --font-body:    'IBM Plex Sans', 'Helvetica Neue', Arial, sans-serif;

  --text-hero:   clamp(2rem, 7vw, 6.75rem);   /* hero H1 — exceeds 6rem ceiling; floor low so long words don't overflow narrow phones */
  --text-h1:     clamp(2.5rem, 5.5vw, 4.25rem);
  --text-h2:     clamp(2rem, 4vw, 3rem);
  --text-h3:     clamp(1.25rem, 2.4vw, 1.6rem);
  --text-lede:   clamp(1.05rem, 1.5vw, 1.375rem);
  --text-body:   1.0625rem;
  --text-small:  0.875rem;
  --text-eyebrow: 0.78rem;

  --lh-tight: 1.02;
  --lh-head:  1.08;
  --lh-body:  1.62;

  --track-hero:   0.005em;
  --track-display: 0.06em;   /* uppercase tracked display                     */
  --track-eyebrow: 0.28em;   /* wide-tracked eyebrow labels                   */
  --track-btn:    0.14em;

  /* --- Spacing scale (8pt-ish, architectural) --- */
  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-6: 1.5rem;
  --sp-8: 2rem;
  --sp-10: 2.5rem;
  --sp-12: 3rem;
  --sp-16: 4rem;
  --sp-20: 5rem;
  --sp-24: 6rem;
  --sp-32: 8rem;
  --section-pad: clamp(5rem, 9vw, 9rem);   /* brand spacing_tokens            */
  --container:   1360px;                    /* container_max_width             */
  --container-wide: 1560px;
  --gutter:      clamp(1.25rem, 4vw, 3rem);
  --grid-gap:    2.5rem;
  --card-pad:    2.25rem;

  /* --- Radius (brand border_radius: crisp/architectural) --- */
  --r-sm: 4px;
  --r-md: 8px;
  --r-lg: 16px;
  --r-pill: 999px;   /* only small chips/tags                                 */

  /* --- Shadows (navy-tinted, never pure black; gold glow on active only) --- */
  --sh-sm: 0 1px 2px rgba(10,18,32,0.35);
  --sh-md: 0 10px 30px rgba(10,18,32,0.30);
  --sh-lg: 0 30px 60px rgba(10,18,32,0.45);
  --sh-xl: 0 50px 100px rgba(6,11,21,0.60);
  --glow-gold: 0 8px 24px rgba(201,164,92,0.22);
  --glow-gold-strong: 0 10px 34px rgba(201,164,92,0.32);

  /* --- Hairlines --- */
  --hairline:      1px solid rgba(201,164,92,0.22);
  --hairline-soft: 1px solid rgba(237,235,228,0.10);

  /* --- Motion (brand animation_style) --- */
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-out: cubic-bezier(0.22, 0.61, 0.36, 1);
  --dur-fast: 220ms;
  --dur-ui:   320ms;
  --dur-scene: 640ms;
  --dur-slow: 880ms;

  --header-h: 84px;
}

/* -------------------------------------------------------------- RESET/BASE -- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  font-family: var(--font-body);
  font-size: var(--text-body);
  line-height: var(--lh-body);
  color: var(--ink);
  background-color: var(--navy-midnight);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
  /* atmospheric base: layered navy gradients so no flat solid backgrounds */
  background-image:
    radial-gradient(1200px 720px at 78% -8%, rgba(201,164,92,0.10), transparent 60%),
    radial-gradient(1000px 900px at 8% 12%, rgba(20,35,63,0.85), transparent 62%),
    linear-gradient(180deg, #0A1220 0%, #0B1626 46%, #080F1C 100%);
  background-attachment: fixed;
}

img, video, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; }
input, textarea, select { font: inherit; color: inherit; }
ul { list-style: none; padding: 0; }

::selection { background: rgba(201,164,92,0.30); color: var(--white); }

/* Global film grain overlay — atmosphere/depth, never flat */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 9999;
  pointer-events: none;
  opacity: 0.05;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ----------------------------------------------------------------- LAYOUT -- */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.container--wide { max-width: var(--container-wide); }

.section { position: relative; padding-block: var(--section-pad); }
.section--tight { padding-block: clamp(3.5rem, 6vw, 6rem); }

/* --------------------------------------------------------------- TYPOGRAPHY -- */
.display, h1, h2, h3 { font-family: var(--font-display); font-weight: 800; }

.eyebrow {
  font-family: var(--font-alt);
  font-weight: 700;
  font-size: var(--text-eyebrow);
  letter-spacing: var(--track-eyebrow);
  text-transform: uppercase;
  color: var(--gold);
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
}
.eyebrow::before {
  content: "";
  width: 30px; height: 1px;
  background: linear-gradient(90deg, var(--gold), transparent);
}
.eyebrow--center::before { display: none; }

.h-hero {
  font-size: var(--text-hero);
  line-height: var(--lh-tight);
  letter-spacing: var(--track-hero);
  text-transform: uppercase;
  font-weight: 800;
  color: var(--near-white);
}
.h1 { font-size: var(--text-h1); line-height: var(--lh-head); letter-spacing: 0.01em; text-transform: uppercase; }
.h2 { font-size: var(--text-h2); line-height: var(--lh-head); letter-spacing: 0.02em; text-transform: uppercase; }
.h3 { font-size: var(--text-h3); line-height: 1.25; letter-spacing: 0.04em; text-transform: uppercase; font-family: var(--font-alt); font-weight: 700; }

.lede {
  font-size: var(--text-lede);
  line-height: 1.5;
  color: var(--ink-dim);
  font-weight: 400;
  max-width: 46ch;
}
.text-gold { color: var(--gold); }
.text-dim  { color: var(--ink-dim); }
.muted     { color: var(--ink-faint); }

.index-num {
  font-family: var(--font-display);
  font-weight: 800;
  color: transparent;
  -webkit-text-stroke: 1px rgba(201,164,92,0.55);
  letter-spacing: 0.02em;
  line-height: 0.8;
}

/* Gold hairline divider element */
.rule-gold { height: 1px; width: 64px; background: linear-gradient(90deg, var(--gold), rgba(201,164,92,0)); border: 0; }
.rule-gold--center { margin-inline: auto; background: linear-gradient(90deg, transparent, var(--gold), transparent); width: 120px; }

/* ---------------------------------------------------------------- BUTTONS -- */
.btn {
  --_bg: var(--gold);
  --_fg: var(--navy);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.65rem;
  font-family: var(--font-alt);
  font-weight: 700;
  font-size: 0.8125rem;
  letter-spacing: var(--track-btn);
  text-transform: uppercase;
  padding: 1.05rem 2.1rem;
  border-radius: var(--r-sm);
  background: var(--_bg);
  color: var(--_fg);
  border: 1px solid transparent;
  transition: transform var(--dur-ui) var(--ease),
              background-color var(--dur-ui) var(--ease),
              box-shadow var(--dur-ui) var(--ease),
              border-color var(--dur-ui) var(--ease),
              color var(--dur-ui) var(--ease);
  will-change: transform;
}
.btn:hover { transform: translateY(-2px); }
.btn:focus-visible { outline: 2px solid var(--gold-warm); outline-offset: 3px; }

.btn--primary { background: var(--gold); color: var(--navy); box-shadow: var(--glow-gold); }
.btn--primary:hover { background: var(--gold-warm); box-shadow: var(--glow-gold-strong); }

.btn--ghost {
  background: transparent;
  color: var(--near-white);
  border: 1px solid rgba(201,164,92,0.5);
}
.btn--ghost:hover { border-color: var(--gold); color: var(--gold); }

.btn--dark { background: var(--navy); color: var(--near-white); border: 1px solid rgba(237,235,228,0.14); }
.btn--dark:hover { background: #10254a; border-color: var(--gold-soft); }

.btn .arw { transition: transform var(--dur-ui) var(--ease); }
.btn:hover .arw { transform: translateX(4px); }

/* text link with sliding champagne underline */
.link-gold {
  color: var(--gold);
  font-family: var(--font-alt);
  font-weight: 600;
  font-size: 0.82rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  position: relative;
}
.link-gold::after {
  content: "";
  position: absolute; left: 0; bottom: -4px;
  height: 1px; width: 100%;
  background: var(--gold);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--dur-ui) var(--ease);
}
.link-gold:hover { color: var(--gold-warm); }
.link-gold:hover::after { transform: scaleX(1); }
.link-gold .arw { transition: transform var(--dur-ui) var(--ease); }
.link-gold:hover .arw { transform: translateX(4px); }

/* chip / tag */
.chip {
  display: inline-flex; align-items: center; gap: 0.5rem;
  font-family: var(--font-alt);
  font-size: 0.7rem; font-weight: 600;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--gold);
  padding: 0.42rem 0.85rem;
  border: 1px solid var(--gold-soft);
  border-radius: var(--r-pill);
  background: rgba(201,164,92,0.06);
  backdrop-filter: blur(6px);
}
.chip--neutral { color: var(--ink-dim); border-color: rgba(237,235,228,0.16); background: rgba(237,235,228,0.04); }

/* --------------------------------------------------------- MOTION PRIMITIVE -- */
/* staggered fade-up (16px) driven by IntersectionObserver adding .is-in */
.reveal {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity var(--dur-slow) var(--ease), transform var(--dur-slow) var(--ease);
  transition-delay: var(--reveal-delay, 0ms);
}
.reveal.is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
  .btn, .link-gold, .btn .arw { transition: none !important; }
  * { animation: none !important; }
}

/* focus baseline */
a:focus-visible, button:focus-visible, input:focus-visible,
textarea:focus-visible, select:focus-visible, [tabindex]:focus-visible {
  outline: 2px solid var(--gold-warm);
  outline-offset: 3px;
  border-radius: 2px;
}

/* utility */
.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;
}
.skip-link {
  position: absolute; left: 1rem; top: -100px; z-index: 10000;
  background: var(--gold); color: var(--navy); padding: 0.75rem 1.25rem;
  border-radius: var(--r-sm); font-weight: 700; letter-spacing: 0.08em;
  text-transform: uppercase; font-size: 0.8rem;
  transition: top var(--dur-ui) var(--ease);
}
.skip-link:focus { top: 1rem; }