/* Questor | staged welcome screen for MAUI Blazor Hybrid.
   Local PNG + SVG viewport masks + one-shot CSS animations. No JS runtime.
   Namespace all rules to avoid changing Bootstrap or the rest of the app. */
.qs-root {
  --qs-navy: #041e31;
  --qs-safe-top: var(--q-status-safe-top, 34px);
  --qs-safe-right: env(safe-area-inset-right, 0px);
  --qs-safe-bottom: var(--q-navigation-safe-bottom, 48px);
  --qs-safe-left: env(safe-area-inset-left, 0px);
  position: fixed;
  inset: 0;
  z-index: 1000;
  box-sizing: border-box;
  display: grid;
  place-items: center;
  overflow: auto;
  overscroll-behavior: contain;
  padding: var(--qs-safe-top) var(--qs-safe-right) var(--qs-safe-bottom) var(--qs-safe-left);
  background: var(--qs-navy);
  color: #fff8ef;
  font-family: Arial, Helvetica, sans-serif;
  isolation: isolate;
}
.qs-root *, .qs-root *::before, .qs-root *::after { box-sizing: border-box; }
.qs-stage {
  position: relative;
  width: min(100%, calc((100vh - var(--qs-safe-top) - var(--qs-safe-bottom)) * 841 / 1870));
  width: min(100%, calc((100dvh - var(--qs-safe-top) - var(--qs-safe-bottom)) * 841 / 1870));
  aspect-ratio: 841 / 1870;
  flex: none;
  overflow: hidden;
  border-radius: 5.2% / 2.34%;
  background: var(--qs-navy);
  container-type: inline-size;
}
.qs-scene, .qs-final {
  position: absolute;
  display: block;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  user-select: none;
}
.qs-scene { opacity: 0; }
.qs-final { object-fit: contain; opacity: 0; z-index: 1; }
.qs-header, .qs-card-cluster, .qs-title, .qs-tagline, .qs-badge, .qs-spark {
  transform-box: view-box;
  opacity: 0;
}
.qs-card-cluster { transform-origin: 420px 760px; }
.qs-badge { transform-origin: 665px 590px; }
.qs-title { transform-origin: 420px 1240px; }
.qs-shine { opacity: 0; }
.qs-ready .qs-scene { opacity: 1; }
.qs-ready .qs-header { animation: qs-header-in 450ms ease-out both; }
.qs-ready .qs-card-cluster { animation: qs-cards-in 1050ms 100ms cubic-bezier(.18,.75,.2,1) both; }
.qs-ready .qs-badge { animation: qs-badge-in 700ms 610ms cubic-bezier(.2,.8,.25,1) both; }
.qs-ready .qs-title { animation: qs-title-in 700ms 650ms cubic-bezier(.2,.7,.2,1) both; }
.qs-ready .qs-tagline { animation: qs-text-in 620ms 930ms ease-out both; }
.qs-ready .qs-spark { animation: qs-particle-in 1100ms ease-out both; }
.qs-ready .qs-spark-1 { animation-delay: 300ms; }
.qs-ready .qs-spark-2 { animation-delay: 450ms; }
.qs-ready .qs-spark-3 { animation-delay: 650ms; }
.qs-ready .qs-spark-4 { animation-delay: 820ms; }
.qs-ready .qs-shine { animation: qs-shine-pass 1000ms 950ms ease-in-out both; }
/* Settle onto the unmodified original: no permanent seams or missing pixels.
   Entrance finishes at 2.4 seconds. There is no repeating idle animation. */
