/* =========================================================================
   STANZA DESIGN SYSTEM — stanza.css
   Drop-in token + primitive layer. Framework-agnostic, no build step.
   Pair with STANZA-DESIGN-LANGUAGE.md for the rules behind these values.
   ========================================================================= */

/* -------------------------------------------------------------------------
   1. TOKENS
   ------------------------------------------------------------------------- */

:root {
  /* --- surface ------------------------------------------------------- */
  --white:    #ffffff;
  --paper:    #f7f7f8;
  --paper-2:  #f2f2f4;

  /* --- text ---------------------------------------------------------- */
  --ink:      #08090c;   /* headings, primary text                       */
  --ink-2:    #15161a;   /* pressed / secondary ink                      */
  --slate:    #6b6d76;   /* body copy                                    */
  --slate-2:  #9698a1;   /* captions, mono labels, disabled              */

  /* --- hairlines ----------------------------------------------------- */
  --line:      rgba(12, 13, 18, .085);
  --line-soft: rgba(12, 13, 18, .055);

  /* --- accent (use sparingly; ~2% of surface area) -------------------- */
  --blue:   #5966ff;   /* the single active accent                       */
  --violet: #9e8cff;   /* atmosphere gradients only                      */
  --ice:    #dce7ff;   /* atmosphere gradients only                      */

  /* --- chrome ramp (metal surfaces are built from these) -------------- */
  --chrome-0: #ffffff;
  --chrome-1: #f4f5f7;
  --chrome-2: #e1e3e7;
  --chrome-3: #c6c8ce;
  --chrome-4: #8f929b;

  /* --- elevation ------------------------------------------------------ */
  --shadow-sm:
    0 1px 2px rgba(10, 12, 18, .04),
    0 4px 14px rgba(10, 12, 18, .045);

  --shadow-md:
    0 8px 28px rgba(13, 16, 28, .07),
    0 30px 80px rgba(13, 16, 28, .06);

  --shadow-lg:
    0 25px 70px rgba(12, 15, 26, .13),
    0 60px 140px rgba(31, 36, 70, .09);

  /* --- machined edges (the core material trick) ----------------------- */
  --edge-light:  inset 0 1px 0 rgba(255, 255, 255, 1);      /* top bevel */
  --edge-dark:   inset 0 -1px 0 rgba(85, 88, 98, .09);      /* bottom seam */
  --edge-light-d: inset 0 1px 0 rgba(255, 255, 255, .28);   /* on graphite */
  --edge-dark-d:  inset 0 -1px 0 rgba(0, 0, 0, .58);        /* on graphite */

  /* --- type ----------------------------------------------------------- */
  --display:
    -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text",
    "Helvetica Neue", Arial, sans-serif;

  --mono:
    "SFMono-Regular", ui-monospace, "Cascadia Code", "Roboto Mono", monospace;

  /* --- motion ---------------------------------------------------------- */
  --ease:      cubic-bezier(.22, .8, .24, 1);  /* the only easing curve   */
  --t-micro:   .25s;   /* hover, focus, colour                            */
  --t-ui:      .45s;   /* card lift, panel state                          */
  --t-reveal:  .9s;    /* scroll entrance                                 */
  --t-hero:    1.15s;  /* masthead line reveal                            */

  /* --- layout ----------------------------------------------------------- */
  --pad: clamp(1.25rem, 5vw, 4.5rem);
  --max: 78rem;
  --radius-sm:  .5rem;
  --radius-md:  .9rem;
  --radius-lg: 1.5rem;
  --radius-xl: 2.6rem;
  --radius-pill: 999px;
}


/* -------------------------------------------------------------------------
   2. BASE
   ------------------------------------------------------------------------- */

*{ margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; background: var(--white); }

