:root {
  scroll-behavior: smooth;
  --vam-motion-ease: cubic-bezier(0.16, 1, 0.3, 1);
  --vam-motion-fast: 180ms;
  --vam-motion-medium: 520ms;
}

html.orbit-swapping :is(.page, .portal-page) > :is(header, main) {
  opacity: 0.16;
  filter: blur(1.5px);
  transition:
    opacity 70ms ease,
    filter 70ms ease;
}

html:not(.orbit-swapping) :is(.page, .portal-page) > :is(header, main) {
  opacity: 1;
  filter: none;
  transition:
    opacity 380ms var(--vam-motion-ease),
    filter 380ms var(--vam-motion-ease);
}

.vam-motion-item {
  opacity: 0;
  transform: translate3d(0, 22px, 0) scale(0.992);
  transition:
    opacity 620ms var(--vam-motion-ease) var(--vam-reveal-delay, 0ms),
    transform 620ms var(--vam-motion-ease) var(--vam-reveal-delay, 0ms);
}

.vam-motion-item.vam-motion-visible {
  opacity: 1;
  transform: translate3d(0, 0, 0) scale(1);
}

html.orbit-ready:not(.orbit-swapping) :is(.site-header, .portal-topbar, .topbar) {
  animation: vam-header-arrive 620ms var(--vam-motion-ease) both;
}

html.orbit-ready:not(.orbit-swapping) .landing-page .hero-copy > * {
  animation: vam-copy-arrive 720ms var(--vam-motion-ease) both;
}

html.orbit-ready:not(.orbit-swapping) .landing-page .hero-copy > :nth-child(1) {
  animation-delay: 60ms;
}

html.orbit-ready:not(.orbit-swapping) .landing-page .hero-copy > :nth-child(2) {
  animation-delay: 125ms;
}

html.orbit-ready:not(.orbit-swapping) .landing-page .hero-copy > :nth-child(3) {
  animation-delay: 190ms;
}

html.orbit-ready:not(.orbit-swapping) .landing-page .hero-copy > :nth-child(4) {
  animation-delay: 255ms;
}

html.orbit-ready:not(.orbit-swapping) .landing-page .hero-copy > :nth-child(5) {
  animation-delay: 320ms;
}

:is(
  a.button,
  button.button,
  .primary-nav a,
  .portal-nav a,
  .nav a,
  .topbar nav a,
  .text-link
) {
  transition:
    color var(--vam-motion-fast) ease,
    background-color var(--vam-motion-fast) ease,
    border-color var(--vam-motion-fast) ease,
    box-shadow var(--vam-motion-fast) ease,
    transform var(--vam-motion-fast) var(--vam-motion-ease);
}

:is(a.button, button.button, .text-link) :is(span, i)[aria-hidden="true"] {
  display: inline-block;
  transition: transform 240ms var(--vam-motion-ease);
}

:is(
  .feature-card,
  .portal-card,
  .hero-card,
  .maintenance-card,
  .join-card,
  .login-card,
  .rankings-panel,
  .command-card,
  .plan-card,
  .stat-card,
  .membership-card,
  .activity-card,
  .next-step-card,
  .vam-pro-card
) {
  transition:
    transform 360ms var(--vam-motion-ease),
    border-color 300ms ease,
    background-color 300ms ease,
    box-shadow 360ms var(--vam-motion-ease);
}

:is(.primary-nav, .portal-nav, .nav, .topbar nav) a {
  position: relative;
}

:is(.primary-nav, .portal-nav, .nav, .topbar nav) a::after {
  content: "";
  position: absolute;
  right: 22%;
  bottom: 4px;
  left: 22%;
  height: 1px;
  border-radius: 999px;
  background: currentColor;
  opacity: 0;
  transform: scaleX(0.35);
  transform-origin: center;
  transition:
    opacity 200ms ease,
    transform 260ms var(--vam-motion-ease);
}

:is(.primary-nav, .portal-nav, .nav, .topbar nav) a:is(:hover, :focus-visible, .active, .is-current)::after {
  opacity: 0.56;
  transform: scaleX(1);
}

:is(a, button, input, select, textarea):focus-visible {
  outline: 2px solid rgba(93, 204, 250, 0.9);
  outline-offset: 3px;
}

@media (hover: hover) and (pointer: fine) {
  :is(a.button, button.button, .text-link):hover {
    transform: translateY(-2px);
  }

  :is(a.button, button.button, .text-link):hover :is(span, i)[aria-hidden="true"] {
    transform: translateX(4px);
  }

  :is(
    .feature-card,
    .portal-card,
    .hero-card,
    .maintenance-card,
    .join-card,
    .login-card,
    .rankings-panel,
    .command-card,
    .plan-card,
    .stat-card,
    .membership-card,
    .activity-card,
    .next-step-card,
    .vam-pro-card
  ):hover {
    transform: translateY(-5px);
    border-color: rgba(89, 192, 236, 0.34);
    box-shadow: 0 22px 54px rgba(0, 7, 14, 0.24);
  }
}

@keyframes vam-header-arrive {
  from {
    opacity: 0;
    transform: translate3d(0, -12px, 0);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

@keyframes vam-copy-arrive {
  from {
    opacity: 0;
    transform: translate3d(0, 20px, 0);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

@media (prefers-reduced-motion: reduce) {
  :root {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: 0.001ms !important;
    transition-delay: 0ms !important;
  }

  .vam-motion-item {
    opacity: 1;
    transform: none;
  }
}