:root {
  --atlas-splash-ink: #10213d;
  --atlas-splash-blue: #1a2b4c;
  --atlas-splash-cyan: #00b4db;
  --atlas-splash-sky: #8af4ff;
  --atlas-splash-paper: #f8fafc;
  --atlas-splash-soft: #eaf7fb;
}

.atlas-splash-lock,
.atlas-splash-lock body {
  overflow: hidden;
}

.atlas-prelogin-splash {
  position: fixed;
  inset: 0;
  z-index: 99999;
  display: grid;
  place-items: center;
  padding: max(24px, env(safe-area-inset-top)) max(18px, env(safe-area-inset-right)) max(24px, env(safe-area-inset-bottom)) max(18px, env(safe-area-inset-left));
  color: var(--atlas-splash-ink);
  background:
    radial-gradient(circle at 15% 20%, rgba(241, 229, 199, .72), transparent 24rem),
    radial-gradient(circle at 78% 22%, rgba(170, 234, 243, .55), transparent 28rem),
    linear-gradient(135deg, #fbfcff 0%, #eef8fb 48%, #f8fafc 100%);
  isolation: isolate;
  opacity: 1;
  transition: opacity .62s ease, visibility .62s ease;
  overflow: hidden;
}

.atlas-prelogin-splash::before {
  content: "";
  position: absolute;
  inset: -12%;
  z-index: -2;
  background:
    linear-gradient(105deg, transparent 0 28%, rgba(255,255,255,.64) 38%, transparent 50% 100%),
    radial-gradient(circle at 84% 72%, rgba(15, 23, 42, .16), transparent 18rem);
  filter: blur(2px);
  animation: atlas-splash-light 3.6s ease-in-out both;
}

.atlas-prelogin-splash::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image:
    radial-gradient(circle, rgba(0, 180, 219, .18) 0 1px, transparent 1.6px),
    radial-gradient(circle, rgba(26, 43, 76, .08) 0 1px, transparent 1.8px);
  background-size: 74px 74px, 132px 132px;
  mask-image: radial-gradient(circle at center, black, transparent 72%);
  opacity: .46;
}

.atlas-prelogin-splash.is-leaving {
  opacity: 1;
  visibility: visible;
  pointer-events: none;
}

.atlas-prelogin-splash.is-leaving .atlas-splash-scene,
.atlas-prelogin-splash.is-leaving .atlas-splash-copy,
.atlas-prelogin-splash.is-leaving .atlas-splash-skip {
  opacity: 0;
  transition: opacity .16s ease;
}

.atlas-splash-scene {
  position: relative;
  width: min(72vw, 560px);
  aspect-ratio: 1.36;
  display: grid;
  place-items: center;
  transform: translateY(-14px);
}

.atlas-splash-device {
  position: relative;
  width: min(100%, 510px);
  aspect-ratio: 9 / 14;
  max-height: min(58vh, 530px);
  border-radius: 44px;
  padding: 13px;
  background: linear-gradient(145deg, rgba(18, 29, 52, .93), rgba(9, 14, 28, .98));
  box-shadow:
    0 34px 90px rgba(17, 31, 54, .26),
    18px 0 48px rgba(4, 10, 24, .18),
    inset 0 0 0 1px rgba(255,255,255,.18);
  transform: perspective(1200px) rotate(-7deg) rotateY(-13deg) scale(.9);
  animation: atlas-device-in 3.25s cubic-bezier(.2,.8,.2,1) both;
}

.atlas-splash-device::before {
  content: "";
  position: absolute;
  top: 7px;
  left: 50%;
  width: 86px;
  height: 18px;
  border-radius: 0 0 16px 16px;
  background: #0b1224;
  transform: translateX(-50%);
  opacity: .88;
}

