/* The public hero's ocean light stays independent of dashboard surfaces. */
.vm-onboarding-route {
  overflow-x: clip;
}

.vm-onboarding-route .vm-onboarding-hero {
  overflow: visible;
}

.vm-onboarding-route .vm-onboarding-hero::before {
  content: "";
  position: absolute;
  z-index: -2;
  top: -8rem;
  bottom: -3rem;
  left: 50%;
  width: 100vw;
  transform: translateX(-50%);
  pointer-events: none;
  background:
    radial-gradient(ellipse at 48% 38%, transparent 15%, rgb(5 12 16 / 0.3) 75%),
    radial-gradient(ellipse at 75% 24%, rgb(66 141 145 / 0.22), transparent 60%),
    radial-gradient(ellipse at 14% 53%, rgb(29 102 115 / 0.3), transparent 58%);
  mask-image: linear-gradient(to bottom, transparent, #000 14%, #000 72%, transparent);
}

.vm-onboarding-route .vm-onboarding-hero-aura {
  z-index: -1;
  left: 50%;
  right: auto;
  top: -7rem;
  width: 120vw;
  height: calc(100% + 10rem);
  border-radius: 0;
  opacity: 1;
  pointer-events: none;
  filter: blur(2px);
  mask-image: linear-gradient(to bottom, transparent, #000 16%, #000 68%, transparent 96%);
  transform-origin: center;
}

.vm-onboarding-route .vm-onboarding-hero-aura--left {
  background:
    radial-gradient(ellipse 75% 56% at 37% 0%,
      transparent 77%, rgb(73 171 177 / 0.045) 80.5%,
      rgb(108 195 200 / 0.14) 82%, rgb(150 225 224 / 0.44) 83%,
      rgb(91 175 180 / 0.14) 83.8%, rgb(42 107 119 / 0.04) 86%, transparent 90%),
    radial-gradient(ellipse 78% 59% at 4% 103%,
      transparent 73%, rgb(72 173 181 / 0.04) 76%,
      rgb(103 194 204 / 0.13) 78%, rgb(140 220 225 / 0.38) 79%,
      rgb(82 176 190 / 0.13) 79.8%, rgb(50 140 152 / 0.035) 82%, transparent 86%);
  transform: translateX(-50%) rotate(-12deg) scale(1.05);
  animation: vm-hero-tide-near 12s ease-in-out -3s infinite alternate;
}

.vm-onboarding-route .vm-onboarding-hero-aura--right {
  background:
    radial-gradient(ellipse 85% 48% at 99% 80%,
      transparent 76%, rgb(65 143 153 / 0.035) 79%,
      rgb(116 196 199 / 0.12) 81%, rgb(163 226 221 / 0.34) 82%,
      rgb(104 186 190 / 0.11) 82.8%, rgb(76 170 176 / 0.03) 85%, transparent 89%);
  transform: translateX(-50%) rotate(10deg) scale(1.08);
  animation: vm-hero-tide-far 15s ease-in-out -6s infinite alternate;
}

.vm-onboarding-route .vm-onboarding-hero-aura {
  animation-play-state: paused;
}

.vm-onboarding-route .vm-onboarding-hero[data-background-motion="running"] .vm-onboarding-hero-aura {
  animation-play-state: running;
}

/* Keep the text and moving community names legible over the light. */
.vm-onboarding-route .vm-onboarding-hero h1 {
  font-size: clamp(4rem, 5.8vw, 5.4rem);
  line-height: 1.04;
  letter-spacing: -0.025em;
  text-wrap: balance;
}

.vm-onboarding-route .vm-onboarding-hero h1 + p {
  color: rgb(191 209 218);
  text-wrap: balance;
}

.vm-onboarding-route .vm-onboarding-hero .vm-onboarding-action {
  height: 3.2rem;
  padding-inline: 1.5rem;
  border: 1px solid #354650;
  background: linear-gradient(180deg, #202d35, #152028);
  color: #e8f0f3;
  box-shadow: inset 0 1px 0 rgb(224 242 247 / 0.08), 0 3px 8px rgb(0 0 0 / 0.18);
  transition: background 180ms ease, border-color 180ms ease, box-shadow 180ms ease, translate 160ms ease;
}

.vm-onboarding-route .vm-onboarding-hero .vm-onboarding-action__label {
  font-family: "Segoe UI Variable", "Segoe UI", sans-serif;
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: -0.015em;
  line-height: 1.25;
}

.vm-onboarding-route .vm-onboarding-hero .vm-charge-button__content {
  display: inline-grid;
  grid-template-columns: 1.2rem max-content 1.2rem;
  align-items: center;
  gap: 0.65rem;
}

.vm-onboarding-route .vm-onboarding-hero .vm-onboarding-action__icon,
.vm-onboarding-route .vm-onboarding-hero .vm-onboarding-primary-cta .vm-onboarding-action__icon {
  filter: none;
}

.vm-onboarding-route .vm-onboarding-hero .vm-onboarding-action__icon img {
  width: 1.2rem;
  height: 1.2rem;
  opacity: 1;
  filter: brightness(0) invert(1);
}

/* Also upgrades the currently deployed bundle's decorative image references. */
.vm-onboarding-route .vm-onboarding-hero .vm-onboarding-primary-cta .vm-onboarding-action__icon img {
  content: url('/brand/hero-actions/invite-v3.png');
}

.vm-onboarding-route .vm-onboarding-hero .vm-onboarding-overview-cta .vm-onboarding-action__icon img {
  content: url('/brand/hero-actions/overview-v3.png');
}

.vm-onboarding-route .vm-onboarding-hero .vm-onboarding-secondary-cta .vm-onboarding-action__icon img {
  content: url('/brand/hero-actions/learn-v3.png');
}

.vm-onboarding-route .vm-onboarding-hero .vm-onboarding-action__arrow {
  color: #b6d2da;
  opacity: 1;
  margin-left: 0;
  justify-self: center;
}

.vm-onboarding-route .vm-onboarding-hero .vm-onboarding-primary-cta {
  border-color: #709da0;
  background: linear-gradient(160deg, #416f73, #294e56);
  color: #ffffff;
  box-shadow: inset 0 1px 0 rgb(220 255 250 / 0.3), inset 0 -1px 0 rgb(8 32 39 / 0.22), 0 4px 8px rgb(0 0 0 / 0.2);
}

.vm-onboarding-route .vm-onboarding-hero .vm-onboarding-action:is(:hover, :focus-visible) {
  background: linear-gradient(180deg, #2a3a43, #1c2a33);
  border-color: #607d89;
  box-shadow: inset 0 1px 0 rgb(224 242 247 / 0.14), 0 4px 8px rgb(0 0 0 / 0.2);
}

.vm-onboarding-route .vm-onboarding-hero .vm-onboarding-primary-cta:is(:hover, :focus-visible) {
  background: linear-gradient(160deg, #4b7a7e, #345f67);
  border-color: #99c2c3;
  box-shadow: inset 0 1px 0 rgb(220 255 250 / 0.4), inset 0 -1px 0 rgb(8 32 39 / 0.16), 0 4px 8px rgb(0 0 0 / 0.22);
}

.vm-onboarding-route .vm-onboarding-hero .vm-onboarding-action:focus-visible {
  outline: 2px solid #c2eceb;
  outline-offset: 4px;
}

.vm-onboarding-route .vm-onboarding-hero .vm-onboarding-action:active {
  translate: 0 1px;
  box-shadow: inset 0 2px 4px rgb(0 0 0 / 0.2);
}

.vm-onboarding-route .vm-onboarding-hero .vm-onboarding-cta-stage .vm-onboarding-action:not(:hover):not(:focus-visible) {
  filter: none;
}

@keyframes vm-hero-tide-near {
  from {
    transform: translateX(-55%) translateY(-4%) rotate(-16deg) scale(1.09);
    opacity: 0.78;
  }
  to {
    transform: translateX(-45%) translateY(5%) rotate(1deg) scale(1.14);
    opacity: 1;
  }
}

@keyframes vm-hero-tide-far {
  from {
    transform: translateX(-43%) translateY(4%) rotate(16deg) scale(1.12);
    opacity: 1;
  }
  to {
    transform: translateX(-57%) translateY(-6%) rotate(-7deg) scale(1.06);
    opacity: 0.72;
  }
}

@media (prefers-reduced-motion: reduce) {
  .vm-onboarding-route .vm-onboarding-hero .vm-onboarding-action {
    transition: none;
    translate: none;
  }

  .vm-onboarding-route .vm-onboarding-hero-aura {
    animation: none;
  }
}