/* Hero v3 — loaded after hero-silk.css on v3.html only (that file brings the full-width grid,
   the --s scale for large screens and the key-figures block). Layout after the Superpower page:
   a white top bar (menu left, wordmark centred, actions right) over a rounded hero card that
   holds the Shaders "Solar Silk 11" field — a dark-to-bright purple gradient with a soft orb,
   gently rippled — and the Incas mark as clear glass. The copy sits in the bottom-left corner in
   white, three facts in the bottom-right one. */

:root {
  --bar-h: 96px;      /* top bar */
  --stage-gap: 8px;   /* margin around the hero card */
  --stage-pad: calc(var(--space-10) - var(--stage-gap)); /* copy lines up with the menu: 40px from the page edge */
}

/* ---------- Top bar ---------- */
.site-header { position: relative; z-index: 2; background: var(--white); color: var(--black); }
.site-header .header { height: var(--bar-h); }
.site-header .slash-nav { margin: 0; gap: var(--space-8); }
.site-header .slash-nav a,
.site-header .slash-nav a.is-active { color: var(--black); }
.site-header .slash-nav a:hover { opacity: .7; }
.site-header .header__logo { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); }
.site-header .header__logo img { height: 14px; }
.site-header .header__actions { display: flex; align-items: center; gap: var(--space-6); margin-left: auto; }
.site-header .header__actions .header__cta { margin-left: 0; }
.site-header .header__link { font-size: 14px; line-height: 20px; font-weight: 500; color: var(--black); text-decoration: none; }
.site-header .header__link:hover { opacity: .7; }
/* buttons: brand black, no shadows or outlines */
.site-header .in-btn--primary { background: var(--black); border-color: var(--black); color: var(--white); }
.site-header .in-btn--primary:not(:disabled):hover { background: var(--graphite); border-color: var(--graphite); }

