.qbix-explore-transition {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: grid;
  place-items: center;
  min-height: 100dvh;
  background-color: var(--bg);
  background-image: radial-gradient(ellipse at 50% 48%, rgb(255 122 24 / 5%), transparent 48%), var(--page-gradient);
  opacity: 1;
  transition: opacity 180ms ease-out;
  touch-action: none;
}

.qbix-explore-transition[data-phase="leaving"] { opacity: 0; }

/* In-page loading leaves the mounted workspace toolbar available. */
.qbix-loading-inline {
  position: relative;
  inset: auto;
  z-index: auto;
  width: 100%;
  min-height: max(16rem, calc(100dvh - 12rem));
  background: none;
  touch-action: auto;
}

.qbix-explore-transition-content {
  display: grid;
  justify-items: center;
  padding: 32px;
  transform: translateY(-18px);
}

.qbix-loading-inline .qbix-explore-transition-content { transform: none; }

.qbix-explore-transition-brand {
  position: relative;
  width: clamp(120px, 20vw, 156px);
  aspect-ratio: 347.99 / 168.14;
}

.qbix-explore-transition-logo,
.qbix-explore-transition-highlight {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.qbix-explore-transition-logo { opacity: 0.65; }

.qbix-explore-transition-highlight {
  filter: drop-shadow(0 0 7px rgb(255 122 24 / 24%));
  mask-image: linear-gradient(90deg, transparent 28%, #000 46%, #000 54%, transparent 72%);
  mask-size: 300% 100%;
  animation: qbix-explore-stroke 1600ms ease-in-out infinite;
}

.qbix-explore-transition-halo {
  position: absolute;
  inset: -110% -55%;
  border-radius: 50%;
  background: radial-gradient(ellipse, rgb(255 122 24 / 12%), transparent 66%);
  animation: qbix-explore-glow 1600ms ease-in-out infinite alternate;
}

@keyframes qbix-explore-stroke {
  from { mask-position: 100% 0; }
  to { mask-position: 0% 0; }
}

@keyframes qbix-explore-glow {
  from { opacity: 0.45; transform: scale(0.92); }
  to { opacity: 0.8; transform: scale(1.04); }
}

/* The initial HTML layer survives runtime-config and React startup unchanged. */
html[data-qbix-starting] body > :not(#qbix-startup-loader) {
  visibility: hidden;
  pointer-events: none;
}

html[data-qbix-starting] { overflow: hidden; }

.qbix-startup-mark {
  display: block;
  width: 100%;
  height: 100%;
  background-color: #dc5014;
  mask: url("/brand/qbix-logo-white.svg") center / contain no-repeat;
}

:root[data-theme="dark"] .qbix-explore-transition-logo.qbix-startup-mark {
  background-color: #fff;
}