:root {
  --bg: #ffffff;
  --ink: #1c1633;
  --muted: #7a7690;
  --purple: #7c3fe0;
  --orange: #f4a23c;
  --red: #e0141c;
  --blue: #12aee8;
  --green: #14b35a;
  --ease: cubic-bezier(.22, 1, .36, 1);
}

*, *::before, *::after { box-sizing: border-box; margin: 0; }

html, body { height: 100%; }

body {
  background: var(--bg);
  color: var(--ink);
  font-family: "Sora", system-ui, -apple-system, "Segoe UI", sans-serif;
  -webkit-font-smoothing: antialiased;
  overflow: hidden;
  padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
}

.stage {
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.1rem;
  text-align: center;
  padding: 1.5rem;
}

/* ---------- logo ---------- */
.logo-wrap {
  position: relative;
  width: clamp(120px, 34vw, 180px);
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  margin-bottom: 1.2rem;
  animation: rise 1.1s var(--ease) both;
}

.logo {
  position: relative;
  width: 100%;
  height: auto;
  mix-blend-mode: multiply;           /* hides the png's white box */
  animation: float 5s ease-in-out 1.1s infinite;
}

.glow {
  position: absolute;
  inset: -22%;
  border-radius: 50%;
  background: conic-gradient(from 0deg, var(--red), var(--orange), var(--green), var(--blue), var(--purple), var(--red));
  filter: blur(38px);
  opacity: .28;
  animation: spin 9s linear infinite, breathe 4s ease-in-out infinite;
}

/* ---------- text ---------- */
.status {
  font-size: .85rem;
  font-weight: 300;
  letter-spacing: .04em;
  color: var(--muted);
  animation: rise 1s var(--ease) .25s both;
}

.status::after {
  content: "";
  display: inline-block;
  width: 1.2em;
  text-align: left;
  animation: dots 1.4s steps(4, end) infinite;
}

.number {
  font-size: clamp(2rem, 8vw, 3.2rem);
  font-weight: 600;
  letter-spacing: .02em;
  font-variant-numeric: tabular-nums;
  background: linear-gradient(100deg, var(--purple), var(--blue), var(--green), var(--orange), var(--red), var(--purple));
  background-size: 250% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: rise 1s var(--ease) .4s both, shine 6s linear 1.4s infinite;
}

/* ---------- progress ---------- */
.bar {
  width: min(220px, 60vw);
  height: 3px;
  border-radius: 3px;
  background: #eeeaf7;
  overflow: hidden;
  margin-top: .4rem;
  animation: rise 1s var(--ease) .55s both;
}

.bar i {
  display: block;
  height: 100%;
  width: 100%;
  transform-origin: left;
  transform: scaleX(0);
  background: linear-gradient(90deg, var(--purple), var(--blue), var(--green));
  transition: transform var(--dur, 3s) linear;
}

.bar.run i { transform: scaleX(1); }

/* ---------- button ---------- */
.btn {
  margin-top: .8rem;
  padding: .95rem 2.4rem;
  border-radius: 999px;
  background: var(--ink);
  color: #fff;
  text-decoration: none;
  font-size: .95rem;
  font-weight: 600;
  letter-spacing: .02em;
  transition: transform .35s var(--ease), box-shadow .35s var(--ease), background .35s;
  box-shadow: 0 10px 30px -12px rgba(124, 63, 224, .55);
  animation: rise 1s var(--ease) .7s both;
}

.btn:hover { transform: translateY(-3px); background: var(--purple); box-shadow: 0 16px 36px -12px rgba(124, 63, 224, .7); }
.btn:active { transform: scale(.97); }
.btn:focus-visible { outline: 3px solid var(--blue); outline-offset: 4px; }

/* ---------- keyframes ---------- */
@keyframes rise   { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes float  { 0%, 100% { transform: translateY(0) rotate(0); } 50% { transform: translateY(-10px) rotate(2deg); } }
@keyframes spin   { to { transform: rotate(360deg); } }
@keyframes breathe{ 0%, 100% { opacity: .2; scale: .94; } 50% { opacity: .38; scale: 1.06; } }
@keyframes shine  { to { background-position: -250% 0; } }
@keyframes dots   { 0% { content: ""; } 25% { content: "."; } 50% { content: ".."; } 75% { content: "..."; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}