.app-splash {
  position: fixed;
  inset: 0;
  z-index: 2147483647;
  display: grid;
  place-items: center;
  background:
    radial-gradient(84% 58% at 50% 38%, rgba(63, 242, 184, .13), transparent 62%),
    radial-gradient(120% 80% at 50% 26%, #0C1B12 0%, #08120D 58%, #050C08 100%);
  transition: opacity .38s ease, visibility .38s ease;
}

.splash-seen .app-splash {
  display: none;
}

.app-splash.hide {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

/* Green light particles reveal the brand mark. */
.splash-fx {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
}

.app-splash-inner {
  position: relative;
  z-index: 1;
  width: min(320px, 72vw);
  display: grid;
  justify-items: center;
  gap: 22px;
  transform: translateY(-2vh);
}

/* The S logo (transparent) assembles where the particles converge */
.splash-logo-wrap {
  position: relative;
  display: grid;
  place-items: center;
  width: min(168px, 44vw);
  height: min(168px, 44vw);
}

/* Soft bloom of light that flashes the instant the S forms */
.splash-bloom {
  position: absolute;
  width: 190%;
  height: 190%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(63, 242, 184, .55) 0%, rgba(63, 242, 184, .16) 38%, transparent 66%);
  opacity: 0;
  transform: scale(.35);
  pointer-events: none;
}

.splash-bloom.formed {
  animation: splashBloom 1.4s ease-out forwards;
}

@keyframes splashBloom {
  0% {
    opacity: 0;
    transform: scale(.35);
  }

  35% {
    opacity: 1;
    transform: scale(1.05);
  }

  100% {
    opacity: .28;
    transform: scale(1);
  }
}

/* A thin ring that expands outward at the moment of formation */
.splash-ring {
  position: absolute;
  width: 60%;
  height: 60%;
  border-radius: 50%;
  border: 2px solid rgba(63, 242, 184, .6);
  opacity: 0;
  transform: scale(.4);
  pointer-events: none;
}

.splash-ring.formed {
  animation: splashRing 1.1s cubic-bezier(.2, .7, .3, 1) forwards;
}

@keyframes splashRing {
  0% {
    opacity: 0;
    transform: scale(.4);
  }

  25% {
    opacity: .9;
  }

  100% {
    opacity: 0;
    transform: scale(1.9);
  }
}

.splash-s {
  position: relative;
  z-index: 1;
  width: 100%;
  height: auto;
  opacity: 0;
  transform: scale(.5);
  filter: blur(14px) drop-shadow(0 0 0 rgba(63, 242, 184, 0));
}

.splash-s.formed {
  animation: splashForm .95s cubic-bezier(.2, .8, .25, 1) forwards, splashGlow 2.6s ease-in-out .95s infinite;
}

@keyframes splashForm {
  0% {
    opacity: 0;
    transform: scale(.5);
    filter: blur(14px) drop-shadow(0 0 0 rgba(63, 242, 184, 0));
  }

  55% {
    opacity: 1;
    transform: scale(1.08);
    filter: blur(0) drop-shadow(0 0 40px rgba(63, 242, 184, .65));
  }

  100% {
    opacity: 1;
    transform: scale(1);
    filter: blur(0) drop-shadow(0 8px 36px rgba(63, 242, 184, .40));
  }
}

@keyframes splashGlow {

  0%,
  100% {
    filter: blur(0) drop-shadow(0 8px 34px rgba(63, 242, 184, .34));
  }

  50% {
    filter: blur(0) drop-shadow(0 8px 46px rgba(63, 242, 184, .56));
  }
}

/* Wordmark fades up after the S forms */
.splash-word {
  width: min(210px, 56vw);
  height: auto;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity .5s ease, transform .5s ease;
}

.splash-word.show {
  opacity: 1;
  transform: translateY(0);
}

.app-splash-bar {
  width: min(210px, 48vw);
  height: 4px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(255, 255, 255, .12);
  opacity: 0;
  transition: opacity .5s ease;
}

.app-splash-bar.show {
  opacity: 1;
}

.app-splash-bar span {
  display: block;
  width: 42%;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(120deg, #3ff2b8, #95edb5);
  animation: splashBar 1.05s ease-in-out infinite;
}

@keyframes splashBar {
  0% {
    transform: translateX(-150%);
  }

  100% {
    transform: translateX(245%);
  }
}