body {
  font-family: var(--display);
  color: var(--ink);
  background: var(--white);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

a { color: inherit; text-decoration: none; }
button, a { -webkit-tap-highlight-color: transparent; }
svg { display: block; }
::selection { background: var(--ink); color: #fff; }
:focus-visible { outline: 2px solid var(--blue); outline-offset: 4px; }

h1, h2, h3 { font-weight: 600; letter-spacing: -.045em; line-height: .98; }

.s-wrap {
  width: 100%;
  max-width: var(--max);
  margin: 0 auto;
  padding-left: var(--pad);
  padding-right: var(--pad);
}

.s-section {
  position: relative;
  padding: clamp(6rem, 12vh, 10rem) 0;
  border-top: 1px solid var(--line-soft);
}


/* -------------------------------------------------------------------------
   3. ATMOSPHERE
   Fixed layers. The grain MUST be fractal noise — repeating-radial-gradient
   produces visible concentric rings and moiré.
   ------------------------------------------------------------------------- */

.s-page-light {
  position: fixed; inset: 0; z-index: -10; pointer-events: none;
  background:
    radial-gradient(60rem 48rem at 92% 6%,  rgba(132, 142, 255, .12), transparent 58%),
    radial-gradient(45rem 40rem at 82% 20%, rgba(217, 227, 255, .23), transparent 62%),
    linear-gradient(#fff, #fff);
}

.s-page-grain {
  position: fixed; inset: 0; z-index: 100; pointer-events: none;
  opacity: .035;
  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='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 160px 160px;
}


/* -------------------------------------------------------------------------
   4. TYPOGRAPHY PRIMITIVES
   ------------------------------------------------------------------------- */

/* mono eyebrow with balanced hairlines — the section signature */
.s-eyebrow {
  display: inline-flex; align-items: center; gap: .75rem;
  font-family: var(--mono);
  font-size: .69rem; font-weight: 500;
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--slate);
}
.s-eyebrow::before,
.s-eyebrow::after {
  content: ""; display: block;
  width: 1.8rem; height: 1px;
  background: currentColor; opacity: .42;
}
/* left-aligned variant drops the trailing rule */
.s-eyebrow--start::after { display: none; }

/* mono utility label */
.s-label {
  font-family: var(--mono);
  font-size: .55rem;
  letter-spacing: .13em; text-transform: uppercase;
  color: var(--slate-2);
}

.s-head {
  max-width: 44rem; margin: 0 auto clamp(3.5rem, 7vw, 5.5rem);
  text-align: center;
}
.s-head h2 { margin-top: 1.45rem; font-size: clamp(2.6rem, 5vw, 4.2rem); line-height: .96; }
.s-head p  {
  max-width: 35rem; margin: 1.45rem auto 0;
  color: var(--slate); font-size: 1.05rem; line-height: 1.65; letter-spacing: -.012em;
}
.s-head .s-eyebrow { justify-content: center; }

/* masthead headline. clip-path (not overflow:hidden) so wide words are
   never sliced; size from a capped vw so type can't outgrow its column. */
.s-display {
  font-size: clamp(3.2rem, 6.6vw, 6.9rem);
  font-weight: 610; letter-spacing: -.068em; line-height: .88;
  max-width: 100%;
}
.s-display .s-line {
  display: block;
  padding-bottom: .10em; margin-bottom: -.10em;
  clip-path: inset(0 -30% 0 0);
}
.s-display .s-line > span {
  display: block;
  transform: translateY(112%);
  transition: transform var(--t-hero) var(--ease);
  /* metallic sweep, played once after entry */
  background: linear-gradient(106deg,
    var(--ink) 0%, var(--ink) 38%, #5e616a 48%, #d8dae1 51%,
    #474a52 54%, var(--ink) 62%, var(--ink) 100%);
  background-size: 280% 100%; background-position: 170% 0;
  color: transparent;
  -webkit-background-clip: text; background-clip: text;
}
.s-loaded .s-display .s-line:nth-child(1) > span { transform: none; transition-delay: .20s; }
.s-loaded .s-display .s-line:nth-child(2) > span { transform: none; transition-delay: .34s; }
.s-loaded .s-display .s-line > span { animation: s-shine 2.4s var(--ease) 1.15s 1; }

@keyframes s-shine {
  from { background-position: 170% 0; }
  to   { background-position: -55% 0; }
}


/* -------------------------------------------------------------------------
   5. MATERIALS
   Three surfaces only: satin aluminium (light), graphite (dark), glass.
   Every one carries a bright top bevel and a dark bottom seam.
   ------------------------------------------------------------------------- */

/* --- satin aluminium: cards, chips, inputs, footer --- */
.s-metal {
  border: 1px solid rgba(89, 92, 104, .12);
  background: linear-gradient(145deg,
    rgba(255, 255, 255, .98) 0%,
    rgba(246, 247, 249, .98) 40%,
    rgba(232, 234, 238, .92) 100%);
  box-shadow: var(--edge-light), var(--edge-dark), var(--shadow-sm);
}

/* --- graphite: primary buttons, the core of a diagram --- */
.s-graphite {
  color: #fff;
  border: 1px solid rgba(0, 0, 0, .75);
  background: linear-gradient(180deg,
    #404149 0%, #24252b 36%, #111216 72%, #090a0d 100%);
  box-shadow:
    var(--edge-light-d), var(--edge-dark-d),
    0 2px 4px rgba(0, 0, 0, .13),
    0 12px 28px rgba(18, 21, 36, .10);
}

/* --- glass: content floating inside a figure --- */
.s-glass {
  border: 1px solid rgba(255, 255, 255, .82);
  background: linear-gradient(145deg,
    rgba(255, 255, 255, .78), rgba(255, 255, 255, .42));
  backdrop-filter: blur(24px) saturate(145%);
  -webkit-backdrop-filter: blur(24px) saturate(145%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .98),
    0 25px 55px rgba(25, 30, 54, .13);
}

/* --- polished bezel: the frame around any hero object --- */
.s-bezel {
  position: relative;
  padding: 1px;
  border-radius: var(--radius-xl);
  background: linear-gradient(145deg,
    #fefefe, #bbbfc8 17%, #f8f9fa 34%, #8d9099 49%,
    #f9fafb 67%, #b9bcc4 84%, #fff);
  box-shadow:
    0 2px 6px rgba(20, 22, 30, .04),
    0 32px 70px rgba(31, 36, 63, .10),
    0 70px 130px rgba(49, 57, 110, .07);
  transform-style: preserve-3d;
}
/* fixed diagonal glare — reads as a real reflective pane */
.s-bezel::before {
  content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none;
  border-radius: inherit; opacity: .55;
  background: linear-gradient(115deg,
    transparent 25%, rgba(255, 255, 255, .86) 39%, transparent 50%);
}

/* --- travelling rim light (use once per page, on the signature object) --- */
@property --s-ba { syntax: '<angle>'; inherits: false; initial-value: 0deg; }

.s-rim {
  position: absolute; inset: 0; z-index: 5; pointer-events: none;
  border-radius: inherit; padding: 1.5px;
  background: conic-gradient(from var(--s-ba),
    transparent 0deg, rgba(255, 255, 255, .95) 32deg,
    rgba(160, 170, 255, .55) 46deg, transparent 78deg);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  animation: s-rim 9s linear infinite;
}
@keyframes s-rim { to { --s-ba: 360deg; } }


/* -------------------------------------------------------------------------
   6. CONTROLS
   ------------------------------------------------------------------------- */

.s-btn {
  position: relative; overflow: hidden;
  display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
  min-height: 3rem; padding: .78rem 1.45rem;
  border-radius: var(--radius-pill);
  font-size: .9rem; font-weight: 560;
  transition:
    transform var(--t-micro) var(--ease),
    box-shadow var(--t-micro) var(--ease),
    border-color var(--t-micro) ease;
}
/* sheen sweep on hover */
.s-btn::before {
  content: ""; position: absolute; pointer-events: none;
  top: -70%; left: -60%; width: 38%; height: 240%;
  transform: skewX(-19deg);
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .55), transparent);
  transition: left .75s var(--ease);
}
.s-btn:hover::before { left: 125%; }

.s-btn--primary { composes: s-graphite; }
.s-btn--primary {
  color: #fff;
  border: 1px solid rgba(0, 0, 0, .75);
  background: linear-gradient(180deg, #404149 0%, #24252b 36%, #111216 72%, #090a0d 100%);
  box-shadow:
    var(--edge-light-d), var(--edge-dark-d),
    0 2px 4px rgba(0, 0, 0, .13), 0 12px 28px rgba(18, 21, 36, .10);
}
.s-btn--primary:hover {
  transform: translateY(-2px);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .34), var(--edge-dark-d),
    0 2px 4px rgba(0, 0, 0, .12), 0 18px 38px rgba(24, 30, 70, .18);
}

.s-btn--secondary {
  color: var(--ink);
  border: 1px solid rgba(48, 50, 60, .13);
  background: linear-gradient(180deg, rgba(255,255,255,.96), rgba(244,245,247,.92));
  box-shadow:
    inset 0 1px 0 #fff, inset 0 -1px 0 rgba(90, 92, 100, .08),
    0 1px 2px rgba(0, 0, 0, .025), 0 8px 24px rgba(20, 22, 32, .035);
  backdrop-filter: blur(10px);
}
.s-btn--secondary:hover {
  transform: translateY(-2px);
  border-color: rgba(48, 50, 60, .20);
  box-shadow: inset 0 1px 0 #fff, 0 14px 34px rgba(20, 22, 32, .075);
}

.s-arrow { transition: transform var(--t-micro) var(--ease); }
.s-btn:hover .s-arrow { transform: translateX(3px); }

/* status pill — dot + mono caption */
.s-pill {
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .3rem .62rem;
  border-radius: var(--radius-pill);
  border: 1px solid rgba(89, 92, 104, .14);
  background: linear-gradient(180deg, #fff, #f0f1f4);
  font-family: var(--mono); font-size: .52rem;
  letter-spacing: .13em; text-transform: uppercase;
  color: var(--slate);
}
.s-pill::before {
  content: ""; width: .32rem; height: .32rem;
  border-radius: 50%; background: var(--slate-2);
}
.s-pill--live::before {
  background: var(--blue);
  box-shadow: 0 0 0 3px rgba(89, 102, 255, .16);
}


/* -------------------------------------------------------------------------
   7. CARD
   ------------------------------------------------------------------------- */

.s-card {
  position: relative; overflow: hidden;
  display: flex; flex-direction: column; align-items: center;
  padding: 1.8rem;
  border-radius: var(--radius-lg);
  text-align: center;
  border: 1px solid rgba(89, 92, 104, .12);
  background: linear-gradient(145deg,
    rgba(255,255,255,.98) 0%, rgba(246,247,249,.98) 40%, rgba(232,234,238,.92) 100%);
  box-shadow: var(--edge-light), var(--edge-dark), var(--shadow-sm);
  transition:
    transform var(--t-ui) var(--ease),
    box-shadow var(--t-ui) var(--ease),
    border-color var(--t-ui) ease;
}
/* pointer-tracked specular highlight (set --mx/--my in JS) */
.s-card::before {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  opacity: 0; transition: opacity .35s ease;
  background: radial-gradient(360px circle at var(--mx, 50%) var(--my, 50%),
    rgba(255, 255, 255, .94), rgba(220, 226, 255, .22) 32%, transparent 65%);
}
/* sheen sweep */
.s-card::after {
  content: ""; position: absolute; pointer-events: none;
  top: -80%; left: -75%; width: 45%; height: 250%;
  transform: rotate(18deg);
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.85), transparent);
  transition: left 1s var(--ease);
}
.s-card > * { position: relative; z-index: 2; }
.s-card:hover {
  transform: translateY(-7px);
  border-color: rgba(89, 92, 104, .17);
  box-shadow:
    var(--edge-light), var(--edge-dark),
    0 22px 50px rgba(20, 24, 42, .075),
    0 55px 100px rgba(50, 58, 110, .06);
}
.s-card:hover::before { opacity: 1; }
.s-card:hover::after  { left: 145%; }

/* machined icon chip */
.s-chip {
  width: 2.7rem; height: 2.7rem;
  display: grid; place-items: center;
  border-radius: var(--radius-md);
  border: 1px solid rgba(83, 86, 96, .12);
  background: linear-gradient(145deg, #fff, #eceef1);
  box-shadow:
    inset 0 1px 0 #fff, inset 0 -1px 0 rgba(50, 52, 60, .10),
    0 5px 12px rgba(30, 33, 48, .06);
  transition: transform var(--t-ui) var(--ease);
}
.s-card:hover .s-chip { transform: translateY(-2px); }


/* -------------------------------------------------------------------------
   8. MOTION
   ------------------------------------------------------------------------- */

/* scroll entrance — add .is-in via IntersectionObserver */
.s-reveal {
  opacity: 0; transform: translateY(24px);
  transition:
    opacity var(--t-reveal) var(--ease),
    transform var(--t-reveal) var(--ease);
  transition-delay: var(--d, 0s);
}
.s-reveal.is-in { opacity: 1; transform: none; }

/* scroll progress hairline */
.s-progress {
  position: fixed; top: 0; left: 0; z-index: 100;
  width: 100%; height: 1px; pointer-events: none;
  transform-origin: left; transform: scaleX(var(--p, 0));
  background: linear-gradient(90deg, rgba(89,102,255,.1), var(--blue), var(--violet));
}

/* tilt target — swap to a fast transition on first hover so the slow
   reveal transition doesn't make the tilt lag the cursor */
.s-tilt { transform-style: preserve-3d; }
.s-tilt.is-live { transition: transform .16s ease-out; }


/* -------------------------------------------------------------------------
   9. REDUCED MOTION — quality floor, not optional
   ------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
  .s-reveal { opacity: 1; transform: none; }
  .s-display .s-line > span { transform: none; }
  .s-display .s-line { clip-path: none; }
  .s-rim { display: none; }
}