/* T-049 (D-550): the first-load intro of the game page, VDefense's way (their ui/intro.css): from the first paint black;
   0.2-1.2 s the two logos rise in together (VAI SoftLab 80 ms before Racers1) with a thin warm line between them growing
   from its middle; 0.8-1.8 s one warm light passes over both logos (a soft strip, cut to each logo's shape by a mask); the
   "VAI SoftLab presents" line under them. The end (js/brand.js, 2.2-3.5 s): the logos go (500 ms), then the black (350 ms)
   over the menu. Only transform and opacity move. "Reduce motion": fades only. If brand.js never runs it goes by itself at 4.6 s. */
#brand { position: fixed; inset: 0; z-index: 60; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: clamp(18px, 4vh, 40px); padding: 0 16px; background: #000; color: #e8ecf0;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; animation: brand-auto 350ms linear 4.6s forwards; }
#brand .logos { display: flex; align-items: center; gap: clamp(22px, 4.5vw, 72px); max-width: 100%;
  transition: opacity 500ms cubic-bezier(.2,.7,.2,1), transform 500ms cubic-bezier(.2,.7,.2,1); }
#brand .lg { position: relative; flex: none; animation: brand-rise 1000ms cubic-bezier(.2,.7,.2,1) 200ms backwards; }
#brand .lg img { display: block; height: 100%; width: auto; max-width: 42vw; object-fit: contain; }
#brand .lg.vai { height: 7.5vh; }
#brand .lg.r1 { height: 13vh; animation-delay: 280ms; }
#brand .bar { flex: none; width: 1px; height: 15vh; background: #ff9a5ab0; animation: brand-bar 1000ms cubic-bezier(.2,.7,.2,1) 200ms backwards; }
#brand .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; }
#brand .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: brand-sweep 1000ms linear 800ms forwards; }
#brand .lg.vai .sweep { --logo: url(/assets/brand/vai-logo.svg); }
#brand .lg.r1 .sweep { --logo: url(/assets/brand/racers1-word.webp); }
#brand .txt { display: none; }
#brand .lg.text { height: auto; }
#brand .lg.text img, #brand .lg.text .sweep { display: none; }
#brand .lg.text .txt { display: block; font: 700 clamp(22px, 3vw, 44px)/1.1 inherit; letter-spacing: .14em; text-transform: uppercase; white-space: nowrap; }
#brand .by { font-size: clamp(12px, 1.05vw, 16px); letter-spacing: .3em; text-transform: uppercase; color: #c9ced6; min-height: 1.2em;
  animation: brand-fade 700ms cubic-bezier(.2,.7,.2,1) 800ms backwards; }
#brand.out .logos, #brand.out .by { opacity: 0; transform: scale(.96); transition: opacity 500ms cubic-bezier(.2,.7,.2,1), transform 500ms cubic-bezier(.2,.7,.2,1); }
#brand.out { opacity: 0; pointer-events: none; transition: opacity 350ms ease 450ms; }
#brand.out.skip .logos, #brand.out.skip .by { transition-duration: 200ms; }
#brand.out.skip { transition-delay: 150ms; }
@keyframes brand-rise { from { opacity: 0; transform: translateY(14px); } }
@keyframes brand-fade { from { opacity: 0; } }
@keyframes brand-bar { from { transform: scaleY(0); } }
@keyframes brand-sweep { to { transform: translateX(240%); } }
@keyframes brand-auto { to { opacity: 0; visibility: hidden; } }
/* an upright phone: the logos one over the other, the line flat between them */
@media (max-aspect-ratio: 4/5) {
  #brand .logos { flex-direction: column; }
  #brand .bar { width: 22vw; height: 1px; }
  #brand .lg.vai { height: 5vh; } #brand .lg.r1 { height: 8vh; }
  #brand .lg img { max-width: 80vw; }
}
@media (prefers-reduced-motion: reduce) {
  #brand .lg, #brand .bar { animation-name: brand-fade; }
  #brand .sweep { display: none; }
  #brand.out .logos, #brand.out .by { transform: none; }
}