/* Typace — the parts of the nav every page shares: the wordmark and its intro, and the phone
   layout (two rows) that gives the wordmark room. Each page still styles its own bar; this file
   loads after those styles, so its rules win the ties.

   1. The wordmark

   The wordmark is the apps' own: Bricolage Grotesque, "Ty" ExtraBold + "pace" Light
   (BrandWordmark on both hosts), so the name reads TYPE-pace rather than as a misspelt
   "typeface". The two files carry only the letters of "Type at your pace" and are built by
   `tools/fetch_wordmark_font.py --web`. The family name is our own so a copy installed on the
   visitor's machine is never picked up instead.

   assets/nav.js plays the keyboard title's intro (TitleIntro.kt) on every page load:
   "Type at your pace" arrives word by word, the letters not in the name fade, and the rest close
   up into Typace. Until the script takes over the wordmark is hidden, so the finished name never
   flashes first; if the script never runs, it shows itself after 2 s anyway.

   Linked by tools/site_i18n.py into every generated page. Served `immutable` (firebase.json):
   bump `?v=N` there whenever this file changes. */
@font-face{
  font-family:"Typace Wordmark";font-weight:800;font-style:normal;font-display:block;
  src:url("/assets/fonts/bricolage-grotesque-extrabold-v1.woff2") format("woff2");
}
@font-face{
  font-family:"Typace Wordmark";font-weight:300;font-style:normal;font-display:block;
  src:url("/assets/fonts/bricolage-grotesque-light-v1.woff2") format("woff2");
}

.wordmark{
  font-family:"Typace Wordmark",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  font-weight:300;font-size:1.32rem;line-height:1;letter-spacing:-.01em;
  /* The name is Latin in every language; on an Arabic page it still reads left to right. */
  direction:ltr;unicode-bidi:isolate;
  animation:wm-show 0s 2s both;
}
.wordmark b{font-weight:800}
.wordmark.wm-live{animation:none}
@keyframes wm-show{from{opacity:0}to{opacity:1}}

/* The intro. Times mirror TitleIntro.kt from its DELAY_MS on: words every 260 ms, each fading
   up 4px over 320 ms; the dropped letters fade at 1.7 s and close up from 2.0 s. */
.wm-p{display:inline-block;vertical-align:top;white-space:pre}
.wm-p.wm-heavy{font-weight:800}
.wm-in{
  display:inline-block;
  animation:wm-rise .32s cubic-bezier(.33,1,.68,1) both;
  animation-delay:calc(var(--wm-start) + 120ms + var(--wm-word) * 260ms);
}
.wm-drop{
  overflow:hidden;width:var(--wm-w);
  animation:
    wm-vanish .3s cubic-bezier(.32,0,.67,0) calc(var(--wm-start) + 1700ms) forwards,
    wm-collapse .5s cubic-bezier(.65,0,.35,1) calc(var(--wm-start) + 2000ms) forwards;
}
@keyframes wm-rise{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
@keyframes wm-vanish{to{opacity:0}}
@keyframes wm-collapse{from{width:var(--wm-w)}to{width:0}}

.wm-sr{
  position:absolute;width:1px;height:1px;margin:-1px;padding:0;border:0;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;
}

@media(prefers-reduced-motion:reduce){
  .wordmark{animation:none}
}

/* 2. The phone bar (640px and below).

   One row used to hold the icon, the link scroller, the language menu, the theme switch and the
   CTA, which left the links a strip 32–100px wide (32px in German at 360px: one sliver of a word)
   and no room at all for the name. Two rows instead:

     [icon Typace]               [language] [theme]
     [Features  How it works  Pricing …]  [Download]

   .nav-links becomes display:contents so its children join .nav-inner's own flex row, which
   wraps; `order` places them whatever order each page writes them in, and a full-width ::after
   is the line break between the rows. The second row's links scroll, with an edge fade only on a
   side that really has more (classes from assets/nav.js). The bar grows from 64 to 100px, and
   the extra 36px goes on html's scroll-padding so every anchor's own scroll-margin still clears
   it. In Arabic the rows mirror, like the rest of the bar. */
@media(max-width:640px){
  html{scroll-padding-top:36px}
  .nav-inner{flex-wrap:wrap;height:auto;column-gap:8px;row-gap:0}
  .nav-inner::after{content:"";order:4;flex-basis:100%;height:0}
  .nav-inner .nav-links{display:contents}
  /* The brand's cell is whatever the two buttons leave; the intro's full slogan (159px at 20px)
     must fit in it, which is why the type steps down on the narrowest phones below. */
  .nav-inner .brand{order:1;margin-inline-end:auto;height:54px;min-width:0;flex-shrink:1}
  .nav-inner .brand .brand-name{display:inline-block}
  .nav-inner .wordmark{font-size:1.25rem}
  .nav-inner .language-menu{order:2}
  .nav-inner .theme-toggle{order:3}
  .nav-inner .nav-cta{order:6}
  .nav-inner .nav-scroll{
    order:5;flex:1 1 0;height:42px;margin-bottom:4px;gap:20px;
    overflow-x:auto;overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch;
    scrollbar-width:none;
    padding:0 2px;scroll-padding:0 2px;
    -webkit-mask-image:none;mask-image:none;
  }
  .nav-inner .nav-scroll::-webkit-scrollbar{display:none}
  .nav-inner .nav-scroll.more-right{
    -webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 28px),transparent);
    mask-image:linear-gradient(90deg,#000 calc(100% - 28px),transparent);
  }
  .nav-inner .nav-scroll.more-left{
    -webkit-mask-image:linear-gradient(90deg,transparent,#000 28px);
    mask-image:linear-gradient(90deg,transparent,#000 28px);
  }
  .nav-inner .nav-scroll.more-left.more-right{
    -webkit-mask-image:linear-gradient(90deg,transparent,#000 28px,#000 calc(100% - 28px),transparent);
    mask-image:linear-gradient(90deg,transparent,#000 28px,#000 calc(100% - 28px),transparent);
  }
}
/* languages.css pins the open language list under a 64px bar on phones; this bar is 100px. */
@media(max-width:480px){
  .language-options{inset-block-start:106px}
}
@media(max-width:340px){
  .nav-inner .wordmark{font-size:1.15rem}
}