/* rodenttr.app splash: the animated black rodenttr.app head on rodenttr lime,
   as on the rodenttr.app sign-in page. The head's frames and sound are driven
   by rt-splash.js. */
@font-face { font-family: 'Press Start 2P'; src: url(PressStart2P.woff2) format('woff2'); font-display: block; }
html, body { margin: 0; height: 100%; background: #DAFF34; }

.rt-splash {
  position: fixed; inset: 0; z-index: 100000;
  display: flex; flex-direction: row; align-items: center; justify-content: center; gap: clamp(14px, 3vw, 34px);
  background: #DAFF34;   /* flat rodenttr lime */
  transition: opacity 0.55s ease;
}
.rt-splash.is-hidden { opacity: 0; pointer-events: none; }

.rt-head-frame {
  width: clamp(84px, 22vw, 210px); aspect-ratio: 1 / 1;
  display: grid; place-items: center;
}
.rt-head-frame img {
  width: 100%; height: 100%; display: block; object-fit: contain;
  user-select: none;
}

/* "Rodent / Tr.App" beside the head, typed out as the voice says it (the rodenttr.app wordmark, black on lime) */
.rt-word {
  display: flex; flex-direction: column; align-items: flex-end;
  font-family: 'Press Start 2P', monospace; color: #000;
  font-size: clamp(22px, 7.4vw, 76px); line-height: 1.08; white-space: nowrap;
}
.rt-word .rt-sans { font-family: Arial, Helvetica, sans-serif; font-size: 1.28em; line-height: 0; letter-spacing: -0.01em; position: relative; top: -0.094em; }   /* cap height and baseline match the pixel "Tr" */
.rt-word span.l { opacity: 0; }
.rt-word span.l.on { opacity: 1; }