/* Shared geometry for HTML and React. Mirrors LaunchScreen constraints. */
:root { --startup-background: #f8fafc; --startup-text: #64748b; }
:root.dark { --startup-background: #0f172a; --startup-text: #cbd5e1; }
:root.art { --startup-background: #f7f1e4; --startup-text: #52666a; }
.startup-brand { position: absolute; width: 240px; height: 144px; left: 50%; top: 50%; transform: translate(-50%, -50%); }
#startup-bootstrap { position: fixed; inset: 0; background: var(--startup-background); }

.startup-activity { position: absolute; top: calc(50% + 66px); left: calc(50% - 56px); width: 112px; height: 3px; overflow: hidden; border-radius: 3px; background: rgb(139 92 246 / 12%); opacity: 0; transition: opacity 180ms ease; }
.startup-activity[data-active="true"] { opacity: 1; }
.startup-activity span { display: block; width: 34px; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #6366f1, #a855f7); }
.startup-activity[data-active="true"] span { animation: startup-activity-sweep 1400ms ease-in-out infinite; }
@keyframes startup-activity-sweep { from { transform: translateX(-34px); } to { transform: translateX(112px); } }
@media (prefers-reduced-motion: reduce) {
  .startup-activity { transition: none; }
  .startup-activity[data-active="true"] span { animation: none; transform: translateX(39px); }
}

/* Shared publisher lockup: identical geometry through native/bootstrap/React. */
.startup-publisher {
  position: absolute;
  width: 180px;
  height: 28px;
  left: calc(50% - 90px);
  bottom: calc(24px + env(safe-area-inset-bottom, 0px));
  object-fit: contain;
}