/* Hero: tokens first, then layout. Colors come from the page theme in styles.css,
   so light and dark both work without extra rules. Loaded after styles.css and
   knowledge.css, so it overrides the old hero rules there. */
.hero{
  --nav-h: 90px;
  --hero-min: calc(100vh - var(--nav-h));
  --hero-pad-y: clamp(56px, 7vw, 96px);
  --hero-measure: 1040px;
  --hero-mark: clamp(104px, 21vw, 300px);
  --hero-mark-lh: .9;
  --hero-mark-track: -.045em;
  --hero-mark-hover: var(--coral);
  --hero-mark-dur: .5s;
  --hero-fade: 1.9s;
  --hero-ease: cubic-bezier(.45, 0, .2, 1);
  --hero-blur: 22px;
  --hero-scale: 1.04;
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  place-content: center;
  justify-items: center;
  gap: 0;
  text-align: center;
  /* The whole first screen under the nav, so the next section never peeks in.
     The extra bottom padding equals the nav, which centres the wordmark on the
     screen rather than on the space below the nav. */
  min-height: var(--hero-min);
  padding: var(--hero-pad-y) 0 calc(var(--hero-pad-y) + var(--nav-h));
}
@supports (height: 100svh){
  .hero{--hero-min: calc(100svh - var(--nav-h))}
}
.hero-copy{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;min-width:0;max-width:var(--hero-measure)}
/* The headline is the wordmark, the same in every language: the brand's face,
   never wrapped. Looser than the nav logo's -.07em, which at this size closes
   the gaps between letters. html[lang] outranks the per-language heading sizes
   in styles.css (Japanese has its own). */
html[lang] .hero h1{margin:0;font:700 var(--hero-mark)/var(--hero-mark-lh) "DM Sans",sans-serif;letter-spacing:var(--hero-mark-track);white-space:nowrap}
/* The wordmark is the way in: it opens the account. app.html sends a visitor
   who is not signed in to the login page and back again. The link is laid over
   the heading instead of wrapping it, so the heading stays a heading for screen
   readers and in the Markdown agents read, and swapCopy and motion.js, which
   rewrite the heading's innerHTML, never touch the link. The description and
   the MVP status that used to sit under the wordmark live in the footer now. */
.hero-mark{position:absolute;inset:0;z-index:1;border-radius:12px}
.hero-mark+h1{transition:color var(--hero-mark-dur) var(--hero-ease)}
.hero-mark:is(:hover,:focus-visible)+h1{color:var(--hero-mark-hover)}
.hero-mark:focus-visible{outline:2px solid var(--hero-mark-hover);outline-offset:14px}

@media(max-width:800px){
  .hero{--hero-pad-y:48px}
}
@media(max-width:560px){
  .hero{--nav-h:74px}
}

/* Headline: no mask and no rise. It condenses out of nothing: transparent,
   blurred and a touch large, then sharp. Scoped to html.motion, so readers who
   asked for stillness get plain text. Overrides the line mask in motion.css. */
html.motion .hero h1.lines .ln{overflow:visible}
html.motion .hero h1.lines .ln>i{opacity:0;filter:blur(var(--hero-blur));transform:scale(var(--hero-scale));transition:opacity var(--hero-fade) var(--hero-ease),filter var(--hero-fade) var(--hero-ease),transform calc(var(--hero-fade) * 1.1) var(--hero-ease)}
html.motion .hero h1.lines.in .ln>i{opacity:1;filter:none;transform:none}

/* Dust intro (hero-particles.js). The canvas spans the full viewport width over
   the hero; the wordmark waits under it until the dust has landed. */
.hero-dust{position:absolute;top:0;left:calc(50% - 50vw);z-index:0;width:100vw;height:100%;pointer-events:none}
html.motion .hero h1.lines.particles .ln>i{opacity:0;filter:none;transform:none;transition:none}
html.motion .hero h1.lines.particles.formed .ln>i{opacity:1}

/* No flash of the finished wordmark. Scripts run at the end of the body, so
   until motion.js has split the headline into lines the plain text would show
   for a moment before the dust: a screamer. From the first paint the headline
   waits; if no script ever takes it over, it shows itself after a beat. */
html.motion .hero h1:not(.lines){opacity:0;animation:hero-failsafe .6s ease 2.4s forwards}
@keyframes hero-failsafe{to{opacity:1}}

/* Leaving or reloading: the wordmark dissolves like a shadow, then the next
   load gathers it again from the dust (hero-particles.js sets .leaving). */
html.motion.leaving .hero h1,html.motion.leaving .hero-dust{opacity:0;filter:blur(16px);transform:scale(.98);transition:opacity .38s ease,filter .38s ease,transform .38s ease}

/* A reader whose browser is not in English: the head script hid the English
   copy until script.js swaps in theirs, so it never flashes first. */
html.i18n-wait [data-i18n]{visibility:hidden;animation:i18n-failsafe 0s linear 2.5s forwards}
@keyframes i18n-failsafe{to{visibility:visible}}