/* Intro (first visit only): typewriter keys type the title and the headline. See draft/mejoras/animacion-teclado/README.md.
   The page underneath is the normal site; intro.js drives everything from a single timeline. */

/* before the script runs, a first visit starts on an empty hero */
html.intro .brand, html.intro nav, html.intro .hero h1, html.intro .hero .after { opacity: 0; }
html.intro-playing, html.intro-playing body { overflow: hidden; }
html:not(.intro) #intro-stage, html:not(.intro) #intro-typed { visibility: hidden; }

#intro-stage { position: fixed; inset: 0; z-index: 20; pointer-events: none; width: 100%; height: 100%; }
#intro-typed { position: fixed; inset: 0; z-index: 30; overflow: hidden; pointer-events: none; }
#intro-title, #intro-body { position: absolute; left: 0; top: 0; white-space: nowrap; width: max-content; margin: 0; }
#intro-body {
  font-family: var(--brut); font-weight: 800; font-stretch: 62%; text-transform: uppercase;
  letter-spacing: -.005em; line-height: .9;
}
#intro-body .ln { display: block; overflow: hidden; white-space: nowrap; }
#intro-logos { position: absolute; left: 0; top: 0; height: auto; display: block; }
#intro-title { font-family: var(--brut); letter-spacing: -.005em; line-height: 1; display: grid; }
#intro-title > span { grid-area: 1 / 1; }
#intro-title .up { text-transform: uppercase; }
#intro-typed i { font-style: normal; display: inline-block; white-space: pre; }

/* skip: only while the intro plays; quiet, in the menu's place */
#intro-skip {
  position: fixed; z-index: 35; top: 26px;
  right: max(var(--gutter), calc((100vw - 1280px) / 2 + var(--gutter)));
  appearance: none; border: 0; background: none; padding: 4px 0; cursor: pointer;
  font: 400 .9375rem/1.2 var(--sans); color: var(--ink-2);
  display: inline-flex; align-items: baseline; gap: 10px; transition: color .3s;
}
#intro-skip:hover, #intro-skip:focus-visible { color: var(--ink); }
#intro-skip span { border-bottom: 1px solid currentColor; }
#intro-skip kbd { font: inherit; font-size: .75rem; color: var(--ink-3); }
html:not(.intro) #intro-skip { visibility: hidden; }