.qs-ready .qs-final { animation: qs-settle 350ms 2050ms ease-out both; }
.qs-start {
  appearance: none;
  -webkit-tap-highlight-color: transparent;
  position: absolute;
  z-index: 2;
  left: 9.92%;
  top: 85.78%;
  width: 80.27%;
  height: 5.5%;
  min-height: 44px;
  margin: 0;
  border: 1px solid #fa8024;
  border-radius: 4.6% / 30%;
  background: linear-gradient(108deg, #fa7410, #fa6902 53%, #f77918);
  color: #fffaf4;
  font: 700 20px/1 Arial, Helvetica, sans-serif;
  font-size: clamp(16px, 4.58cqw, 40px);
  display: grid;
  place-items: center;
  cursor: pointer;
  touch-action: manipulation;
  opacity: 0;
  transition: filter 140ms ease, box-shadow 140ms ease;
}
.qs-ready .qs-start { animation: qs-button-in 650ms 1220ms cubic-bezier(.18,.75,.2,1) both; }
.qs-start:hover:not(:disabled) { filter: brightness(1.06); }
.qs-start:active:not(:disabled) { filter: brightness(.94); }
.qs-start:focus-visible { outline: 3px solid #fff4d8; outline-offset: 4px; }
.qs-start:disabled { cursor: default; filter: saturate(.6); }
.qs-start-label { display: block; }
.qs-fallback {
  position: absolute;
  inset: 15% 7% 25%;
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 12px;
  text-align: center;
  z-index: 2;
}
.qs-fallback strong { font: 700 52px/1.15 Georgia, serif; }
.qs-fallback p { max-width: 28em; margin: 0; line-height: 1.5; color: #b4c6d3; }
.qs-ready .qs-fallback { display: none; }
.qs-image-error .qs-fallback { display: grid; }
.qs-image-error .qs-scene, .qs-image-error .qs-final { display: none; }
.qs-image-error .qs-start { opacity: 1; transform: none; animation: none; }
.qs-sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
.qs-operation-error {
  position: absolute;
  z-index: 3;
  left: 8%; right: 8%; bottom: 15%;
  padding: 12px 16px;
  color: #fff;
  background: #742d25;
  border: 1px solid #f6a885;
  border-radius: 10px;
  font-size: 14px;
  line-height: 1.4;
}
@keyframes qs-header-in { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: none; } }
@keyframes qs-cards-in {
  0% { opacity: 0; transform: translateY(88px) scale(.91) rotate(-3deg); }
  72% { opacity: 1; transform: translateY(-8px) scale(1.006) rotate(.3deg); }
  100% { opacity: 1; transform: none; }
}
@keyframes qs-badge-in {
  0% { opacity: 0; transform: translate(12px, 16px) scale(.55) rotate(-17deg); }
  66% { opacity: 1; transform: scale(1.065) rotate(3deg); }
  100% { opacity: 1; transform: none; }
}
@keyframes qs-title-in {
  from { opacity: 0; transform: translateY(29px) scale(.98); }
  to { opacity: 1; transform: none; }
}
@keyframes qs-text-in { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes qs-particle-in {
  from { opacity: 0; transform: translateY(24px); }
  to { opacity: 1; transform: none; }
}
@keyframes qs-shine-pass {
  0% { opacity: 0; transform: translateX(200px); }
  25%, 65% { opacity: .64; }
  100% { opacity: 0; transform: translateX(1090px); }
}
@keyframes qs-button-in { from { opacity: 0; transform: translateY(18%); } to { opacity: 1; transform: none; } }
@keyframes qs-settle { from { opacity: 0; } to { opacity: 1; } }
/* There is an explicit opt-out even if the embedded WebView doesn't expose
   Android's accessibility preference through the media query. */
.qs-reduced-motion *, .qs-reduced-motion *::before, .qs-reduced-motion *::after {
  animation: none !important; transition: none !important;
}
.qs-reduced-motion.qs-ready .qs-final, .qs-reduced-motion.qs-ready .qs-start { opacity: 1; transform: none; }
.qs-reduced-motion .qs-scene { display: none; }
@media (prefers-reduced-motion: reduce) {
  .qs-root *, .qs-root *::before, .qs-root *::after { animation: none !important; transition: none !important; }
  .qs-ready .qs-final, .qs-ready .qs-start { opacity: 1; transform: none; }
  .qs-scene { display: none; }
}
/* Very short / landscape screens retain a readable portrait composition and
   scroll instead of shrinking the touch target to an unusable size. */
@media (max-height: 600px) {
  .qs-root { align-items: start; }
  .qs-stage { width: min(100%, 320px); }
}