.harbor-logo {
  --unit: calc(var(--logo-h) / 96.431);
  position: absolute;
  left: calc(var(--logo-x, 0px) - 217.922 * var(--unit));
  top: calc(var(--logo-y, 0px) - 201.184 * var(--unit));
  width: calc(800 * var(--unit));
  height: calc(500 * var(--unit));
  color: var(--ink-strong);
  pointer-events: none;
}

[data-logo] > :not(.harbor-logo) {
  visibility: hidden;
}

.harbor-logo__still,
.harbor-logo__motion {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
}

.harbor-logo__motion { visibility: hidden; }
[data-logo][data-anim="on"] .harbor-logo__still { visibility: hidden; }
[data-logo][data-anim="on"] .harbor-logo__motion { visibility: visible; }
.harbor-logo__motion > svg { display: block; }