@keyframes wo-spin {
  to { transform: rotate(1turn); }
}

@keyframes wo-skeleton {
  100% { transform: translateX(100%); }
}

@keyframes wo-boot-line {
  0% { stroke-dashoffset: 1600; opacity: 0; }
  16% { opacity: 1; }
  76%, 100% { stroke-dashoffset: 0; opacity: 1; }
}

@keyframes wo-boot-copy {
  from { opacity: 0; transform: translateY(1.5rem); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes wo-app-arrive {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes wo-axis-arrive {
  from { opacity: 0; transform: translateX(-1.6rem); }
  to { opacity: 1; transform: translateX(0); }
}

@keyframes wo-mast-arrive {
  from { opacity: 0; transform: translateY(-0.9rem); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes wo-page-arrive {
  from { opacity: 0; transform: translate3d(0, 1.25rem, 0); }
  to { opacity: 1; transform: translate3d(0, 0, 0); }
}

@keyframes wo-route-passage-copy {
  from { opacity: 0; transform: translate3d(-1.4rem, 0.5rem, 0); }
  to { opacity: 1; transform: translate3d(0, 0, 0); }
}

@keyframes wo-route-passage-copy-backward {
  from { opacity: 0; transform: translate3d(1.4rem, 0.5rem, 0); }
  to { opacity: 1; transform: translate3d(0, 0, 0); }
}

@keyframes wo-route-passage-rule {
  from { opacity: 0; transform: rotate(var(--wo-passage-angle)) scaleX(0.08); }
  to { opacity: 1; transform: rotate(var(--wo-passage-angle)) scaleX(1); }
}

@keyframes wo-route-passage-plane {
  from { opacity: 0; transform: skewX(var(--wo-passage-angle)) translate3d(2.2rem, 0, 0) scaleX(0.74); }
  to { opacity: 1; transform: skewX(var(--wo-passage-angle)) translate3d(0, 0, 0) scaleX(1); }
}

@keyframes wo-rule-grow {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}

@keyframes wo-toast-arrive {
  from { opacity: 0; transform: translate3d(1.6rem, 0, 0); }
  to { opacity: 1; transform: translate3d(0, 0, 0); }
}

@keyframes wo-dialog-arrive {
  from { opacity: 0; transform: translate3d(0, 1.6rem, 0) scale(0.985); }
  to { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }
}

@keyframes wo-backdrop-arrive {
  from { background-color: rgba(12, 13, 20, 0); }
  to { background-color: rgba(12, 13, 20, 0.76); }
}

@keyframes wo-freeze-node {
  from { opacity: 0; transform: scale(0.15); }
  64% { opacity: 1; transform: scale(1.18); }
  to { opacity: 1; transform: scale(1); }
}

html[data-surface="white-oath"] .wo-boot__event,
html[data-surface="white-oath"] .wo-boot__echo {
  stroke-dasharray: 1600;
  stroke-dashoffset: 1600;
  animation: wo-boot-line 1.05s var(--wo-ease-freeze) forwards;
}

html[data-surface="white-oath"] .wo-boot__echo {
  animation-delay: 110ms;
}

html[data-surface="white-oath"] .wo-boot__copy > * {
  opacity: 0;
  animation: wo-boot-copy var(--wo-duration-long) var(--wo-ease-out) forwards;
}

html[data-surface="white-oath"] .wo-boot__copy > :nth-child(1) { animation-delay: 120ms; }
html[data-surface="white-oath"] .wo-boot__copy > :nth-child(2) { animation-delay: 210ms; }
html[data-surface="white-oath"] .wo-boot__copy > :nth-child(3) { animation-delay: 320ms; }

html[data-surface="white-oath"][data-wo-state="active"] .wo-app,
html[data-surface="white-oath"][data-wo-state="ready"] .wo-app {
  animation: wo-app-arrive var(--wo-duration-long) var(--wo-ease-out) both;
}

html[data-surface="white-oath"][data-wo-state="active"] .wo-axis,
html[data-surface="white-oath"][data-wo-state="ready"] .wo-axis {
  animation: wo-axis-arrive var(--wo-duration-long) var(--wo-ease-out) both;
}

html[data-surface="white-oath"][data-wo-state="active"] .wo-mast,
html[data-surface="white-oath"][data-wo-state="ready"] .wo-mast {
  animation: wo-mast-arrive var(--wo-duration-long) 80ms var(--wo-ease-out) both;
}

html[data-surface="white-oath"] .wo-boot.is-complete {
  opacity: 0;
  pointer-events: none;
  transform: translate3d(0, -0.75rem, 0);
  transition: opacity 520ms var(--wo-ease-in-out), transform 520ms var(--wo-ease-in-out);
}

html[data-surface="white-oath"] .wo-route-host.has-passage .wo-route-passage__copy {
  animation: wo-route-passage-copy 420ms 40ms var(--wo-ease-freeze) both;
}

html[data-surface="white-oath"] .wo-route-host.has-passage[data-wo-route-direction="backward"] .wo-route-passage__copy {
  animation-name: wo-route-passage-copy-backward;
}

html[data-surface="white-oath"] .wo-route-host.has-passage .wo-route-passage::before {
  animation: wo-route-passage-plane 580ms 30ms var(--wo-ease-freeze) both;
}

html[data-surface="white-oath"] .wo-route-host.has-passage .wo-route-passage::after,
html[data-surface="white-oath"] .wo-route-host.has-passage .wo-route-passage__field i {
  animation: wo-route-passage-rule 640ms var(--wo-ease-freeze) both;
  transform-origin: right;
}

html[data-surface="white-oath"] .wo-route-host.has-passage .wo-route-passage__field i:nth-child(2) { animation-delay: 90ms; }
html[data-surface="white-oath"] .wo-route-host.has-passage .wo-route-passage__field i:nth-child(3) { animation-delay: 160ms; }

html[data-surface="white-oath"] .wo-page-head::after {
  animation: wo-rule-grow 620ms 90ms var(--wo-ease-freeze) both;
}

html[data-surface="white-oath"] .wo-toast {
  animation: wo-toast-arrive var(--wo-duration) var(--wo-ease-out) both;
}

html[data-surface="white-oath"] .wo-toast.is-leaving {
  opacity: 0;
  transform: translate3d(1.2rem, 0, 0);
  transition: opacity var(--wo-duration), transform var(--wo-duration) var(--wo-ease-in-out);
}

html[data-surface="white-oath"] .wo-dialog-backdrop {
  animation: wo-backdrop-arrive var(--wo-duration) linear both;
}

html[data-surface="white-oath"] .wo-dialog,
html[data-surface="white-oath"] .wo-profile-folio {
  animation: wo-dialog-arrive var(--wo-duration-long) var(--wo-ease-freeze) both;
}

html[data-surface="white-oath"] .wo-freeze-node {
  animation: wo-freeze-node 360ms var(--wo-ease-freeze) both;
}

html[data-surface="white-oath"] [data-wo-stagger] > * {
  animation: wo-page-arrive var(--wo-duration-long) var(--wo-ease-freeze) both;
  animation-delay: calc(var(--wo-stagger-index, 0) * 55ms + 60ms);
}

html[data-surface="white-oath"] .wo-action:active,
html[data-surface="white-oath"] .wo-button:active,
html[data-surface="white-oath"] .wo-icon-action:active {
  transform: translateY(1px) scale(0.985);
  transition-duration: 60ms;
}

@media (prefers-reduced-motion: reduce) {
  html[data-surface="white-oath"] *,
  html[data-surface="white-oath"] *::before,
  html[data-surface="white-oath"] *::after {
    scroll-behavior: auto !important;
    animation-duration: 1ms !important;
    animation-delay: 0ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 1ms !important;
    transition-delay: 0ms !important;
  }

  html[data-surface="white-oath"] .wo-skeleton::after {
    display: none;
  }
}