/* Splash, built from Figma "Design file Volia" (390×844 frame): Splash (557:17254). */
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body { background: var(--page-bg); }
img { display: block; }

.screen {
  position: relative;
  width: 100%;
  max-width: 430px;
  height: 100%;
  min-height: 100dvh;
  margin: 0 auto;
  overflow: hidden;
  overflow: clip;
}
.bg { position: absolute; inset: 0; }
.bg img { width: 100%; height: 100%; object-fit: cover; object-position: top; }

/* The soft purple glow low on the left (Ellipse 740, its blur bleeding past the box) */
.glow {
  position: absolute;
  left: -419.73px; /* -152.53px minus the 57.55% bleed */
  bottom: -444.04px; /* top 346.3px in the frame; kept to the bottom edge on taller screens */
  width: 998.677px;
  height: 941.734px;
  pointer-events: none;
}
.glow img { width: 998.677px; height: 941.734px; }

/* Wordmark centred (157×62 at 119.91px, 348.26px in the frame) */
.logo {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 157.173px;
  height: 62.0932px;
  transform: translate(calc(-50% + 3.55px), calc(-50% - 42.72px));
  animation: logo-in 0.5s ease-out both;
}
/* Loading bar and tagline under the wordmark (web Splash 698:22865: 180×6 bar, #ddd6fb track, gradient fill) */
.loading {
  position: absolute;
  top: calc(50% + 28px);
  left: 50%;
  width: 150px;
  height: 6px;
  margin-left: -71.5px;
  overflow: hidden;
  border-radius: 99px;
  background: #ddd6fb;
}
.loading span {
  display: block;
  height: 100%;
  border-radius: 99px;
  background: linear-gradient(90deg, var(--primary-600), var(--primary-300));
  animation: load 1.6s cubic-bezier(0.4, 0, 0.6, 1) both;
}
@keyframes load { from { width: 0; } to { width: 100%; } }
.tagline {
  position: absolute;
  top: calc(50% + 50px);
  left: 0;
  right: 0;
  margin: 0;
  color: #7257d4;
  font: 500 14px/20px "Be Vietnam Pro", system-ui, sans-serif;
  text-align: center;
}
@keyframes logo-in { from { opacity: 0; transform: translate(calc(-50% + 3.55px), calc(-50% - 34.72px)); } }
@media (prefers-reduced-motion: reduce) { .logo, .loading span { animation: none; } }

/* Tablet and desktop: the wordmark, the bar and the tagline in the middle (Figma web 698:22865) */
@media (min-width: 768px) {
  .screen { max-width: none; }
  .glow { display: none; }
  .logo { width: 259.2px; height: 102.4px; transform: translate(-50%, -76px); animation: logo-in-wide 0.5s ease-out both; }
  .loading { top: calc(50% + 40px); width: 180px; margin-left: -90px; }
  .tagline { top: calc(50% + 66px); font-size: 15px; line-height: 19px; }
}
@keyframes logo-in-wide { from { opacity: 0; transform: translate(-50%, -68px); } }
@media (prefers-reduced-motion: reduce) { .logo { animation: none; } }