/* Turn the login header (#kc-header-wrapper, the keycloak.v2 brand slot) into
   the mount point for the 3D monitor canvas that monitor.js draws.

   Image-replacement, not display:none: the displayNameHtml text stays in the
   DOM (screen readers still announce "Noisebridge") but is pushed out of view.
   text-indent only moves in-flow content, so the absolutely positioned canvas
   is unaffected by it. The text-align override is load-bearing: keycloak.v2's
   styles.css centres this text, and a centred line box wider than the
   container overhangs on the left and stays visible despite the indent. Left
   alignment puts the whole line past the right edge, where overflow clips it.

   logo.gif stays as the background: it is what shows when JS is off or WebGL2
   is unavailable, and monitor.js clears it once the canvas is up. The url() is
   relative to THIS file's served location
   (/resources/<version>/login/noisebridge/css/login.css), so it resolves to
   the theme's img/ dir without hardcoding the Keycloak resources-version hash
   — it stays correct across Keycloak upgrades. Sized 112px rather than
   `contain` so the fallback renders at the gif's native resolution. */
#kc-header-wrapper {
  position: relative;
  display: block;
  /* Wider than it is tall on purpose: the shader divides uv.x by the canvas
     aspect ratio, so extra width buys horizontal field of view rather than
     stretching anything. At a square 160px the cabinet's corners clipped the
     left and right edges at full yaw. Height sets the apparent size (vertical
     field of view is fixed), so it stays at 160. */
  width: 200px;
  height: 160px;
  margin: 0 auto;
  background: url(../img/logo.gif) center / 112px no-repeat;
  text-indent: 100%;
  text-align: left;
  white-space: nowrap;
  overflow: hidden;
}

#kc-header-wrapper canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  /* The bub reacts to clicks (the :O face), so advertise it as clickable.
     On the canvas rather than the wrapper so the no-JS/WebGL2 logo.gif
     fallback keeps the default cursor. */
  cursor: pointer;
}

/* The gif sat flush against the login card; the monitor needs room to breathe.
   Put the gap on #kc-header, not the wrapper — the wrapper's bottom margin
   would collapse (or not) through #kc-header depending on whether PatternFly's
   .pf-v5-c-login__main makes it a flex item, and that is not worth depending on. */
#kc-header {
  margin-bottom: 1.5rem;
}

/* Tiled page background. keycloak.v2's styles.css sets
   `.login-pf body { background: var(--keycloak-bg-logo-url) no-repeat center
   center fixed; background-size: cover; }` — the shorthand is what forces the
   single centred image, so overriding it with the same selector (equal
   specificity, our stylesheet loads last) is enough to get x-y repetition, and
   the shorthand also resets background-size back to auto so the gif tiles at
   its native 368x232 rather than being scaled to cover. */
.login-pf body {
  background: url(../img/life.gif) repeat;
}