.atlas-splash-screen {
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
  border-radius: 34px;
  background:
    radial-gradient(circle at 50% 42%, rgba(0,180,219,.12), transparent 12rem),
    linear-gradient(180deg, #ffffff 0%, #f5fbfd 100%);
  overflow: hidden;
}

.atlas-splash-compass {
  position: relative;
  width: min(72%, 310px);
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  animation: atlas-compass-settle 3.4s ease both;
}

.atlas-splash-compass::before,
.atlas-splash-compass::after {
  content: "";
  position: absolute;
  inset: 6%;
  border-radius: 50%;
}

.atlas-splash-compass::before {
  opacity: .38;
  background:
    repeating-conic-gradient(from -8deg, rgba(0, 131, 176, .38) 0 1.2deg, transparent 1.2deg 6deg);
  -webkit-mask: radial-gradient(circle, transparent 0 60%, #000 61% 64%, transparent 65%);
  mask: radial-gradient(circle, transparent 0 60%, #000 61% 64%, transparent 65%);
  animation: atlas-compass-ticks 2.8s ease both;
}

.atlas-splash-compass::after {
  border: 2px solid rgba(0, 131, 176, .18);
  box-shadow: inset 0 0 0 1px rgba(0, 180, 219, .08);
  transform: scale(.72);
  animation: atlas-compass-ring-in 2.45s ease .2s both;
}

.atlas-splash-ring {
  position: absolute;
  inset: 12%;
  border-radius: 50%;
  background: conic-gradient(from -90deg, transparent 0deg, transparent 42deg, rgba(0, 180, 219, .9) 74deg, rgba(26, 43, 76, .95) 120deg, transparent 174deg, rgba(0, 180, 219, .74) 262deg, transparent 330deg);
  -webkit-mask: radial-gradient(circle, transparent 0 72%, #000 73% 82%, transparent 83%);
  mask: radial-gradient(circle, transparent 0 72%, #000 73% 82%, transparent 83%);
  filter: drop-shadow(0 0 14px rgba(0, 180, 219, .5));
  animation: atlas-ring-draw 3.35s cubic-bezier(.22,.82,.2,1) both;
}

.atlas-splash-glow {
  position: absolute;
  width: 28%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,255,255,.95), rgba(138,244,255,.66) 35%, rgba(0,180,219,0) 70%);
  filter: blur(1px);
  mix-blend-mode: screen;
  offset-path: circle(42% at 50% 50%);
  animation: atlas-orbit-glow 3.5s cubic-bezier(.2,.8,.2,1) both;
}

.atlas-splash-compass img {
  position: relative;
  z-index: 2;
  width: 78%;
  height: auto;
  filter: drop-shadow(0 10px 20px rgba(14, 41, 79, .16));
  opacity: .18;
  transform: translateY(8px) scale(.91);
  animation: atlas-logo-reveal 2.05s cubic-bezier(.2,.82,.25,1) .16s both;
}

.atlas-splash-cardinal {
  position: absolute;
  z-index: 1;
  color: rgba(0, 131, 176, .54);
  font: 800 15px/1 Inter, ui-sans-serif, system-ui, sans-serif;
  letter-spacing: .08em;
  opacity: 0;
  animation: atlas-cardinal-in 1.4s ease 1.05s forwards;
}

.atlas-splash-cardinal.n { top: 0; left: 50%; transform: translateX(-50%); }
.atlas-splash-cardinal.e { right: -1%; top: 50%; transform: translateY(-50%); }
.atlas-splash-cardinal.s { bottom: 0; left: 50%; transform: translateX(-50%); }
.atlas-splash-cardinal.w { left: -1%; top: 50%; transform: translateY(-50%); }

.atlas-splash-spark,
.atlas-splash-star {
  position: absolute;
  display: block;
  border-radius: 999px;
  background: radial-gradient(circle, #ffffff 0 22%, #8af4ff 38%, rgba(0,180,219,0) 70%);
  filter: drop-shadow(0 0 8px rgba(0, 180, 219, .74));
  pointer-events: none;
}

.atlas-splash-spark {
  z-index: 4;
  width: 13px;
  height: 13px;
  opacity: 0;
}

.spark-1 { animation: atlas-spark-one 2.4s ease 1.35s both; }
.spark-2 { animation: atlas-spark-two 2.3s ease 1.65s both; }
.spark-3 { animation: atlas-spark-three 2.2s ease 1.9s both; }

.atlas-splash-orbit {
  position: absolute;
  border-radius: 50%;
  border: 1px solid rgba(0, 180, 219, .12);
  box-shadow: 0 0 42px rgba(0, 180, 219, .08);
  animation: atlas-orbit-pulse 3.6s ease-in-out infinite;
}

.atlas-splash-orbit-one { width: 74%; aspect-ratio: 1; }
.atlas-splash-orbit-two { width: 92%; aspect-ratio: 1; animation-delay: .55s; }

.atlas-splash-star {
  width: 42px;
  height: 42px;
  clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%);
  opacity: .52;
  animation: atlas-star-twinkle 2.8s ease-in-out infinite;
}

.star-1 { right: -4%; bottom: 18%; width: 34px; height: 34px; animation-delay: .2s; }
.star-2 { right: 6%; bottom: 4%; width: 26px; height: 26px; animation-delay: .9s; }
.star-3 { left: 2%; top: 20%; width: 18px; height: 18px; animation-delay: 1.35s; }

.atlas-splash-copy {
  position: absolute;
  left: 50%;
  bottom: max(36px, env(safe-area-inset-bottom));
  width: min(520px, calc(100vw - 36px));
  text-align: center;
  transform: translateX(-50%);
  animation: atlas-copy-in 1s ease .18s both;
}

.atlas-splash-eyebrow {
  margin: 0 0 7px;
  color: #0083b0;
  font: 800 11px/1 Inter, ui-sans-serif, system-ui, sans-serif;
  letter-spacing: .22em;
}

.atlas-splash-copy h1 {
  margin: 0;
  color: #13243e;
  font: 800 clamp(30px, 6vw, 54px)/1.02 Montserrat, Inter, ui-sans-serif, system-ui, sans-serif;
  letter-spacing: -.04em;
}

.atlas-splash-copy p:not(.atlas-splash-eyebrow) {
  min-height: 22px;
  margin: 10px 0 16px;
  color: #617083;
  font: 500 14px/1.45 Inter, ui-sans-serif, system-ui, sans-serif;
}

.atlas-splash-progress {
  width: min(320px, 72vw);
  height: 5px;
  margin: 0 auto;
  border-radius: 999px;
  background: rgba(15, 23, 42, .08);
  overflow: hidden;
}

.atlas-splash-progress i {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #1a2b4c, #00b4db, #8af4ff);
  transform-origin: left center;
  transform: scaleX(0);
  animation: atlas-progress 3.65s cubic-bezier(.25,.85,.22,1) .18s both;
}

.atlas-splash-skip {
  position: absolute;
  right: max(18px, env(safe-area-inset-right));
  bottom: max(18px, env(safe-area-inset-bottom));
  border: 1px solid rgba(15, 23, 42, .1);
  border-radius: 999px;
  padding: 9px 13px;
  color: #516173;
  background: rgba(255, 255, 255, .72);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  font: 700 12px/1 Inter, ui-sans-serif, system-ui, sans-serif;
  box-shadow: 0 10px 28px rgba(15, 23, 42, .09);
}

.atlas-splash-skip:hover {
  color: #10213d;
  transform: translateY(-1px);
}

.atlas-prelogin-splash.is-compact .atlas-splash-device,
.atlas-prelogin-splash.is-compact .atlas-splash-compass,
.atlas-prelogin-splash.is-compact .atlas-splash-ring,
.atlas-prelogin-splash.is-compact .atlas-splash-progress i {
  animation-duration: 1.28s;
}

@keyframes atlas-splash-light {
  0% { transform: translateX(-22%) rotate(-8deg); opacity: .12; }
  55% { opacity: .72; }
  100% { transform: translateX(16%) rotate(-8deg); opacity: .34; }
}

@keyframes atlas-device-in {
  0% { opacity: 0; transform: perspective(1200px) rotate(-10deg) rotateY(-22deg) translateY(30px) scale(.78); filter: blur(8px); }
  45% { opacity: 1; filter: blur(0); }
  100% { opacity: 1; transform: perspective(1200px) rotate(-7deg) rotateY(-13deg) translateY(0) scale(.9); }
}

@keyframes atlas-compass-settle {
  0% { transform: scale(.82) rotate(-9deg); }
  100% { transform: scale(1) rotate(0); }
}

@keyframes atlas-compass-ticks {
  0% { opacity: 0; transform: rotate(-18deg) scale(.72); }
  100% { opacity: .38; transform: rotate(0) scale(1); }
}

@keyframes atlas-compass-ring-in {
  0% { opacity: 0; transform: scale(.58); }
  100% { opacity: 1; transform: scale(1); }
}

@keyframes atlas-ring-draw {
  0% { opacity: 0; transform: rotate(-145deg) scale(.74); filter: drop-shadow(0 0 0 rgba(0, 180, 219, 0)); }
  42% { opacity: 1; }
  100% { opacity: 1; transform: rotate(352deg) scale(1); filter: drop-shadow(0 0 14px rgba(0, 180, 219, .5)); }
}

@keyframes atlas-orbit-glow {
  0% { opacity: 0; offset-distance: 0%; transform: scale(.48); }
  18% { opacity: 1; }
  74% { opacity: .86; transform: scale(1); }
  100% { opacity: 0; offset-distance: 100%; transform: scale(.7); }
}

@keyframes atlas-logo-reveal {
  0% { opacity: 0; transform: translateY(12px) scale(.88); filter: blur(8px) drop-shadow(0 0 0 rgba(0,180,219,0)); }
  48% { opacity: .92; filter: blur(0) drop-shadow(0 0 18px rgba(0,180,219,.28)); }
  100% { opacity: 1; transform: translateY(0) scale(1); filter: blur(0) drop-shadow(0 10px 20px rgba(14, 41, 79, .16)); }
}

@keyframes atlas-cardinal-in {
  0% { opacity: 0; }
  100% { opacity: 1; }
}

@keyframes atlas-spark-one {
  0% { opacity: 0; transform: translate(42px, 48px) scale(.2); }
  24% { opacity: 1; }
  100% { opacity: 0; transform: translate(126px, 78px) scale(1.15); }
}

@keyframes atlas-spark-two {
  0% { opacity: 0; transform: translate(-28px, -18px) scale(.2); }
  30% { opacity: 1; }
  100% { opacity: 0; transform: translate(68px, 28px) scale(1); }
}

@keyframes atlas-spark-three {
  0% { opacity: 0; transform: translate(16px, 88px) scale(.2); }
  24% { opacity: .9; }
  100% { opacity: 0; transform: translate(92px, 112px) scale(1); }
}

@keyframes atlas-orbit-pulse {
  0%, 100% { opacity: .22; transform: scale(.96); }
  50% { opacity: .55; transform: scale(1.04); }
}

@keyframes atlas-star-twinkle {
  0%, 100% { opacity: .18; transform: scale(.82) rotate(0deg); }
  50% { opacity: .68; transform: scale(1.04) rotate(12deg); }
}

@keyframes atlas-copy-in {
  0% { opacity: 0; transform: translate(-50%, 18px); }
  100% { opacity: 1; transform: translate(-50%, 0); }
}

@keyframes atlas-progress {
  0% { transform: scaleX(0); }
  62% { transform: scaleX(.78); }
  100% { transform: scaleX(1); }
}

@media (max-width: 720px) {
  .atlas-prelogin-splash {
    align-items: center;
    justify-items: center;
    grid-template-rows: 1fr auto;
  }

  .atlas-splash-scene {
    width: min(92vw, 420px);
    aspect-ratio: 1;
    transform: translateY(-24px);
  }

  .atlas-splash-device {
    width: min(78vw, 330px);
    max-height: 46vh;
    border-radius: 36px;
    padding: 10px;
    transform: perspective(1000px) rotate(-3deg) rotateY(-7deg) scale(.96);
  }

  .atlas-splash-screen {
    border-radius: 28px;
  }

  .atlas-splash-compass {
    width: 78%;
  }

  .atlas-splash-copy {
    bottom: max(74px, env(safe-area-inset-bottom));
  }

  .atlas-splash-skip {
    left: 50%;
    right: auto;
    transform: translateX(-50%);
  }

  .atlas-splash-skip:hover {
    transform: translateX(-50%) translateY(-1px);
  }
}

@media (max-width: 420px) {
  .atlas-splash-device {
    width: min(82vw, 300px);
  }

  .atlas-splash-copy h1 {
    font-size: 32px;
  }

  .atlas-splash-copy p:not(.atlas-splash-eyebrow) {
    font-size: 13px;
  }
}

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