:root {
  --intro-bottom-color: #0b0d11;
  --intro-bg:
    radial-gradient(circle at top, rgba(224, 75, 144, 0.25), transparent 40%),
    linear-gradient(135deg, #0b0d11 0%, #1b1020 48%, var(--intro-bottom-color) 100%),
    var(--intro-bottom-color);
}

html {
  height: 100%;
  min-height: 100%;
  background-color: var(--intro-bottom-color);
  background: var(--intro-bg);
}

.intro-body {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  min-height: 100%;
  background-color: var(--intro-bottom-color);
  background: var(--intro-bg);
  color: #fff;
  overflow: hidden;
  overscroll-behavior: none;
  touch-action: none;
}

.intro-body::before {
  content: "";
  position: fixed;
  inset: -1px;
  z-index: 0;
  background: var(--intro-bg);
  pointer-events: none;
}

.intro-body::after {
  content: "";
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  height: calc(160px + var(--safe-bottom));
  z-index: 0;
  background: linear-gradient(180deg, rgba(11, 13, 17, 0), var(--intro-bottom-color) 44%, var(--intro-bottom-color));
  pointer-events: none;
}

.intro-body .app-shell,
.intro-body .app-frame,
.intro-frame,
.intro-page {
  height: 100%;
  min-height: 100%;
  background-color: transparent;
  background: var(--intro-bg);
}

.intro-body .app-shell {
  position: relative;
  z-index: 1;
}

@supports (-webkit-touch-callout: none) {
  html,
  .intro-body,
  .intro-body .app-shell,
  .intro-body .app-frame,
  .intro-frame,
  .intro-page {
    min-height: -webkit-fill-available;
  }
}

.intro-frame {
  box-shadow: none;
  overflow: visible;
}

.intro-page {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px var(--page-pad-x);
  overflow: hidden;
}

.intro-hero {
  width: 100%;
}

.intro {
  text-align: center;
}

.logo-box {
  position: relative;
  width: 120px;
  height: 120px;
  margin: 0 auto 10px;
  border-radius: 30px;

  display: flex;
  align-items: center;
  justify-content: center;
  animation: logo-pop 0.8s ease;
}

.logo-box::before {
  content: "";
  position: absolute;
  inset: -10px;
  border-radius: 40px;
  background: radial-gradient(circle, rgba(224, 75, 144, 0.5), transparent 70%);
  filter: blur(20px);
  animation: glow 2s infinite;
}

.logo-box::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 30px;
  border: 2px solid rgba(224, 75, 144, 0.4);
  animation: ripple 2s infinite;
}

.logo-image {
  position: relative;
  z-index: 2;
  width: 70%;
  height: auto;
  animation: float 2.5s ease-in-out infinite;
}

.brand {
  margin-bottom: 6px;
  font-size: 24px;
  font-weight: 700;
}

.sub {
  margin-bottom: 20px;
  color: rgba(255, 255, 255, 0.72);
  font-size: 13px;
}

.loader {
  width: 170px;
  height: 4px;
  margin: 0 auto;
  background: rgba(255, 255, 255, 0.12);
  border-radius: 999px;
  overflow: hidden;
}

.loader-fill {
  width: 0;
  height: 100%;
  background: linear-gradient(90deg, #ff7ab8, #e04b90);
  animation: loading 2.4s linear forwards;
}

.intro-link {
  display: inline-block;
  margin-top: 24px;
  color: rgba(255, 255, 255, 0.72);
  font-size: 14px;
}

@keyframes logo-pop {
  from {
    transform: scale(0.7) rotate(-10deg);
    opacity: 0;
  }

  to {
    transform: scale(1) rotate(0);
    opacity: 1;
  }
}

@keyframes float {

  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-6px);
  }
}

@keyframes glow {

  0%,
  100% {
    opacity: 0.6;
  }

  50% {
    opacity: 1;
  }
}

@keyframes ripple {
  0% {
    transform: scale(1);
    opacity: 0.6;
  }

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

@keyframes loading {
  to {
    width: 100%;
  }
}