/* Ported from apps/desktop/web/index.html. Shared by independently deployed web apps. */
/* Splash accent follows the active brand: Flutter persists the resolved
       accent to localStorage (pinky.brand.accent) after each boot; the script
       below applies it. Default = neutral grey (first boot, before anything
       is persisted — never the built-in brand identity). */
#pinky-splash {
  /* Neutral grey until a cached brand accent is applied by the script
         below — cold browsers (and storage-blocked ones) must not flash the
         built-in brand identity. */
  --sp-a: #8e8e99;
  position: fixed;
  inset: 0;
  z-index: 99999;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background:
    radial-gradient(
      60% 60% at 50% 42%,
      color-mix(in srgb, var(--sp-a) 14%, transparent),
      rgba(15, 19, 24, 0) 70%
    ),
    #121014;
  font-family:
    -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  transition: opacity 0.6s ease;
}
#pinky-splash .halo {
  position: absolute;
  width: 360px;
  height: 360px;
  border-radius: 50%;
  background: radial-gradient(
    circle,
    color-mix(in srgb, var(--sp-a) 22%, transparent),
    transparent 68%
  );
  filter: blur(8px);
  animation: pinky-halo 3.2s ease-in-out infinite;
}
#pinky-splash img {
  width: 132px;
  height: auto;
  position: relative;
  animation: pinky-breathe 2.6s ease-in-out infinite;
}
#pinky-splash .label {
  margin-top: 30px;
  position: relative;
  color: color-mix(in srgb, var(--sp-a) 55%, #ffffff);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.3px;
  opacity: 0.92;
  transition: opacity 0.35s ease;
}
#pinky-splash .bar {
  margin-top: 16px;
  position: relative;
  width: 168px;
  height: 3px;
  border-radius: 3px;
  background: color-mix(in srgb, var(--sp-a) 14%, transparent);
  overflow: hidden;
}
#pinky-splash .bar::after {
  content: "";
  position: absolute;
  top: 0;
  left: -40%;
  height: 100%;
  width: 40%;
  border-radius: 3px;
  background: linear-gradient(90deg, transparent, var(--sp-a), transparent);
  animation: pinky-sweep 1.25s ease-in-out infinite;
}
/* The artwork itself stays neutral (grey/white wireframe); only the glow,
       halo and loader carry the brand accent. */
@keyframes pinky-breathe {
  0%,
  100% {
    transform: scale(1);
    filter: drop-shadow(
        0 0 18px color-mix(in srgb, var(--sp-a) 45%, transparent)
      )
      drop-shadow(0 0 50px color-mix(in srgb, var(--sp-a) 28%, transparent));
  }
  50% {
    transform: scale(1.06);
    filter: drop-shadow(
        0 0 30px color-mix(in srgb, var(--sp-a) 75%, transparent)
      )
      drop-shadow(0 0 80px color-mix(in srgb, var(--sp-a) 50%, transparent));
  }
}
@keyframes pinky-halo {
  0%,
  100% {
    transform: scale(0.92);
    opacity: 0.65;
  }
  50% {
    transform: scale(1.08);
    opacity: 1;
  }
}
@keyframes pinky-fade {
  0%,
  100% {
    opacity: 0.55;
  }
  50% {
    opacity: 1;
  }
}
@keyframes pinky-sweep {
  0% {
    left: -40%;
  }
  100% {
    left: 100%;
  }
}