body.splash-lock {
  overflow: hidden;
}

.campaign-splash {
  --splash-blue: #011ce0;
  align-items: center;
  background: radial-gradient(ellipse at 50% 48%, rgba(255, 255, 255, 0.18) 0%, rgba(255, 255, 255, 0.08) 26%, transparent 58%), linear-gradient(180deg, rgba(1, 28, 224, 0.96) 0%, var(--splash-blue) 100%);
  color: #fff;
  display: grid;
  inset: 0;
  isolation: isolate;
  justify-items: center;
  overflow: hidden;
  padding: clamp(28px, 6vw, 72px);
  pointer-events: auto;
  position: fixed;
  text-align: center;
  z-index: 9999;
}

.campaign-splash,
.campaign-splash * {
  box-sizing: border-box;
}

.campaign-splash.is-ready {
  animation: campaign-splash-lifecycle 3000ms cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.campaign-splash::before {
  background: repeating-conic-gradient(from -18deg at 50% 50%, rgba(255, 255, 255, 0.16) 0deg 7deg, rgba(255, 255, 255, 0.025) 7deg 18deg);
  content: "";
  inset: -18vmax;
  opacity: 0.34;
  pointer-events: none;
  position: absolute;
  transform: scale(1.08) rotate(4deg);
  z-index: -2;
}

.campaign-splash.is-ready::before {
  animation: campaign-sunburst 3000ms cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.campaign-splash::after {
  background: linear-gradient(180deg, rgba(0, 9, 92, 0) 0%, rgba(0, 9, 92, 0.22) 100%), radial-gradient(ellipse at 50% 56%, transparent 0%, rgba(0, 8, 90, 0.18) 78%);
  content: "";
  inset: 0;
  pointer-events: none;
  position: absolute;
  z-index: -1;
}

.campaign-splash-ripples {
  inset: 0;
  pointer-events: none;
  position: absolute;
  z-index: 0;
}

.campaign-splash-confetti-canvas {
  height: 100%;
  inset: 0;
  pointer-events: none;
  position: absolute;
  width: 100%;
  z-index: 1;
}

.campaign-splash-ripple {
  height: min(74vmin, 760px);
  left: 50%;
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  width: min(74vmin, 760px);
}

.campaign-splash-ripple-ring {
  border: 14px solid rgba(255, 224, 76, 0.48);
  border-radius: 50%;
  display: block;
  height: 100%;
  opacity: 0;
  transform: scale(0.18);
  transform-origin: center center;
  width: 100%;
}

.campaign-splash-content {
  align-items: center;
  display: flex;
  flex-direction: column;
  gap: clamp(7px, 1.1vw, 14px);
  justify-self: center;
  margin-inline: auto;
  max-width: 1080px;
  position: relative;
  width: min(100%, 1080px);
  z-index: 3;
}

.campaign-splash-text-svg {
  display: block;
  height: auto;
  pointer-events: none;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  width: 100%;
}

.campaign-splash-mobile-stack {
  display: none;
}

.campaign-splash-mobile-layer {
  display: block;
  height: 100%;
  inset: 0;
  -o-object-fit: contain;
     object-fit: contain;
  position: absolute;
  transform-origin: center center;
  width: 100%;
}

.campaign-splash-mobile-note {
  z-index: 1;
}

.campaign-splash-mobile-amount {
  z-index: 2;
}

.campaign-splash-mobile-offer {
  z-index: 3;
}

.campaign-splash-mobile-lead {
  z-index: 4;
}

.campaign-splash-lead {
  display: block;
  margin: 0 0 clamp(-10px, -0.7vw, -4px);
  margin-inline: auto;
  position: relative;
  width: clamp(520px, 58vw, 746px);
  max-width: calc(100vw - 68px);
}

.campaign-splash-main {
  align-items: center;
  display: flex;
  flex-direction: column;
  max-width: 100%;
  row-gap: clamp(11px, 1vw, 16px);
  text-align: center;
  width: 100%;
}

.campaign-splash-amount {
  filter: drop-shadow(0 13px 18px rgba(0, 9, 92, 0.22));
  margin-inline: auto;
  position: relative;
  transform-origin: center center;
  width: clamp(560px, 72vw, 900px);
  max-width: calc(100vw - 116px);
}

.campaign-splash-footnote {
  display: block;
  height: auto;
  left: calc(100% + 3px);
  position: absolute;
  top: 15%;
  width: clamp(12px, 1.35vw, 19px);
}

.campaign-splash-offer {
  filter: drop-shadow(0 13px 18px rgba(0, 9, 92, 0.28));
  margin-bottom: clamp(-8px, -0.55vw, -3px);
  margin-inline: auto;
  transform: translateY(10px);
  transform-origin: center center;
  width: clamp(600px, 74vw, 1000px);
  max-width: calc(100vw - 104px);
}

.campaign-splash-note {
  filter: drop-shadow(0 2px 12px rgba(0, 18, 84, 0.26));
  margin-inline: auto;
  width: clamp(560px, 70vw, 900px);
  max-width: calc(100vw - 104px);
}

@media (min-width: 1024px) {
  .campaign-splash-note {
    margin-top: 16px;
  }
}
@media (max-width: 760px) {
  .campaign-splash {
    padding: 28px 18px;
  }
  .campaign-splash::before {
    inset: -38vmax;
    opacity: 0.38;
  }
  .campaign-splash-ripple {
    height: min(88vmin, 520px);
    width: min(88vmin, 520px);
  }
  .campaign-splash-content {
    gap: 0;
    width: 100%;
  }
  .campaign-splash-mobile-stack {
    aspect-ratio: 320/197;
    display: block;
    margin-inline: auto;
    position: relative;
    transform-origin: center center;
    width: min(100vw - 48px, 327px);
  }
  .campaign-splash-lead,
  .campaign-splash-main,
  .campaign-splash-note {
    display: none;
  }
}
@media (prefers-reduced-motion: reduce) {
  .campaign-splash-ripples {
    display: none;
  }
  .campaign-splash.is-ready {
    animation: campaign-splash-reduced 3000ms linear forwards;
    transform: none;
  }
  .campaign-splash::before {
    animation: none;
    opacity: 0.34;
    transform: scale(1) rotate(0deg);
  }
}
@keyframes campaign-splash-lifecycle {
  0% {
    opacity: 1;
    transform: scale(1.012);
  }
  78% {
    opacity: 1;
    transform: scale(1);
  }
  100% {
    opacity: 0;
    transform: scale(1.018);
  }
}
@keyframes campaign-sunburst {
  0% {
    opacity: 0;
    transform: scale(0.8) rotate(-8deg);
  }
  18% {
    opacity: 0.52;
  }
  100% {
    opacity: 0.34;
    transform: scale(1.08) rotate(4deg);
  }
}
@keyframes campaign-splash-reduced {
  0%, 82% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}