/* Attendly launch splash. Only visible when <html class="sp-on"> (installed app, set by the head script). */
#sp { display: none; }

html.sp-on,
html.sp-on body { overflow: hidden !important; }

html.sp-on #sp {
  display: block;
  position: fixed;
  inset: 0;
  z-index: 2147483000;
  touch-action: none;
  -webkit-tap-highlight-color: transparent;
}

/* Real header logo + title stay hidden until the splash hands over to them. */
html.sp-on .topbar-brand { opacity: 0 !important; }

.sp-bg { position: absolute; inset: 0; background: #e9e8e4; }
.sp-fg { position: absolute; inset: 0; pointer-events: none; }

/* NED logo, centred. All later movement is done with transforms from this box. */
.sp-logo {
  --L: min(24vw, 110px);
  position: absolute;
  width: var(--L);
  height: var(--L);
  left: calc(50% - var(--L) / 2);
  top: calc(50% - var(--L) / 2);
  object-fit: contain;
  opacity: 0;
  will-change: transform;
  user-select: none;
  -webkit-user-drag: none;
}

/* Text lockup: children are laid out at the real header's natural size, then the whole box is scaled. */
.sp-lock {
  position: absolute;
  left: 0;
  top: 0;
  transform-origin: 0 0;
  will-change: transform;
}

.sp-ghost {
  position: absolute;
  margin: 0;
  white-space: nowrap;
  pointer-events: none;
  display: flex;
  align-items: center;
}

/* Shine layers: light only ever lands on the logo shape / text glyphs, never on empty background */
.sp-sheen {
  position: absolute;
  pointer-events: none;
  -webkit-mask: url("img/NED_logo.png") center / contain no-repeat;
          mask: url("img/NED_logo.png") center / contain no-repeat;
}
.sp-glint {
  color: transparent !important;
  -webkit-text-fill-color: transparent;
  -webkit-background-clip: text;
          background-clip: text;
}