/* The opening (js/intro.js), as he set it out (1 October 2026: "when we first load, we should see our
   logo with this. Then the logo goes up, and this fades away. Then we have our toolbar, and then this
   thing comes up... That's all. It should be clean looking"). Black; the logo's mark, the flower
   alone, comes up in the middle with the claim under it in the page's display type, as a trailer sets
   its title; the mark goes up to its place in the bar as the claim fades away; the black lifts off
   the bar, where the name stands beside it; and only then does the window come up. The name was in
   the opening for a turn and was taken out at his word ("not wanting to show the actual isogram word
   on the first screen. Just show the flower"). A flash of white light once opened
   it ("a flash, like God created it"), taken out the same day at his word; it is kept in
   _old/hero-1001/before-backlight/. Loaded first, so the black is there before anything else is
   drawn. */
.intro { position: fixed; inset: 0; z-index: 1000; pointer-events: none; }
.intro-black { position: absolute; inset: 0; background: #000; }
.intro-card { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: clamp(22px, 4vh, 40px); }
.intro-logo { display: block; width: clamp(56px, 9vh, 92px); height: clamp(56px, 9vh, 92px); color: var(--mark, #b3a1ef); transform-origin: 50% 50%; opacity: 0; translate: 0 8px; }
.intro-word {
  margin: 0; padding: 0 24px; text-align: center; color: #f5f5f7; text-wrap: balance; transform-origin: 50% 50%;
  /* The claim is set tighter than its type, so the tails of letters such as g hang below the line,
     outside the box. A browser that draws the claim on a layer of its own while it fades in clips
     the layer to the box, and the tails were cut off (his word, 1 October 2026). The box is grown to
     hold them, and the same amount taken back outside it, so nothing moves. */
  padding-block: 0.16em; margin-block: -0.16em;
  font: 600 clamp(44px, min(8.4vw, 13vh), 132px)/1.02 var(--display, "Inter Tight", Inter, system-ui, sans-serif); letter-spacing: -0.052em;
  opacity: 0; translate: 0 10px; filter: blur(12px);
}
/* The mark rises out of the dark, so it arrives rather than appears; the claim follows it. */
.intro.mark .intro-logo { opacity: 1; translate: 0 0; transition: opacity 0.8s ease, translate 1.1s cubic-bezier(0.16, 1, 0.3, 1); }
.intro.word .intro-word { opacity: 1; translate: 0 0; filter: none; transition: opacity 0.7s cubic-bezier(0.2, 0.7, 0.2, 1), translate 1s cubic-bezier(0.16, 1, 0.3, 1), filter 0.7s ease; }
/* The mark goes up onto its place in the bar (its transform is set in the script) as the claim fades
   away where it stands, a little larger, as a title leaves the screen. The black stays under them. */
.intro.fly .intro-logo { transition: transform 0.9s cubic-bezier(0.6, 0, 0.2, 1); }
.intro.fly .intro-word { opacity: 0; transform: scale(1.06); filter: blur(10px); transition: opacity 0.5s ease, transform 0.9s cubic-bezier(0.2, 0.7, 0.2, 1), filter 0.5s ease; }
/* Then the black lifts, and the bar is there round the mark, its name beside it. */
.intro.lift .intro-black { opacity: 0; transition: opacity 0.6s cubic-bezier(0.4, 0, 0.2, 1); }
/* Ended by a scroll or a key: gone in a quarter of a second. */
.intro.quick { opacity: 0; transition: opacity 0.25s ease; }
/* The bar's mark waits, unseen, for its copy to land on it. */
html.intro-hold #brandBloom { visibility: hidden; }