:root {
  --apms-launch-charcoal: #14171e;
  --apms-launch-steel: #1e232a;
  --apms-launch-orange: #ff5a00;
}

html[data-apms-launch="show"],
html[data-apms-launch="show"] body,
html[data-apms-launch="transition"],
html[data-apms-launch="transition"] body {
  overflow: hidden;
  background: var(--apms-launch-charcoal);
}

.apms-launch {
  position: fixed;
  inset: 0;
  z-index: 2147483646;
  box-sizing: border-box;
  display: grid;
  min-width: 100vw;
  min-height: 100vh;
  min-height: 100dvh;
  place-items: center;
  overflow: hidden;
  padding: 0;
  background: var(--apms-launch-charcoal);
  opacity: 1;
  visibility: visible;
  transition: opacity 210ms ease-in-out, visibility 210ms step-end;
}

html[data-apms-launch="skip"] .apms-launch,
.apms-launch.is-removed {
  display: none;
}

html[data-apms-launch="transition"] .apms-launch {
  display: none;
}

html[data-apms-launch="transition"] {
  --apms-skeleton-surface: #303741;
  --apms-skeleton-highlight: rgba(255, 255, 255, 0.1);
  --apms-skeleton-line: #424b57;
}

html[data-theme="light"][data-apms-launch="transition"] {
  --apms-skeleton-surface: #ffffff;
  --apms-skeleton-highlight: rgba(21, 25, 31, 0.08);
  --apms-skeleton-line: #dce1e6;
}

html[data-theme="light"][data-apms-launch="transition"],
html[data-theme="light"][data-apms-launch="transition"] body {
  background: #e8ebee;
}

html[data-apms-launch="transition"] body[data-apms-module] main,
html[data-apms-launch="transition"] body[data-apms-module] .workspace-tabs {
  pointer-events: none;
  user-select: none;
}

[data-apms-skeleton] {
  display: none !important;
}

html[data-apms-launch="transition"] .metric[data-apms-skeleton] {
  display: flex !important;
}

html[data-apms-launch="transition"] .capture-row[data-apms-skeleton] {
  display: grid !important;
}

html[data-apms-launch="transition"] .flow-step[data-apms-skeleton] {
  display: block !important;
}

html[data-apms-launch="transition"] body[data-apms-module="capture"] :is(
  .system-card .dashboard-heading,
  .context-item,
  .tabs .tab,
  #capture > .section-heading,
  .quick-action,
  .pipeline-card > .section-heading,
  .pipeline-stage
),
html[data-apms-launch="transition"] body[data-apms-module="knowledge"] :is(
  .workspace-tabs button,
  .rail-heading,
  .capture-rail > .search-control,
  .rail-summary,
  .capture-row,
  .empty-symbol,
  .empty-state h2,
  .empty-state p
),
html[data-apms-launch="transition"] body[data-apms-module="operations"] :is(
  .command-band > div:first-child,
  .command-controls,
  .scope-controls label,
  .section-nav button,
  .status-band,
  .metric,
  .content-band > header,
  .flow-step
) {
  overflow: hidden !important;
  border-color: var(--apms-skeleton-line) !important;
  background-color: var(--apms-skeleton-surface) !important;
  background-image: linear-gradient(
    100deg,
    transparent 20%,
    var(--apms-skeleton-highlight) 46%,
    transparent 72%
  ) !important;
  background-position: 130% 0 !important;
  background-size: 240% 100% !important;
  box-shadow: none !important;
  color: transparent !important;
  animation: apms-layout-shimmer 980ms ease-in-out infinite !important;
}

html[data-apms-launch="transition"] body[data-apms-module="capture"] :is(
  .system-card .dashboard-heading,
  .context-item,
  .tabs .tab,
  #capture > .section-heading,
  .quick-action,
  .pipeline-card > .section-heading,
  .pipeline-stage
) *,
html[data-apms-launch="transition"] body[data-apms-module="knowledge"] :is(
  .workspace-tabs button,
  .rail-heading,
  .capture-rail > .search-control,
  .rail-summary,
  .capture-row,
  .empty-symbol,
  .empty-state h2,
  .empty-state p
) *,
html[data-apms-launch="transition"] body[data-apms-module="operations"] :is(
  .command-band > div:first-child,
  .command-controls,
  .scope-controls label,
  .section-nav button,
  .status-band,
  .metric,
  .content-band > header,
  .flow-step
) * {
  visibility: hidden !important;
}

