/* Full-screen Arca launch splash — guards + optional HTML boot layer (#boot-splash).
   Keep `public/branding/arca-app-splash.css` in sync (copy from this file for instant HTML paint). */


.arca-app-splash {
  --arca-splash-peach: #fad4aa;
  --arca-splash-teal: #01af9d;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 100dvh;
  min-height: 100vh;
  overflow: hidden;
  background: radial-gradient(ellipse 88% 70% at 50% 40%, #1e1e22 0%, #141415 48%, #0a0a0b 100%);
  font-family: "Urbanist", system-ui, -apple-system, sans-serif;
}

.arca-app-splash::before {
  content: "";
  position: absolute;
  inset: -45%;
  background:
    radial-gradient(circle at 28% 38%, rgba(250, 212, 170, 0.09) 0%, transparent 42%),
    radial-gradient(circle at 72% 62%, rgba(1, 175, 157, 0.06) 0%, transparent 40%);
  animation: arca-splash-ambient 10s ease-in-out infinite alternate;
  pointer-events: none;
}

.arca-app-splash::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 50%, transparent 0%, rgba(0, 0, 0, 0.35) 100%);
  pointer-events: none;
}

@keyframes arca-splash-ambient {
  from {
    transform: translate(-2.5%, -1%) rotate(-2deg) scale(1);
  }
  to {
    transform: translate(2%, 1.5%) rotate(2deg) scale(1.03);
  }
}

.arca-app-splash__brand {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 22px;
  padding: 0 24px;
}

.arca-app-splash__hero {
  position: relative;
  width: 132px;
  height: 132px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.arca-app-splash__mark-wrap {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: arca-splash-mark 2.5s cubic-bezier(0.45, 0, 0.55, 1) infinite;
}

.arca-app-splash__mark-wrap::before {
  content: "";
  position: absolute;
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(250, 212, 170, 0.22) 0%, transparent 70%);
  animation: arca-splash-glow 2.5s ease-in-out infinite;
}

@keyframes arca-splash-glow {
  0%,
  100% {
    opacity: 0.65;
    transform: scale(0.92);
  }
  50% {
    opacity: 1;
    transform: scale(1.08);
  }
}

@keyframes arca-splash-mark {
  0%,
  100% {
    transform: scale(1);
    filter: drop-shadow(0 0 14px rgba(250, 212, 170, 0.2));
  }
  50% {
    transform: scale(1.06);
    filter: drop-shadow(0 0 22px rgba(250, 212, 170, 0.38));
  }
}

.arca-app-splash__mark {
  position: relative;
  display: block;
  width: 52px;
  height: auto;
}

.arca-app-splash__word {
  position: relative;
  display: block;
  height: 14px;
  width: auto;
  max-width: min(200px, 52vw);
  opacity: 0.94;
  animation: arca-splash-word 2.5s ease-in-out infinite;
}

@keyframes arca-splash-word {
  0%,
  100% {
    opacity: 0.85;
    transform: translateY(1px);
  }
  50% {
    opacity: 1;
    transform: translateY(0);
  }
}

.arca-app-splash__orbit {
  position: absolute;
  inset: 0;
  margin: auto;
  width: 132px;
  height: 132px;
  border-radius: 50%;
  border: 1px solid rgba(250, 212, 170, 0.12);
  animation: arca-splash-orbit 4.5s linear infinite;
}

.arca-app-splash__orbit::after {
  content: "";
  position: absolute;
  top: -2px;
  left: 50%;
  width: 5px;
  height: 5px;
  margin-left: -2.5px;
  border-radius: 50%;
  background: var(--arca-splash-teal);
  box-shadow: 0 0 10px rgba(1, 175, 157, 0.65);
}

@keyframes arca-splash-orbit {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

.arca-app-splash__rail {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 7px;
  margin-top: 28px;
}

.arca-app-splash__rail span {
  display: block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: rgba(250, 212, 170, 0.35);
  animation: arca-splash-dot 1.15s ease-in-out infinite;
}

.arca-app-splash__rail span:nth-child(2) {
  animation-delay: 0.18s;
}

.arca-app-splash__rail span:nth-child(3) {
  animation-delay: 0.36s;
}

@keyframes arca-splash-dot {
  0%,
  75%,
  100% {
    transform: scale(0.55);
    opacity: 0.28;
  }
  35% {
    transform: scale(1);
    opacity: 1;
    background: rgba(250, 212, 170, 0.95);
  }
}

/* HTML boot layer — fixed overlay until React tears it down */
#boot-splash.arca-app-splash {
  position: fixed;
  inset: 0;
  z-index: 2147483000;
}

#boot-splash.arca-app-splash--exit {
  pointer-events: none;
  animation: arca-boot-fade 0.72s cubic-bezier(0.33, 1, 0.35, 1) forwards;
}

@keyframes arca-boot-fade {
  0% {
    opacity: 1;
    transform: scale(1);
    filter: blur(0);
  }
  100% {
    opacity: 0;
    visibility: hidden;
    transform: scale(1.018);
    filter: blur(1px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .arca-app-splash::before,
  .arca-app-splash__mark-wrap,
  .arca-app-splash__mark-wrap::before,
  .arca-app-splash__word,
  .arca-app-splash__orbit,
  .arca-app-splash__rail span {
    animation: none !important;
  }

  .arca-app-splash__mark-wrap {
    filter: drop-shadow(0 0 12px rgba(250, 212, 170, 0.25));
  }

  .arca-app-splash__word {
    opacity: 1;
  }

  #boot-splash.arca-app-splash--exit {
    animation: none;
    opacity: 0;
    visibility: hidden;
    transform: none;
    filter: none;
  }
}