/* T-085 N9 (plan 9.2, TD-146): the big screen's first-load intro (game/intro.js; index.html #intro). From the first paint:
   black (--ink-0); 0.2-1.2 s the two logos rise in together (VAI Soft Lab 80 ms before the HTH mark) with the amber line
   between them growing from its middle; 0.8-1.8 s one warm light passes over both logos (a soft strip moved by transform,
   cut to the logos' shapes by a mask); the "presents" line under them. Its end (intro.js, 2.2-3.5 s): the logos go (500 ms),
   then the black (350 ms) over the loading picture, which rises in under it. Only transform and opacity move.
   With "reduce motion": fades only. If intro.js never runs, the intro goes by itself at 4.6 s. */
#intro { position: fixed; inset: 0; z-index: 12; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: clamp(18px, 4vh, 40px); padding: 0 var(--safe-x); background: var(--ink-0); color: var(--text); font-family: var(--font-ui);
  animation: intro-auto 350ms linear 4.6s forwards; }
#intro .logos { display: flex; align-items: center; gap: clamp(28px, 4.5vw, 72px); max-width: 100%;
  transition: opacity 500ms var(--ease), transform 500ms var(--ease); }
#intro .lg { position: relative; flex: none; animation: ui-rise 1000ms var(--ease) 200ms backwards; }
#intro .lg img { display: block; height: 100%; width: auto; }
/* (the wordmark is wide and low: its letters stand about as tall as the mark's; the mark about 22 % of the height) */
#intro .lg.vai { height: 7.5vh; }
#intro .lg.hth { height: 22vh; animation-delay: 280ms; }
#intro .bar { flex: none; width: 1px; height: 15vh; background: color-mix(in srgb, var(--ember) 70%, transparent);
  animation: intro-bar 1000ms var(--ease) 200ms backwards; }
@keyframes intro-bar { from { transform: scaleY(0); } }
/* the light: a warm strip, cut to the logo's own shape (its picture is the mask), moved across it once */
#intro .sweep { position: absolute; inset: 0; overflow: hidden; pointer-events: none;
  -webkit-mask: var(--logo) center / contain no-repeat; mask: var(--logo) center / contain no-repeat; }
#intro .sweep::before { content: ''; position: absolute; top: -10%; bottom: -10%; left: 0; width: 45%;
  background: linear-gradient(100deg, transparent 0%, rgba(255, 222, 176, .5) 50%, transparent 100%);
  transform: translateX(-100%); animation: intro-sweep 1000ms linear 800ms forwards; }
/* (an even speed: with the menus' one curve, fast at its start, the light crossed a logo in 0.2 s, too quick to see) */
@keyframes intro-sweep { to { transform: translateX(240%); } }
#intro .lg.vai .sweep { --logo: url(/assets/brand/vai-logo.svg); }
#intro .lg.hth .sweep { --logo: url(/assets/brand/hth-mark.webp); }
/* (a logo that did not come: its name in the title font, intro.js) */
#intro .txt { display: none; }
#intro .lg.text { height: auto; }
#intro .lg.text img, #intro .lg.text .sweep { display: none; }
#intro .lg.text .txt { display: block; font: 600 clamp(22px, 3vw, 44px)/1.1 var(--font-title); letter-spacing: .14em;
  text-transform: uppercase; white-space: nowrap; }
#intro .by { --label-size: clamp(12px, 1.05vw, 16px); letter-spacing: .3em; min-height: 1.2em;
  animation: ui-fade 700ms var(--ease) 800ms backwards; }
/* the end: the logos go, then the black (intro.js; a skip is quicker) */
#intro.out .logos, #intro.out .by { opacity: 0; transform: scale(.96); transition: opacity 500ms var(--ease), transform 500ms var(--ease); }
/* (once it goes it catches nothing: a click then is for what comes under it; a click or key during the intro is a skip) */
#intro.out { opacity: 0; pointer-events: none; transition: opacity 350ms var(--ease) 450ms; }
#intro.out.skip .logos, #intro.out.skip .by { transition-duration: 200ms; }
#intro.out.skip { transition-delay: 150ms; }
@keyframes intro-auto { to { opacity: 0; visibility: hidden; } }
/* (under the intro the loading picture and the map cards wait; when it goes they rise in, as when they open) */
body.intro #loadSide > *, body.intro #mapsHead > *, body.intro .mapCard { animation: none; }

@media (prefers-reduced-motion: reduce) {
  #intro .lg, #intro .bar { animation-name: ui-fade; }
  #intro .sweep { display: none; }
  #intro.out .logos, #intro.out .by { transform: none; }
}