/* =============================================================
   LADDER - landing page · design tokens, reset, base type
   Visual identity sourced from game-assets/STYLE_BIBLE.md (v1.2):
   GitHub-dark canvas + four per-character accent colors.
   ============================================================= */

:root {
  /* ---- surfaces (canvas runs a touch deeper than the in-game #0d1117
         so panels read as elevated) ---- */
  --canvas:    #090c11;
  --canvas-2:  #0d1117;
  --panel:     #141a22;
  --panel-2:   #1b2230;
  --line:      rgba(230, 237, 243, 0.09);
  --line-soft: rgba(230, 237, 243, 0.05);

  /* ---- text ---- */
  --bone:     #e9eef5;
  --bone-dim: #c4cedb;
  --slate:    #8b949e;
  --slate-2:  #5e6772;

  /* ---- structural + state ---- */
  --blue:   #58a6ff;
  --error:  #f85149;
  --warn:   #d29922;

  /* ---- per-character accents (the org chart) ----
     LAD-1497: the landing now matches the IN-APP screen-chrome layer
     (ui/theme/character/*.ts) so the page and the game read as one product.
     The old STYLE_BIBLE "brand layer" palette (Engineer green / PM slate /
     CEO red) is retired for the landing. */
  --c-eng: #58a6ff;   /* Engineer - GitHub blue (free)      */
  --c-em:  #c79a5a;   /* Eng Manager - amber                */
  --c-pm:  #0071e3;   /* Product Manager - iCal blue        */
  --c-ceo: #c8a14a;   /* CEO - gold leaf                    */

  /* the page default accent = the free flagship */
  --accent:      var(--c-eng);
  --accent-glow: rgba(88, 166, 255, 0.30);

  /* ---- type ---- */
  --font-display: "Bricolage Grotesque", "Trebuchet MS", system-ui, sans-serif;
  --font-serif:   "Fraunces", Georgia, "Times New Roman", serif;
  --font-mono:    "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --font-body:    "IBM Plex Sans", system-ui, -apple-system, sans-serif;

  /* fluid type scale */
  --fs-eyebrow: 0.78rem;
  --fs-body:    clamp(1rem, 0.96rem + 0.25vw, 1.12rem);
  --fs-lead:    clamp(1.18rem, 1.05rem + 0.7vw, 1.5rem);
  --fs-h3:      clamp(1.3rem, 1.1rem + 1vw, 1.85rem);
  --fs-h2:      clamp(2rem, 1.4rem + 2.7vw, 3.4rem);
  --fs-h1:      clamp(2.7rem, 1.6rem + 5vw, 5.6rem);
  --fs-mega:    clamp(3.4rem, 1.5rem + 8.5vw, 8rem);

  /* layout */
  --maxw: 1200px;
  --gutter: clamp(1.15rem, 4vw, 3rem);
  --radius: 14px;
  --radius-lg: 22px;

  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

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

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  scroll-padding-top: 84px;
  overflow-x: clip;
}

body {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: 1.62;
  color: var(--bone-dim);
  background: var(--canvas);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
  position: relative;
}

img { max-width: 100%; display: block; height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; cursor: pointer; background: none; border: none; }
ul { list-style: none; }
::selection { background: var(--accent); color: var(--canvas); }

/* ---------------------------------------------------------------
   global page atmosphere - grain + faint scanlines + edge vignette
   --------------------------------------------------------------- */
body::before {   /* film grain */
  content: "";
  position: fixed; inset: 0; z-index: 9000; pointer-events: none;
  opacity: 0.045;
  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='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
body::after {    /* hairline scanlines - the terminal */
  content: "";
  position: fixed; inset: 0; z-index: 8999; pointer-events: none;
  opacity: 0.4;
  background: repeating-linear-gradient(
    to bottom, transparent 0 3px, rgba(0,0,0,0.16) 3px 4px);
  mix-blend-mode: multiply;
}

/* ---------------------------------------------------------------
   base typography
   --------------------------------------------------------------- */
h1, h2, h3, h4 {
  font-family: var(--font-display);
  color: var(--bone);
  font-weight: 800;
  line-height: 1.02;
  letter-spacing: -0.02em;
  font-variation-settings: "opsz" 36;
}

p { text-wrap: pretty; }
strong { color: var(--bone); font-weight: 600; }
em { font-style: italic; }

/* the warm human/satirical voice */
.serif {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  font-variation-settings: "opsz" 40, "SOFT" 40;
  letter-spacing: -0.01em;
}

/* the cold system/terminal voice */
.mono {
  font-family: var(--font-mono);
  letter-spacing: -0.01em;
}

/* section eyebrow label */
.eyebrow {
  font-family: var(--font-mono);
  font-size: var(--fs-eyebrow);
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
}
.eyebrow::before {
  content: "";
  width: 1.7em; height: 1px;
  background: currentColor;
  opacity: 0.55;
}

/* ---------------------------------------------------------------
   layout helpers
   --------------------------------------------------------------- */
.wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); }
.section { padding-block: clamp(4.5rem, 9vw, 8.5rem); position: relative; }
.section--tight { padding-block: clamp(3rem, 6vw, 5rem); }

.section-head { max-width: 56ch; margin-bottom: clamp(2.2rem, 5vw, 3.6rem); }
.section-head h2 { font-size: var(--fs-h2); margin: 0.5rem 0 0.9rem; }
.section-head p { font-size: var(--fs-lead); color: var(--slate); }

/* keyframes used across components */
@keyframes blink   { 0%,49% { opacity: 1; } 50%,100% { opacity: 0; } }
@keyframes floaty  { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-9px); } }
@keyframes scan    { 0% { transform: translateY(-100%); } 100% { transform: translateY(2400%); } }
@keyframes pulse-r { 0%,100% { opacity: 0.5; } 50% { opacity: 1; } }

/* reveal-on-scroll (JS toggles .is-in). Hidden state is scoped to .js so the
   page stays fully visible if JavaScript never runs - content never depends
   on a script succeeding. */
.js .reveal { opacity: 0; transform: translateY(26px); transition: opacity 0.8s var(--ease), transform 0.8s var(--ease); }
.js .reveal.is-in { opacity: 1; transform: none; }
.reveal[data-d="1"] { transition-delay: 0.08s; }
.reveal[data-d="2"] { transition-delay: 0.16s; }
.reveal[data-d="3"] { transition-delay: 0.24s; }
.reveal[data-d="4"] { transition-delay: 0.32s; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: none; }
  *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; }
}