html[data-apms-launch="transition"] body[data-apms-module="knowledge"] .capture-list {
  min-height: 340px;
}

html[data-apms-launch="transition"] body[data-apms-module="operations"] .metric-grid {
  min-height: 250px;
}

.apms-launch.is-exiting {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.apms-launch__art {
  position: relative;
  box-sizing: border-box;
  width: min(100vw, 560px, 76dvh);
  aspect-ratio: 1;
  overflow: hidden;
  transform: scale(0.96);
  opacity: 1;
  animation: apms-launch-enter 900ms ease-in-out forwards;
  isolation: isolate;
}

.apms-launch__logo {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  user-select: none;
  -webkit-user-drag: none;
}

.apms-launch__bubbles {
  position: absolute;
  z-index: 3;
  inset: 0;
  overflow: visible;
  background: transparent;
  pointer-events: none;
}

.apms-launch__bubbles .apms-atom {
  position: absolute;
  left: var(--bubble-left);
  top: var(--bubble-top);
  box-sizing: border-box;
  display: block;
  width: var(--bubble-size);
  aspect-ratio: 1;
  border: 0;
  border-radius: 50%;
  background: var(--bubble-colour);
  box-shadow: 0 0 8px color-mix(in srgb, var(--bubble-colour) 44%, transparent);
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.18);
  will-change: transform, opacity;
  animation: apms-molecule-pop 640ms cubic-bezier(0.2, 0.72, 0.26, 1) var(--bubble-delay) both;
}

.apms-launch__bubbles .apms-atom--s {
  --bubble-left: 50%;
  --bubble-top: 50%;
  --bubble-size: 8%;
  --bubble-colour: rgb(255, 193, 7);
  --bubble-delay: 0ms;
}

.apms-launch__bubbles .apms-atom--o1 {
  --bubble-left: 39%;
  --bubble-top: 34%;
  --bubble-size: 5.2%;
  --bubble-colour: rgb(255, 73, 61);
  --bubble-delay: 50ms;
}

.apms-launch__bubbles .apms-atom--o2 {
  --bubble-left: 64%;
  --bubble-top: 34%;
  --bubble-size: 5.8%;
  --bubble-colour: rgb(255, 73, 61);
  --bubble-delay: 75ms;
}

.apms-launch__bubbles .apms-atom--o3 {
  --bubble-left: 30%;
  --bubble-top: 54%;
  --bubble-size: 5.2%;
  --bubble-colour: rgb(255, 73, 61);
  --bubble-delay: 100ms;
}

.apms-launch__bubbles .apms-atom--o4 {
  --bubble-left: 62%;
  --bubble-top: 68%;
  --bubble-size: 5.8%;
  --bubble-colour: rgb(255, 73, 61);
  --bubble-delay: 125ms;
}

.apms-launch__bubbles .apms-atom--h1 {
  --bubble-left: 18%;
  --bubble-top: 59%;
  --bubble-size: 3.4%;
  --bubble-colour: rgb(216, 221, 227);
  --bubble-delay: 155ms;
}

.apms-launch__bubbles .apms-atom--h2 {
  --bubble-left: 72%;
  --bubble-top: 79%;
  --bubble-size: 3.4%;
  --bubble-colour: rgb(216, 221, 227);
  --bubble-delay: 180ms;
}

@keyframes apms-launch-enter {
  from {
    transform: scale(0.96);
  }
  to {
    transform: scale(1);
  }
}

@keyframes apms-molecule-pop {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.18);
  }
  18% {
    opacity: 0.32;
    transform: translate(-50%, -50%) scale(0.82);
  }
  36% {
    opacity: 0.4;
    transform: translate(-50%, -50%) scale(1);
  }
  66% {
    opacity: 0.4;
    transform: translate(-50%, -50%) scale(1.04);
  }
  82% {
    opacity: 0.18;
    transform: translate(-50%, -50%) scale(1.56);
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(1.9);
  }
}

@keyframes apms-layout-shimmer {
  to { background-position: -130% 0; }
}

@media (prefers-reduced-motion: reduce) {
  .apms-launch,
  .apms-launch__art {
    transition: none;
    animation: none;
  }

  .apms-launch__art {
    transform: none;
    opacity: 1;
  }

  .apms-launch__bubbles { display: none; }

  html[data-apms-launch="transition"] body[data-apms-module] * {
    animation: none !important;
  }
}