/* ---------- Hero card ---------- */
.stage {
  --stage-h: max(calc(100svh - var(--bar-h) - var(--stage-gap)), 600px);
  /* bottom row: the copy in the left corner, the facts in the right one */
  position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: 1fr;
  align-items: end; column-gap: var(--space-12);
  height: var(--stage-h); margin: 0 var(--stage-gap); padding: 0 var(--stage-pad) var(--space-12);
  overflow: hidden; isolation: isolate;
  border-radius: var(--radius-lg);
  /* the preset's field, still: the gradient and the orb (its colours in v3.html),
     for the first frames and browsers without WebGPU */
  background:
    radial-gradient(ellipse 110% 90% at 45% 85%, var(--purple) 0%, color-mix(in srgb, var(--purple) 90%, transparent) 32%, rgba(168, 140, 245, .18) 60%, transparent 78%),
    linear-gradient(90deg, #160338, #5a35c0);
  color: var(--white);
}
.stage__glass {
  position: absolute; z-index: 0; inset: 0; display: block;
  /* the shader library writes its first measured size inline in px and never lets go of it,
     so the canvas would keep its old size when the window is resized: pin it to the card */
  width: 100% !important; height: 100% !important;
  pointer-events: none; opacity: 0; transition: opacity 1.2s ease;
}
.stage.is-ready .stage__glass { opacity: 1; }
/* fallback mark: where placement() in v3.html draws the glass one */
.stage__fallback {
  display: none; position: absolute; z-index: 0; left: 50%; top: 50%; width: auto; height: 60%;
  transform: translate(-50%, -50%); opacity: .12; pointer-events: none;
}
.stage.no-gpu .stage__glass { display: none; }
.stage.no-gpu .stage__fallback { display: block; }
.stage__fallback--lime { opacity: 1; } /* v5: the mark is solid lime, so its stand-in is too */
@media (prefers-reduced-motion: reduce) { .stage__glass { transition: none; } }

/* copy: bottom-left corner, on the dark end of the gradient — white */
.stage__body { position: relative; z-index: 2; min-width: 0; color: var(--white); }
.stage__text { display: flex; flex-direction: column; align-items: flex-start; max-width: 760px; }
/* a check mark and a short line above the headline, as in the reference */
.stage__eyebrow { display: inline-flex; align-items: center; gap: var(--space-2); margin-bottom: var(--space-6); font-size: 14px; line-height: 20px; font-weight: 500; color: inherit; }
.stage__eyebrow svg { flex: none; width: 16px; height: 16px; padding: 0; margin: 0; } /* the icon is not text: no descender padding */
.stage__title {
  font-family: var(--font-brand); font-size: clamp(40px, 5vw, 72px); line-height: 1; font-weight: 500;
  letter-spacing: -0.035em; color: inherit;
}
.stage__title > [data-words], .stage__title > [data-scramble] { display: block; } /* two-line headline */
.stage__lead { margin-top: var(--space-6); max-width: 520px; font-size: 18px; line-height: 28px; color: inherit; }
/* the big call to action under the lead: white on the dark field (the one inverted button on the
   page), no shadow; it rises in after the last words */
.stage__cta { margin-top: var(--space-8); background: var(--white); border-color: var(--white); color: var(--black); }
.stage__cta:not(:disabled):hover { background: var(--grey); border-color: var(--grey); }
@media (prefers-reduced-motion: no-preference) {
  .js-motion .stage.t-stagger .stage__cta {
    opacity: 0; transform: translateY(var(--stagger-distance));
    transition: opacity var(--stagger-dur) var(--stagger-ease), transform var(--stagger-dur) var(--stagger-ease);
    transition-delay: 520ms; /* after the lead's last word */
  }
  .js-motion .stage.t-stagger.is-shown .stage__cta { opacity: 1; transform: none; }
}

/* three facts in the bottom-right corner, split by thin rules, white on the bright end of the gradient */
.stage__facts { position: relative; z-index: 2; display: flex; margin: 0; }
.stage__fact { display: flex; flex-direction: column; padding: 0 var(--space-6); border-left: 1px solid rgba(255, 255, 255, .2); }
.stage__fact:first-child { padding-left: 0; border-left: 0; }
.stage__fact dt { font-size: 16px; line-height: 24px; font-weight: 500; color: var(--white); }
.stage__fact dd { font-size: 16px; line-height: 24px; color: rgba(255, 255, 255, .72); }

/* ---------- Key figures (v3): white section, the figures card in brand lime with black type ---------- */
.proof { padding-top: 120px; background: var(--white); } /* more air between the hero card and the statement */
.proof__card { position: relative; margin-top: var(--space-10); overflow: hidden; border-radius: var(--radius-lg); background: var(--green); color: var(--black); }
.proof__card .proof__grid { margin: 0; overflow: visible; border-radius: 0; background: transparent; }
.proof__card .proof__value { color: var(--black); }
.proof__card .proof__label { color: color-mix(in srgb, var(--black) 72%, transparent); }
.proof__item + .proof__item { border-left-color: color-mix(in srgb, var(--black) 18%, transparent); }
@media (max-width: 900px) { .proof { padding-top: var(--space-16); } .proof__card { margin-top: var(--space-8); } .proof__item + .proof__item { border-top-color: color-mix(in srgb, var(--black) 18%, transparent); } }

/* ---------- Load intro (v3): the mark alone (brand grey on white), then the card, then the top bar, then the copy ----------
   States are classes on <html>: .is-intro (set before first paint by the inline script) holds the
   pre-intro state; motion.js adds intro-1 … intro-4 and intro-out on a ~3 s timeline. Without JS or
   with reduced motion none of this applies and the page simply shows. */
.stage__intro { display: none; position: absolute; z-index: 3; left: 50%; top: 50%; width: auto; height: 60%; transform: translate(-50%, -50%); pointer-events: none; }
.stage::after { content: ""; position: absolute; inset: 0; z-index: 1; background: var(--white); opacity: 0; pointer-events: none; }
@media (prefers-reduced-motion: no-preference) {
  /* 1. the mark rises in alone on the white page (brand grey #e7e7e7, so it reads as a quiet watermark) */
  .js-motion.is-intro .stage__intro { display: block; opacity: 0; transform: translate(-50%, -50%) scale(.96); filter: blur(6px);
    transition: opacity .6s var(--stagger-ease), transform .6s var(--stagger-ease), filter .6s var(--stagger-ease); }
  .js-motion.is-intro.intro-1 .stage__intro { opacity: 1; transform: translate(-50%, -50%); filter: blur(0); }
  /* 2. the card (field + waves) fades in around it: a white cover over the card thins out */
  .js-motion.is-intro .stage::after { opacity: 1; transition: opacity .8s ease; }
  .js-motion.is-intro.intro-2 .stage::after { opacity: 0; }
  /* 3. the top bar settles down into place */
  .js-motion.is-intro .site-header { opacity: 0; transform: translateY(-8px); transition: opacity .6s var(--stagger-ease), transform .6s var(--stagger-ease); }
  .js-motion.is-intro.intro-3 .site-header { opacity: 1; transform: none; }
  /* 4. the copy and facts reveal word by word (motion.js) — and the mark hands over to the glass */
  .js-motion.is-intro.intro-out .stage__intro { opacity: 0; transition: opacity .6s ease; }
}

/* ---------- Large screens: grow with the same --s scale as the rest of the page ---------- */
@media (min-width: 1441px) {
  :root { --bar-h: calc(96 * var(--s)); --stage-gap: calc(8 * var(--s)); --stage-pad: calc(32 * var(--s)); }
  .site-header .header__logo img { height: calc(14 * var(--s)); }
  .site-header .slash-nav { gap: calc(32 * var(--s)); font-size: calc(14 * var(--s)); line-height: calc(20 * var(--s)); }
  .site-header .header__actions { gap: calc(24 * var(--s)); }
  .site-header .header__link { font-size: calc(14 * var(--s)); line-height: calc(20 * var(--s)); }
  .site-header .header__cta {
    height: calc(32 * var(--s)); padding: 0 calc(12 * var(--s)); border-radius: calc(8 * var(--s));
    font-size: calc(14 * var(--s)); line-height: calc(20 * var(--s));
  }
  .stage { border-radius: calc(20 * var(--s)); column-gap: calc(48 * var(--s)); padding-bottom: calc(48 * var(--s)); }
  .proof { padding-top: calc(120 * var(--s)); }
  .proof__card { margin-top: calc(40 * var(--s)); border-radius: calc(20 * var(--s)); }
  .stage__text { max-width: calc(760 * var(--s)); }
  .stage__eyebrow { gap: calc(8 * var(--s)); margin-bottom: calc(24 * var(--s)); font-size: calc(14 * var(--s)); line-height: calc(20 * var(--s)); }
  .stage__eyebrow svg { width: calc(16 * var(--s)); height: calc(16 * var(--s)); }
  .stage__title { font-size: calc(72 * var(--s)); }
  .stage__lead { margin-top: calc(24 * var(--s)); max-width: calc(520 * var(--s)); font-size: calc(18 * var(--s)); line-height: calc(28 * var(--s)); }
  .stage__cta { margin-top: calc(32 * var(--s)); height: calc(52 * var(--s)); padding: 0 calc(24 * var(--s)); border-radius: calc(12 * var(--s)); font-size: calc(16 * var(--s)); line-height: calc(24 * var(--s)); }
  .stage__fact { padding: 0 calc(24 * var(--s)); }
  .stage__fact:first-child { padding-left: 0; }
  .stage__fact dt, .stage__fact dd { font-size: calc(16 * var(--s)); line-height: calc(24 * var(--s)); }
}

/* Below 1280px the copy needs the width: the facts stack into a column in the right corner */
@media (max-width: 1279px) {
  .stage__facts { flex-direction: column; gap: var(--space-4); }
  .stage__fact { padding: 0; border-left: 0; }
}

/* ---------- Tablets and phones ---------- */
@media (max-width: 900px) {
  :root { --bar-h: 80px; --stage-pad: var(--space-5); }  /* the menu is hidden here (landing.css) */
  .site-header .header__logo { position: static; transform: none; }
}

/* Narrow windows: the mark at the top of the card, the copy under it, the facts below the copy */
@media (max-aspect-ratio: 1/1) {
  /* the mark at the top of the card, the copy under it */
  .stage {
    height: auto; min-height: var(--stage-h);
    grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto; align-items: start; align-content: space-between;
    row-gap: var(--space-10); padding-bottom: var(--space-10);
  }
  /* mark: min(38svh, 80vw) tall, 24px from the top of the card — the same numbers as placement() */
  .stage__fallback, .stage__intro { left: 50%; top: calc(24px + min(19svh, 40vw)); height: min(38svh, 80vw); }
  .stage__body { padding-top: calc(24px + min(38svh, 80vw) + var(--space-8)); }
}

/* Phones: no room for the header link */
@media (max-width: 600px) {
  .site-header .header__link { display: none; }
}